header{position:fixed;top:0;background:#050506e8;backdrop-filter:blur(18px);padding:12px 3%;border-color:#b78c4a55}.hero{height:100svh;min-height:720px}.hero:before{background-image:url(assets/hero.webp);background-position:center;animation:heroMove 34s ease-in-out infinite alternate}.hero:after{background:linear-gradient(90deg,#0005,transparent 42%,#0008),linear-gradient(0deg,#050608,transparent 38%,#0006)}.hero-content{margin-left:19%;margin-top:6vh}.hero h1{font-size:clamp(45px,6vw,98px);letter-spacing:-.045em;text-shadow:0 5px 15px #000,0 0 34px #9e5a2e77}.actions button{backdrop-filter:blur(9px);transition:transform .25s,box-shadow .25s}.actions button:hover{transform:translateY(-5px);box-shadow:0 0 32px #db9c5888}.player{top:64px;padding:8px 3%;background:#08090ce8;backdrop-filter:blur(20px);border-color:#ad8b50}.scene{height:78svh;min-height:610px;isolation:isolate}.scene-bg{inset:-4%;animation:cinemaMove 26s ease-in-out infinite alternate;transition:opacity 1.8s ease;filter:contrast(1.08) saturate(1.1)}.next-scene{opacity:0}.next-scene.active{opacity:1}.scene:after{background:linear-gradient(90deg,#030406ef,#03040688 45%,transparent 80%),linear-gradient(0deg,#030406cc,transparent 42%)}.scene-info{bottom:17%}.scene-info h2{font-size:clamp(38px,4.5vw,72px);line-height:1.1;text-shadow:0 4px 14px #000}.scene-info p{font-size:17px;text-shadow:0 2px 7px #000}.scene-count{position:absolute;top:25px;right:5%;z-index:5;font:12px Cinzel;letter-spacing:2px;color:#e8c68b}.scene-dots{position:absolute;bottom:25px;right:5%;z-index:5;display:flex;gap:9px}.scene-dots button{width:34px;height:5px;border:0;border-radius:8px;padding:0;background:#e7c28a66}.scene-dots button.active{background:#fbd697;box-shadow:0 0 14px #e6a65c}.embers{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 18% 68%,#ffad4388 1px,transparent 3px),radial-gradient(circle at 72% 23%,#ffad4388 1px,transparent 3px);background-size:280px 340px,390px 450px;animation:emberMove 23s linear infinite;opacity:.6}.subtitles{background:#050607b9;backdrop-filter:blur(10px);font:clamp(15px,1.5vw,22px) Cinzel;border-color:#c6a36b99}.chapter{height:230px;transition:transform .25s}.chapter:hover,.track:hover{transform:translateY(-5px)}.track{transition:transform .25s}.audio-help{position:relative;z-index:13;background:#26190f;color:#f8dfba;padding:20px 4%;border-bottom:1px solid #bf8c4c}.audio-help p{font-size:13px}.audio-help button{margin:5px}.audio-help button:first-of-type{background:#805529}.still .embers{display:none}.still .scene-bg,.still .hero:before{animation:none}@keyframes heroMove{to{transform:scale(1.08) translate(-1%,1%)}}@keyframes cinemaMove{to{transform:scale(1.17) translate(-2%,1%)}}@keyframes emberMove{to{background-position:0 -500px,90px -600px}}@media(max-width:800px){.hero-content{margin-left:3%}.player{top:54px}.scene{height:75svh}.scene-info{bottom:20%}}@media(max-width:600px){.hero{min-height:630px}.hero h1{font-size:clamp(36px,9vw,55px)}.scene{min-height:610px}.scene-info h2{font-size:36px}.scene-count{font-size:10px}.scene-dots{bottom:12px}.player-tools{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.scene-bg,.hero:before,.embers{animation:none!important}}
/* KINO 12: cinematic stage, real moving scene layers */
.scene{height:min(82vh,880px);min-height:580px;isolation:isolate;border-block:1px solid #b78c4c88}
.scene-bg{inset:-8%;animation:cinemaDrift 27s ease-in-out infinite alternate;will-change:transform,opacity;filter:saturate(1.18) contrast(1.07)}
.next-scene{opacity:0;transition:opacity 2.2s ease;animation-duration:33s;animation-direction:alternate-reverse}
.scene.scene-transition .next-scene{opacity:1}
.scene:after{background:linear-gradient(90deg,#030405e8 0%,#03040588 40%,#0000 77%),linear-gradient(0deg,#050609d9 0%,transparent 55%,#0006 100%)}
.scene-info{bottom:16%;max-width:min(560px,65%);text-shadow:0 3px 14px #000}
.scene-info h2{font-size:clamp(34px,4vw,68px);line-height:1.06}
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,#ffcc7c99 0 1px,transparent 2px),radial-gradient(circle,#f6a35c88 0 1px,transparent 2px);background-size:137px 157px,211px 193px;animation:emberFlow 21s linear infinite;opacity:.38;mix-blend-mode:screen}
.scene-count{position:absolute;right:3%;top:5%;z-index:3;font:12px Cinzel;letter-spacing:2px;color:#f3d6a8;background:#0009;padding:10px 15px;border:1px solid #9b7b49}
.scene-dots{position:absolute;right:3%;bottom:5%;z-index:4;display:flex;gap:10px}
.scene-dots button{width:34px;height:4px;padding:0;border:0;background:#ddd8;transition:background .3s,transform .3s}
.scene-dots button.active{background:#f8c67a;transform:scaleY(1.7)}
.subtitles{bottom:5%;left:24%;right:24%;font:600 clamp(16px,2vw,26px)/1.45 Georgia,serif;letter-spacing:.2px;color:#fff7e9;background:#000b;border:0;border-radius:9px;text-shadow:0 2px 8px #000;box-shadow:0 8px 40px #0009}
.text-panel{width:min(650px,100%);box-shadow:-20px 0 90px #000b}
.text-panel p{font:17px/1.85 Georgia,serif;white-space:pre-line}
.text-panel .hint{border-left:2px solid #e7c28a;padding-left:12px}
@keyframes cinemaDrift{0%{transform:scale(1.02) translate3d(-1.5%,0,0)}100%{transform:scale(1.17) translate3d(2%,1.5%,0)}}
@keyframes emberFlow{0%{background-position:0 0,0 0}100%{background-position:60px -370px,-80px -240px}}
.still .embers{animation:none;opacity:0}.still .next-scene,.still .scene-bg{animation:none!important}
@media(max-width:650px){.scene{height:75vh;min-height:570px}.scene-info{max-width:90%;bottom:17%}.subtitles{left:5%;right:5%;bottom:4%;font-size:17px}.scene-count{top:3%;right:3%}}
@media(prefers-reduced-motion:reduce){.scene-bg,.embers{animation:none!important}.next-scene{transition:none}}