/* V82: editorial motion with native scrolling; interactive stages stay independent. */
:root { --experience-ease:cubic-bezier(.22,1,.36,1); }
body { background:#20211f; --bg:#20211f; --bg-2:#292a27; --bg-3:#353630; overflow-x:clip; }
.cursor { display:none!important; }
nav { background:rgba(24,25,24,.82); }
.experience-home .hero { min-height:100svh; }
.experience-home .hero-content { padding-bottom:178px; translate:0 var(--hero-shift,0px); opacity:var(--hero-fade,1); }
.experience-home .hero-title { font-weight:600; font-size:clamp(70px,10.2vw,180px); letter-spacing:-.075em; }
.experience-home .hero-tagline { max-width:430px; }
.experience-home .hero-meta-top { left:auto; right:4vw; top:130px; max-width:340px; text-align:right; justify-content:flex-end; }
.experience-home .hero-meta-top span { font-size:12px; }
.experience-kicker { position:absolute; z-index:6; top:132px; left:4vw; font:12px var(--mono); letter-spacing:.2em; }
.experience-scroll { position:absolute; right:4vw; bottom:175px; z-index:7; display:flex; align-items:center; gap:24px; font-size:14px; }
.experience-scroll i { font-size:30px; font-style:normal; animation:experience-arrow 1.6s ease-in-out infinite; }
@keyframes experience-arrow { 50% { transform:translateY(9px); } }
.experience-home #work { padding-top:0; }
.experience-home .projects-intro { padding-top:120px; padding-bottom:100px; }
.experience-home .projects-title { font-size:clamp(54px,8.5vw,145px); line-height:1; letter-spacing:-.065em; max-width:1100px; }
.experience-home .project { padding:0; margin-bottom:120px; }
.project-scene { height:185vh; position:relative; }
.project-screen { position:sticky; top:0; height:100svh; overflow:hidden; background:#141614; isolation:isolate; }
.project-screen .project-hero { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; margin:0!important; aspect-ratio:auto; border-radius:0; clip-path:inset(var(--scene-inset,9%)); transition:none!important; opacity:1!important; transform:none!important; }
.project-screen .project-hero img { width:100%; height:100%; object-fit:cover; transform:scale(var(--scene-scale,1))!important; transition:none!important; }
.project-screen .project-hero::before,.project-screen .project-hero::after,.project-screen .project-hero-tag { display:none!important; }
.project-screen::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 68%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%); pointer-events:none; z-index:1; }
.project-screen .project-header { position:absolute; z-index:2; top:auto; left:5vw; right:5vw; bottom:126px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:0; margin:0; border:0; background:none; opacity:1!important; transform:none!important; translate:var(--scene-title-x,80px) 0; pointer-events:none; }
.project-screen .project-name { font-size:clamp(60px,9vw,150px); line-height:1; letter-spacing:-.06em; color:white; }
.project-screen .project-name em { color:white; }
.project-screen .project-name em:not(:only-child) { font-size:.32em; letter-spacing:-.03em; }
.project-screen .project-id { color:white; font-size:13px; }
.project-screen .project-tags { justify-content:flex-start; }
.project-screen .tag { color:white; border-color:#ffffff70; font-size:12px; }
.project-screen .tag.solid { color:#171817; }
.scene-number { position:absolute; z-index:2; top:108px; right:5vw; font-size:clamp(100px,17vw,280px); line-height:1; letter-spacing:-.09em; color:transparent; -webkit-text-stroke:1px #ffffff80; pointer-events:none; }
.scene-caption { position:absolute; z-index:3; left:5vw; bottom:40px; }
.scene-caption .project-cta { border:1px solid #ffffff80; padding:16px 22px; border-radius:0; background:#17181750; color:white; display:flex; gap:55px; font-size:15px; }
.scene-line,.process-line { position:absolute; bottom:0; left:0; height:3px; width:100%; background:white; transform:scaleX(var(--scene-progress,0)); transform-origin:left; z-index:4; }
.experience-home .project-pipeline { margin:45px 5vw 30px; }
.experience-home .project-body { margin:0 5vw; max-width:none; }
.experience-home .project-cta-wrap { display:none; }
.experience-home .project-description { font-size:clamp(20px,2vw,30px); }
.experience-home .project-side { padding-left:36px; border-left:1px solid var(--line); }
.experience-home .project-body { padding-bottom:40px; }
.process-scene { height:340vh; position:relative; background:#121411; }
.process-screen { position:sticky; top:0; height:100svh; overflow:hidden; }
.process-top { position:absolute; top:110px; left:5vw; right:5vw; display:flex; justify-content:space-between; align-items:baseline; gap:30px; z-index:3; }
.process-top>span { font:12px var(--mono); letter-spacing:.16em; }
.process-top h2 { font-size:clamp(24px,3vw,48px); font-weight:400; letter-spacing:-.04em; }
.process-rail { display:flex; height:100%; width:max-content; will-change:transform; }
.process-frame { width:100vw; height:100%; flex:none; position:relative; margin:0; padding:190px 8vw 116px; }
.process-frame img { width:100%; height:100%; object-fit:contain; background:#191b18; }
.process-frame:nth-child(2) img { object-fit:cover; }
.process-frame-number { position:absolute; left:5vw; bottom:110px; font-size:clamp(72px,12vw,180px); line-height:1; color:white; letter-spacing:-.07em; mix-blend-mode:difference; }
.process-frame figcaption { position:absolute; right:8vw; bottom:126px; color:white; padding:8px 16px; background:#151713b3; font-size:20px; }
.process-steps { position:absolute; bottom:40px; left:5vw; right:5vw; display:flex; gap:30px; }
.process-steps span { flex:1; padding-top:12px; border-top:1px solid #ffffff35; font-size:14px; color:#a6a9a1; transition:color .3s,border-color .3s; }
.process-steps .active { color:white; border-color:white; }
.experience-detail .cs-hero,.experience-detail .bh-hero { min-height:100svh; }
.experience-detail .cs-hero-title,.experience-detail .bh-hero-title { font-size:clamp(70px,12vw,195px); letter-spacing:-.06em; }
.detail-360 { position:absolute; top:116px; right:5vw; z-index:8; padding:14px 22px; border:1px solid #ffffff85; background:#15171399; color:white; font-size:14px; transition:background .3s; }
.detail-360:hover { background:#151713; }
.experience-detail .cs-back-btn { position:absolute; top:116px; left:5vw; }
.viewer-stage { touch-action:pan-y; cursor:grab!important; user-select:none; -webkit-user-select:none; }
.viewer-stage.dragging { cursor:grabbing!important; }
.viewer-stage video { pointer-events:none; }
.viewer-bar { display:grid; grid-template-columns:48px minmax(100px,1fr) 60px; gap:18px; align-items:center; max-width:1500px; margin:0 auto 24px; background:#161815; padding:18px 24px; border:1px solid var(--line); }
.viewer-play { min-height:44px; border:1px solid var(--line-2); font-size:18px; }
.viewer-bar input[type=range] { width:100%; height:44px; accent-color:#e4e7db; cursor:ew-resize; margin:0; padding:0; }
.viewer-angle { font:14px var(--mono); text-align:right; }
.viewer-status { grid-column:2/4; font-size:13px; color:#c8cdc1; }
.viewer-stage:focus-visible { outline:2px solid white; outline-offset:5px; }
.experience-menu { display:none; }
@media(max-width:900px){
 .experience-home .hero-content { padding-bottom:215px; }
 .experience-home .hero-title { font-size:clamp(64px,11vw,100px); }
 .experience-scroll { bottom:175px; left:4vw; right:auto; font-size:12px; }
 .experience-home .hero-tagline { margin-top:18px; }
 .experience-kicker { top:115px; }
 .experience-home .hero-meta-top { display:none; }
 .experience-home .project-side { padding-left:0; border-left:0; }
}
@media(max-width:760px){
 .experience-home .hero { min-height:800px; min-height:max(760px,100svh); }
 .experience-home .hero-content { padding-top:170px; padding-bottom:260px; }
 .experience-home .hero-title { font-size:clamp(60px,16vw,100px); }
 .experience-scroll { bottom:205px; }
 .experience-home .hero-tagline { font-size:16px; }
 .experience-home .projects-title { font-size:15vw; }
 .project-scene { height:160svh; }
 .project-screen { position:sticky; height:100svh; min-height:560px; }
 .project-screen .project-header { bottom:126px; }
 .project-screen .project-name { font-size:15vw; }
 .scene-number { top:35px; font-size:120px; }
 .process-scene { height:300svh; }
 .process-screen { height:100svh; position:sticky; overflow:hidden; }
 .process-top { top:108px; left:5vw; right:5vw; padding:0; flex-direction:column; gap:12px; }
 .process-top h2 { font-size:32px; }
 .process-frame { height:100%; width:100vw; padding:210px 5vw 150px; }
 .process-frame-number { bottom:140px; font-size:78px; }
 .process-frame figcaption { bottom:95px; right:5vw; font-size:16px; }
 .process-steps { bottom:30px; gap:12px; }
 .process-steps span { font-size:12px; }
 .viewer-bar { gap:10px; padding:12px; grid-template-columns:44px minmax(70px,1fr) 52px; }
 .viewer-status { font-size:12px; }
 .detail-360 { top:160px; right:5vw; padding:10px 15px; font-size:13px; }
 .experience-menu { display:block; border:1px solid #ffffff50; padding:8px 12px; margin-left:10px; font-size:13px; }
 nav .nav-right { margin-left:auto; }
 nav.menu-open .nav-links { display:flex!important; position:absolute; top:100%; left:0; right:0; background:#191b18; flex-direction:column; padding:24px; gap:12px; box-shadow:0 15px 25px #0005; }
 nav.menu-open .nav-links a { padding:12px; font-size:20px; }
}
@media(prefers-reduced-motion:reduce){
 .project-scene,.process-scene { height:auto; }
 .project-screen { position:relative; }
 .project-screen .project-hero { clip-path:none; }
 .project-screen .project-header { translate:none; }
 .process-screen { position:relative; height:auto; }
 .process-top { position:relative; inset:auto; padding:60px 5vw 0; }
 .process-rail { display:block; width:100%; transform:none!important; }
 .process-frame { height:90vh; }
 .process-steps,.process-line { display:none; }
 .experience-home .hero-content { translate:none; opacity:1; }
}

/* V83 — the actual project rotates between its sketch and its final rendering. */
.cinema-scene{height:430svh;background:#ededeb;color:#191b18}
.cinema-screen{background:#ededeb}
.cinema-stage{position:absolute;inset:190px 5vw 150px;overflow:hidden;background:#e5e5e3}
.cinema-layer{position:absolute;inset:0;margin:0;overflow:hidden}
.cinema-layer img,.cinema-layer video{width:100%;height:100%;object-fit:contain;display:block;background:#ededeb}
.cinema-sketch{transform:translateX(var(--sketch-shift,0));opacity:calc(1 - var(--model-reveal,0))}
.cinema-model{clip-path:inset(0 calc((1 - var(--model-reveal,0))*100%) 0 0)}
.cinema-render{clip-path:inset(0 0 0 calc((1 - var(--render-reveal,0))*100%))}
.cinema-render img{transform:scale(var(--render-scale,1.15))}
.cinema-caption{position:absolute;bottom:83px;left:5vw;right:5vw;display:flex;align-items:center;gap:24px}
.cinema-caption strong{font-size:66px;line-height:1;letter-spacing:-.07em;font-weight:400}
.cinema-caption p{font-size:clamp(20px,2.8vw,42px);letter-spacing:-.04em;margin:0}
.cinema-caption>span{margin-left:auto;font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.cinema-scene .process-top h2{font-size:clamp(24px,3vw,48px)}
.cinema-scene .process-steps{bottom:24px}
.cinema-scene .process-steps button{flex:1;text-align:left;padding:12px 0 0;background:none;border:0;border-top:1px solid #191b1840;color:#656760;font:13px var(--mono);cursor:pointer}
.cinema-scene .process-steps button.active{border-color:#191b18;color:#191b18}
.cinema-scene .process-line{background:#191b18}
.cinema-scene button:focus-visible{outline:2px solid #191b18;outline-offset:5px}
@media(max-width:760px){.cinema-scene{height:360svh}.cinema-stage{inset:205px 0 165px}.cinema-caption{bottom:95px;gap:16px}.cinema-caption strong{font-size:46px}.cinema-caption p{font-size:23px}.cinema-caption>span{display:none}.cinema-scene .process-steps button{font-size:11px}.cinema-scene .process-top{top:105px}}
@media(prefers-reduced-motion:reduce){.cinema-scene{height:auto}.cinema-stage{position:relative;inset:auto;display:grid;gap:24px;padding:30px 5vw}.cinema-layer{position:relative;inset:auto;height:65svh;clip-path:none;transform:none;opacity:1}.cinema-render img{transform:none}.cinema-caption{position:relative;inset:auto;padding:0 5vw 40px}.cinema-caption>span{display:none}}