/* Shared ambient animation layer. Loaded on every routed page.
   Everything here animates transform/opacity only. */

/* CRITICAL: the design system's own body{animation:page-enter ...} rule
   settles to transform:translateY(0), which computes to a matrix, not the
   keyword none. Any non-none transform on an ancestor becomes the
   containing block for position:fixed descendants (CSS Transforms spec).
   Without this override, every fixed-position layer added below (#ambient,
   #cursor-glow, and the intro splash before this was added) is pinned to
   body's box instead of the viewport -- meaning it scrolls away with the
   page instead of staying fixed on screen. !important is required: it is
   the only origin that outranks a running CSS animation. This does remove
   the page-enter slide-up motion (opacity fade is unaffected), which is an
   accepted trade for fixed positioning actually staying fixed. */
body{transform:none !important;}

/* content must read as foreground: .card has no position/z-index of its own,
   so ambient's explicit z-index otherwise paints over every card sitewide. */
.card{position:relative;z-index:2;}


/* ---- nav condenses on scroll ---- */
nav{transition:padding .28s cubic-bezier(.2,.8,.2,1),background .28s ease-out,box-shadow .28s ease-out !important;}
nav img{transition:height .28s cubic-bezier(.2,.8,.2,1) !important;}
html.is-scrolled nav{padding-top:10px !important;padding-bottom:10px !important;
  background:color-mix(in srgb, var(--color-bg) 76%, transparent) !important;
  backdrop-filter:saturate(140%) blur(12px) !important;
  -webkit-backdrop-filter:saturate(140%) blur(12px) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.30) !important;}
html.is-scrolled nav img{height:21px !important;}

/* ---- accent light following the cursor ---- */
#cursor-glow{position:fixed;top:0;left:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .6s ease-out;mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 62%);}
#cursor-glow.on{opacity:1;}
@media (hover:none),(max-width:880px){#cursor-glow{display:none !important;}}

/* ---- counter-running marquee row ---- */
@keyframes marqueeRev{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.marquee-track-rev{animation:marqueeRev 28s linear infinite;}

/* ---- parallax targets ---- */
[data-parallax]{will-change:transform;}

/* ---- ambient aurora (shared definition) ---- */
@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(7%,-5%,0) scale(1.14);}66%{transform:translate3d(-6%,6%,0) scale(.92);}100%{transform:translate3d(0,0,0) scale(1);}}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;will-change:transform;}
.aurora-1{animation:auroraDrift 30s ease-in-out infinite;}
.aurora-2{animation:auroraDrift 44s ease-in-out infinite reverse;}
@media (max-width:640px){.aurora{filter:blur(50px);}}

/* ---- ambient abstract background: drifting fields, floating outlines, moving grid ----
   Sits above the opaque section backgrounds but blends as light (screen), so it reads
   as atmosphere rather than a veil. Kept deliberately faint: the pages are text-heavy. */
#ambient{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict;}
#ambient .amb-blob,#ambient .amb-ring,#ambient .amb-grid,#ambient .amb-gear{mix-blend-mode:screen;}
#ambient .amb-blob{position:absolute;border-radius:50%;filter:blur(76px);will-change:transform;}
#ambient .b1{width:50vw;height:50vw;top:-12vh;left:-10vw;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 24%,transparent) 0%,color-mix(in srgb,var(--color-accent) 10%,transparent) 45%,transparent 72%);animation:ambDrift1 34s ease-in-out infinite;}
#ambient .b2{width:42vw;height:42vw;bottom:-14vh;right:-8vw;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent-2) 22%,transparent) 0%,color-mix(in srgb,var(--color-accent-2) 9%,transparent) 45%,transparent 72%);animation:ambDrift2 44s ease-in-out infinite;}
#ambient .b3{width:34vw;height:34vw;top:38vh;left:52vw;background:radial-gradient(circle,color-mix(in srgb,var(--color-section-ghost) 25%,transparent) 0%,color-mix(in srgb,var(--color-section-ghost) 10%,transparent) 45%,transparent 72%);animation:ambDrift3 38s ease-in-out infinite;}
#ambient .b4{width:30vw;height:30vw;bottom:24vh;left:14vw;background:radial-gradient(circle,color-mix(in srgb,var(--color-section-glow) 23%,transparent) 0%,color-mix(in srgb,var(--color-section-glow) 9%,transparent) 45%,transparent 72%);animation:ambDrift4 50s ease-in-out infinite;}
@keyframes ambDrift1{0%,100%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(9vw,7vh,0) scale(1.16);}66%{transform:translate3d(-5vw,12vh,0) scale(.9);}}
@keyframes ambDrift2{0%,100%{transform:translate3d(0,0,0) scale(1);}33%{transform:translate3d(-11vw,-8vh,0) scale(.88);}66%{transform:translate3d(6vw,-13vh,0) scale(1.2);}}
@keyframes ambDrift3{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-14vw,-10vh,0) scale(1.24);}}
@keyframes ambDrift4{0%,100%{transform:translate3d(0,0,0) scale(1);}40%{transform:translate3d(12vw,-6vh,0) scale(1.1);}75%{transform:translate3d(-7vw,9vh,0) scale(.92);}}

