.cinema-op{position:fixed;inset:0;background:#f8f7f4;overflow:hidden;isolation:isolate;perspective:1000px}.op-architecture{position:absolute;inset:12px;background:url('assets/cover-frame.svg') center/100% 100%;pointer-events:none}.op-envelope{position:absolute;width:min(82vw,460px);height:260px;left:50%;top:48%;margin-left:max(-41vw,-230px);margin-top:-100px;perspective:900px;transition:transform .2s}.envelope-back,.envelope-front,.envelope-flap{position:absolute;inset:0;background:#eee4d5;border:1px solid #cbb38f}.envelope-back{box-shadow:0 18px 45px #4a26301a;background:repeating-linear-gradient(30deg,#f6efe4,#f6efe4 3px,#eee7dc 4px)}.envelope-front{clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);z-index:4;background:#f4eadc}.envelope-flap{clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:top;z-index:5;transition:transform 1s cubic-bezier(.4,0,.2,1),z-index 0s .5s}.wax{position:absolute;top:90px;left:calc(50% - 38px);width:76px;height:76px;padding:0;border:0;z-index:6;touch-action:none;background:none!important;transform:none!important}.wax svg{width:76px;height:76px;fill:#803c48;stroke:#d1b58d;stroke-width:1}.wax circle,.wax svg path+circle+path{fill:none;stroke-dasharray:200;stroke-dashoffset:calc(200 - var(--seal,0)*200)}.seal-hint{position:absolute;top:290px;width:100%;text-align:center;font-size:11px;letter-spacing:.15em;color:#a88758}.op-letter{position:absolute;inset:10px 10px -20px;padding:30px 18px;background:#fffaf2;border:1px solid #d1b58d;z-index:2;overflow:hidden;transition:transform 1.5s .7s cubic-bezier(.22,1,.36,1),height 1.5s .7s;box-shadow:0 3px 10px #4a263013}.op-letter p{font-size:15px;line-height:1.8;margin:14px 0;letter-spacing:.05em;opacity:0}.op-continue{font:12px 'Cormorant Garamond';display:block;margin:22px auto 0;opacity:0}.unsealed .envelope-flap{transform:rotateX(175deg);z-index:1}.unsealed .wax{opacity:0;transform:translateY(12px)!important;transition:opacity .5s}.unsealed .seal-hint{opacity:0}.unsealed .op-letter{transform:translateY(-180px);height:470px;z-index:7}.letter-ready .op-letter p,.letter-ready .op-continue{opacity:1;transition:opacity .55s}.letter-ready .op-letter p:nth-of-type(2){transition-delay:.15s}.letter-ready .op-letter p:nth-of-type(3){transition-delay:.3s}.letter-ready .op-letter p:nth-of-type(4){transition-delay:.45s}.letter-ready .op-letter p:nth-of-type(5){transition-delay:.6s}.cast-running .op-envelope{opacity:0;transition:opacity .7s}.cast-stage{position:absolute;inset:0;pointer-events:none;transition:opacity 1.4s}.cast-world{position:absolute;inset:0;overflow:hidden;background:#f3e9d8;--ink:#a88758;--field:#f3e9d8}.cast-1{--ink:#d1b58d;--field:#4a2630}.cast-2{--ink:#8596aa;--field:#e3e8ed}.cast-3{--ink:#c69b86;--field:#39283f}.cast-4{--ink:#9cacbc;--field:#e8f0f5}.cast-world{background:var(--field)}.cast-tracery{position:absolute;inset:4%;background:url('assets/cover-frame.svg') center/100% 100%;animation:depth 4.4s cubic-bezier(.22,.61,.36,1) both}.cast-light{position:absolute;inset:-20%;background:conic-gradient(from 0deg at 20% 10%,transparent,#fff7 14deg,transparent 40deg);transform-origin:20% 10%;animation:light-pass 4.4s both}.cast-portrait{position:absolute;inset:14% 3% 8%;mask-image:linear-gradient(#000 70%,transparent);clip-path:inset(100% 0 0);animation:reveal-arch 2s .2s cubic-bezier(.22,1,.36,1) both}.cast-portrait img{height:100%;width:100%;object-fit:contain;object-position:center top}.cast-name{position:absolute;left:10%;bottom:12%;color:var(--ink);z-index:8}.cast-name h2{font:30px 'Noto Serif SC';margin:8px 0;letter-spacing:.18em}.cast-name span{font:18px 'Cormorant Garamond';letter-spacing:.2em;display:block;clip-path:inset(0 100% 0 0);animation:name-rule 1s 1.2s both}.cast-name small{font:30px 'Cormorant Garamond'}.cast-gate{position:absolute;inset:0;background:var(--field);z-index:5;clip-path:polygon(0 0,50% 0,55% 100%,0 100%);animation:gate 2s cubic-bezier(.65,0,.2,1) both}.gate-b{transform:scaleX(-1);animation-name:gate-b}.cast-foreground{position:absolute;inset:0;background:linear-gradient(110deg,transparent 50%,#fff4 51%,transparent 64%);z-index:7;animation:foreground 4.4s both}.cast-0 .cast-gate{display:none}.cast-1 .cast-portrait{animation-name:reveal-side}.cast-2 .cast-tracery{inset:12%;border:1px solid var(--ink);transform:rotate(-4deg);animation:frame-focus 4.4s both}.cast-2 .cast-gate{display:none}.cast-2 .cast-portrait{animation-name:focus-mask}.cast-3 .cast-gate{animation-name:facet-turn;transform-origin:left;clip-path:polygon(0 0,100% 0,60% 100%,0 100%)}.cast-3 .gate-b{display:none}.cast-3 .cast-portrait{animation-name:reveal-side}.cast-4 .cast-gate{display:none}.cast-4 .cast-portrait{animation-name:reveal-diagonal}.op-finale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 16px;gap:22px;visibility:hidden}.op-finale>img{width:100%;max-width:780px}.op-finale .op-logo{width:95%;order:-1;clip-path:inset(0 100% 0 0)}.tap-start{border:0;font:14px 'Cormorant Garamond';letter-spacing:.25em;opacity:0}.finale-running .op-finale{visibility:visible;animation:final-reveal 1.8s both}.finale-running .op-logo{animation:name-rule 1.6s .5s both}.finale-running .tap-start{animation:tap-breathe 2.6s 1.8s infinite}.op-skip{position:absolute;top:20px;right:20px;font-size:10px;border:0;z-index:12;display:none}.cast-running .op-skip{display:block}.op-white{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;z-index:15}@keyframes reveal-arch{to{clip-path:inset(0)}}@keyframes reveal-side{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes reveal-diagonal{from{clip-path:polygon(0 100%,0 100%,0 100%)}to{clip-path:polygon(0 0,200% 0,0 200%)}}@keyframes focus-mask{from{clip-path:inset(12% 35%);filter:blur(3px)}to{clip-path:inset(0);filter:blur(0)}}@keyframes gate{to{transform:translateX(-105%) skewY(8deg)}}@keyframes gate-b{to{transform:scaleX(-1) translateX(-105%) skewY(8deg)}}@keyframes facet-turn{to{transform:perspective(900px) rotateY(-95deg)}}@keyframes depth{from{transform:scale(1.12)}to{transform:scale(1)}}@keyframes light-pass{from{transform:rotate(-20deg)}to{transform:rotate(38deg)}}@keyframes name-rule{to{clip-path:inset(0)}}@keyframes foreground{from{transform:translateX(-90%)}to{transform:translateX(70%)}}@keyframes frame-focus{from{transform:translate(15px,-12px) rotate(-4deg)}to{transform:translate(-5px,5px) rotate(1deg)}}@keyframes final-reveal{from{clip-path:inset(8% 30%);transform:scale(1.025)}to{clip-path:inset(0);transform:scale(1)}}@keyframes tap-breathe{0%,100%{opacity:.55}50%{opacity:1}}@media(max-height:700px){.unsealed .op-letter{transform:translateY(-155px);height:425px;padding:20px 12px}.op-letter p{font-size:14px;margin:10px 0}.op-continue{margin-top:12px}}@media(prefers-reduced-motion:reduce){.cast-world *{animation-duration:1.2s!important}.cast-light,.cast-foreground{display:none}}
.cast-world{animation:world-open 1.6s cubic-bezier(.76,0,.24,1) both}.cast-1{animation-name:world-curtain}.cast-2{animation-name:world-frame}.cast-3{animation-name:world-facet}.cast-4{animation-name:world-light}@keyframes world-open{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes world-curtain{from{clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes world-frame{from{clip-path:inset(40% 35%)}to{clip-path:inset(0)}}@keyframes world-facet{from{clip-path:polygon(0 0,0 0,0 100%)}to{clip-path:polygon(0 0,200% 0,0 200%)}}@keyframes world-light{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
/* Rebuilt optical layers, individual framing, and embossed paper assembly. */
.op-envelope{height:210px;filter:drop-shadow(0 16px 22px #34212b22)}
.envelope-back{border-color:#bba17e;background:repeating-linear-gradient(18deg,#f1e6d5 0 1px,#f8f0e2 1px 4px);box-shadow:inset 0 0 0 7px #f8f2e7,inset 0 0 0 8px #c6ac82}
.envelope-front{background:linear-gradient(148deg,transparent 49.5%,#b39d8055 49.8%,transparent 50.4%),linear-gradient(32deg,#eee0cb 49.5%,#c6b08d99 50%,#faf3e8 50.6%);box-shadow:inset 0 -8px 14px #8b6a4220}
.envelope-flap{background:repeating-linear-gradient(25deg,#f8efdf 0 2px,#f2e8d8 2px 4px);backface-visibility:visible;box-shadow:inset 0 2px 5px #fff9}
.wax{top:70px;filter:drop-shadow(1px 4px 2px #3c172e66)}
.wax svg>path:first-of-type{fill:url(#wax-color);stroke:#552432;stroke-width:2.2}
.wax svg circle{stroke:#d7ae77;stroke-width:.9;opacity:.7}
.wax svg .wax-emboss{fill:none;stroke:#d7ac83;stroke-width:1.2;filter:url(#wax-relief)}
.seal-hint{top:250px}
.op-letter{background:repeating-linear-gradient(0deg,#fff9ef 0 3px,#f8f0e3 3px 4px);box-shadow:inset 0 0 0 5px #fff9ef,inset 0 0 0 6px #cfb892,0 8px 20px #42232c22}
.op-letter:before{content:'';position:absolute;inset:10px;border:1px solid #d1b58d;pointer-events:none}
.cast-world{background:radial-gradient(ellipse at 50% 32%,var(--field),var(--edge,#cbb69a));--field:#f1e6d3;--edge:#d4baa1;--ink:#80643d}
.cast-1{--field:#693746;--edge:#281a26;--ink:#e7c99e}
.cast-2{--field:#d1dce3;--edge:#667a91;--ink:#eee9dd}
.cast-3{--field:#60405b;--edge:#20182d;--ink:#e0bb9d}
.cast-4{--field:#e8eff3;--edge:#a2bbce;--ink:#7b6d5b}
.cast-depth-back{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14%,#3123340d 15% 16%,transparent 17% 25%),radial-gradient(ellipse at 50% 35%,#fff7,transparent 65%);animation:back-pan var(--shot-duration,5.573s) cubic-bezier(.22,.61,.36,1) both}
.cast-tracery{inset:3% 4%;background:url('assets/scene-cathedral.svg') center/contain no-repeat;opacity:.85;animation:arch-depth var(--shot-duration,5.573s) cubic-bezier(.22,.61,.36,1) both}
.cast-rose{position:absolute;inset:8% 10% 38%;background:url('assets/scene-cathedral.svg') center 35%/180% auto no-repeat;opacity:.3;animation:rose-depth var(--shot-duration,5.573s) cubic-bezier(.16,1,.3,1) both}
.cast-halo{position:absolute;inset:10% 0 20%;background:radial-gradient(ellipse at 50% 25%,#fff8,transparent 60%);mix-blend-mode:soft-light;animation:halo-shift var(--shot-duration,5.573s) both}
.cast-portrait{inset:19% 9% 23%;overflow:hidden;mask-image:linear-gradient(#000 78%,transparent 100%);z-index:3}
.cast-portrait img{position:absolute;height:145%;width:100%;object-fit:contain;object-position:center top;filter:none;transform-origin:50% 22%;animation:portrait-breathe var(--shot-duration,5.573s) cubic-bezier(.25,.46,.45,.94) both}
.cast-0 .cast-portrait{left:10%;right:2%;top:18%}.cast-0 .cast-portrait img{height:156%;object-position:45% top}
.cast-1 .cast-portrait{left:5%;right:12%;top:17%}.cast-1 .cast-portrait img{height:144%;object-position:55% top}
.cast-2 .cast-portrait{left:2%;right:6%;top:17%;bottom:32%}.cast-2 .cast-portrait img{height:185%;object-position:40% top}
.cast-3 .cast-portrait{left:4%;right:5%;top:18%;bottom:24%}.cast-3 .cast-portrait img{height:158%;object-position:48% top}
.cast-4 .cast-portrait{left:10%;right:3%;top:17%}.cast-4 .cast-portrait img{height:151%;object-position:45% top}
.cast-name{left:13%;right:10%;bottom:12%;padding:16px 0;z-index:8;text-shadow:0 1px 6px var(--field);border-top:1px solid var(--ink);max-width:78%}
.cast-name h2{font-size:clamp(25px,7vw,42px);font-weight:400;letter-spacing:.16em;line-height:1.5}
.cast-name span{font-size:clamp(12px,3.6vw,21px);line-height:1.5;letter-spacing:.12em;white-space:nowrap}
.cast-name small{font-size:22px;display:block;letter-spacing:.1em}
.cast-1 .cast-name{text-align:right;left:12%;right:13%;animation:gold-baseline 1.6s .7s both}
.cast-2 .cast-name{bottom:15%;left:14%;border-top:0;border-left:1px solid var(--ink);padding-left:15px}
.cast-3 .cast-name{left:12%;bottom:11%;transform:rotate(-2deg)}
.cast-4 .cast-name{left:14%;right:12%;bottom:12%;text-align:right}
.cast-path{position:absolute;inset:4% 7%;width:86%;height:90%;z-index:6;pointer-events:none}
.cast-path path{fill:none;stroke:var(--ink);stroke-width:.6;stroke-dasharray:2600;stroke-dashoffset:2600;animation:tracery-draw 2.4s .35s cubic-bezier(.25,.46,.45,.94) both}
.cast-light{z-index:4;mix-blend-mode:soft-light;pointer-events:none;animation-duration:var(--shot-duration,5.573s)}
.cast-foreground{z-index:7;opacity:.5;animation-duration:var(--shot-duration,5.573s)}
.cast-1 .cast-gate{background:repeating-linear-gradient(86deg,#301b2b,#7b4256 7%,#422237 13%,#a96b6633 15%);border-right:1px solid #d1b58d}
.cast-2 .cast-foreground{inset:8% 5%;border:1px solid #f0f5f7;background:linear-gradient(135deg,#fff2,transparent 45%);animation:glass-drift var(--shot-duration,5.573s) both}
.cast-3 .cast-gate{background:repeating-linear-gradient(45deg,#3a233d 0 20px,#c4976b44 21px 22px,#51304e 23px 45px);border:1px solid #bd9770}
.cast-4 .cast-light{background:linear-gradient(110deg,transparent 35%,#fff9 45%,transparent 65%)}
.cast-depart[data-exit="0"] .cast-light{transform:rotate(45deg)}.cast-depart[data-exit="1"] .cast-tracery{transform:translateY(-12px)}.cast-depart[data-exit="2"] .cast-foreground{transform:rotate(2deg)}.cast-depart[data-exit="3"] .cast-gate{transform:rotateY(-110deg)}
.op-paused *{animation-play-state:paused!important}
@keyframes back-pan{from{transform:translateX(-2%) scale(1.04)}to{transform:translateX(2%) scale(1)}}
@keyframes arch-depth{from{transform:scale(1.075) translateY(5px)}to{transform:scale(1) translateY(-5px)}}
@keyframes rose-depth{from{transform:translateY(12px) scale(1.04)}to{transform:translateY(-8px) scale(1)}}
@keyframes halo-shift{from{transform:translateX(-8%)}to{transform:translateX(6%)}}
@keyframes portrait-breathe{from{transform:translateY(4px) scale(1.01)}to{transform:translateY(-4px) scale(1)}}
@keyframes tracery-draw{to{stroke-dashoffset:0}}
@keyframes glass-drift{from{transform:translate(10px,-5px) rotate(-3deg)}to{transform:translate(-6px,8px) rotate(1deg)}}
@keyframes gold-baseline{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@media(max-height:700px){.cast-name{bottom:9%;padding:10px 0}.cast-name h2{font-size:26px;margin:3px 0}.cast-name small{font-size:18px}.cast-2 .cast-name{bottom:12%}}
@media(min-width:750px){.cast-portrait{left:25%!important;right:25%!important}.cast-tracery{left:22%;right:22%}.cast-path{left:24%;width:52%}.cast-name{left:30%!important;right:25%!important;max-width:45%}}
.wax svg .wax-emboss{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:.9}
.cast-portrait img{width:auto;max-width:none;left:50%;object-fit:fill;object-position:initial}
@keyframes portrait-breathe{from{transform:translateX(-50%) translateY(4px) scale(1.01)}to{transform:translateX(-50%) translateY(-4px) scale(1)}}
.wax svg .wax-inner{stroke-dasharray:none!important;stroke-dashoffset:0!important;stroke:#502031;stroke-width:1.3;fill:none;filter:url(#wax-relief)}
.op-skip{color:#80643d;background:#f8f7f4e8;border:1px solid #cbb38f66;padding:6px 10px;min-height:34px}
.cinema-op .op-skip[hidden]{display:none!important}
.cinema-op.exiting *{animation:none!important}
.cinema-op.exiting .op-finale{clip-path:none;visibility:visible}
.cinema-op.exiting .op-logo{clip-path:none}
.cinema-op.exiting .tap-start{opacity:1}
.cinema-op.exiting .op-envelope,.cinema-op.exiting .cast-stage{display:none}
@media(min-width:700px){.op-finale{padding:20px 16px;gap:12px}.op-finale>img{width:min(100%,60vh,700px);flex-shrink:0}.op-finale .op-logo{width:min(100%,62vh,720px)}}
/* Keep the letter physically inside the pocket until the flap has cleared it. */
.op-letter{inset:10px 10px auto;height:190px}
.unsealed .op-letter{z-index:2;animation:paper-lift-layer .01s .72s forwards}
@keyframes paper-lift-layer{to{z-index:7}}
.cast-portrait{-webkit-mask-image:linear-gradient(#000 78%,transparent 100%)}