/* Stellaria Waterfield — work48
   Ink-black / deep-blue spatial field, Siri-like liquid lenses and restrained caustics.
   Final override layer: fixes horizontal overflow and keeps motion compositor-friendly. */
:root{
  --wf-ink:#0e1624;--wf-soft:rgba(14,22,36,.67);--wf-muted:rgba(14,22,36,.46);
  --wf-line:rgba(42,72,118,.11);--wf-line-hi:rgba(103,145,220,.22);
  --wf-glass:rgba(250,252,255,.34);--wf-glass-hi:rgba(252,253,255,.55);
  --wf-blue:#6388e7;--wf-cyan:#6ca7c9;--wf-violet:#8d80df;--wf-shadow:0 28px 92px rgba(34,52,86,.11);
}
html[data-theme="dark"]{
  --wf-ink:#f4f7fc;--wf-soft:rgba(228,237,249,.68);--wf-muted:rgba(209,221,239,.44);
  --wf-line:rgba(210,227,255,.075);--wf-line-hi:rgba(135,174,255,.20);
  --wf-glass:rgba(8,15,25,.18);--wf-glass-hi:rgba(15,25,41,.34);
  --wf-blue:#92afff;--wf-cyan:#76b9dc;--wf-violet:#b2a4ff;--wf-shadow:0 28px 96px rgba(0,0,0,.26);
}

/* Hard stop for the Safari/iPad horizontal pan bug. */
html,body{width:100%;max-width:100%;overflow-x:clip!important}
body,.app-shell-frame-wrap,.app-shell-frame,main{max-width:100%!important}
.nf-hero,.nf-production,.nf-production-stage,.nf-worlds-home,.home-section--video,.nf-signature-field,.footer{max-width:100%!important;overflow-x:clip!important}
img,svg,canvas,iframe{max-width:100%}