#ambient .amb-ring{position:absolute;border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);will-change:transform;}
#ambient .r1{width:300px;height:300px;border-radius:50%;top:14vh;right:8vw;animation:ambSpin1 30s linear infinite;}
#ambient .r2{width:180px;height:180px;border-radius:28px;bottom:18vh;left:6vw;animation:ambSpin2 40s linear infinite;}
#ambient .r3{width:420px;height:420px;border-radius:50%;bottom:-14vh;right:26vw;border-style:dashed;animation:ambSpin3 55s linear infinite;}
@keyframes ambSpin1{from{transform:rotate(0deg) translateY(0);}50%{transform:rotate(180deg) translateY(-26px);}to{transform:rotate(360deg) translateY(0);}}
@keyframes ambSpin2{from{transform:rotate(0deg) translateX(0);}50%{transform:rotate(-180deg) translateX(30px);}to{transform:rotate(-360deg) translateX(0);}}
@keyframes ambSpin3{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

#ambient .amb-grid{position:absolute;top:-64px;left:-64px;right:-64px;bottom:-64px;opacity:.07;
  background-image:linear-gradient(color-mix(in srgb,var(--color-accent) 55%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 55%,transparent) 1px,transparent 1px);
  background-size:64px 64px;animation:ambGrid 26s linear infinite;will-change:transform;}
@keyframes ambGrid{from{transform:translate3d(0,0,0);}to{transform:translate3d(64px,64px,0);}}

/* lighter on phones: keep the colour fields, drop the geometry and grid */
#ambient .amb-gear{position:absolute;color:color-mix(in srgb,var(--color-accent) 26%,transparent);will-change:transform;}
#ambient .g1{font-size:120px;top:8vh;right:4vw;animation:ambGearCW 22s linear infinite;}
#ambient .g2{font-size:72px;bottom:20vh;left:3vw;animation:ambGearCCW 16s linear infinite;}
#ambient .g3{font-size:46px;top:52vh;right:22vw;animation:ambGearCW 12s linear infinite;color:color-mix(in srgb,var(--color-accent-2) 24%,transparent);}
#ambient .g4{font-size:30px;bottom:10vh;right:9vw;animation:ambGearCCW 9s linear infinite;color:color-mix(in srgb,var(--color-section-ghost) 26%,transparent);}
@keyframes ambGearCW{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes ambGearCCW{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

/* circuit: nodes connected by lines with a traveling pulse, the systems motif made literal */

@media (max-width:880px){
  /* scaled down for a small screen and mid-range hardware, not removed:
     the systems motif (gears, rings, circuit) should read on mobile too. */
  #ambient .amb-blob{filter:blur(42px);}
  #ambient .amb-grid{display:block !important;opacity:.045;}
  #ambient .r1{width:150px;height:150px;top:6vh;right:2vw;}
  #ambient .r2{width:96px;height:96px;bottom:14vh;left:2vw;}
  #ambient .r3{width:220px;height:220px;bottom:-8vh;right:8vw;}
  #ambient .g1{font-size:56px;top:5vh;right:1vw;}
  #ambient .g2{font-size:38px;bottom:16vh;left:1vw;}
  #ambient .g3{font-size:32px;}
  #ambient .g4{font-size:22px;}
}

@media (prefers-reduced-motion: reduce){
  #ambient{display:none !important;}
  nav,nav img{transition:none !important;}
  #cursor-glow{display:none !important;}
  .marquee-track-rev{animation:none !important;}
  .aurora-1,.aurora-2{animation:none !important;}
  [data-parallax]{transform:none !important;}
}