/* ============================================================
   NAAS HOLDING — "Dynamic" option
   Additive layer on top of styles.css: WebGL hero, glass cards,
   gradient-mesh ambience, tilt interactions. Same palette, same
   content — just a more kinetic, high-performance presentation
   in the spirit of a modern flagship digital-studio site.
   ============================================================ */

/* ---------------------------------------------------------
   Homepage hero: gradient-mesh wash + WebGL canvas
   --------------------------------------------------------- */

.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 640px at 82% 18%, rgba(126, 165, 155, 0.28), transparent 62%),
    radial-gradient(900px 720px at 68% 82%, rgba(7, 68, 50, 0.55), transparent 68%),
    radial-gradient(1400px 900px at 10% 50%, rgba(0, 35, 27, 0.4), transparent 70%);
  filter: saturate(1.15);
  animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
}

#hero3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 0.2s;
}
#hero3d.ready { opacity: 1; }

.hero.no-webgl .hero-mesh { opacity: 1; }
.hero.no-webgl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(560px 560px at 76% 46%, rgba(126,165,155,0.22), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none; }
  #hero3d { display: none; }
}

@media (max-width: 860px) {
  #hero3d { opacity: 0; transition: opacity 1.2s var(--ease) 0.2s; }
  #hero3d.ready { opacity: 0.72; }
}

/* The base stylesheet pools a wide radial of --void over the hero to
   keep the headline readable against the girih lattice. Here the
   right-hand side carries the scene, so the pool is pulled back to
   the text column and the far side is left clear. */
body[data-page="home"] .hero::after {
  background:
    radial-gradient(760px 620px at 6% 48%, rgba(0, 35, 27, 0.93) 12%, rgba(0, 35, 27, 0.55) 48%, transparent 72%),
    linear-gradient(to top, var(--void) 1%, transparent 26%);
}
[dir="rtl"] body[data-page="home"] .hero::after {
  background:
    radial-gradient(760px 620px at 94% 48%, rgba(0, 35, 27, 0.93) 12%, rgba(0, 35, 27, 0.55) 48%, transparent 72%),
    linear-gradient(to top, var(--void) 1%, transparent 26%);
}

/* ---------------------------------------------------------
   Headline — a mask wipe rather than a plain fade. Insets end
   negative so the italic descenders of "Enduring value." are
   never clipped by the mask itself.
   --------------------------------------------------------- */

body[data-page="home"] .hero h1.rv {
  clip-path: inset(0 0 100% 0);
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease),
              clip-path 1.5s var(--ease);
  transition-delay: var(--rv-delay, 0ms);
}
body[data-page="home"] .hero h1.rv.in { clip-path: inset(-22% -12% -22% -12%); }

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero h1.rv,
  body[data-page="home"] .hero h1.rv.in { clip-path: none; transition: none; }
}

/* ---------------------------------------------------------
   Section numerals — a little parallax drift for depth
   --------------------------------------------------------- */

.s-index { will-change: transform; }

/* ---------------------------------------------------------
   Lit cards — rounded glass panels. A light follows the
   pointer, a bloom rises from the far corner, the edge catches
   the light, and the card's own sign lights up.

   dynamic-fx.js adds .lit-card and sets --lit, a speed factor
   every timing is multiplied by: 1 for the sector cards, 2 for
   the governance pillars (their glow comes up at half speed).
   --------------------------------------------------------- */

.sector-grid {
  gap: 18px;
  background: none;
  border: 0;
}
.gov-pillars { gap: 18px; }
.gov-rows { display: grid; gap: 14px; border-top: 0; }

.lit-card {
  --card-bg: linear-gradient(165deg, rgba(0, 35, 27, 0.94) 0%, rgba(4, 50, 37, 0.9) 55%, rgba(13, 89, 64, 0.6) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(126, 165, 155, 0.15);
  background: var(--card-bg);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.75);
  /* The reveal's own opacity/transform timing is kept, so cards
     still stagger in; the edge and glow get their own. */
  transition:
    opacity 1s var(--ease) var(--rv-delay, 0ms),
    transform 1.1s var(--ease) var(--rv-delay, 0ms),
    border-color calc(0.6s * var(--lit, 1)) var(--ease),
    box-shadow calc(0.6s * var(--lit, 1)) var(--ease);
}
.lit-card > * { position: relative; z-index: 1; }
.lit-card:is(:hover, .is-lit) {
  background: var(--card-bg);
  border-color: rgba(174, 212, 199, 0.55);
  box-shadow:
    0 0 0 1px rgba(126, 165, 155, 0.2) inset,
    0 34px 70px -34px rgba(0, 0, 0, 0.8),
    0 0 48px -10px rgba(126, 165, 155, 0.5);
}

