/* Scroll is the timeline: the scene stays in view while its composition changes. */
.cinema-on .hero-sequence{height:170svh;position:relative;z-index:0}
.cinema-on .hero{position:sticky;top:0;height:100svh;min-height:680px;max-height:none;overflow:clip}
.cinema-on .hero-copy{will-change:transform,opacity;transform-origin:25% 50%}
.cinema-on .hero-art{will-change:transform,opacity;transition:none}
.cinema-on .hero-art .glass-frame{animation:none}
.cinema-on .hero-art .frame-front{transform:translateY(calc(var(--hero-p,0) * -35px)) rotate(calc(-12deg + var(--hero-p,0) * 28deg)) rotateY(calc(-25deg + var(--hero-p,0) * 45deg))}
.cinema-on .hero-art .frame-back{transform:translate(calc(-85px - var(--hero-p,0) * 95px),calc(12px + var(--hero-p,0) * 60px)) rotate(calc(-24deg - var(--hero-p,0) * 20deg)) rotateY(-25deg)}
.cinema-on .hero-bottom,.cinema-on .hero-top{will-change:opacity,transform}
.cinema-on .hero-bottom{bottom:11%}
.cinema-on .hero-time{bottom:6%}
.cinema-on .hero-copy{top:26%}
.cinema-on .hero-art{top:12%}
.cinema-on .hero-curtain{position:absolute;inset:0;background:#070a10;pointer-events:none;z-index:9;opacity:0}
.cinema-on .about{margin-top:-24svh;z-index:2;background:transparent;border-radius:0;overflow:visible;padding:0}
.about-stage{background:#eaf2fa;color:#101722;position:relative;overflow:hidden;padding:65px 8% 100px;border-radius:48px 48px 0 0;transform-origin:50% 0}
.cinema-on .about-stage{will-change:transform,border-radius}
.cinema-on .about-layout.reveal-ready,.cinema-on .project.reveal-ready,.cinema-on .section-heading.reveal-ready,.cinema-on .contact-head.reveal-ready{opacity:1;transform:none}
.cinema-on .about .section-label>span:first-child{color:#246ce3}
.cinema-on .about-watermark{transform:translateX(calc(var(--about-p,0) * -80px));font-size:240px;bottom:-65px}
.cinema-on .intro{position:relative;color:#91a2b8}
.cinema-on .intro .reading-word{color:#91a2b8;transition:color .28s}
.cinema-on .intro .reading-word.read{color:#101722}
.cinema-on .marquee{position:relative;z-index:3;transform:rotate(calc(-3deg + var(--marquee-p,0) * 5deg));margin-top:-1px}
.cinema-on .marquee>div{animation:none;transform:translateX(var(--marquee-x,0px));will-change:transform}
.cinema-on .work{position:relative;padding:0;z-index:3;background:var(--bg)}
.cinema-on .work-stage{position:sticky;top:0;height:100svh;min-height:680px;padding:100px 7% 48px;overflow:clip;display:flex;flex-direction:column;justify-content:center}
.cinema-on .work .section-label{margin-bottom:24px;flex-shrink:0}
.cinema-on .work .section-heading{margin-bottom:26px;flex-shrink:0;align-items:center}
.cinema-on .work h2{font-size:clamp(64px,7.5vw,112px)}
.cinema-on .work .section-heading>p{font-size:11px}
.cinema-on .work .demo-note{font-size:8px;margin-top:9px}
.cinema-on .work .filters{margin-bottom:23px;flex-shrink:0}
.cinema-on .work .filters button{padding-bottom:12px}
.cinema-on .work-viewport{width:100%;overflow:visible;position:relative}
.cinema-on .projects{display:flex;gap:30px;width:max-content;will-change:transform;transform:translate3d(var(--track-x,0px),0,0)}
.cinema-on .project{width:clamp(340px,43vw,670px);flex-shrink:0;transform-origin:50% 65%;will-change:transform,opacity}
.cinema-on .project-art{aspect-ratio:1.85;max-height:38svh}
.cinema-on .project:hover .project-art{transform:translateY(-3px)}
.cinema-on .project-description{padding-bottom:4px;padding-top:13px}
.cinema-on .project-description h3{font-size:14px}
.cinema-on .work .kinetic-words{font-size:clamp(70px,7.6vw,120px);top:22%;left:12%}
.cinema-on .work .film-title{font-size:clamp(52px,5.4vw,86px);top:23%}
.cinema-on .work .brand-title{font-size:clamp(80px,8vw,120px);top:29%}
.cinema-on .work .social-big{font-size:clamp(31px,3.6vw,52px);margin-top:16%}
.cinema-on .work .social-side{font-size:clamp(30px,3.4vw,48px)}
.work-controlbar{display:flex;align-items:center;gap:25px;margin-top:21px;color:#8da3bf;position:relative;z-index:5}
.work-meter{width:150px;height:1px;background:#8bbfff30;position:relative}
.work-meter i{position:absolute;width:25%;height:2px;top:-1px;background:var(--ice);transform:translateX(var(--meter-x,0%));will-change:transform}
.work-counter{font-family:var(--heading);font-size:20px;color:var(--ice);font-variant-numeric:tabular-nums;min-width:55px}
.work-counter small{font-size:12px;color:#677d9c}
.work-scroll-hint{font-size:7px;letter-spacing:1.7px;margin-left:auto}
.work-arrows{display:flex;gap:7px}
.work-arrows button{width:32px;height:32px;border:1px solid #8bbfff33;background:none;color:var(--ice);font-size:17px;border-radius:50%;transition:background .25s}
.work-arrows button:hover{background:#2678ff44}
.work-arrows button:disabled{opacity:.2;cursor:default}
.cinema-on .services{position:relative;z-index:4;background:radial-gradient(ellipse at 20% 70%,#12376733,transparent 60%),var(--bg)}
.cinema-on .services-layout>h2{align-self:start;position:sticky;top:125px}
.cinema-on .process{position:relative;z-index:4;transform-origin:50% 0;will-change:transform,border-radius}
.cinema-on .contact{position:relative;z-index:4;padding-top:0}
.cinema-on .contact>.section-label{padding-top:70px;margin-bottom:15px}
.cinema-on .contact-sequence{height:155svh;position:relative}
.cinema-on .contact-head{height:100svh;min-height:600px;position:sticky;top:0;will-change:transform,opacity}
.cinema-on .contact h2{font-size:clamp(90px,12.5vw,190px);will-change:transform}
.cinema-on .contact h2>span:not(.contact-period){display:inline-block;will-change:transform}
.cinema-on .contact .circle-arrow{will-change:transform}
.cinema-on .contact-bottom{margin-top:-5svh;position:relative;z-index:2;background:linear-gradient(#070a10,#070a10dd);padding-top:45px}
.scene-rail{position:fixed;right:23px;top:50%;transform:translateY(-50%);z-index:26;display:flex;flex-direction:column;gap:11px;mix-blend-mode:difference;pointer-events:none}
.scene-rail span{width:3px;height:13px;background:#687d9b55;transition:height .5s,background .5s}
.scene-rail span.active{height:35px;background:#b5e7ff}
.story-progress{position:fixed;bottom:25px;left:0;right:0;height:2px;z-index:28;pointer-events:none;background:#172b4422}
.story-progress i{display:block;height:100%;background:linear-gradient(90deg,#2578ff,#a4e0ff);transform:scaleX(var(--story-p,0));transform-origin:0 50%;will-change:transform}
@media(min-width:900px) and (min-height:720px){.cinema-on .about{height:185svh}.cinema-on .about-stage{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:90px;padding-bottom:70px}.cinema-on .about .section-label{margin-bottom:48px}.cinema-on .about .intro{font-size:clamp(24px,2.3vw,34px)}.cinema-on .about .tools{margin:26px 0}.cinema-on .about .profile-caption{margin-top:45px}}
@media(max-width:1100px){.about-stage{padding-left:6%;padding-right:6%}.cinema-on .hero-copy{top:27%}.cinema-on .hero-art{top:12%;right:-3%}.cinema-on .work-stage{padding-left:6%;padding-right:6%}.cinema-on .work .section-heading>p{max-width:230px;font-size:10px}.cinema-on .work h2{font-size:70px}.scene-rail{right:13px}}
@media(max-width:760px){.cinema-on .hero-sequence{height:160svh}.cinema-on .hero{min-height:720px}.cinema-on .hero-copy{top:20%;left:7%}.cinema-on .hero h1{font-size:clamp(96px,23vw,165px)}.cinema-on .hero-art{top:38%;width:580px;height:590px;right:50%;transform:translateX(50%) scale(.53);transform-origin:50% 0}.cinema-on .hero-bottom{bottom:11%}.cinema-on .hero-time{bottom:6%}.cinema-on .hero-top{top:105px}.cinema-on .about{margin-top:-20svh}.about-stage{padding:37px 6% 65px;border-radius:35px 35px 0 0}.cinema-on .about-watermark{font-size:150px;bottom:-40px}.cinema-on .work-stage{min-height:650px;padding:95px 6% 50px;justify-content:center}.cinema-on .work .section-label{margin-bottom:23px;font-size:6px}.cinema-on .work .section-label>span:last-child{font-size:5px}.cinema-on .work .section-heading{margin-bottom:22px;display:block}.cinema-on .work h2{font-size:66px;line-height:.86}.cinema-on .work .section-heading>p{font-size:10px;max-width:none;margin-top:18px}.cinema-on .work .demo-note{margin-top:5px;font-size:7px}.cinema-on .work .filters{margin-bottom:22px;gap:16px}.cinema-on .work .filters button{font-size:6px;padding-bottom:11px}.cinema-on .project{width:82vw;max-width:460px}.cinema-on .projects{gap:22px}.cinema-on .project-art{aspect-ratio:1.42;max-height:33svh}.cinema-on .project-description{gap:7px;padding-top:12px}.cinema-on .project-description h3{font-size:12px}.cinema-on .project-description p{font-size:8px}.cinema-on .project-description>span{font-size:6px}.cinema-on .work .kinetic-words{font-size:clamp(55px,16vw,85px)}.cinema-on .work .film-title{font-size:clamp(48px,13vw,75px)}.cinema-on .work .brand-title{font-size:clamp(70px,20vw,110px);top:33%}.cinema-on .work .social-big{font-size:clamp(30px,8vw,43px)}.cinema-on .work .social-side{font-size:clamp(25px,6.5vw,38px)}.work-controlbar{gap:13px;margin-top:17px}.work-meter{width:65px}.work-counter{font-size:18px;min-width:45px}.work-scroll-hint{font-size:5px;letter-spacing:1px}.work-arrows button{width:26px;height:26px;font-size:14px}.cinema-on .services-layout>h2{position:static}.cinema-on .contact>.section-label{padding-top:55px;margin-bottom:0}.cinema-on .contact-sequence{height:145svh}.cinema-on .contact-head{min-height:550px}.cinema-on .contact h2{font-size:clamp(62px,14vw,104px)}.cinema-on .contact .circle-arrow{align-self:center}.scene-rail{right:6px;gap:8px}.scene-rail span{height:8px;width:2px}.scene-rail span.active{height:22px}}
@media(max-height:719px) and (min-width:761px){.cinema-on .hero{min-height:590px}.cinema-on .work-stage{min-height:560px;padding-top:85px;padding-bottom:35px}.cinema-on .work h2{font-size:58px}.cinema-on .work .section-label{margin-bottom:12px}.cinema-on .work .section-heading{margin-bottom:15px}.cinema-on .work .filters{margin-bottom:15px}.cinema-on .project-art{max-height:32svh}.cinema-on .work-controlbar{margin-top:12px}.cinema-on .contact-head{min-height:540px}}
@media(max-height:720px) and (max-width:760px){.cinema-on .work-stage{min-height:560px;padding-top:82px;padding-bottom:32px}.cinema-on .work .section-label{margin-bottom:14px}.cinema-on .work h2{font-size:52px}.cinema-on .work .section-heading{margin-bottom:16px}.cinema-on .work .section-heading>p{margin-top:12px;font-size:8px}.cinema-on .project-art{max-height:29svh}.cinema-on .work .filters{margin-bottom:16px}.work-controlbar{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.scene-rail,.story-progress,.work-controlbar{display:none}.about-stage{padding:0;background:none;border-radius:0}.contact-sequence{height:auto}.work-viewport{overflow:visible}.hero-curtain{display:none}}
/* In a short browser panel, keep every control reachable without a clipped scene. */
@media(max-height:559px){.cinema-on .hero-sequence{height:auto}.cinema-on .hero{position:relative;height:720px}.cinema-on .hero-copy,.cinema-on .hero-bottom{opacity:1!important;transform:none!important}.cinema-on .hero-art{opacity:1!important}.cinema-on .hero-curtain{display:none}.cinema-on .about{height:auto;margin-top:0}.cinema-on .about-stage{position:relative;min-height:0;transform:none!important}.cinema-on .about .intro .reading-word{color:#101722}.cinema-on .work{height:auto!important}.cinema-on .work-stage{position:relative;height:auto;min-height:0;padding-top:80px}.cinema-on .work-viewport{overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}.cinema-on .projects{transform:none!important}.cinema-on .project{transform:none!important;opacity:1!important;scroll-snap-align:start}.cinema-on .project-art{max-height:none}.cinema-on .work-controlbar{display:none}.cinema-on .contact-sequence{height:auto}.cinema-on .contact-head{position:relative;height:auto;min-height:0;padding:70px 0}.cinema-on .contact-title,.cinema-on .contact h2,.cinema-on .contact h2>span{transform:none!important}.cinema-on .contact-bottom{margin-top:0}.scene-rail{display:none}}