/* Each chapter moves with the visitor, including on a return scroll. */
.motion-line{display:block}.mission-emphasis{position:relative;isolation:isolate;white-space:nowrap}.mission-emphasis:before{content:'';position:absolute;left:-2px;right:-2px;bottom:0;height:45%;background:var(--pump);z-index:-1;transform-origin:left center}.launch-lead{display:block;font-size:.48em;line-height:1.1;margin-bottom:10px}.launch-word{display:flex;align-items:baseline;font-size:1em;letter-spacing:-.065em;line-height:.95}.launch-word>span{display:inline-block}.launch h2{font-size:clamp(4rem,13.4vw,13rem);margin-block:46px 36px}.launch{overflow:clip}
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
#mission{view-timeline-name:--mission-section;view-timeline-axis:block}#october{view-timeline-name:--october-section;view-timeline-axis:block}#streams{view-timeline-name:--streams-section;view-timeline-axis:block}#roster{view-timeline-name:--roster-section;view-timeline-axis:block}#token{view-timeline-name:--token-section;view-timeline-axis:block}.faq{view-timeline-name:--faq-section;view-timeline-axis:block}#launch{view-timeline-name:--launch-section;view-timeline-axis:block}
/* Giving: two clean wipes and a mint highlighter through the mission. */
.mission h2 .motion-line{animation:mission-line linear both;animation-timeline:--mission-section;animation-range:entry 0% entry 75%}.mission h2 .motion-line:last-child{animation-range:entry 12% entry 90%}.mission-emphasis:before{animation:mission-highlight linear both;animation-timeline:--mission-section;animation-range:entry 25% entry 85%}.mission-emphasis:nth-child(2):before{animation-range:entry 35% entry 90%}.mission-emphasis:nth-child(3):before{animation-range:entry 45% entry 100%}.mission-copy>p:not(.large-copy){animation:copy-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
/* This month: the awareness poster lands while the copy arrives in two beats. */
.october-poster{animation:awareness-poster linear both;animation-timeline:view();animation-range:entry 0% entry 90%;transform-origin:50% 80%}.october-copy .motion-line{animation:heading-swing linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.october-copy .motion-line:last-child{animation-name:heading-swing-reverse}.monthly-rail>div{animation:rail-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.monthly-rail>div:nth-child(2){animation-range:entry 10% entry 100%}.monthly-rail>div:nth-child(3){animation-range:entry 20% entry 100%}
/* Streams: the viewing window opens; the player stays independently interactive. */
.streams-heading .motion-line{animation:stream-heading linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.streams-heading .motion-line:last-child{animation-name:heading-swing-reverse}.watch-shell{animation:stream-window linear both;animation-timeline:view();animation-range:entry 0% entry 75%;transform-origin:50% 20%}.watch-tabs{animation:tab-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.watch-shell:focus-within{animation:none;transform:none;clip-path:none}
/* Roster: the six cards fan into their character-select positions. */
.roster-heading .motion-line{animation:roster-heading linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.roster-heading .motion-line:last-child{animation-name:heading-swing-reverse}.guest-card{--fan-angle:-7deg;--fan-x:-18px;animation:guest-fan linear both;animation-timeline:view();animation-range:entry 0% entry 90%;transform-origin:50% 100%}.guest-card:nth-child(3n+2){--fan-angle:0deg;--fan-x:0px}.guest-card:nth-child(3n){--fan-angle:7deg;--fan-x:18px}.guest-card:focus-visible{animation:none;transform:none}.motion-ready .guest-card.is-visible:hover{scale:1.025;transition:scale .2s,border-color .2s}.guest-details{animation:inspector-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 65%}
/* Token: the real 75 / 5 / 20 allocation draws into view, without changing its values. */
.token-heading .motion-line{animation:heading-swing linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.allocation{animation:allocation-draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.allocation-details h3{animation:allocation-number linear both;animation-timeline:view();animation-range:entry 0% entry 100%;transform-origin:0 100%}.fee-symbol{animation:purpose-turn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
/* Questions arrive in a gentle sequence; expanded answers stay readable. */
.faq h2{animation:heading-swing linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.faq-list details{animation:question-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 90%}.faq-list details:nth-child(even){animation-name:question-arrive-reverse}.faq-list details:focus-within,.faq-list details[open]{animation:none;transform:none}
/* The finale: a large OUWEE! lands one letter at a time. */
.launch h2{animation:none;transform:none}.launch-lead{animation:launch-lead-in linear both;animation-timeline:--launch-section;animation-range:entry 0% entry 60%}.launch-word>span{animation:finale-letter linear both;animation-timeline:--launch-section;animation-range:entry calc(var(--char)*6%) entry calc(65% + var(--char)*6%);transform-origin:50% 100%}.launch-state{animation:launch-ticket linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.site-footer .footer-main>.social-links{animation:footer-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
@keyframes mission-line{from{clip-path:inset(0 100% 0 0);transform:translateX(-35px) rotate(-2deg)}to{clip-path:inset(0 0 0 0);transform:none}}@keyframes mission-highlight{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes copy-arrive{from{transform:translateX(25px);opacity:.35}to{transform:none;opacity:1}}
@keyframes awareness-poster{from{transform:perspective(1000px) rotateY(-16deg) rotateZ(9deg) translateY(40px) scale(.9)}to{transform:perspective(1000px) rotateY(0) rotateZ(-2deg) translateY(0) scale(1)}}@keyframes heading-swing{from{transform:translateX(-45px) rotate(-3deg);opacity:.2}to{transform:none;opacity:1}}@keyframes heading-swing-reverse{from{transform:translateX(45px) rotate(3deg);opacity:.2}to{transform:none;opacity:1}}@keyframes rail-arrive{from{transform:translateY(24px);opacity:.25}to{transform:none;opacity:1}}
@keyframes stream-heading{from{transform:translateX(-55px);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}@keyframes stream-window{from{transform:perspective(1200px) rotateX(4deg) scale(.96)}to{transform:perspective(1200px) rotateX(0) scale(1)}}@keyframes tab-arrive{from{transform:translateY(20px) scaleX(.94)}to{transform:none}}
@keyframes roster-heading{from{transform:translateY(35px) rotate(-4deg);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}@keyframes guest-fan{from{transform:translate(var(--fan-x),45px) rotate(var(--fan-angle)) scale(.87)}to{transform:translate(0,0) rotate(0) scale(1)}}@keyframes inspector-arrive{from{transform:translateX(35px);opacity:.3}to{transform:none;opacity:1}}
@keyframes allocation-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes allocation-number{from{transform:translateY(28px) rotate(-7deg) scale(.88);opacity:.2}to{transform:none;opacity:1}}@keyframes purpose-turn{from{transform:rotate(-90deg)}to{transform:rotate(90deg)}}
@keyframes question-arrive{from{transform:translateX(25px);opacity:.25}to{transform:none;opacity:1}}@keyframes question-arrive-reverse{from{transform:translateX(-25px);opacity:.25}to{transform:none;opacity:1}}@keyframes launch-lead-in{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}@keyframes finale-letter{from{transform:translateY(85px) rotate(12deg) scale(.8);opacity:0}to{transform:translateY(0) rotate(0) scale(1);opacity:1}}@keyframes launch-ticket{from{transform:translateY(30px) rotate(4deg)}to{transform:none}}@keyframes footer-arrive{from{transform:translateY(20px);opacity:.3}to{transform:none;opacity:1}}
}}
@media(max-width:700px){.launch h2{font-size:clamp(4rem,14vw,6rem)}.launch-lead{font-size:.5em}.launch-word{letter-spacing:-.075em}.mission-emphasis{white-space:normal}}
@media(prefers-reduced-motion:reduce){.mission-emphasis:before{transform:none}.launch-word>span{transform:none;opacity:1}}

@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
.watch-shell{position:relative}.watch-shell:before{content:'';position:absolute;inset:-1px;border:1px solid var(--pump);z-index:2;pointer-events:none;animation:stream-frame-draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
@keyframes stream-frame-draw{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
}}
/* Clip the console corners without making it a separate scroll container. */
.roster-console{overflow:clip}
/* Side entrances stay inside the page even at the smallest phone widths. */
.mission,.october,.streams,.roster,.token,.faq{overflow-x:clip;overflow-y:visible}