/* Per-type shape */
.sector.lit-card { padding: 2.4rem 2rem 2.6rem; }
.pillar.lit-card { padding: 2.2rem 2rem 2.4rem; border-top: 1px solid rgba(126, 165, 155, 0.15); }
.pillar.lit-card:is(:hover, .is-lit) { transform: none; border-top-color: rgba(174, 212, 199, 0.55); }
.row.lit-card { margin: 0; padding: 2.2rem 2.2rem; border-bottom: 1px solid rgba(126, 165, 155, 0.15); }
.row.lit-card:is(:hover, .is-lit) { border-bottom-color: rgba(174, 212, 199, 0.55); }

/* Cards sitting on the ivory sections: the gradient's translucent
   end would let the ivory wash through, so it's made opaque here —
   the same greens, just solid — and the type stays ivory. */
.s-light .lit-card {
  --card-bg: linear-gradient(165deg, #00231b 0%, #033326 55%, #0a4c38 100%);
}
.s-light .lit-card h3 { color: var(--ivory); }
.s-light .lit-card p { color: var(--ivory-dim); }

/* The bloom rising from the far corner — faint at rest, full on hover */
.lit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(125% 90% at 100% 100%,
    rgba(160, 212, 194, 0.72) 0%,
    rgba(126, 165, 155, 0.3) 40%,
    transparent 70%);
  opacity: 0.14;
  transition: opacity calc(0.8s * var(--lit, 1)) var(--ease);
}
.lit-card:is(:hover, .is-lit)::before { opacity: 1; }
[dir="rtl"] .lit-card::before {
  background: radial-gradient(125% 90% at 0% 100%,
    rgba(160, 212, 194, 0.72) 0%,
    rgba(126, 165, 155, 0.3) 40%,
    transparent 70%);
}

/* The light under the pointer (replaces the lattice corner and
   the pillar's hover underline) */
.lit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(190, 225, 212, 0.17), transparent 70%);
  opacity: 0;
  transition: opacity calc(0.5s * var(--lit, 1)) var(--ease);
}
.lit-card:is(:hover, .is-lit)::after { opacity: 1; width: auto; }

/* The sign lights up. A drawn sign (the sector glyphs) re-traces
   its lines in light — every stroke normalised to pathLength 100
   by dynamic-fx.js — then holds a soft, breathing glow. A typeset
   sign (the pillar numerals and titles) simply glows and breathes.
   --icon slows the drawn signs on top of the card's own --lit speed:
   2 = the icon lights up at half the speed of the card around it. */
.lit-card { --icon: 2; }
.lit-card .glyph {
  transition:
    color calc(0.6s * var(--lit, 1) * var(--icon)) var(--ease),
    filter calc(0.7s * var(--lit, 1) * var(--icon)) var(--ease),
    transform calc(0.9s * var(--icon)) var(--ease);
}
.lit-card:is(:hover, .is-lit) .glyph {
  color: #e4f5ee;
  filter:
    drop-shadow(0 0 2px rgba(214, 240, 230, 0.95))
    drop-shadow(0 0 10px rgba(126, 190, 168, 0.8))
    drop-shadow(0 0 26px rgba(126, 165, 155, 0.5));
  animation: glyphBreathe 2.8s ease-in-out calc(1.1s * var(--lit, 1) * var(--icon)) infinite;
}
.lit-card:is(:hover, .is-lit) .glyph [pathLength] {
  animation: glyphTrace calc(1.1s * var(--lit, 1) * var(--icon)) var(--ease) both;
}

