/* Page-entry choreography. The same alphabet sequence runs on every tab. */
.editorial-name>span,.hero-caption{animation:none}
.motion-title .glyph-mask{display:inline-block;vertical-align:bottom;overflow:hidden;padding:.12em .09em .15em;margin:-.12em -.09em -.15em;line-height:inherit}
.motion-title .title-glyph{display:inline-block;animation:title-reveal 860ms cubic-bezier(.16,1,.3,1) both;animation-delay:var(--letter-delay)}
.motion-title .name-aside{animation:small-enter .55s .85s both}
.hero-topline,.section-label{animation:small-enter .5s both}
.hero-caption,.page-heading>p,.contact-bottom{animation:small-enter .65s .7s both}
.will-reveal{transition-delay:var(--reveal-delay,0ms)}
@keyframes title-reveal{from{transform:translateY(115%) rotate(4deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes small-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* The chapter is pinned with normal CSS sticky, with a finite scroll runway. */
.scene-prototype-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:17px 0 25px;gap:20px}
.enter-scene{font:inherit;font-size:12px;background:none;color:inherit;border:0;border-bottom:1px solid var(--ink);padding:6px 0;cursor:pointer}
.signal-scroll{position:relative;height:340svh;margin-inline:-4.2vw;isolation:isolate}
.signal-scroll .signal-scene{position:sticky;top:0;height:100svh;min-height:580px;width:100%;margin:0;background:var(--scene-bg,#1e192e);color:var(--scene-ink,#efeee7);overflow:hidden}
.field-grid{position:absolute;inset:0;background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:90px 90px;opacity:.06;mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.field-orbits{position:absolute;inset:5% 5% 5% 8%;height:90%;width:90%;opacity:var(--orbit-opacity,.3);transform:rotate(var(--orbit-angle,-20deg)) scale(var(--orbit-scale,1.12));transform-origin:53% 50%;will-change:transform}
.noise-marks{position:absolute;inset:0;opacity:var(--noise-opacity,.7)}
.noise-marks i{position:absolute;width:14px;height:1px;background:currentColor;transform:translate(calc(var(--noise-drift,0px) * .2),calc(var(--noise-drift,0px) * -.3)) rotate(calc(var(--n) * 37deg))}
.noise-marks i:nth-child(3n){width:3px;height:3px;border-radius:50%}
.noise-marks i:nth-child(2n){transform:translate(calc(var(--noise-drift,0px) * -.5),var(--noise-drift,0px)) rotate(calc(var(--n) * 19deg))}
.signal-scroll .scene-top{top:27px;left:4.2vw;right:4.2vw;color:inherit;z-index:5;font-size:9px}
.signal-scroll .scene-word{left:6.5%;top:20%;font-size:clamp(125px,20.5vw,320px);color:inherit;transform:translateX(var(--word-x,0px)) scale(var(--word-scale,1));transform-origin:left center;z-index:1;will-change:transform}
.scene-word-mask{display:grid;overflow:hidden;padding:0 .12em .12em 0;line-height:1.05}
.scene-word-mask>span{grid-area:1/1;will-change:transform,opacity}
.scene-word-mask>span:not(:first-child){opacity:0}
.signal-scroll .neural-form{left:29%;top:10%;width:49%;height:78%;opacity:var(--form-opacity,.12);transform:translate(var(--form-x,100px),var(--form-y,135px)) scale(var(--form-scale,.78)) rotate(var(--form-rotation,-32deg));filter:drop-shadow(8px 26px 25px #1e192e30);z-index:2;will-change:transform}
.neural-contours path{transform-box:fill-box;transform-origin:center}
.signal-scroll .signal-orb{right:13%;top:17%;width:clamp(130px,18vw,260px);height:auto;aspect-ratio:1;transform:translate(var(--orb-x,180px),var(--orb-y,-110px)) scale(var(--orb-scale,.55));z-index:1;will-change:transform}
.signal-scroll .signal-card{left:13%;bottom:26%;width:27%;max-width:360px;opacity:var(--card-opacity,0);transform:translate(var(--card-x,-160px),var(--card-y,130px)) rotate(var(--card-rotation,-21deg));z-index:4;will-change:transform,opacity}
.signal-card path{stroke-dasharray:700;stroke-dashoffset:var(--wave-offset,700)}
.scene-narration{position:absolute;right:5%;bottom:25%;width:21%;z-index:4}
.scene-narration>.eyebrow{font-size:8px;letter-spacing:.9px}
.narration-mask{display:grid;overflow:hidden;margin-top:20px}
.narration-mask>p{grid-area:1/1;font-size:clamp(16px,1.65vw,25px);line-height:1.3;letter-spacing:-.5px;margin:0;will-change:transform,opacity}
.narration-mask>p:not(:first-child){opacity:0}
.signal-scroll .scene-bottom{left:4.2vw;right:4.2vw;bottom:96px;z-index:5;align-items:center;gap:25px}
.scene-stage-tabs{display:flex;gap:30px}
.scene-stage-tabs button{font:inherit;font-size:10px;letter-spacing:.7px;color:inherit;border:0;border-bottom:1px solid transparent;background:none;padding:10px 0;cursor:pointer;opacity:.5}
.scene-stage-tabs button[aria-pressed=true]{opacity:1;border-bottom-color:currentColor}
.scene-stage-tabs button:hover{opacity:1}
.scene-disclaimer{text-align:right;font-size:8px;line-height:1.5}
.scene-controls{position:absolute;bottom:28px;left:4.2vw;right:4.2vw;z-index:5;display:flex;align-items:center;gap:25px;border-top:1px solid currentColor;padding-top:19px;font-size:9px;letter-spacing:.7px}
.scene-controls label{white-space:nowrap;font-size:8px}
.scene-controls input{min-width:40px;flex:1;height:18px;margin:0;accent-color:currentColor;cursor:ew-resize}
.scene-controls output{font-variant-numeric:tabular-nums;min-width:36px}
.scene-exit{font:inherit;white-space:nowrap;background:none;border:0;color:inherit;cursor:pointer;padding:6px 0;font-size:11px;letter-spacing:0}
.signal-scene button:focus-visible,.signal-scene input:focus-visible,.enter-scene:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.project-footnote{position:relative;background:var(--paper);scroll-margin-top:35px}
@media(max-width:900px){
  .signal-scroll .neural-form{width:65%;left:20%;height:72%;top:10%}
  .signal-scroll .signal-card{left:8%;width:32%;bottom:30%}
  .scene-narration{right:5%;width:26%;bottom:27%}
  .scene-stage-tabs{gap:20px}
}
@media(max-width:600px){
  .scene-prototype-heading>.eyebrow{font-size:8px;letter-spacing:.5px}
  .enter-scene{font-size:10px}
  .signal-scroll{height:300svh;margin-inline:-6vw}
  .signal-scroll .signal-scene{height:100svh;min-height:560px}
  .signal-scroll .scene-top{left:6vw;right:6vw;top:22px;font-size:7px}
  .field-grid{background-size:55px 55px}
  .field-orbits{inset:5% -25%;width:150%;height:77%}
  .signal-scroll .scene-word{top:16%;left:6%;font-size:29vw;transform:translateX(calc(var(--word-x,0px) * .25)) scale(var(--word-scale,1))}
  .signal-scroll .neural-form{width:91%;height:58%;left:12%;top:19%}
  .signal-scroll .signal-orb{width:110px;right:7%;top:28%}
  .signal-scroll .signal-card{left:7%;bottom:32%;width:44%;padding:15px}
  .scene-narration{left:54%;right:6%;width:auto;bottom:23%}
  .scene-narration>.eyebrow{display:none}
  .narration-mask{margin-top:0}
  .narration-mask>p{font-size:15px;line-height:1.3}
  .signal-scroll .scene-bottom{left:6vw;right:6vw;bottom:102px;display:block}
  .scene-stage-tabs{gap:0;justify-content:space-between}
  .scene-stage-tabs button{font-size:8px;letter-spacing:.4px}
  .scene-disclaimer{display:block;text-align:left;font-size:6px;margin-top:8px;opacity:.65}
  .scene-disclaimer br{display:none}
  .scene-controls{left:6vw;right:6vw;bottom:24px;gap:12px;padding-top:12px}
  .scene-controls label{position:absolute;top:-15px;font-size:6px}
  .scene-controls input{min-width:60px}
  .scene-controls output{font-size:8px;min-width:31px}
  .scene-exit{font-size:10px}
}
@media(max-height:620px) and (min-width:601px){
  .signal-scroll .signal-scene{min-height:430px}
  .signal-scroll .scene-word{top:17%;font-size:17vw}
  .signal-scroll .neural-form{top:7%;height:76%}
  .signal-scroll .signal-card{bottom:27%;width:23%;padding:14px}
  .signal-card svg{margin:12px 0 6px}
  .scene-narration{bottom:31%}
  .signal-scroll .scene-bottom{bottom:80px}
  .scene-controls{bottom:18px;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .motion-title .title-glyph,.motion-title .name-aside,.hero-topline,.section-label,.hero-caption,.page-heading>p,.contact-bottom{animation:none}
  .will-reveal{transition:none;opacity:1;translate:none}
  .signal-scroll{height:auto}
  .signal-scroll .signal-scene{position:relative;height:820px;max-height:none}
  .field-orbits,.signal-scroll .neural-form,.signal-scroll .signal-card,.signal-scroll .signal-orb,.signal-scroll .scene-word{will-change:auto}
  .scene-controls label{font-size:0}
  .scene-controls label::after{content:'EXPLORE THE THREE STAGES';font-size:8px}
}