/* The first-screen styles remain unchanged; only unlock document flow after its intro. */
html.content-ready{overflow-y:auto;overflow-x:hidden;height:auto}html.content-ready body{height:auto;overflow:visible}body[data-phase="hero"] #stage{position:relative;inset:auto;height:100dvh;touch-action:pan-y}body.menu-open{overflow:hidden!important}html:has(dialog[open]){overflow:hidden}body[data-phase="hero"] #stage #playback-message{position:absolute}
#recommend{--film-width:min(54vw,980px);--film-gap:4.7vw;position:relative;background:#fff;color:#25252d;min-height:100svh;padding:clamp(120px,17vh,220px) 0 clamp(110px,15vh,200px);overflow:hidden}.recommend-heading{text-align:center;margin-bottom:62px}.recommend-heading p{font-size:20px;font-weight:600;line-height:1.3;margin:0 0 12px;color:#707070}.recommend-heading h2{font-size:28px;line-height:1.4;margin:0;font-weight:600;letter-spacing:.01em}.film-carousel{position:relative;touch-action:pan-y}.film-track{height:calc(var(--film-width) * .5625 + 78px);position:relative}.film-card{position:absolute;left:50%;top:0;width:var(--film-width);transform:translateX(-50%);transition:transform .55s cubic-bezier(.22,.68,0,1);margin:0}.film-card[data-position="-1"]{transform:translateX(calc(-150% - var(--film-gap)))}.film-card[data-position="1"]{transform:translateX(calc(50% + var(--film-gap)))}.film-media{position:relative;aspect-ratio:16/9;background:#101010;overflow:hidden}.film-media video,.film-poster{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.film-poster{transition:opacity .2s;pointer-events:none}.film-card.previewing .film-poster{opacity:0}.film-play{position:absolute;inset:0;width:100%;height:100%;padding:0;display:grid;place-items:center}.film-play span{display:grid;place-items:center;width:70px;height:50px;background:#ffffffb8;border-radius:15px;opacity:0;transform:scale(.94);transition:opacity .22s,transform .22s;color:#25252d}.film-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}.film-card[data-position="0"]:hover .film-play span,.film-card[data-position="0"]:focus-within .film-play span{opacity:1;transform:scale(1)}.film-card figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;color:#6a6a6a;font-size:17px;white-space:nowrap}.film-card figcaption img{width:25px;height:25px;object-fit:cover;object-position:left;filter:brightness(0)}.carousel-controls{position:absolute;left:50%;top:0;width:var(--film-width);height:calc(var(--film-width) * .5625);transform:translateX(-50%);pointer-events:none;display:flex;align-items:center;justify-content:space-between}.film-arrow{border-radius:50%;width:62px;height:62px;min-height:0;background:#25252d;color:#fff;padding:18px;opacity:0;pointer-events:none;transition:opacity .22s,background .2s}.film-arrow.previous{transform:translateX(-50%)}.film-arrow.next{transform:translateX(50%)}.film-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.film-carousel:hover .film-arrow,.film-carousel:focus-within .film-arrow{opacity:1;pointer-events:auto}.film-arrow:hover{background:#43434a;color:#fff}
#header.on-white{background:#fff;color:#25252d}#header.on-white:before{display:none}#header.on-white .wordmark img{filter:brightness(0)}#header.on-white .login svg{background:#f4f5f6;stroke:#25252d}#header.on-white #cases-menu{background:#fff;border-color:#e8e8e8}#header.on-white #cases-menu button:hover{background:#f4f4f4;color:#25252d}#header.on-white .login:hover{color:#25252d}#header.on-white:has(+*){transition:opacity .8s,transform .8s,background .25s,color .25s}
#film-dialog{border:0;padding:0;background:transparent;color:#fff;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow:auto}#film-dialog::backdrop{background:#18212d66;backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}.film-player-wrap{position:relative;width:min(1120px,86vw);margin:auto;top:50%;transform:translateY(-50%);padding:10px;border:1px solid #ffffff66;border-radius:18px;background:#ffffff22;box-shadow:0 30px 100px #0005,0 1px 0 #ffffff80 inset;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#film-player{display:block;width:100%;max-height:76dvh;aspect-ratio:2/1;object-fit:contain;border-radius:10px;background:#080808}#film-close{position:absolute;right:0;top:-53px;width:40px;height:40px;min-height:40px;border:1px solid #ffffff66;border-radius:50%;background:#ffffff26;font-size:28px;line-height:1}#film-player-title{position:absolute;top:100%;margin:18px 0 0;font-size:14px;text-shadow:0 1px 12px #0009}#film-retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 22px;background:#fff;color:#222;border-radius:6px}
@media(max-width:900px){#recommend{--film-width:72vw;--film-gap:5vw}.recommend-heading{margin-bottom:44px}.film-card figcaption{font-size:15px}.film-arrow{width:48px;height:48px;padding:14px}#header.on-white #navigation{background:#fff}#header.on-white #navigation>button,#header.on-white .cases>button{border-color:#e7e7e7}#header.on-white #cases-menu button{color:#666}}
@media(max-width:600px){#recommend{--film-width:82vw;--film-gap:5vw;padding:120px 0 100px;min-height:80svh}.recommend-heading p{font-size:16px}.recommend-heading h2{font-size:25px}.film-card figcaption{font-size:14px;margin-top:22px;gap:9px}.film-play span{width:58px;height:42px;border-radius:12px}.film-arrow{width:40px;height:40px;padding:11px}.film-player-wrap{width:94vw;padding:6px;border-radius:12px}#film-player{border-radius:7px}#film-player-title{font-size:12px}}
@media(hover:none){.film-arrow{opacity:1;pointer-events:auto}.film-card[data-position="0"] .film-play span{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.film-card,.film-play span,.film-poster{transition:none}}

/* Keep recycled cards outside the viewport during the wrap transition. */
.film-card[data-position="-2"]{transform:translateX(calc(-250% - var(--film-gap) - var(--film-gap)))}.film-card[data-position="2"]{transform:translateX(calc(150% + var(--film-gap) + var(--film-gap)))}.film-ghost{pointer-events:none!important}.film-ghost video{visibility:hidden}.film-ghost .film-poster{opacity:1!important}.carousel-controls{z-index:4}.film-card figcaption{white-space:normal;text-align:center}.film-card figcaption span{overflow-wrap:anywhere}