.experience-exit{position:fixed;z-index:20;top:24px;left:28px;font-size:.7rem;letter-spacing:.15em}.scene{height:calc(100svh + 80svh*var(--duration));position:relative}.scene-media{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}.scene-image,.scene-placeholder{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;transform-origin:var(--focus-x) var(--focus-y);transform:scale(calc(var(--scale-start) + (var(--scale-end) - var(--scale-start))*var(--progress,0)));transition-timing-function:var(--scene-easing);will-change:transform,opacity,clip-path}.scene-placeholder{background:radial-gradient(circle at var(--focus-x) var(--focus-y),#343434 0 2%,#111 16%,#000 55%)}.scene--pan :is(.scene-image,.scene-placeholder){transform:translateX(calc((var(--progress,0) - .5)*25%)) scale(1.15)}.scene--fade :is(.scene-image,.scene-placeholder){opacity:calc(1 - var(--progress,0))}.scene--mask :is(.scene-image,.scene-placeholder){clip-path:circle(calc(8% + var(--progress,0)*90%) at var(--focus-x) var(--focus-y))}.scene--expand :is(.scene-image,.scene-placeholder){inset:calc(20% - var(--progress,0)*20%);width:auto;height:auto}.scene-caption{position:sticky;bottom:10vh;z-index:2;margin:0 8vw;max-width:600px;font-size:clamp(1.5rem,4vw,4rem)}.scene-reduced{display:none}@media(max-width:720px){.scene--mobile-static{height:100svh}.scene--mobile-static :is(.scene-image,.scene-placeholder){transform:none}.scene--mobile-reduced{height:130svh}.scene--mobile-reduced :is(.scene-image,.scene-placeholder){transform:scale(calc(1 + .5*var(--progress,0)))}}@media(prefers-reduced-motion:reduce){.scene{height:auto;min-height:80svh;display:grid;place-items:center;padding:10vw;border-bottom:1px solid var(--line)}.scene-media{display:none}.scene-reduced{display:block;font-family:Georgia,serif;font-size:clamp(1.5rem,4vw,3rem);line-height:1.4}}
