/* One continuous field behind every page. Glows are pre-blurred radial
   gradients (no animated filter) and stay transparent before the viewport edge. */
.ambient{
  position:fixed;
  inset:0;
  z-index:-1;
  width:100%;
  max-width:100%;
  overflow:hidden;
  pointer-events:none;
  background:#070d25;
}
.field-glow{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  /* closest-side ends at the circle edge; transparent well before that. */
  background:radial-gradient(circle closest-side,var(--c) 0%,color-mix(in srgb,var(--c),transparent 55%) 28%,color-mix(in srgb,var(--c),transparent 82%) 52%,transparent 74%,transparent 100%);
  opacity:var(--o);
  transform:translate3d(-50%,-50%,0);
  animation:field-drift var(--dur) ease-in-out infinite alternate;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.field-glow-a{--x:72%;--y:24%;--size:54vmin;--c:rgba(16,78,168,.72);--o:1;--o2:.62;--dx:-5vmin;--dy:6vmin;--s:1.08;--dur:32s;--delay:-4s}
.field-glow-b{--x:22%;--y:58%;--size:42vmin;--c:rgba(110,28,176,.5);--o:.8;--o2:.42;--dx:6vmin;--dy:-5vmin;--s:1.08;--dur:38s;--delay:-12s}
.field-glow-c{--x:64%;--y:76%;--size:32vmin;--c:rgba(255,70,210,.28);--o:.6;--o2:.3;--dx:-4vmin;--dy:-6vmin;--s:1.06;--dur:34s;--delay:-8s}
.field-glow-d{--x:42%;--y:30%;--size:26vmin;--c:rgba(5,200,230,.28);--o:.55;--o2:.28;--dx:4vmin;--dy:5vmin;--s:1.1;--dur:26s;--delay:-2s}
@media(max-width:760px){
  .field-glow-a{--x:66%;--y:22%;--size:46vmin}
  .field-glow-b{--x:28%;--size:36vmin}
  .field-glow-c{--x:58%;--y:72%;--size:28vmin}
}
@keyframes field-drift{
  to{transform:translate3d(calc(-50% + var(--dx)),calc(-50% + var(--dy)),0) scale(var(--s));opacity:var(--o2)}
}

/* Section washes that ended in a hard rectangle. Cards, borders and type stay. */
.hero::before,
.flow::before,
.principle::before{background:none}
.live-build,
.v14-build,
.v14-build .v14-sticky,
.line-story,
.v14-cta,
.story-cta{background:none}
.v14-build .v14-sticky{overflow:visible}
.v14-cta,.story-cta{overflow:visible}
.phone-scene::before,
.project-scene::before,
.v14-chaos-art::before,
.v14-answer-art::before,
.v14-build .build-stage::before,
.build-sticky::before{filter:none}
/* Un-blurred radials must be clear before the shape that clips them. */
.v14-build .build-stage::before{
  background:radial-gradient(circle closest-side,var(--build-glow,#50caff) 0%,color-mix(in srgb,var(--build-glow,#50caff),transparent 42%) 16%,color-mix(in srgb,var(--build-glow,#50caff),transparent 70%) 38%,color-mix(in srgb,var(--build-glow,#50caff),transparent 90%) 58%,transparent 76%,transparent 100%);
}
.phone-scene::before{background:radial-gradient(circle closest-side,var(--scene-glow,#5ca4ff42) 0%,transparent 70%,transparent 100%)}
.project-scene::before{background:radial-gradient(ellipse closest-side,#21c8c943 0%,transparent 68%,transparent 100%)}
.v14-chaos-art::before,.v14-answer-art::before{background:radial-gradient(circle closest-side,#2943896b 0%,transparent 70%,transparent 100%)}
.build-sticky::before{background:radial-gradient(circle closest-side,#2068b386 0%,transparent 70%,transparent 100%)}

/* Scroll hint for the home build story. Desktop stays fixed to the viewport:
   the logo step ends before the panel pins, so a hint on the panel's own
   bottom would sit below the fold. Mobile places it in the intro, on the
   dark gap under the subtitle, so it never crosses the phone. */
.v14-scroll-hint{
  position:fixed;
  left:50%;
  bottom:26px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:10px;
  transform:translateX(-50%);
  color:#9ae7ff;
  font:700 11px/1 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 1px 10px #041022;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}
.v14-scroll-hint.is-armed{opacity:.82}
.v14-scroll-hint.is-gone{opacity:0}
.v14-scroll-mouse{
  position:relative;
  width:15px;
  height:24px;
  border:1.5px solid currentColor;
  border-radius:9px;
  flex:none;
}
.v14-scroll-mouse::before{
  content:"";
  position:absolute;
  left:50%;
  top:5px;
  width:2px;
  height:5px;
  border-radius:2px;
  background:currentColor;
  transform:translateX(-50%);
  animation:v14-wheel 1.5s ease-in-out infinite;
}
@keyframes v14-wheel{
  0%{transform:translate(-50%,0);opacity:1}
  80%{transform:translate(-50%,7px);opacity:0}
  100%{opacity:0}
}
.v14-scroll-swipe,.v14-hint-swipe{display:none}
.v14-scroll-swipe{width:15px;height:24px;flex:none}
.v14-scroll-swipe svg{display:block;width:15px;height:24px}
@media(max-width:760px){
  .v14-build .live-intro{padding-bottom:8px}
  .v14-scroll-hint{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:max-content;
    margin:14px auto 0;
    z-index:4;
    gap:8px;
    font-size:11px;
    letter-spacing:.14em;
  }
  .v14-scroll-hint.is-armed{opacity:1}
  .v14-scroll-mouse,.v14-hint-scroll{display:none}
  .v14-scroll-swipe{display:block;width:22px;height:22px;color:#05d8ff}
  .v14-hint-swipe{display:inline}
  .v14-scroll-swipe svg{
    width:22px;
    height:22px;
    filter:drop-shadow(0 0 5px rgba(5,216,255,.55));
    animation:v14-swipe 1.6s ease-in-out infinite alternate;
  }
}
@keyframes v14-swipe{
  0%{transform:translateY(2px);opacity:.88}
  100%{transform:translateY(-3px);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .field-glow,.v14-scroll-mouse::before,.v14-scroll-swipe svg{animation:none}
  .field-glow{opacity:var(--o);transform:translate3d(-50%,-50%,0)}
  .v14-scroll-swipe svg{transform:none;opacity:1}
  .v14-scroll-hint{transition:none}
}