.watching-opening{overflow:hidden}
#opening-scene{--opening-ease:cubic-bezier(.77,0,.175,1);position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#1c140e;color:#382618;overflow:auto;box-shadow:none}
#opening-scene::backdrop{background:#1c140e}
.opening-theater{position:relative;isolation:isolate;min-height:700px;height:100svh;overflow:hidden;perspective:1400px;background:repeating-linear-gradient(92deg,#251b13 0,#332317 4px,#20170f 8px,#36291d 12px)}
.opening-paper{position:absolute;inset:29px 34px 34px;background:radial-gradient(ellipse at 51% 42%,#fff1c6 0,#ddc08a 44%,#ad8553 78%,#6b4627 100%);box-shadow:inset 0 0 70px #41260e99,0 0 0 7px #503822,0 0 0 9px #987347,0 25px 80px #000;overflow:hidden}
.opening-paper::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.34' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.opening-paper::after{content:"";position:absolute;inset:12px;border:1px solid #7456336b;box-shadow:inset 0 0 0 4px #e2c28a30;pointer-events:none}
.opening-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#fff7d800 12%,#69441c44 60%,#28190dbb 100%);opacity:1;pointer-events:none}
.opening-halo{position:absolute;width:80%;height:95%;left:10%;top:0;background:radial-gradient(ellipse,#fff9deaa 0,#ffe3a844 40%,transparent 69%);opacity:0;pointer-events:none}
.opening-hero{position:absolute;height:69%;width:42%;left:29%;top:8%;transform-origin:50% 65%;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.opening-hero img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none}
.opening-hero .puppet-face{opacity:.91;transform:rotateY(-7deg) rotateZ(-2deg)}
.opening-rim{position:absolute;inset:0;box-shadow:inset 0 0 110px 22px #20120866;pointer-events:none}
.opening-lantern{position:absolute;z-index:3;top:-45px;width:115px;height:310px;transform:translateY(-105%);transform-origin:50% 0;filter:drop-shadow(0 14px 8px #2e190e66)}
.opening-lantern.left{left:15%}.opening-lantern.right{right:15%;top:-12px}.opening-lantern svg{width:100%;height:100%;overflow:visible}
.lantern-bloom{position:absolute;inset:65px -90px -40px;background:radial-gradient(ellipse,#ffc86877,transparent 65%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.opening-top{position:absolute;z-index:5;top:55px;left:65px;right:65px;display:flex;justify-content:space-between;align-items:center;font-size:18px;color:#5e4129}.opening-top span{letter-spacing:5px}.opening-top button{padding:9px 15px;border:1px solid #73553666;border-radius:2px;font-size:17px;color:#4b321d;background:#e9d4ab66}
.opening-title{position:absolute;left:11%;top:37%;opacity:0}.opening-title .opening-number{font-size:16px;letter-spacing:6px;margin:0 0 18px;color:#775438}.opening-title h2{font-size:clamp(46px,5vw,76px);font-weight:400;letter-spacing:10px;margin:0;writing-mode:vertical-rl;line-height:1.25}.opening-stamp{display:inline-block;color:#8c3527;border:1px solid #8c3527;padding:6px 4px;writing-mode:vertical-rl;font-size:17px;margin:18px 0 0 12px;transform:rotate(-4deg)}
.opening-verse{position:absolute;right:12%;top:43%;writing-mode:vertical-rl;line-height:2.2;font-size:23px;letter-spacing:6px;color:#61442c;opacity:0}.opening-verse p{margin:0}
.opening-bottom{position:absolute;bottom:7%;left:22%;right:22%;text-align:center;z-index:5;opacity:0}.opening-bottom p{font-size:18px;letter-spacing:2px;line-height:1.7;margin:0 0 15px;color:#5b3b23}.opening-bottom button{background:#7f3022;color:#ffedc2;border:1px solid #b47748;padding:13px 36px;border-radius:3px;font-size:24px;letter-spacing:7px;box-shadow:0 5px 18px #5a2b2325}.opening-bottom small{display:block;margin-top:13px;font-size:13px;letter-spacing:3px;color:#806245}.opening-dark{position:absolute;inset:0;background:#160f0c;opacity:.96;pointer-events:none;z-index:4}
#opening-scene.playing .opening-lantern{animation:hang-lantern 1.8s var(--ease-out) .1s both,lantern-sway 4s var(--opening-ease) 1.9s 1 both}
#opening-scene.playing .opening-lantern.right{animation-delay:.3s,2.1s}
#opening-scene.playing .opening-dark{animation:lamp-reveal 2.8s ease .7s both}
#opening-scene.playing .opening-halo,#opening-scene.playing .lantern-bloom{animation:ink-appear 2s ease .9s both}
#opening-scene.playing .opening-hero{animation:puppet-arrive 2.2s var(--ease-out) 1.2s both}
#opening-scene.playing .opening-title{animation:ink-appear 1.3s ease 2s both}
#opening-scene.playing .opening-verse{animation:ink-appear 1.3s ease 2.5s both}
#opening-scene.playing .opening-bottom{animation:ink-appear 1.2s ease 2.8s both}
@keyframes hang-lantern{from{transform:translateY(-105%) rotate(-4deg)}to{transform:translateY(0) rotate(0)}}
@keyframes lantern-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg)}65%{transform:rotate(-1deg)}}
@keyframes lamp-reveal{from{opacity:.96}to{opacity:0}}
@keyframes ink-appear{from{opacity:0}to{opacity:1}}
@keyframes puppet-arrive{from{opacity:0;transform:translateY(14px) rotateY(10deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}
@media(max-width:700px){.opening-theater{min-height:650px}.opening-paper{inset:15px}.opening-top{top:34px;left:33px;right:33px;font-size:15px}.opening-top span{letter-spacing:2px}.opening-lantern{width:72px;height:230px;top:-35px}.opening-lantern.left{left:10%}.opening-lantern.right{right:10%;top:-20px}.opening-hero{left:19%;width:62%;height:55%;top:16%}.opening-title{left:9%;top:38%}.opening-title h2{font-size:40px;letter-spacing:5px}.opening-title .opening-number{font-size:12px;letter-spacing:1px}.opening-stamp{font-size:13px;margin-left:0}.opening-verse{right:8%;top:40%;font-size:17px;letter-spacing:3px;line-height:1.8}.opening-bottom{left:10%;right:10%;bottom:7%}.opening-bottom p{font-size:16px;letter-spacing:0}.opening-bottom button{font-size:22px;padding:10px 30px}.opening-bottom small{font-size:12px}.header{flex-wrap:wrap;height:auto;min-height:94px;padding-top:12px;padding-bottom:12px}.header .header-extras{display:flex;gap:8px}.opening-top button{font-size:15px;padding:7px}}
@media(prefers-reduced-motion:reduce){#opening-scene.playing *{animation:none!important}.opening-dark{opacity:0}.opening-halo,.lantern-bloom,.opening-hero,.opening-title,.opening-verse,.opening-bottom{opacity:1}.opening-lantern{transform:none}.opening-hero .puppet-face{transform:none}}
@media(max-width:600px){.opening-verse{display:none}}
/* Separate arrival, breathing and pointer layers so transforms never compete. */
.puppet-sway,.puppet-orientation{position:absolute;inset:0;transform-origin:52% 86%}
.opening-hero .puppet-face{position:absolute;width:100%;height:100%;overflow:visible;transform:rotateY(-7deg) rotateZ(-2deg)}
#opening-scene.playing .puppet-sway{animation:marionette-breathe 6s ease-in-out 3.4s infinite}
@keyframes marionette-breathe{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-5px) rotate(1deg)}}
#opening-scene.motion-paused .puppet-sway{animation-play-state:paused}
.opening-top-actions{display:flex;gap:10px}.opening-top-actions button{font-size:15px}#toggle-opening-motion[hidden]{display:none}
@media(max-width:600px){.opening-top{left:27px;right:27px;align-items:flex-start}.opening-top>span{font-size:13px;max-width:100px;line-height:1.5}.opening-top-actions{gap:5px;flex-direction:column}.opening-top-actions button{font-size:13px;padding:5px 8px}}
@media(prefers-reduced-motion:reduce){#opening-scene.playing .puppet-sway{animation:none}.puppet-orientation,#opening-pupil{transform:none!important}}