
/* KINO 16: cinema-first sharp visual treatment */
:root{--gold:#e7b66c}
header{height:72px!important;background:#050608f5!important;backdrop-filter:blur(16px)}
.player{min-height:72px!important;padding:7px 3%!important;background:#050608f2!important;box-shadow:0 10px 35px #000a}
.scene{height:calc(100svh - 144px)!important;min-height:620px!important;max-height:none!important;isolation:isolate;background:#050608}
.scene-bg{inset:-1%!important;background-size:cover!important;background-position:center!important;filter:contrast(1.07) saturate(1.10);will-change:transform;animation:epicDrift 34s ease-in-out infinite alternate!important}
.next-scene{opacity:0}
.scene.scene-transition .next-scene{opacity:1;transition:opacity 2.3s ease}
.scene:after{background:linear-gradient(90deg,#030405d9 0%,#030405a0 23%,#03040520 62%,#0000 85%),linear-gradient(0deg,#010204e8 0%,transparent 32%,transparent 76%,#0005 100%)!important}
.scene:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.38;background:radial-gradient(ellipse at 76% 32%,#ffb34b26,transparent 44%);animation:lightBreath 13s ease-in-out infinite alternate}
.scene-info{left:4.5%!important;bottom:190px!important;max-width:530px!important;z-index:4}
.scene-info h2{font-size:clamp(34px,4vw,64px)!important;letter-spacing:.015em;line-height:1.1;text-shadow:0 4px 20px #000c}
.scene-info p{font-size:15px;max-width:420px;color:#f0e8dc;text-shadow:0 2px 12px #000}
.filmstrip{bottom:15px!important;left:4%!important;right:4%!important;gap:12px!important;z-index:6}
.filmshot{height:135px!important;border-color:#9e7849!important;box-shadow:0 5px 20px #000a;transition:transform .25s,border-color .25s}
.filmshot:hover{transform:translateY(-5px);border-color:#f7c77e!important}
.filmshot img{filter:contrast(1.06) saturate(1.08)}
.filmshot.active{border-color:#f7ca86!important;box-shadow:0 0 0 1px #f7ca86,0 0 25px #e6a95d6b!important}
.scene-count{z-index:7;background:#050608c9!important;backdrop-filter:blur(10px)}
.embers{pointer-events:none;position:absolute;inset:0;z-index:3;opacity:.48;background-image:radial-gradient(2px 2px at 10% 25%,#f4a35c 70%,transparent),radial-gradient(2px 2px at 73% 62%,#e8c08b 70%,transparent),radial-gradient(1px 1px at 38% 40%,#ffe4ae 70%,transparent),radial-gradient(2px 2px at 88% 22%,#ef994f 70%,transparent);background-size:510px 390px,670px 540px,360px 420px,810px 600px;animation:embersFloat 28s linear infinite}
.subtitles{z-index:9;backdrop-filter:blur(14px);background:#050608d9!important;border-color:#b9915c!important}
.still .scene-bg,.still .embers,.still .scene:before{animation:none!important}
@keyframes epicDrift{0%{transform:scale(1.012) translate(0,0)}100%{transform:scale(1.048) translate(-.35%,-.35%)}}
@keyframes lightBreath{from{opacity:.14}to{opacity:.46}}
@keyframes embersFloat{from{background-position:0 0,0 0,0 0,0 0}to{background-position:45px -140px,-65px -110px,20px -120px,40px -130px}}
@media(max-width:800px){.scene{min-height:600px!important}.scene-info{bottom:168px!important}.filmshot{height:105px!important}.scene-info h2{font-size:32px!important}}
@media(max-width:600px){.scene{height:calc(100svh - 160px)!important;min-height:580px!important}.filmstrip{gap:4px!important;left:2%!important;right:2%!important}.filmshot{height:93px!important}.filmshot span{font-size:8px!important}.scene-info{bottom:130px!important}.scene-info p{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.scene-bg,.embers,.scene:before{animation:none!important}}
