/* A continuous camera move through staggered video planes. */
body[data-route="home"]{scrollbar-width:none}
body[data-route="home"]::-webkit-scrollbar{display:none}
.depth-home{height:1840svh;position:relative;background:#000}
.depth-viewport{height:100svh;position:sticky;top:0;overflow:clip;background:#000;isolation:isolate}
.depth-perspective{pointer-events:none;position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%}
.depth-scene{pointer-events:none;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.depth-logo{position:absolute;left:50%;top:50%;font-size:clamp(170px,22vw,340px);transform:translate(-50%,-50%) rotate(-5deg);pointer-events:none;backface-visibility:hidden;will-change:transform}
.depth-card{position:absolute;left:50%;top:50%;width:clamp(250px,33vw,480px);will-change:transform,opacity;backface-visibility:hidden;transform-style:preserve-3d}
.depth-card .film-card{background:#000;box-shadow:0 0 0 1px #ffffff09}
.depth-home:not(.depth-reduced) .depth-card .film-card{cursor:grab;user-select:none;-webkit-touch-callout:none}
.depth-home:not(.depth-reduced) .depth-card .preview-held{cursor:grabbing;outline:1px solid #ff9a9c;outline-offset:3px}
.depth-hint{display:block;margin-top:.38rem;color:#a99b9f;font:inherit}
.depth-reduced .depth-hint{display:none}
.depth-card .film-card figure img{transition:none}
.depth-card .film-card figure video{opacity:1}
.depth-card .film-label{padding:5px 9px;min-height:28px;font-size:12px;gap:14px}
.depth-card .film-label .subtitle{font-size:11px}
.depth-card .playmark{width:44px;height:44px;background:#0006;font-size:12px}
.depth-top,.depth-bottom{position:absolute;z-index:3;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:10px;letter-spacing:.04em;color:#bbb;pointer-events:none}
.depth-top{top:22px}.depth-bottom{bottom:26px}
.depth-top a,.depth-bottom button{pointer-events:auto}
.depth-top a:hover{color:white}
.depth-next,.depth-pause{background:none;border:0;padding:5px 0;font-size:10px;letter-spacing:.04em}
.depth-next{display:flex;align-items:center;gap:13px}
.depth-next span{font-size:20px;line-height:10px}
.depth-counter{margin-right:auto;color:#6c6c6c}
.depth-progress{position:absolute;z-index:5;bottom:0;left:0;right:0;height:2px;background:#151515}
.depth-progress-fill{height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.depth-reduced{height:auto}
.depth-reduced .depth-viewport{position:relative;height:auto;min-height:100svh;padding:115px 20px}
.depth-reduced .depth-perspective,.depth-reduced .depth-scene{position:static;perspective:none;transform:none!important}
.depth-reduced .depth-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.depth-reduced .depth-logo{position:static;transform:none!important;grid-column:1/-1;font-size:110px;margin:25px auto 55px}
.depth-reduced .depth-card{position:static;transform:none!important;width:100%;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.depth-reduced .depth-card video{display:none}
.depth-reduced .depth-bottom,.depth-reduced .depth-progress{display:none}
@media(max-width:800px){.depth-card{width:39vw;min-width:240px}.depth-logo{font-size:33vw}.depth-card .film-label .subtitle{display:none}.depth-card .film-label{font-size:11px}}
@media(max-width:550px){.depth-home{height:1540svh}.depth-card{width:62vw;min-width:0}.depth-logo{font-size:39vw}.depth-top,.depth-bottom{left:14px;right:14px;font-size:8px}.depth-top{top:18px}.depth-bottom{bottom:24px}.depth-next,.depth-pause{font-size:8px}.depth-counter{display:none}.depth-card .film-label{font-size:9px;min-height:23px;padding:4px 6px}.depth-next{gap:7px}.depth-reduced{height:auto}.depth-reduced .depth-scene{grid-template-columns:1fr}}