.lit-card .lit-sign {
  transition:
    color calc(0.6s * var(--lit, 1)) var(--ease),
    text-shadow calc(0.7s * var(--lit, 1)) var(--ease),
    transform 0.55s var(--ease);
}
.lit-card:is(:hover, .is-lit) .lit-sign {
  color: #e4f5ee;
  text-shadow:
    0 0 2px rgba(214, 240, 230, 0.9),
    0 0 12px rgba(126, 190, 168, 0.75),
    0 0 28px rgba(126, 165, 155, 0.45);
  animation: signBreathe 2.8s ease-in-out calc(1.1s * var(--lit, 1)) infinite;
}
.lit-card:is(:hover, .is-lit) .sector-idx { color: #d6eee5; }

/* Grows the dash rather than sliding it, and overshoots the length:
   the glyphs use non-scaling strokes, which stretch the dash pattern
   past pathLength, so an exact 100 would leave a gap at the seam. */
@keyframes glyphTrace {
  from { stroke-dasharray: 0 200; }
  to   { stroke-dasharray: 200 0; }
}
@keyframes glyphBreathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px rgba(214, 240, 230, 0.95))
      drop-shadow(0 0 10px rgba(126, 190, 168, 0.8))
      drop-shadow(0 0 26px rgba(126, 165, 155, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 3px rgba(226, 246, 238, 1))
      drop-shadow(0 0 16px rgba(140, 205, 182, 0.95))
      drop-shadow(0 0 40px rgba(126, 165, 155, 0.65));
  }
}
@keyframes signBreathe {
  0%, 100% {
    text-shadow:
      0 0 2px rgba(214, 240, 230, 0.9),
      0 0 12px rgba(126, 190, 168, 0.75),
      0 0 28px rgba(126, 165, 155, 0.45);
  }
  50% {
    text-shadow:
      0 0 3px rgba(226, 246, 238, 1),
      0 0 18px rgba(140, 205, 182, 0.95),
      0 0 40px rgba(126, 165, 155, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lit-card:is(:hover, .is-lit) .glyph,
  .lit-card:is(:hover, .is-lit) .glyph [pathLength],
  .lit-card:is(:hover, .is-lit) .lit-sign { animation: none; }
}

/* Tilt cards (the rest of the pillars and definitions) */
.pillar:not(.lit-card), .def-row {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* ---------------------------------------------------------
   Marquee — soft edge fade
   --------------------------------------------------------- */

.marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* ---------------------------------------------------------
   Buttons — soft glow on hover, layered on existing wipe
   --------------------------------------------------------- */

.btn-primary {
  box-shadow: 0 0 0 0 rgba(126,165,155,0);
  transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.5s ease;
}
.btn-primary:hover { box-shadow: 0 12px 34px -10px rgba(126,165,155,0.55); }

/* ---------------------------------------------------------
   Preloader bar — lit like the cards: a glow that breathes while
   the page loads. The loader sits on ivory, where a pale sage glow
   disappears, so the halo is a more saturated green around a mint
   core. The track stops clipping so the glow can spill out.
   --------------------------------------------------------- */

.loader-bar {
  width: min(240px, 46vw);
  height: 3px;
  overflow: visible;
  border-radius: 3px;
  background: rgba(0, 35, 27, 0.1);
}
.loader-bar span {
  border-radius: inherit;
  background: linear-gradient(90deg, #074432 0%, #3f9a7c 55%, #bfe8d8 100%);
  box-shadow:
    0 0 4px rgba(120, 214, 178, 0.95),
    0 0 14px rgba(46, 158, 118, 0.6),
    0 0 32px rgba(46, 158, 118, 0.38);
  animation: barBreathe 1.4s ease-in-out infinite;
}
@keyframes barBreathe {
  0%, 100% {
    box-shadow:
      0 0 4px rgba(120, 214, 178, 0.95),
      0 0 14px rgba(46, 158, 118, 0.6),
      0 0 32px rgba(46, 158, 118, 0.38);
  }
  50% {
    box-shadow:
      0 0 6px rgba(140, 226, 192, 1),
      0 0 22px rgba(46, 158, 118, 0.8),
      0 0 48px rgba(46, 158, 118, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader-bar span { animation: none; }
}