/* A full-screen typographic poster. The site keeps its single authored particle field. */
.nf-hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;padding:calc(var(--hdr) + 34px) var(--pad) 25px;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 37%,#ff9a3d08,transparent 62%)}
.nf-hero .nf-eyebrow{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.nf-code{color:var(--soft)}
.nf-visual{position:relative;width:100%;height:clamp(240px,46svh,620px);flex:1;min-height:240px;display:grid;place-items:center;pointer-events:none;visibility:hidden}
/* No surrogate numeral and no haze or decorative orbit before the first real particle draw. */
body:has([data-not-found]):not(.nf-field-started) #field{visibility:hidden}
.nf-hero.nf-started .nf-visual{visibility:visible}
/* The background DOM layer is cut out by the same full-resolution glyph raster as WebGL. */
.nf-visual.nf-masked{-webkit-mask-image:var(--nf-edge-guard,linear-gradient(#fff,#fff)),var(--nf-pointer-guard,linear-gradient(#fff,#fff)),var(--nf-shock-guard,linear-gradient(#fff,#fff)),linear-gradient(#fff,#fff),var(--nf-cutout);mask-image:var(--nf-edge-guard,linear-gradient(#fff,#fff)),var(--nf-pointer-guard,linear-gradient(#fff,#fff)),var(--nf-shock-guard,linear-gradient(#fff,#fff)),linear-gradient(#fff,#fff),var(--nf-cutout);-webkit-mask-size:100% 100%,100% 100%,100% 100%,100% 100%,var(--nf-mask-w) var(--nf-mask-h);mask-size:100% 100%,100% 100%,100% 100%,100% 100%,var(--nf-mask-w) var(--nf-mask-h);-webkit-mask-position:0 0,0 0,0 0,0 0,var(--nf-mask-x) var(--nf-mask-y);mask-position:0 0,0 0,0 0,0 0,var(--nf-mask-x) var(--nf-mask-y);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in,source-in,source-in,xor;mask-composite:intersect,intersect,intersect,exclude}
.nf-visual.nf-mask-released{-webkit-mask-image:none;mask-image:none}
.nf-visual::before{content:"";position:absolute;inset:12% 10%;border:1px solid #ffc86116;border-radius:50%;transform:rotate(-11deg);pointer-events:none}
.nf-visual::after{content:"";position:absolute;left:50%;bottom:8%;width:1px;height:28px;background:linear-gradient(transparent,#ffc86145);transform:translateX(-50%)}
.nf-orbit-path{position:absolute;inset:12% 10%;transform:rotate(-11deg);border-radius:50%;pointer-events:none}.nf-orbit-dot{position:absolute;right:9%;top:23%;width:5px;height:5px;border-radius:50%;background:#ffc861;box-shadow:0 0 17px #ffb66a90;opacity:.7}.nf-orbit-dot--echo{width:3px;height:3px;background:#ff6395;box-shadow:0 0 15px #ff2d7570;right:76%;top:81%;opacity:.45}
/* Breathing ellipse and orbiting sparks stay on their own composited transforms.
   The actual escaping numeral dots follow the same orbital language in the GPU. */
.nf-hero.nf-live .nf-visual::before{animation:nf-orbit-breathe 16s ease-in-out infinite}
@keyframes nf-orbit-breathe{0%,100%{transform:rotate(-11deg) scale(1);opacity:.65}50%{transform:rotate(-3deg) scale(1.035,.94);opacity:1}}
@supports(offset-path:ellipse(50% 50% at 50% 50%)){
 .nf-orbit-dot{left:0;top:0;right:auto;offset-path:ellipse(50% 50% at 50% 50%);offset-distance:8%;offset-rotate:0deg}
 .nf-orbit-dot--echo{offset-distance:61%}
 .nf-hero.nf-live .nf-orbit-dot{animation:nf-orbit-travel 19s linear infinite}
 .nf-hero.nf-live .nf-orbit-dot--echo{animation-name:nf-orbit-travel-echo;animation-duration:27s;animation-direction:reverse}
}
@keyframes nf-orbit-travel{from{offset-distance:8%}to{offset-distance:108%}}
@keyframes nf-orbit-travel-echo{from{offset-distance:61%}to{offset-distance:161%}}
.nf-hero.nf-scattering .nf-visual::before{border-color:#ffc86136}.nf-hero.nf-scattering .nf-orbit-dot{box-shadow:0 0 24px #ffc861cc}
.nf-copy{text-align:center;position:relative;z-index:2;max-width:680px;padding-top:8px}
.nf-copy h1{font-family:var(--display);font-size:clamp(36px,4vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.045em;color:var(--fg)}
.nf-copy p{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--mute);margin-top:16px}
.nf-actions{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:27px;position:relative;z-index:2}
.nf-actions .btn{padding:15px 24px;font-size:14px;min-height:52px;border-radius:999px;flex-shrink:0}.nf-home{font-size:14px;padding:14px 0;color:var(--mute);text-underline-offset:5px;transition:color .2s;white-space:nowrap;flex-shrink:0}.nf-home span{display:inline-block;margin-left:5px;transition:transform .25s var(--ease)}
.nf-foot{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:40px;min-height:44px}
.nf-hero .nf-scatter{display:flex;align-items:center;gap:9px;padding:10px 0 10px 16px;font-size:10px;letter-spacing:.04em;color:var(--mute);min-height:44px;white-space:nowrap;transition:color .2s}.nf-hero .nf-scatter[hidden]{display:none}.nf-hero .nf-scatter:disabled{cursor:default;color:var(--soft)}

@media(hover:hover){.nf-home:hover{color:var(--fg);text-decoration:underline}.nf-home:hover span{transform:translate(2px,-2px)}.nf-hero .nf-scatter:not(:disabled):hover{color:var(--fg)}}
@media(min-width:1600px){.nf-hero{padding-top:calc(var(--hdr) + 46px);padding-bottom:32px}.nf-foot{margin-top:48px}}
@media(max-width:859px){.nf-hero{padding-top:calc(var(--hdr) + 28px);padding-bottom:18px}.nf-visual{height:34svh;min-height:200px;max-height:340px;margin:16px 0 4px}.nf-copy h1{font-size:clamp(34px,7.5vw,54px)}.nf-copy p{margin-top:13px}.nf-actions{gap:24px;margin-top:24px}.nf-actions .btn{padding:14px 20px;font-size:13px}.nf-home{font-size:13px}.nf-foot{margin-top:auto;padding-top:36px;gap:10px;align-items:flex-end}.nf-hero .nf-scatter{font-size:9px;gap:7px;padding-left:0}.nf-hero .nf-eyebrow{font-size:9px;letter-spacing:.09em}.nf-orbit-dot{width:4px;height:4px}.nf-orbit-dot--echo{width:2px;height:2px}.nf-orbit-path,.nf-visual::before{inset:14% 4%}.nf-visual::after{bottom:4%;height:20px}}
@media(max-height:720px) and (min-width:860px){.nf-hero{padding-top:calc(var(--hdr) + 14px);padding-bottom:12px}.nf-visual{height:34svh;min-height:170px}.nf-copy h1{font-size:42px}.nf-copy p{margin-top:10px}.nf-actions{margin-top:18px}.nf-foot{margin-top:18px}}
@media(max-width:560px){.nf-foot{flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-top:24px}.nf-hero .nf-scatter{flex-shrink:0;padding:10px 8px}.nf-actions{max-width:100%;gap:18px}}
@media(max-width:380px){.nf-actions{gap:14px}.nf-actions .btn{padding-inline:14px;font-size:12px;gap:10px}.nf-home{font-size:12px}.nf-hero .nf-scatter{font-size:9px}}
/* A short landscape screen keeps the numeral beside the exits, with the play
   control visible instead of requiring a scroll into the next section. */
@media(max-height:540px) and (min-width:561px) and (max-width:859px){
 .nf-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto;column-gap:24px;row-gap:6px;padding-top:calc(var(--hdr) + 8px);padding-bottom:10px}
 .nf-hero .nf-eyebrow{grid-column:1/-1}
 .nf-visual{grid-column:1;grid-row:2/4;width:100%;height:100%;min-height:120px;max-height:none;margin:0;align-self:stretch}
 .nf-copy{grid-column:2;grid-row:2;text-align:left;align-self:center;padding-top:0;max-width:100%}
 .nf-copy h1{font-size:clamp(26px,3.8vw,32px)}
 .nf-copy p{font-size:13px;line-height:1.4;margin-top:8px}
 .nf-actions{grid-column:2;grid-row:3;justify-content:flex-start;gap:14px;margin-top:0;max-width:none}
 .nf-actions .btn{font-size:11px;min-height:44px;padding:11px 12px;gap:8px}
 .nf-home{font-size:11px;padding-block:12px}
 .nf-foot{grid-column:1/-1;grid-row:4;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;margin-top:0;padding-top:4px;min-height:48px}

 .nf-hero .nf-scatter{padding:10px 0 10px 12px}
}
@media(prefers-reduced-motion:reduce){.nf-home span{transition:none}.nf-hero.nf-live .nf-visual::before,.nf-hero.nf-live .nf-orbit-dot{animation:none}}
.still .nf-home span{transition:none}
.still .nf-hero.nf-live .nf-visual::before,.still .nf-hero.nf-live .nf-orbit-dot{animation-play-state:paused}