/* Page rhythm: not every section should be the same blue-black. */
html[data-theme="dark"] body.home-public-v3{background:#03060b!important}
html[data-theme="dark"] body.home-public-v3 .home-studio-section{background:radial-gradient(820px 520px at 72% 18%,rgba(61,102,180,.08),transparent 72%),linear-gradient(180deg,#06101a,#050a12)!important}
html[data-theme="dark"] body.home-public-v3 .nf-production{background:radial-gradient(900px 560px at 76% 46%,rgba(49,86,170,.075),transparent 72%),linear-gradient(180deg,#03060a,#050912)!important}
html[data-theme="dark"] body.home-public-v3 .home-section--video{background:#020407!important}

/* Hero: black ink base + low-saturation caustic light. */
.nf-hero{
  --hero-x:76%;--hero-y:40%;
  width:100%!important;max-width:100%!important;overflow:clip!important;
  background:
    radial-gradient(980px 680px at 79% 41%,color-mix(in srgb,var(--wf-blue) 10%,transparent),transparent 67%),
    radial-gradient(760px 560px at 93% 12%,color-mix(in srgb,var(--wf-violet) 6%,transparent),transparent 72%),
    radial-gradient(720px 560px at 17% 64%,color-mix(in srgb,var(--wf-cyan) 4%,transparent),transparent 74%),
    linear-gradient(180deg,#f7f9fc,#edf2f7)!important;
}
html[data-theme="dark"] .nf-hero{
  background:
    radial-gradient(880px 650px at 80% 40%,rgba(63,98,193,.15),transparent 68%),
    radial-gradient(720px 560px at 94% 10%,rgba(110,87,179,.07),transparent 72%),
    radial-gradient(640px 560px at 18% 70%,rgba(35,74,102,.055),transparent 75%),
    linear-gradient(180deg,#010307 0%,#02050a 35%,#06101a 100%)!important;
}
/* Animated water-caustic sheet. It stays on the right half to protect the headline. */
.nf-hero::before{
  content:""!important;position:absolute!important;z-index:0!important;inset:-18% -10% -16% 42%!important;pointer-events:none!important;
  background:
    repeating-conic-gradient(from 12deg at 62% 48%,rgba(155,191,255,.12) 0deg,transparent 9deg,rgba(112,161,255,.055) 19deg,transparent 31deg),
    repeating-radial-gradient(ellipse at 48% 56%,rgba(174,208,255,.075) 0 2px,transparent 5px 18px),
    radial-gradient(46% 38% at 56% 46%,rgba(113,157,255,.10),transparent 76%)!important;
  background-size:138% 138%,118% 118%,100% 100%!important;
  opacity:.34!important;mix-blend-mode:screen!important;filter:blur(12px) contrast(1.22) saturate(1.08)!important;
  transform:translate3d(0,0,0) scale(1.05);transform-origin:60% 50%;
  animation:wfCausticDrift 13s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 18%,#000 48%,rgba(0,0,0,.88) 100%)!important;
}
.nf-hero::after{
  content:""!important;position:absolute!important;z-index:1!important;left:clamp(52%,var(--hero-x,76%),92%)!important;top:clamp(12%,var(--hero-y,40%),88%)!important;
  width:min(44vw,620px)!important;aspect-ratio:1!important;inset:auto!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:radial-gradient(circle at 44% 39%,rgba(186,215,255,.105),rgba(86,133,236,.06) 34%,rgba(89,87,172,.025) 54%,transparent 72%)!important;
  opacity:.66!important;filter:blur(20px)!important;mix-blend-mode:screen!important;transition:left .12s linear,top .12s linear,opacity .28s ease!important;
}
@keyframes wfCausticDrift{0%{transform:translate3d(-2%,-1%,0) scale(1.03) rotate(-1.2deg);filter:blur(12px) contrast(1.18)}45%{transform:translate3d(2%,1.5%,0) scale(1.08) rotate(.7deg);filter:blur(10px) contrast(1.28)}100%{transform:translate3d(-1%,2%,0) scale(1.04) rotate(1.2deg);filter:blur(13px) contrast(1.2)}}

/* Constellation: no button-like blob; only a condensed water lens around the active system. */
.nf-constellation{overflow:visible!important;background:transparent!important;isolation:isolate}
.nf-constellation::after{
  width:min(34vw,430px)!important;height:min(34vw,430px)!important;
  background:
    repeating-radial-gradient(ellipse at 46% 44%,rgba(167,201,255,.075) 0 1px,transparent 3px 18px),
    radial-gradient(circle,rgba(113,154,247,.105),rgba(85,105,187,.035) 46%,transparent 73%)!important;
  filter:blur(12px) contrast(1.12)!important;opacity:var(--field-opacity,.42)!important;mix-blend-mode:screen!important;
}
.nf-star-node{overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nf-star-node::after{
  display:block!important;content:""!important;position:absolute!important;z-index:0!important;left:50%!important;top:50%!important;
  width:calc(100% + 34px)!important;height:calc(100% + 26px)!important;inset:auto!important;
  transform:translate(-50%,-50%) scale(.55)!important;opacity:0!important;border:0!important;
  border-radius:58% 42% 51% 49% / 45% 59% 41% 55%!important;
  background:
    radial-gradient(80% 60% at 34% 22%,rgba(255,255,255,.13),transparent 58%),
    radial-gradient(90% 75% at 72% 74%,color-mix(in srgb,var(--wf-blue) 10%,transparent),transparent 66%),
    linear-gradient(145deg,color-mix(in srgb,var(--wf-glass-hi) 64%,transparent),color-mix(in srgb,var(--wf-glass) 88%,transparent))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -8px 22px rgba(75,118,206,.035),0 10px 34px rgba(0,0,0,.075)!important;
  backdrop-filter:blur(14px) saturate(170%) brightness(1.05)!important;-webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.05)!important;
  transition:opacity .3s ease,transform .56s cubic-bezier(.16,1,.3,1),border-radius .66s cubic-bezier(.16,1,.3,1)!important;pointer-events:none!important;
}
.nf-star-node.is-nearest::after,.nf-star-node:hover::after,.nf-star-node:focus-visible::after{opacity:.96!important;transform:translate(-50%,-50%) scale(1)!important;border-radius:44% 56% 47% 53% / 58% 42% 57% 43%!important}
.nf-star-node.is-nearest strong,.nf-star-node:hover strong{color:var(--wf-ink)!important;text-shadow:0 1px 14px color-mix(in srgb,var(--wf-blue) 18%,transparent)}
.f2-node-ripple{border-color:color-mix(in srgb,var(--wf-blue) 48%,transparent)!important;box-shadow:0 0 28px color-mix(in srgb,var(--wf-blue) 16%,transparent)!important}

/* Liquid cards: more transmission, less grey rectangle. */
.home-public-v3 .studio-direction,.home-public-v3 .studio-principle,.home-public-v3 .nf-video-stage{
  background:linear-gradient(145deg,color-mix(in srgb,var(--wf-glass-hi) 68%,transparent),color-mix(in srgb,var(--wf-glass) 92%,transparent))!important;
  border-color:var(--wf-line)!important;box-shadow:var(--wf-shadow),inset 0 1px rgba(255,255,255,.10)!important;
  backdrop-filter:blur(32px) saturate(172%) brightness(1.015)!important;-webkit-backdrop-filter:blur(32px) saturate(172%) brightness(1.015)!important;
}
html[data-theme="dark"] .home-public-v3 .studio-direction,html[data-theme="dark"] .home-public-v3 .studio-principle{background:linear-gradient(145deg,rgba(16,28,44,.24),rgba(4,9,16,.14))!important}
.home-public-v3 .studio-direction:hover{transform:translateY(-4px) scale(1.006)!important;box-shadow:0 28px 100px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.13)!important}

/* Compute narrative: right-side graphics float instead of sitting in a big card. */
.nf-story-visual{
  border:0!important;background:radial-gradient(48% 54% at 52% 48%,color-mix(in srgb,var(--wf-blue) 8%,transparent),transparent 72%)!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;
}
.nf-story-visual::before{content:"";position:absolute;width:min(40vw,440px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,rgba(142,177,255,.045) 0 1px,transparent 2px 22px);opacity:.58;filter:blur(.2px);pointer-events:none}
.f2-mono{width:min(58%,420px)!important;overflow:visible!important;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--wf-blue) 8%,transparent))}
.f2-mono text{display:none!important}.f2-mono .fill{fill:transparent!important;stroke:color-mix(in srgb,var(--wf-blue) 22%,transparent)!important}.f2-mono .soft{stroke:color-mix(in srgb,var(--wf-blue) 18%,transparent)!important}.f2-mono .line{stroke:color-mix(in srgb,var(--wf-blue) 48%,transparent)!important;stroke-width:1!important}.f2-mono .node{fill:transparent!important;stroke:color-mix(in srgb,var(--wf-blue) 72%,transparent)!important;stroke-width:1.15!important}
.nf-story.is-active .f2-mono .line{stroke-dasharray:12 8;animation:wfTrace 3.8s linear infinite}.nf-story.is-active .f2-mono .node{animation:wfNodeBreath 3.6s ease-in-out infinite}
@keyframes wfTrace{to{stroke-dashoffset:-80}}@keyframes wfNodeBreath{50%{opacity:.54}}

/* Stronger iPad composition without clipping active story. */
@media (min-width:820px) and (max-width:1250px){
  .nf-production-stage{padding:72px 26px 18px!important}.nf-production .nf-section-head{grid-template-columns:minmax(0,.9fr) minmax(260px,.72fr)!important;gap:24px!important;margin-bottom:0!important}.nf-production .nf-section-head h2{font-size:clamp(38px,5.1vw,54px)!important}.nf-production .nf-section-head>p{font-size:14px!important;line-height:1.5!important}.nf-story{grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr)!important;gap:28px!important}.nf-story-copy h3{font-size:clamp(46px,5.8vw,62px)!important}.nf-story-copy p{font-size:14.5px!important;line-height:1.58!important}.nf-story-visual{height:min(41vh,360px)!important}.f2-mono{width:min(56%,360px)!important}
}

/* Worlds section: dark photo should feel cinematic, not uniformly blue. */
html[data-theme="dark"] .home-public-v3 .nf-worlds-home{background:linear-gradient(90deg,rgba(2,4,8,.86) 0%,rgba(2,5,10,.52) 34%,rgba(4,8,14,.14) 64%,rgba(4,8,14,.03) 100%)!important}
.home-public-v3 .nf-worlds-home img{object-position:50% 20%!important}

/* Video should return to near-black so the media owns the light. */
html[data-theme="dark"] .home-public-v3 .home-section--video{background:linear-gradient(180deg,#030508,#010205)!important}
.home-public-v3 .nf-video-stage{background:rgba(5,9,15,.28)!important}.home-public-v3 .nf-video-info{background:linear-gradient(180deg,rgba(15,24,39,.22),rgba(3,7,12,.34))!important}

/* Signature field gets a long, slow runway. */
.nf-signature-field{height:160svh!important;min-height:980px!important;background:radial-gradient(700px 430px at 50% 46%,color-mix(in srgb,var(--wf-blue) 5%,transparent),transparent 76%),linear-gradient(180deg,#010205,#000)!important;overflow:clip!important}
.nf-signature-field canvas{position:sticky!important;top:0!important;height:100svh!important;width:100%!important}.nf-signature-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,58vw)!important}.nf-signature-caption{position:sticky!important;display:block!important;top:calc(100svh - 74px)!important;bottom:auto!important;text-align:center}

/* Footer: old rhythm, new material. */
html.stellaria-embedded body .footer,html.stellaria-embedded body .compact-footer{display:flex!important}.footer.compact-footer{overflow:hidden!important;background:linear-gradient(145deg,color-mix(in srgb,var(--wf-glass-hi) 60%,transparent),color-mix(in srgb,var(--wf-glass) 88%,transparent))!important;border-color:var(--wf-line)!important;box-shadow:var(--wf-shadow)!important;backdrop-filter:blur(26px) saturate(160%)!important;-webkit-backdrop-filter:blur(26px) saturate(160%)!important}

@media(max-width:820px){
  .nf-hero::before{inset:-15% -18% -10% 26%!important}.nf-hero::after{width:72vw!important;left:clamp(48%,var(--hero-x,72%),92%)!important}.nf-signature-field{height:130svh!important;min-height:760px!important}.nf-signature-field canvas{height:100svh!important}.nf-signature-caption{top:calc(100svh - 62px)!important;font-size:10px!important}.f2-mono{width:min(62%,340px)!important}
}
@media(prefers-reduced-motion:reduce){.nf-hero::before,.nf-story.is-active .f2-mono .line,.nf-story.is-active .f2-mono .node{animation:none!important}}