/* One input travels through the system. Scroll is the clock. */
.recording-story{--story-source:0;--story-gear:1;--story-gearScale:.64;--story-turn:0;--story-expertise:0;--story-system:0;--story-output:1;--story-steps:0;--story-play:0;--story-transfer:1;--story-outputs:1}
.recording-story.is-fan-ready:not(.is-fan-static){height:calc(100svh + 260svh)}
.story-heading{height:108px;position:relative;text-align:center;z-index:8;pointer-events:none}
.story-beat{position:absolute;inset:8px 0 auto;margin:0;font:550 clamp(30px,3.2vw,46px)/1.12 Raleway,sans-serif;letter-spacing:-.035em;color:#f5edf8;opacity:var(--beat-opacity);transform:translateY(calc((1 - var(--beat-opacity))*10px))}
.story-beat span{display:block;color:#d6acdF;font-size:.62em;line-height:1.5;letter-spacing:-.015em;margin-top:8px}
.story-expertise{--beat-opacity:var(--story-expertise)}.story-system{--beat-opacity:var(--story-system)}.story-output{--beat-opacity:var(--story-output)}
.recording-story .ripple-board{height:600px}
.recording-story.is-fan-ready:not(.is-fan-static) .ripple-board{height:calc(100svh - var(--fan-bar) - 180px);min-height:350px;max-height:680px}
.recording-story .ripple-rings{opacity:calc(.15 + var(--story-outputs)*.65)}
.recording-story .ripple-rings i{border-color:#b28fcf33}
.recording-story .interview-core{width:clamp(220px,28vw,320px);aspect-ratio:16/11;overflow:hidden;background:linear-gradient(145deg,#302634,#17151e);border:1px solid #d7b9e580;box-shadow:0 24px 64px #05040b66;opacity:var(--story-source);transform:translate(-50%,-50%) translate(var(--source-x,0px),var(--source-y,0px)) scale(calc(1 - var(--story-transfer)*.62)) rotate(calc(var(--story-transfer)*-8deg));z-index:5}
.presenter-symbol{position:absolute;width:60%;height:75%;left:20%;bottom:32px;stroke:#e7cdec;stroke-width:1.5;fill:#ad85b933;opacity:calc(1 - var(--story-play)*.5)}
.recording-story .interview-caption{position:absolute;inset:auto 0 0;margin:0;background:#17131eeb;font-size:14px!important;padding:12px!important;opacity:calc(1 - var(--story-transfer))}
.recording-frame{position:absolute;inset:16px;border:1px solid #d7b9e533;border-radius:12px}
.recording-story .recording-dot{position:absolute;top:25px;left:25px;background:#e1a7e8;width:7px;height:7px;border-radius:50%;box-shadow:none}
.recording-play{position:absolute;width:52px;height:52px;left:calc(50% - 26px);top:calc(50% - 26px);fill:#f5e5fc;opacity:var(--story-play)}
.system-core{position:absolute;left:50%;top:50%;width:246px;height:246px;z-index:4;opacity:var(--story-gear);transform:translate(-50%,-50%) translate(var(--gear-x,0px),var(--gear-y,0px)) scale(var(--story-gearScale));pointer-events:none;color:#d8a8e8}
.system-gear{width:100%;height:100%;transform:rotate(calc(var(--story-turn)*1deg));filter:drop-shadow(0 9px 16px #b067c155)}
.system-hub{position:absolute;inset:27%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 40% 25%,#55405e,#211925 70%);border:1px solid #d9abe866;box-shadow:0 14px 40px #08050d80}
.system-hub img{width:52px;height:auto}.system-hub span{font-size:12px;white-space:nowrap;margin-top:7px;color:#f5e8fa;opacity:calc(1 - var(--story-outputs))}
.story-conduit{position:absolute;left:26%;right:27%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#e3b1ef,transparent);opacity:calc(1 - var(--story-transfer));transform:scaleX(calc(.5 + var(--story-transfer)*.5));pointer-events:none}
.system-steps{position:absolute;inset:12% 0;display:grid;grid-template-columns:1fr 1fr;align-content:space-between;column-gap:28%;padding-inline:12%;opacity:var(--story-steps);transform:translateY(calc((1 - var(--story-steps))*18px));pointer-events:none;color:#ead9ef;font-size:clamp(14px,1.5vw,18px)}
.system-steps span{max-width:18ch;padding-bottom:12px;border-bottom:1px solid #b07cc04d}.system-steps span:nth-child(even){justify-self:end;text-align:right}
.recording-story .ripple-face{filter:drop-shadow(0 5px 12px #a65ec026)}
.recording-story .ripple-symbol{filter:brightness(calc(1 + var(--near)*.3)) drop-shadow(0 5px 10px #a65ec055)}
.recording-story .ripple-caption{opacity:1;color:#ddcfe5;font-size:16px;min-height:24px;margin-top:14px}
.recording-story:not(.is-fan-ready) .system-steps,.recording-story.is-fan-static .system-steps{position:absolute;inset:auto 0 -110px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:20px 0;opacity:1;transform:none}
.recording-story:not(.is-fan-ready) .ripple-board,.recording-story.is-fan-static .ripple-board{margin-bottom:110px}
.recording-story:not(.is-fan-ready) .system-steps span,.recording-story.is-fan-static .system-steps span{max-width:none;font-size:14px}
.recording-story.is-fan-static .interview-core{display:none}.recording-story.is-fan-static .system-core{transform:translate(-50%,-50%) scale(.64)}
.recording-story.is-fan-static .story-beat{transform:none}
.story-static-intro{display:none;text-align:center;font:500 28px/1.4 Raleway,sans-serif;color:#f2e7f6;margin:16px auto 30px}
.recording-story:not(.is-fan-ready) .story-static-intro,.recording-story.is-fan-static .story-static-intro{display:block}
.recording-story:not(.is-fan-ready) .story-heading,.recording-story.is-fan-static .story-heading{display:none}
@media(max-width:700px){
 .story-heading{height:94px}.story-beat{font-size:31px;inset:10px 0 auto}.story-beat span{font-size:20px}
 .recording-story .ripple-board{height:640px}
 .recording-story.is-fan-ready:not(.is-fan-static) .ripple-board{height:calc(100svh - var(--fan-bar) - 174px);min-height:380px}
 .recording-story .interview-core{width:220px}.system-core{width:190px;height:190px}.system-hub img{width:42px}.system-hub span{font-size:12px;transform:scale(.85)}
 .story-conduit{left:50%;right:auto;top:26%;height:46%;width:1px;transform:scaleY(calc(.5 + var(--story-transfer)*.5));background:linear-gradient(transparent,#e3b1ef,transparent)}
 .system-steps{inset:9% 0;padding-inline:14px;column-gap:18px;font-size:14px;line-height:1.4}.system-steps span{max-width:13ch}
 .recording-story .ripple-caption{font-size:14px;max-width:28ch;line-height:1.5;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.recording-story .story-beat{transform:none}.system-gear{transform:none;filter:none}.recording-story .ripple-face{filter:none}}