/* One continuous poster, with motion tied to the reader's position. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--page-progress:0;--hero-drift:0px;--hero-turn:-4deg;--lore-turn:-3deg;--lore-drift:0px;--story-progress:0;--receipt-turn:5deg;--receipt-scale:.94;--outro-x:70px;--join-x:90px}
.scroll-progress{position:fixed;z-index:50;top:0;left:0;height:4px;width:100%;background:var(--red);transform:scaleX(var(--page-progress));transform-origin:left;pointer-events:none;mix-blend-mode:difference}
.header{position:relative;z-index:10}.header nav{gap:25px}.hero{position:relative;padding-bottom:55px;background:radial-gradient(ellipse at 76% 38%,#ff6b54 0,transparent 54%),var(--red)}
.hero-line{display:block}.motion-ready .hero-line{animation:headline-in .95s var(--ease-out) both}.motion-ready .hero-line:nth-child(2){animation-delay:.09s}.motion-ready .hero-line:nth-child(3){animation-delay:.18s}.motion-ready .hero-copy>p,.motion-ready .hero-actions{animation:headline-in 1s .3s var(--ease-out) both}
.hero-art .main-cat{transform:translate3d(0,var(--hero-drift),0) rotate(var(--hero-turn));will-change:transform}.art-note{animation:note-float 5s ease-in-out infinite}.sticker{animation:sticker-rock 6s ease-in-out infinite}.hero-art:before{content:'';position:absolute;inset:14% 2% 13%;border:1px solid #17171530;border-radius:50%;transform:rotate(-25deg);pointer-events:none}
.ticker{position:relative;margin-top:-20px;z-index:3;transform:rotate(-2deg) scale(1.025);border-width:3px 0;box-shadow:0 12px 0 #17171510}.ticker .ticker-track{display:flex;gap:0;padding:0;transform:none;animation:ticker-loop 28s linear infinite}.ticker-track>div{display:flex;align-items:center;gap:34px;padding:19px 17px;width:max-content;flex-shrink:0}.ticker:hover .ticker-track{animation-play-state:paused}.ticker b{display:inline-block;animation:asterisk-turn 12s linear infinite}
.lore{padding-top:85px;padding-bottom:130px;position:relative;background:var(--cream)}.lore-image{transform:translate3d(0,var(--lore-drift),0) rotate(var(--lore-turn));will-change:transform}.lore-copy h2{font-size:clamp(48px,5vw,76px)}.chapters article{transition:background .3s,transform .4s var(--ease-out)}.chapters article:hover{background:#ef282f0a;transform:translateY(-5px)}.chapter-no{transition:transform .5s var(--ease-out)}.chapters article:hover .chapter-no{transform:rotate(-10deg) scale(1.15)}
.origin{position:relative;padding-top:70px;padding-bottom:0;background:var(--ink);border-radius:64px 64px 0 0;margin-top:-64px;z-index:2}.origin:before{content:'';position:absolute;height:130px;left:0;right:0;top:-130px;background:linear-gradient(transparent,#1717150a);pointer-events:none}.origin-scroll{height:190vh;min-height:1100px}.origin-stage{display:grid;grid-template-columns:1.03fr 1fr;gap:7%;align-items:center;position:sticky;top:30px;min-height:min(850px,calc(100vh - 40px));padding:65px 0}.evidence-visual{min-width:0;perspective:1100px}.evidence-title,.evidence-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;font:11px/1.5 var(--mono);color:#b6b3a9}.evidence-title{margin:0 0 30px}.evidence-title .eyebrow{font-size:11px;letter-spacing:.4px}.record-status{display:flex;align-items:center;gap:8px;font-size:10px;white-space:nowrap}.record-status i{width:6px;height:6px;border-radius:50%;background:var(--red)}.receipt{display:block;width:100%;margin:0;transform:rotate(var(--receipt-turn)) scale(var(--receipt-scale));transition:box-shadow .3s;border-color:#eee9da;box-shadow:12px 12px 0 var(--red);will-change:transform}.receipt:hover{transform:rotate(var(--receipt-turn)) scale(var(--receipt-scale));box-shadow:17px 17px 0 var(--red)}.receipt img{aspect-ratio:680/390;object-fit:contain;background:#fff}.receipt-header,.receipt-footer{font-size:11px;padding:18px}.receipt-footer strong{font-size:14px}.evidence-caption{margin:37px 0 22px;font-size:10px}.sound-bars{display:flex;align-items:center;height:28px;gap:4px}.sound-bars i{display:block;width:4px;height:24px;background:var(--red);transform-origin:50% 50%;animation:equalizer 1.1s ease-in-out infinite alternate}.sound-bars i:nth-child(2n){animation-delay:-.7s}.sound-bars i:nth-child(3n){animation-delay:-.3s}.sound-bars i:nth-child(4n){animation-delay:-.9s}.story-timeline{height:2px;background:#ffffff20}.story-timeline span{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(var(--story-progress));transform-origin:left}
.secret-story h2{font-size:clamp(42px,4.1vw,63px);margin-bottom:24px}.secret-story .tag{font-size:10px;letter-spacing:.4px}.secret-steps{margin-bottom:27px}.secret-step{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid #ffffff20;opacity:.52;transition:opacity .35s,transform .5s var(--ease-out)}.secret-step.active{opacity:1;transform:translateX(8px)}.step-index{font:24px var(--display);color:var(--red);flex-shrink:0}.secret-step h3{font-size:20px;margin-bottom:7px}.secret-step p{font-size:14px;line-height:1.65;margin:0;color:#e1ddd3}.origin-outro{overflow:hidden;padding:12px 0 48px;border-bottom:1px solid #ffffff25;white-space:nowrap}.origin-outro span{display:block;font:clamp(72px,12.3vw,190px)/1.1 var(--display);letter-spacing:-2px;color:var(--cream);transform:translate3d(var(--outro-x),0,0)}
.ca-section{position:relative;padding-top:50px;padding-bottom:145px}.ca-heading{margin-top:65px}.ca-panel{background:linear-gradient(115deg,#22221f,var(--ink));border-color:#eeeadb70;box-shadow:8px 8px 0 var(--red);transition:border-color .3s}.ca-panel:hover{border-color:var(--cream)}.ca-panel code{font-size:clamp(17px,2.16vw,32px)}
.join{isolation:isolate;padding-top:100px;padding-bottom:32px;margin-top:-65px;border-radius:64px 64px 0 0;background:radial-gradient(ellipse at 50% 50%,#ff4d44,transparent 70%),var(--red)}.join-ghost{position:absolute;z-index:-1;top:20px;left:-20%;white-space:nowrap;font:clamp(140px,24vw,360px)/1 var(--display);color:transparent;-webkit-text-stroke:1px #17171528;transform:translate3d(var(--join-x),0,0);pointer-events:none}.join h2{position:relative;font-size:clamp(75px,10vw,145px);line-height:1.02}.join-actions{margin-bottom:80px}.join-bottom{padding-top:26px}footer{padding-top:48px}.button{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s}.button span{transition:transform .35s var(--ease-out)}.button:hover span{transform:translate(3px,-3px)}
.motion-ready [data-reveal]{opacity:0;transform:translate3d(0,35px,0);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);transition-delay:var(--reveal-delay,0s)}.motion-ready [data-reveal].revealed{opacity:1;transform:translateZ(0)}
@keyframes headline-in{from{opacity:0;transform:translateY(55px) rotate(2deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}}@keyframes ticker-loop{to{transform:translateX(-50%)}}@keyframes asterisk-turn{to{transform:rotate(360deg)}}@keyframes note-float{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-12px) rotate(4deg)}}@keyframes sticker-rock{0%,100%{transform:rotate(-13deg)}50%{transform:translateY(-8px) rotate(-5deg)}}@keyframes equalizer{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@media(min-width:701px) and (max-height:800px){.origin-stage{padding:35px 0}.secret-story h2{font-size:45px;margin-bottom:12px}.secret-story .tag{margin-bottom:14px}.secret-step{padding:12px 0}.secret-step p{font-size:14px;line-height:1.5}.secret-step h3{font-size:18px}.secret-steps{margin-bottom:18px}}
@media(max-width:950px){.header nav{gap:17px;font-size:12px}.origin-stage{gap:5%}.record-status{display:none}.secret-story h2{font-size:42px}.secret-step{gap:12px}.secret-step h3{font-size:18px}.receipt-header,.receipt-footer{padding:14px}.footer-bottom{flex-wrap:wrap}.hero-art:before{inset:25% 0}}
@media(max-width:700px){.hero{padding-bottom:38px}.hero-copy h1{font-size:clamp(62px,14.5vw,100px)}.hero-art .main-cat{transform:translate3d(0,calc(var(--hero-drift)*.45),0) rotate(var(--hero-turn))}.hero-art:before{inset:12% 5%}.ticker-track>div{gap:24px;padding:15px 12px}.lore{padding-top:60px;padding-bottom:100px}.lore-copy h2{font-size:52px}.origin{border-radius:32px 32px 0 0;margin-top:-32px;padding-top:40px}.origin-scroll{height:auto;min-height:0}.origin-stage{display:flex;flex-direction:column;align-items:stretch;position:relative;top:auto;padding:38px 0 30px;gap:50px;min-height:0}.evidence-visual{padding:0 8px}.evidence-title{margin-bottom:24px}.evidence-title .eyebrow{font-size:11px}.evidence-caption{font-size:9px;margin-top:28px;gap:12px}.receipt{width:100%}.receipt-header,.receipt-footer{font-size:10px}.secret-story h2{font-size:clamp(39px,10.5vw,60px)}.secret-story .tag{font-size:9px}.secret-step p{font-size:16px;line-height:1.65}.secret-step h3{font-size:21px}.secret-step{opacity:1;padding:20px 0;gap:16px}.secret-step.active{transform:none}.origin-outro{padding:15px 0 28px}.origin-outro span{font-size:21vw}.ca-section{padding-top:35px;padding-bottom:95px}.ca-heading{margin-top:35px}.ca-panel code{font-size:18px}.join{margin-top:-32px;border-radius:32px 32px 0 0;padding-top:65px}.join h2{font-size:clamp(63px,14.5vw,105px)}.join-actions{margin-bottom:55px}.join-ghost{top:80px;font-size:45vw}.footer-bottom{gap:10px 14px}.footer-hint{width:100%;padding-left:8px}.eyebrow{font-size:11px}}
/* Motion is optional; content and actions remain available in either mode. */
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}.motion-paused [data-reveal]{opacity:1;transform:none}.motion-paused .hero-line,.motion-paused .hero-copy>p,.motion-paused .hero-actions{animation:none;opacity:1;transform:none;clip-path:none}.motion-paused .secret-step{opacity:1;transform:none}.motion-paused .origin-scroll{height:auto;min-height:0}.motion-paused .origin-stage{position:relative;top:0}
@media(prefers-reduced-motion:reduce){.motion-ready [data-reveal]{opacity:1;transform:none}.secret-step{opacity:1;transform:none}.origin-scroll{height:auto;min-height:0}.origin-stage{position:relative;top:0}.hero-art .main-cat{transform:rotate(-4deg)}.lore-image{transform:rotate(-3deg)}.receipt{transform:none}.origin-outro span,.join-ghost{transform:none}.hero-line{clip-path:none}}
main{overflow:clip}
/* Keep the artwork inside its own space and only animate layers in view. */
.hero-art{padding:25px 0 55px;isolation:isolate}.hero-art .main-cat{width:100%;margin:0;max-width:100%}.contract{position:relative;z-index:3}.hero-art .image-caption{bottom:16px}.hero-art .sticker{bottom:65px}.receipt{will-change:transform;backface-visibility:hidden}.motion-offscreen,.motion-offscreen *,.page-hidden *{animation-play-state:paused!important}.hero-line{clip-path:none}
@media(max-width:700px){.hero-art{padding:15px 0 38px}.hero-art .sticker{bottom:44px}.hero-art .image-caption{bottom:8px}.main-cat,.lore-image{will-change:auto}.ticker{transform:rotate(-1deg) scale(1.02)}}
.hero-art picture{display:block;width:100%;flex-shrink:0}.hero-art .main-cat{display:block}.motion-offscreen .main-cat{will-change:auto}
