/* Genuin · ambient layer. Behaviour and options live in ambient.js.
   Everything here is decorative: no pointer events, hidden from assistive tech,
   colours come from the design tokens in styles.css. Mostly white/grey: blue is only a hint. */

:root{
  --amb-line:color-mix(in srgb,var(--fg) 32%,transparent);
  --amb-accent:color-mix(in srgb,var(--fg) 55%,var(--blue2));
  --amb-theme-k:1;
  --amb-glow-o:.05; --amb-glow-s:560px;
  --amb-dot-r:220px; --amb-dot-lit:.85;
}
:root[data-theme=light]{--amb-theme-k:1}

/* content always sits above the ambient layers */
main,.foot{position:relative;z-index:1}
.amb-on .marq,.amb-on .foot{background:transparent}   /* let the sky show through */
.amb-on .hero__dots{display:none}                     /* replaced by the reactive DotField */

/* calmer existing glows: the page was too blue and too bright */
.amb-on .hero__glow{opacity:.26}
:root[data-theme=light].amb-on .hero__glow{opacity:.18}
@keyframes glowSoft{to{opacity:.26;transform:scale(1.06)}}
.amb-on .browser:not(.browser--s){box-shadow:0 0 0 1px rgba(255,255,255,.12),0 -10px 80px -24px rgba(47,107,255,.2)}
.amb-on .cta__glow{opacity:.16}
.amb-on .pcard__glow{opacity:.14}
.amb-on .biz__panel::before{opacity:.1}

.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
:root[data-theme=light] .amb{opacity:var(--amb-theme-k)}
.amb__stars{position:absolute;inset:0;width:100%;height:100%}

/* ScrollTone: two big soft orbs (transform + opacity only) */
.amb__orb{position:absolute;left:0;top:0;width:78vmax;height:78vmax;margin:-26vmax 0 0 -26vmax;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 34%,transparent) 0,transparent 64%)}
.amb__orb--a{--c:color-mix(in srgb,var(--fg) 30%,var(--blue))}
.amb__orb--b{--c:color-mix(in srgb,var(--fg) 40%,var(--blue2));left:auto;right:0;top:auto;bottom:0;margin:0 -26vmax -26vmax 0}

/* CursorGlow */
.amb__glow{position:absolute;left:0;top:0;width:var(--amb-glow-s);height:var(--amb-glow-s);margin:calc(var(--amb-glow-s) / -2) 0 0 calc(var(--amb-glow-s) / -2);border-radius:50%;opacity:0;transition:opacity .7s var(--ease);will-change:transform;
  background:radial-gradient(circle,color-mix(in srgb,var(--fg) 45%,var(--blue)) 0,transparent 65%)}
.amb__glow.on{opacity:calc(var(--amb-glow-o) * var(--amb-theme-k))}

/* DotField: dim grid + a lit copy revealed around the cursor */
.dotfield{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 40%,#000 28%,transparent 84%);mask-image:radial-gradient(ellipse 72% 64% at 50% 40%,#000 28%,transparent 84%)}
.dotfield i{position:absolute;inset:0;background-size:34px 34px;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.4px)}
.dotfield__base{--dot:color-mix(in srgb,var(--fg) 15%,transparent)}
.dotfield .dotfield__lit{--dot:color-mix(in srgb,var(--fg) 70%,var(--blue2));opacity:0;background-image:radial-gradient(circle,var(--dot) 1.7px,transparent 2.4px);transition:opacity .5s var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--amb-dot-r) at var(--mx,50%) var(--my,50%),#000 0,transparent 100%);mask-image:radial-gradient(circle var(--amb-dot-r) at var(--mx,50%) var(--my,50%),#000 0,transparent 100%)}
.dotfield.on .dotfield__lit{opacity:var(--amb-dot-lit)}

/* ParallaxShapes: SVG outlines that drift with the scroll, spin slowly and step away from the cursor */
.amb-shapes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.shape{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:0;transition:opacity 1.8s var(--ease);will-change:transform;color:var(--amb-line)}
.shape.acc{color:var(--amb-accent)}
.amb-shapes.in .shape{opacity:var(--o,.7)}
.shape svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;transform-origin:50% 50%;animation:shapeSpin var(--dur,70s) linear infinite}
.shape.rev svg{animation-direction:reverse}
.shape.still svg{animation:none}
.shape svg *{vector-effect:non-scaling-stroke}
.shape svg .fill{fill:currentColor;stroke:none}
.shape svg .orbit{transform-origin:50px 50px;animation:shapeSpin 11s linear infinite}
@keyframes shapeSpin{to{transform:rotate(360deg)}}

/* geometric dividers between sections */
.amb-div{position:absolute;left:50%;top:0;width:min(1240px,calc(100% - 48px));height:0;transform:translateX(-50%);z-index:-1;pointer-events:none}
.amb-div__l{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--amb-line) 16%,var(--amb-line) 84%,transparent);transform:scaleX(0);transform-origin:50% 50%;transition:transform 1.6s var(--ease)}
.amb-div__d{position:absolute;left:50%;top:0;width:13px;height:13px;margin:-6px 0 0 -6px;border:1px solid var(--amb-line);background:var(--bg);transform:rotate(45deg) scale(0);transition:transform 1.2s .45s var(--ease)}
.amb-div__t{position:absolute;top:-5px;width:1px;height:11px;background:var(--amb-line);opacity:0;transition:opacity .8s 1s}
.amb-div__t--a{left:0}.amb-div__t--b{right:0}
.amb-div.in .amb-div__l{transform:scaleX(1)}
.amb-div.in .amb-div__d{transform:rotate(225deg) scale(1);animation:divSpin 26s linear 1.7s infinite}
.amb-div.in .amb-div__t{opacity:1}
@keyframes divSpin{to{transform:rotate(585deg) scale(1)}}

/* hover: cards tilt in 3D with a soft white sheen */
.tilt-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;z-index:2;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.09),transparent 46%)}

/* Grain: static noise over everything, below the nav and the cursor */
.amb__grain{position:fixed;inset:0;z-index:90;pointer-events:none;background-size:180px 180px}

@media(max-width:800px){
  .shape:nth-child(n+4){display:none}
  .amb-shapes.in .shape{opacity:calc(var(--o,.7) * .7)}
}
@media(prefers-reduced-motion:reduce){
  .shape,.amb__glow,.dotfield__lit,.amb-div__l,.amb-div__d,.amb-div__t{transition:none}
  .shape svg,.shape svg .orbit,.amb-div.in .amb-div__d{animation:none}
}

/* same as prefers-reduced-motion, but also applied to low-end devices and ?ambient=reduced */
.amb-still .shape svg,.amb-still .shape svg .orbit,.amb-still .amb-div.in .amb-div__d{animation:none}
.amb-still .shape,.amb-still .amb-div__l,.amb-still .amb-div__d,.amb-still .amb-div__t{transition:none}

/* no hard seams: every section lets the fixed sky show through, so nothing ends in a flat black band */
.amb-on .stk{background:transparent}
.amb-on .foot__bot{background:transparent}
.amb-on .foot__word{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);mask-image:linear-gradient(to bottom,#000 62%,transparent 96%)}
/* the hero page fades out with a mask instead of a black overlay */
.amb-on .stage::after{display:none}
.amb-on .browser:not(.browser--s){-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
/* the hero glow dies out before the hero ends, and nothing is clipped at the bottom edge */
.amb-on .hero{overflow-x:clip;overflow-y:visible}
.amb-on .hero__glow{-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 39%);mask-image:linear-gradient(to bottom,#000 0,transparent 39%)}