/* Cinematic motion on the existing Stage 02 base. Television remains a flat PNG. */
html{scroll-behavior:smooth}
body{overflow-x:clip}
.hero-scroll-scene{position:relative}
.hero-art{background:none;aspect-ratio:1/1;top:35px;width:49%;overflow:visible;will-change:transform;transform-origin:55% 55%}
.hero-art:before,.hero-art:after{display:none}
.tv-drift{position:absolute;inset:0;z-index:3;will-change:transform;animation:tv-float 7.8s cubic-bezier(.45,0,.55,1) infinite}
.tv-pointer{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}
.tv-image{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 28px #0009);user-select:none;-webkit-user-drag:none}
.tv-screen-name{position:absolute;left:46%;top:34%;width:36%;height:29%;display:grid;place-items:center;transform:rotate(12deg) skewY(1deg);direction:ltr;color:var(--cream);font:clamp(23px,3vw,49px)/1 Anton,sans-serif;letter-spacing:-1px;text-shadow:1px 1px #ff2934,0 0 14px #ff293437;pointer-events:none;overflow:hidden}
.scene-halo{position:absolute;inset:6% -4% 2% 5%;background:radial-gradient(ellipse at 62% 55%,#ff293414,transparent 65%);z-index:0}
.floating-object{position:absolute;will-change:transform;pointer-events:none}
.object-drift{width:100%;height:100%;animation:object-float 9s ease-in-out infinite}
.print-panel{width:36%;height:68%;right:3%;top:11%;z-index:1;transform:rotate(5deg)}
.print-panel .object-drift{background-color:#a51e24;background-image:radial-gradient(#111 1px,transparent 1.5px);background-size:4px 4px;opacity:.85;clip-path:polygon(0 0,100% 3%,96% 100%,7% 96%);animation-duration:10.4s;animation-delay:-3s}
.orbit-ring{left:4%;top:34%;width:101%;height:26%;z-index:4;transform:rotate(-24deg)}
.orbit-ring .object-drift{border:1px solid #ff2934b0;border-radius:50%;animation-duration:11.5s;animation-delay:-5s}
.print-square{left:9%;top:17%;width:12%;aspect-ratio:1;z-index:2;transform:rotate(-12deg)}
.print-square .object-drift{border:1px solid #eee3cd72;background-image:radial-gradient(#eee3cd 1px,transparent 1px);background-size:5px 5px;animation-duration:8.4s;animation-delay:-2s}
.register-one,.register-two{width:28px;height:28px;font:30px/28px monospace;color:#eee3cd8c;z-index:4;direction:ltr}
.register-one{left:1%;top:10%}.register-two{right:0;bottom:13%}.register-one .object-drift{animation-duration:7.3s}.register-two .object-drift{animation-duration:9.8s;animation-delay:-4s}
.scene-caption{position:absolute;bottom:4%;right:6%;font:9px monospace;letter-spacing:2px;color:var(--muted);direction:ltr;z-index:4}
.motion-ready .hero h1>span{animation:headline-in 1.12s cubic-bezier(.16,1,.3,1) both;transform-origin:left bottom}
.motion-ready .hero h1>span:nth-child(2){animation-delay:.15s}.motion-ready .hero h1>span:nth-child(3){animation-delay:.3s}
.motion-ready .hero .status{animation:copy-in .85s .12s both}.motion-ready .hero .description{animation:copy-in .9s .5s both}.motion-ready .hero .actions{animation:copy-in .9s .64s both}
.motion-ready .hero-art{animation:scene-in 1.3s .2s cubic-bezier(.16,1,.3,1) backwards}
.motion-ready .header{animation:copy-in .85s both}
.motion-ready .reveal{opacity:0;transform:translateY(25px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .project-card.is-visible .featured-badge{animation:stamp-in .24s .35s cubic-bezier(.2,.9,.2,1) both}
.motion-ready .section-heading.reveal{transition-duration:.55s,.7s;transform:translateY(16px)}
.motion-ready .section-heading.is-visible{transform:translateY(0)}
.section-heading .rule{transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}.motion-ready .section-heading.reveal:not(.is-visible) .rule{transform:scaleX(.2)}
.thumbnail-still{transition:transform .8s cubic-bezier(.16,1,.3,1),filter .65s ease}.real-thumbnail .play{transition:background .25s,transform .5s cubic-bezier(.16,1,.3,1),border-color .25s}.real-thumbnail:hover .thumbnail-still,.real-thumbnail:focus-visible .thumbnail-still{transform:scale(1.035)}.real-thumbnail:hover .play,.real-thumbnail:focus-visible .play{background:#ff2934d9;border-color:var(--red);transform:translate(-50%,-50%) scale(1.08)}
.filters button,.talk,.primary,.secondary,.contact-links a{transition:background .2s,color .2s,border-color .2s,box-shadow .2s}.filters button:hover:not(.active){border-color:var(--cream)}.talk:hover,.secondary:hover{background:#eee3cd0d;box-shadow:3px 3px 0 #ff293440}.primary:not(:disabled):hover{background:#eee3cd;border-color:#eee3cd}.contact-links a:hover{color:var(--red)}
dialog[open]{animation:dialog-in .38s cubic-bezier(.16,1,.3,1)}dialog[open]::backdrop{animation:backdrop-in .3s ease}
.modal-open .object-drift,.modal-open .tv-drift{animation-play-state:paused}
.scene-offscreen .object-drift,.scene-offscreen .tv-drift{animation-play-state:paused}
@keyframes tv-float{0%,100%{transform:translateY(-8px) rotate(-.7deg)}50%{transform:translateY(8px) rotate(.7deg)}}
@keyframes object-float{0%,100%{transform:translate3d(0,-10px,0) rotate(-1.5deg)}50%{transform:translate3d(6px,10px,0) rotate(1.5deg)}}
@keyframes headline-in{from{opacity:0;transform:translateY(48px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-in{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes stamp-in{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-4px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}}
@media(min-width:851px) and (min-height:600px){
 .motion-ready .hero-scroll-scene{height:155svh;min-height:1000px}
 .motion-ready .hero{position:sticky;top:0;height:100svh;min-height:650px;max-height:1000px;align-items:center;border-bottom-color:transparent;perspective:1200px}
 .motion-ready .hero-copy{transform:translate3d(var(--copy-x,0px),var(--copy-y,0px),0);opacity:var(--copy-opacity,1);will-change:transform,opacity}
 .motion-ready .hero .scroll{opacity:var(--scroll-opacity,1)}
 .motion-ready .hero-art{top:50%;margin-top:-24%;transform:translate3d(var(--tv-x,0px),var(--tv-y,0px),0) rotate(var(--tv-rotation,0deg)) scale(var(--tv-scale,1))}
 .motion-ready .hero-scroll-scene:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}
}
@media(max-width:850px){.hero-art{position:relative;top:auto;right:auto;width:100%;max-width:570px;margin:20px auto 0}.hero{display:block;min-height:0;padding-bottom:38px}.hero-copy{width:100%;padding-bottom:0}.hero h1{font-size:clamp(70px,13vw,105px)}.hero .description{max-width:600px}.hero .scroll{position:static;display:block;margin:15px 0 0}.tv-screen-name{font-size:clamp(26px,6vw,43px)}.scene-caption{font-size:8px}.hero-art .print-square{width:10%}}
@media(max-width:650px){.hero h1{font-size:19vw}.tv-screen-name{font-size:7vw}.hero-art{margin:10px auto 0}.hero{padding-bottom:30px}.orbit-ring{width:95%;left:2%}.scene-caption{letter-spacing:1px;font-size:7px}.register-one,.register-two{font-size:23px}.print-panel{right:6%}.tv-drift{animation-duration:9s}.object-drift{animation-duration:12s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-scroll-scene{height:auto!important;min-height:0!important}.hero{position:relative!important;height:auto!important;max-height:none!important}.hero-copy,.hero-art{transform:none!important;opacity:1!important;will-change:auto}.tv-pointer{transform:none!important}.motion-ready .hero-art{top:35px;margin-top:0}.reveal{opacity:1!important;transform:none!important}.motion-ready *,.motion-ready *:before,.motion-ready *:after{animation:none!important;transition:none!important}.tv-drift,.floating-object{will-change:auto}}