/* ===================== OPENINGS (see openings.js) ===================== */
.intro.op-mode .intro-in{position:absolute;top:max(5vh,env(safe-area-inset-top));left:0;right:0;z-index:30;pointer-events:none;padding:10px}
.intro.op-mode .env,.intro.op-mode .intro-hint{display:none}
.intro.op-mode .intro-guest{margin-bottom:0}
.op{position:absolute;inset:0;z-index:20;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.op>div{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.op-hint{position:absolute;left:0;right:0;bottom:max(7vh,calc(env(safe-area-inset-bottom) + 24px));z-index:40;text-align:center;font-family:var(--ar-k);font-size:14px;letter-spacing:1px;color:var(--gold-l);animation:pulse 2.2s ease-in-out infinite;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.7);padding:0 20px}
html[dir=ltr] .op-hint{font-family:var(--lat);font-style:italic;font-size:18px}
.intro.opening-on .op-hint,.intro.opening-on .intro-in{opacity:0;transition:opacity .6s}
.intro.op-mode .lang-intro{z-index:50}
.seal-like{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-family:var(--ar-cal);font-size:24px;color:#5b3f12;line-height:1;
  background:radial-gradient(circle at 35% 30%,#fff1c2 0%,#e2bf6c 22%,#b48736 55%,#7c5a1f 100%);box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 -4px 8px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.45);animation:breathe 2.6s ease-in-out infinite}
html[dir=ltr] .seal-like{font-family:var(--lat-s)}
.seal-like small,.seal-mono small{font-size:.5em;margin:0 3px}
.op .ornament-sm{margin:6px auto}
/* shared: butterflies, petals, sparks */
.bfs,.pts,.sps,.stars{position:absolute;inset:0;pointer-events:none;z-index:12}
.bf{position:absolute;left:var(--x);bottom:-8%;width:calc(34px*var(--s));opacity:0;color:#fffaf0}
.bf svg{width:100%;fill:currentColor;filter:drop-shadow(0 0 6px rgba(255,240,200,.7));animation:flap .35s ease-in-out infinite alternate;transform-origin:center}
@keyframes flap{to{transform:scaleX(.35)}}
.opening .bf{animation:fly 3.2s ease-out var(--d) forwards}
@keyframes fly{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-115vh) rotate(20deg)}}
.pt{position:absolute;left:var(--x);top:-6%;width:calc(16px*var(--s));height:calc(12px*var(--s));border-radius:70% 0 70% 0;background:linear-gradient(135deg,var(--rose),var(--rose2));opacity:0}
.opening .pt,.lighting .pt{animation:fall 3.4s ease-in var(--d) forwards}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),112vh) rotate(var(--r))}}
.sp{position:absolute;left:var(--x);top:var(--y);width:calc(5px*var(--s));height:calc(5px*var(--s));border-radius:50%;background:#fff3c6;box-shadow:0 0 8px 2px rgba(240,214,150,.8);opacity:0}
.opening .sp{animation:twk 1.8s ease-in-out var(--d) 2 alternate}
.stars .sp{opacity:.6;animation:twk 2.4s ease-in-out var(--d) infinite alternate;width:calc(2.4px*var(--s));height:calc(2.4px*var(--s))}
@keyframes twk{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
:root{--velvet:#1a0f10;--velvet2:#3a1a1e;--rose:#efd9d0;--rose2:#d9a9a0;--rose3:#fff6ef;--glow:#ffe7a8;--wood:#2a1d12;--wood2:#4b3420;--lead:#3b2e1c;--g1:#d7e2cf;--g2:#f3e6c6;--g3:#b9cbb0;--g4:#e8c99a}

/* 1 · DOOR */
.dr-scene{perspective:1100px}
.dr-frame{position:relative;width:min(78vw,340px);height:min(70vh,560px);border-radius:170px 170px 6px 6px/150px 150px 6px 6px;padding:14px 14px 0;
  background:linear-gradient(180deg,#e9d39b,#a77d33 30%,#6e4f1b);box-shadow:0 30px 60px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,240,200,.4)}
.dr-light{position:absolute;width:min(70vw,312px);height:min(67vh,546px);border-radius:160px 160px 0 0/140px 140px 0 0;bottom:calc(50% - min(35vh,280px));overflow:hidden;
  background:radial-gradient(60% 50% at 50% 55%,#fff8e0 0%,var(--glow) 35%,#c9a35a 70%,#5a4220 100%)}
.dr-hall{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-end;padding:0 8% 18%}
.hall-arch{width:22%;height:46%;border-radius:40px 40px 0 0;border:2px solid rgba(140,106,44,.5);border-bottom:0;background:linear-gradient(rgba(255,255,255,.5),transparent)}
.chand{position:absolute;top:8%;left:50%;width:60px;height:46px;margin-left:-30px;border-radius:0 0 30px 30px;border:2px solid rgba(140,106,44,.6);border-top:0;box-shadow:0 0 30px 10px rgba(255,248,220,.9)}
.dr-leaf{position:absolute;top:14px;bottom:0;width:calc(50% - 14px);background:linear-gradient(90deg,var(--wood),var(--wood2) 45%,var(--wood));transition:transform 2.4s cubic-bezier(.5,0,.2,1);box-shadow:inset 0 0 30px rgba(0,0,0,.6);z-index:2}
.dr-leaf.l{left:14px;transform-origin:left center;border-radius:150px 0 0 0/130px 0 0 0}
.dr-leaf.r{right:14px;transform-origin:right center;border-radius:0 150px 0 0/0 130px 0 0}
.dr-panel{position:absolute;left:14%;right:14%;top:16%;height:34%;border:2px solid rgba(201,163,90,.7);box-shadow:inset 0 0 0 6px rgba(0,0,0,.25),inset 0 0 0 7px rgba(201,163,90,.4);border-radius:60px 60px 2px 2px}
.dr-leaf.l .dr-panel{border-top-right-radius:2px}.dr-leaf.r .dr-panel{border-top-left-radius:2px}
.dr-panel.b{top:58%;height:30%;border-radius:2px}
.dr-knock{position:absolute;top:47%;width:30px;height:30px;border-radius:50%;border:4px solid #d9b86d;box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 0 3px rgba(0,0,0,.5);transform-origin:50% 0;transition:transform .15s}
.dr-leaf.l .dr-knock{right:10%}.dr-leaf.r .dr-knock{left:10%}
.dr-mono{position:absolute;top:26px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--ar-cal);color:var(--gold-l);font-size:22px;padding:4px 14px;border:1px solid rgba(236,213,156,.6);border-radius:20px;background:rgba(0,0,0,.35);white-space:nowrap;transition:opacity .5s}
html[dir=ltr] .dr-mono{font-family:var(--lat-s)}
.dr-dots{position:absolute;bottom:calc(50% - min(35vh,280px) - 34px);display:flex;gap:10px}
.dr-dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);transition:background .2s}
.dr-dots i.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.knock .dr-frame{animation:knk .28s}
.knock .dr-knock{transform:rotate(-14deg)}
@keyframes knk{30%{transform:translateY(2px) scale(.995)}60%{transform:translateY(-1px)}}
.dr-scene.opening .dr-leaf.l{transform:rotateY(-108deg)}
.dr-scene.opening .dr-leaf.r{transform:rotateY(108deg)}
.dr-scene.opening .dr-mono,.dr-scene.opening .dr-dots{opacity:0}
.dr-scene.opening{animation:pushin 3.2s cubic-bezier(.6,0,.3,1) .5s forwards}
@keyframes pushin{to{transform:scale(2.3)}}
/* arch / garden door variant: single arched oak door with blossoms */
.dr-arch .dr-frame{background:linear-gradient(180deg,#b9a27a,#7d6648 40%,#4d3b26)}
.dr-arch .dr-light{background:linear-gradient(180deg,#fff6d8 0%,#f3e3b0 45%,#cfe0b8 70%,#9db88b 100%)}
.wist{position:absolute;left:-18px;right:-18px;top:-22px;height:52%;z-index:4;pointer-events:none}
.wist i{position:absolute;width:20px;height:44px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;
  left:calc(var(--i) * 4.6%);top:calc(16px + (var(--i) - 11) * (var(--i) - 11) * 1.3px);
  background:radial-gradient(circle at 50% 20%,var(--rose3),var(--rose) 50%,var(--rose2));opacity:.92;box-shadow:0 2px 4px rgba(0,0,0,.25);transform:rotate(calc((var(--i) - 11) * 4deg))}
.wist i:nth-child(3n){height:30px;background:radial-gradient(circle,#a9c08f,#5f7a4c);border-radius:50% 0}

/* 2 · GATES */
.gt-scene{perspective:1000px;background:linear-gradient(180deg,#0b0a08 0%,#1c1710 60%,#2b2216 100%)}
.gt-world{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#fdf3d6 0%,#f6e3ae 40%,#d8c08a 62%,#8b7a52 100%);transition:transform 3.4s cubic-bezier(.5,0,.2,1)}
.gt-path{position:absolute;left:50%;bottom:0;width:120%;height:42%;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(#e9dcc0,#c8b48b)}
.gt-palace{position:absolute;left:50%;top:22%;width:78%;transform:translateX(-50%);fill:#efe2c4;stroke:#b39762;stroke-width:.8;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.fount{position:absolute;left:50%;top:52%;width:70px;height:26px;margin-left:-35px;border-radius:50%;border:3px solid #c9a35a;background:rgba(170,210,230,.6);box-shadow:0 -30px 0 -8px rgba(220,240,250,.5)}
.gt-pillar{position:absolute;top:8%;bottom:0;width:12%;z-index:3;background:linear-gradient(90deg,#2a2318,#5c4a30 50%,#2a2318);box-shadow:0 0 20px rgba(0,0,0,.6)}
.gt-pillar::before{content:"";position:absolute;left:-15%;right:-15%;top:-14px;height:26px;background:var(--g-grad);border-radius:4px}
.gt-pillar.l{left:0}.gt-pillar.r{right:0}
.gt-leaf{position:absolute;top:12%;bottom:0;width:38%;z-index:2;color:var(--gold);transition:transform 2.6s cubic-bezier(.5,0,.2,1) .2s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.gt-leaf .ig{width:100%;height:100%}
.gt-leaf.l{left:12%;transform-origin:left center}.gt-leaf.r{right:12%;transform-origin:right center}
.gt-leaf.r .ig{transform:scaleX(-1)}
.gt-crest{position:absolute;left:50%;top:44%;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:5;animation:breathe 2.6s ease-in-out infinite;transition:opacity .5s, transform .6s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.gt-crest svg{width:100%;height:100%}
.crest-svg text{font-family:var(--ar-cal)}
html[dir=ltr] .crest-svg text{font-family:var(--lat-s)}
.gt-scene.opening .gt-crest{opacity:0;transform:scale(1.5);animation:none}
.gt-scene.opening .gt-leaf.l{transform:rotateY(-100deg)}
.gt-scene.opening .gt-leaf.r{transform:rotateY(100deg)}
.gt-scene.opening .gt-world{transform:scale(1.7) translateY(6%)}
.gt-scene.opening .gt-pillar.l{transform:translateX(-120%);transition:transform 2.4s 1s}
.gt-scene.opening .gt-pillar.r{transform:translateX(120%);transition:transform 2.4s 1s}
.gt-ch .gt-world{background:linear-gradient(180deg,#bcd6ea 0%,#e8eef0 45%,#f7efe0 70%,#e4d6b4 100%)}
.castle{position:absolute;left:50%;top:26%;width:80%;transform:translateX(-50%);fill:#f4ede0;filter:drop-shadow(0 4px 10px rgba(80,90,110,.25))}
.cl{position:absolute;height:60px;border-radius:60px;background:#fff;filter:blur(8px);opacity:.9}
.cl.c1{width:60%;left:-10%;top:52%}.cl.c2{width:55%;right:-12%;top:48%}.cl.c3{width:70%;left:15%;top:60%}
.gt-roses{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:2px;padding-top:12%}
.gt-roses .rs{width:calc(36px*var(--sc));filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.gt-roses .rs:nth-child(n+4){margin-top:-6px}
.gt-ch .gt-crest{width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c2,#e2bf6c 30%,#9c7430);padding:10px;box-shadow:0 0 0 3px rgba(255,240,200,.5),0 8px 20px rgba(0,0,0,.5)}

/* 3 · CURTAINS */
.ct-scene{background:#000;overflow:hidden}
.ct-stage{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(50% 40% at 50% 45%,#2a2216,#0a0907 70%)}
.ct-lamp{position:absolute;top:0;left:50%;width:140%;height:100%;transform:translateX(-50%);background:conic-gradient(from 160deg at 50% 0,transparent 0deg,rgba(255,236,180,.0) 8deg,rgba(255,236,180,.35) 20deg,rgba(255,236,180,.0) 32deg,transparent 40deg);opacity:0;transition:opacity 1.2s}
.ct-mono{position:relative;font-family:var(--ar-cal);font-size:clamp(40px,13vw,64px);color:var(--gold-l);opacity:.15;transition:opacity 1.2s, text-shadow 1.2s;text-align:center;line-height:1.2}
.mh small{font-size:.5em;margin:0 4px;vertical-align:middle}
.ct-mono .ct-d{display:block;font-style:normal;font-family:var(--ar-k);font-size:13px;letter-spacing:3px;color:var(--gold)}
html[dir=ltr] .ct-mono{font-family:var(--lat-s)}
.lit .ct-lamp{opacity:1}.lit .ct-mono{opacity:1;text-shadow:0 0 24px rgba(255,220,150,.7)}
.ct-c{position:absolute;top:0;bottom:0;width:52%;z-index:3;transition:transform 2s cubic-bezier(.6,0,.2,1);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.09) 7%,rgba(255,255,255,.04) 10%,rgba(0,0,0,.5) 16%),linear-gradient(180deg,var(--velvet2),var(--velvet));box-shadow:0 0 40px rgba(0,0,0,.8)}
.ct-c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:repeating-linear-gradient(90deg,#c9a35a 0 3px,#8c6a2c 3px 6px);opacity:.85}
.ct-c.l{left:0;transform-origin:left}.ct-c.r{right:0;transform-origin:right}
.ct-tie{position:absolute;top:55%;width:26px;height:46px;border-radius:13px;background:var(--g-grad);box-shadow:0 4px 8px rgba(0,0,0,.6)}
.ct-c.l .ct-tie{right:12%}.ct-c.r .ct-tie{left:12%}
.ct-val{position:absolute;top:0;left:0;right:0;height:13%;z-index:4;background:repeating-radial-gradient(circle at 50% -40%,var(--velvet2) 0 18px,var(--velvet) 18px 36px);border-bottom:6px solid var(--gold-d);box-shadow:0 8px 20px rgba(0,0,0,.7)}
.ct-val::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:12px;background:repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 7px)}
.ct-scene.opening .ct-c.l{transform:translateX(-78%) scaleX(.45)}
.ct-scene.opening .ct-c.r{transform:translateX(78%) scaleX(.45)}

/* 4 · PALACE — silk curtains behind the envelope */
.silk{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.silk::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 50%,#fff3d0,var(--glow) 40%,#a37b36 100%);opacity:0;transition:opacity 1.2s 1.4s}
.silk i{position:absolute;top:0;bottom:0;width:51%;transition:transform 2s cubic-bezier(.6,0,.2,1) 1.5s;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.10) 9%,rgba(255,236,190,.16) 12%,rgba(0,0,0,.22) 20%),linear-gradient(180deg,var(--velvet2),var(--velvet));box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.silk i::after{content:"";position:absolute;left:0;right:0;top:0;height:9%;background:repeating-radial-gradient(circle at 50% -40%,var(--velvet2) 0 14px,var(--velvet) 14px 28px);border-bottom:3px solid var(--gold-d)}
.silk i:first-child{left:0}.silk i:last-child{right:0}
.intro.open .silk::before{opacity:1}
.intro.open .silk i:first-child{transform:translateX(-90%)}
.intro.open .silk i:last-child{transform:translateX(90%)}
.intro.palace .intro-in{z-index:2}
.intro.palace.open .env{transition:opacity .8s 1.3s;opacity:0}

/* 5 · RING / JEWEL BOX */
.rb-scene{background:radial-gradient(60% 45% at 50% 55%,#2d241a,#0a0907 75%)}
.rb{position:relative;width:min(62vw,250px);height:min(62vw,250px);perspective:900px;margin-top:10vh}
.rb-base{position:absolute;left:0;right:0;bottom:0;height:52%;border-radius:12px 12px 22px 22px;background:linear-gradient(180deg,var(--velvet2),var(--velvet));box-shadow:0 30px 50px rgba(0,0,0,.7),inset 0 -10px 20px rgba(0,0,0,.5);z-index:1}
.rb-cush{opacity:0;transition:opacity .6s .5s;position:absolute;left:8%;right:8%;top:8%;height:46%;border-radius:40px;background:radial-gradient(ellipse at 50% 30%,#fff7ea,#e8dcc6 60%,#b9a684)}
.rb-ring{position:absolute;left:50%;top:-40%;width:52%;transform:translate(-50%,40%) scale(.85);transition:transform 1.4s cubic-bezier(.3,1.4,.4,1) .9s;z-index:3}
.rb-ring svg{width:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.glint{position:absolute;left:47%;top:8%;width:30px;height:30px;margin-left:-15px;background:radial-gradient(circle,#fff 0 8%,transparent 9%),linear-gradient(90deg,transparent 47%,#fff 50%,transparent 53%),linear-gradient(0deg,transparent 47%,#fff 50%,transparent 53%);opacity:0}
.glint.g2{left:66%;top:20%;transform:scale(.6)}
.rb-lid{position:absolute;left:0;right:0;top:0;height:50%;transform-origin:50% 100%;transition:transform 1.3s cubic-bezier(.5,0,.2,1) .2s;z-index:2;transform-style:preserve-3d}
.rb-lid-top,.rb-lid-in{position:absolute;inset:0;border-radius:24px 24px 10px 10px;backface-visibility:hidden}
.rb-lid-top{background:linear-gradient(180deg,var(--velvet2),var(--velvet));box-shadow:inset 0 10px 20px rgba(255,255,255,.08),inset 0 -6px 10px rgba(0,0,0,.4);display:grid;place-items:center;font-family:var(--ar-cal);font-style:normal;color:var(--gold-l);font-size:26px}
html[dir=ltr] .rb-lid-top{font-family:var(--lat-s)}
.rb-lid-in{transform:rotateX(180deg);background:radial-gradient(ellipse at 50% 60%,#fff8ec,#e2d4b8)}
.rb-clasp{position:absolute;left:50%;top:44%;width:38px;height:30px;margin-left:-19px;z-index:4;border-radius:6px;background:var(--g-grad);box-shadow:0 4px 8px rgba(0,0,0,.6);animation:breathe 2.4s infinite;transition:opacity .4s}
.rb-scene.opening .rb-clasp{opacity:0}
.rb-scene.opening .rb-cush{opacity:1}
.rb-scene.opening .rb-lid{transform:rotateX(-115deg)}
.rb-scene.opening .rb-ring{transform:translate(-50%,-38%) scale(1.3)}
.rb-scene.opening .rb-base{z-index:3}
.rb-scene.opening .glint{animation:glint 1.2s ease-in-out 1.7s 2}
@keyframes glint{50%{opacity:1;transform:scale(1.3) rotate(45deg)}}

/* 6 · SCRATCH */
.sc-scene{background:radial-gradient(70% 50% at 50% 50%,#2a2318,#0b0a08)}
.sc-card{width:min(86vw,360px);padding:30px 18px;text-align:center;background:var(--paper);border-radius:6px;color:var(--text);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 7px var(--paper),inset 0 0 0 8px rgba(201,163,90,.5);cursor:default}
.sc-names{display:block;font-family:var(--ar-cal);font-size:30px;color:var(--gold-d)}
html[dir=ltr] .sc-names{font-family:var(--lat-s);font-weight:400;font-size:36px}
.sc-sub{font-family:var(--ar-k);font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:16px}
.sc-row{display:flex;justify-content:center;gap:12px;direction:ltr}
.sc-c{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(201,163,90,.5)}
.sc-v{font-family:var(--lat);font-size:24px;font-weight:600;color:var(--gold-d);line-height:1.1;padding:4px}
html[dir=rtl] .sc-v{font-family:var(--ar);font-size:21px}
.sc-c canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;touch-action:none;cursor:grab;transition:opacity .6s}
.sc-c canvas.gone{opacity:0;pointer-events:none}

/* 7 · GATEFOLD */
.gf-scene{background:radial-gradient(70% 50% at 50% 50%,#173a2c,#06140f 80%)}
.gf{position:relative;width:min(80vw,320px);aspect-ratio:.7;perspective:1300px}
.gf-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:var(--paper);border-radius:4px;color:var(--text);box-shadow:inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 8px var(--paper),inset 0 0 0 9px rgba(201,163,90,.5)}
.gf-names,.lc-card b,.rbn-card b,.hn-card b{display:block;font-family:var(--ar-cal);font-size:30px;color:var(--gold-d);line-height:1.3}
html[dir=ltr] .gf-names,html[dir=ltr] .lc-card b,html[dir=ltr] .rbn-card b,html[dir=ltr] .hn-card b{font-family:var(--lat-s);font-weight:400;font-size:36px}
.gf-in p,.lc-card p,.rbn-card p,.hn-card p{font-family:var(--ar-k);font-size:12px;letter-spacing:2px;color:var(--muted)}
.gf-p{position:absolute;top:0;bottom:0;width:50%;transition:transform 1.8s cubic-bezier(.5,0,.2,1) .35s;transform-style:preserve-3d;z-index:2}
.gf-p i{position:absolute;inset:0;background:linear-gradient(135deg,#f4ecdc,#e3d5b8);box-shadow:inset 0 0 0 1px rgba(140,106,44,.3);
  background-image:repeating-linear-gradient(0deg,rgba(140,106,44,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(140,106,44,.05) 0 1px,transparent 1px 3px),linear-gradient(135deg,#f4ecdc,#e3d5b8)}
.gf-p i::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,163,90,.55)}
.gf-p.l{left:0;transform-origin:left}.gf-p.r{right:0;transform-origin:right}
.gf-p.l i{border-radius:4px 0 0 4px}.gf-p.r i{border-radius:0 4px 4px 0}
.gf-seal{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;z-index:4;animation:breathe 2.6s infinite}
.gf-h{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;display:block;transition:transform 1.8s cubic-bezier(.5,0,.2,1) .35s,opacity .6s 1.4s}
.gf-h::before{content:"";position:absolute;top:0;bottom:0;width:80px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c2 0%,#e2bf6c 22%,#b48736 55%,#7c5a1f 100%);box-shadow:inset 0 -4px 8px rgba(0,0,0,.3)}
.gf-h.l{left:0}.gf-h.l::before{left:0}.gf-h.r{right:0}.gf-h.r::before{right:0}
.gf-h{font-size:0}
.gf-seal::after{content:attr(data-m);position:absolute;inset:0}
.gf-scene.opening .gf-seal{animation:none}
.gf-scene.opening .gf-p.l,.gf-scene.opening .gf-h.l{transform:rotateY(-165deg)}
.gf-scene.opening .gf-p.r,.gf-scene.opening .gf-h.r{transform:rotateY(165deg)}
.gf-scene.opening .gf-h{opacity:0}
.gf-scene.opening .gf-h.l{transform:translateX(-140px) rotate(-30deg)}
.gf-scene.opening .gf-h.r{transform:translateX(140px) rotate(30deg)}

/* 8 · LACE LETTER */
.lc-scene{background:radial-gradient(70% 50% at 50% 50%,#2a2318,#0b0a08)}
.lc{position:relative;width:min(82vw,330px);aspect-ratio:1;perspective:1200px}
.lc-card{position:absolute;inset:8%;display:grid;place-content:center;text-align:center;background:var(--paper);color:var(--text);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 7px var(--paper),inset 0 0 0 8px rgba(201,163,90,.5);transform:scale(.9);transition:transform 1.2s 2.2s}
.lc-f{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.5,0,.2,1);backface-visibility:hidden;
  background:radial-gradient(circle,rgba(255,255,255,.55) 1.6px,transparent 2px) 0 0/12px 12px,radial-gradient(circle,rgba(201,163,90,.35) 3px,transparent 3.5px) 6px 6px/12px 12px,linear-gradient(135deg,#f6efe0,#e2d2b2);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.lc-f.t{clip-path:polygon(0 0,100% 0,50% 52%);transform-origin:top;z-index:4}
.lc-f.b{clip-path:polygon(0 100%,100% 100%,50% 48%);transform-origin:bottom;z-index:3}
.lc-f.l{clip-path:polygon(0 0,0 100%,52% 50%);transform-origin:left;z-index:2}
.lc-f.r{clip-path:polygon(100% 0,100% 100%,48% 50%);transform-origin:right;z-index:2}
.lc-seal{position:absolute;left:50%;top:50%;margin:-39px;z-index:6;transition:transform .9s, opacity .9s, filter .9s}
.lc-scene.opening .lc-seal{transform:scale(.4) translateY(30px);opacity:0;filter:blur(6px);animation:none}
.lc-scene.opening .lc-f.t{transform:rotateX(-178deg);transition-delay:.7s}
.lc-scene.opening .lc-f.l{transform:rotateY(-178deg);transition-delay:1.1s}
.lc-scene.opening .lc-f.r{transform:rotateY(178deg);transition-delay:1.3s}
.lc-scene.opening .lc-f.b{transform:rotateX(178deg);transition-delay:1.6s}
.lc-scene.opening .lc-card{transform:scale(1.08)}

/* 9 · RIBBON */
.rbn-scene{background:radial-gradient(70% 50% at 50% 50%,#3b2a2a,#0d0a0a 80%)}
.rbn-card{position:relative;width:min(80vw,320px);aspect-ratio:.72;display:grid;place-content:center;text-align:center;background:linear-gradient(160deg,#fbf6ee,#f1e4da);color:var(--text);border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 8px #fbf6ee,inset 0 0 0 9px rgba(201,163,90,.5);overflow:hidden}
.rbn-v,.rbn-h{position:absolute;background:linear-gradient(90deg,#c48e86,#f2cfc8 40%,#d79d94 60%,#b47c74);box-shadow:0 0 6px rgba(0,0,0,.25);transition:transform 1.4s cubic-bezier(.6,0,.3,1) .9s}
.rbn-v{left:50%;top:0;bottom:0;width:34px;margin-left:-17px}
.rbn-h{top:50%;left:0;right:0;height:34px;margin-top:-17px;background:linear-gradient(180deg,#c48e86,#f2cfc8 40%,#d79d94 60%,#b47c74)}
.bow{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;transition:transform 1s, opacity .8s .6s}
.bw{position:absolute;width:62px;height:44px;top:-22px;border-radius:50%;background:radial-gradient(ellipse at 60% 50%,#f6d9d2,#d09890 70%,#a9726a);box-shadow:inset 0 0 0 6px rgba(160,100,92,.25);transition:transform .9s}
.bw.l{right:4px;border-radius:60% 30% 30% 60%;transform-origin:right center}.bw.r{left:4px;border-radius:30% 60% 60% 30%;transform-origin:left center}
.bt{position:absolute;top:6px;width:20px;height:70px;background:linear-gradient(#e7b8b0,#c4877f);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);transform-origin:top center;transition:transform 1s}
.bt.l{right:2px;transform:rotate(22deg)}.bt.r{left:2px;transform:rotate(-22deg)}
.bk{position:absolute;left:-13px;top:-14px;width:26px;height:28px;border-radius:8px;background:linear-gradient(#f2cfc8,#c48e86)}
.rbn-scene.opening .bw.l{transform:scaleX(.2) rotate(30deg)}
.rbn-scene.opening .bw.r{transform:scaleX(.2) rotate(-30deg)}
.rbn-scene.opening .bt.l{transform:rotate(80deg) translateY(30px)}
.rbn-scene.opening .bt.r{transform:rotate(-80deg) translateY(30px)}
.rbn-scene.opening .bow{opacity:0;transform:translateY(60px)}
.rbn-scene.opening .rbn-v{transform:translateY(110%)}
.rbn-scene.opening .rbn-h{transform:translateX(-110%)}
.rbn-scene.opening .rbn-card{box-shadow:0 0 80px 20px rgba(255,226,170,.5),inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 8px #fbf6ee,inset 0 0 0 9px rgba(201,163,90,.5);transition:box-shadow 1.2s 1.8s}

/* 10 · HENNA / CANDLES */
.hn-scene{background:radial-gradient(70% 50% at 50% 60%,#2b1a12,#0a0605 80%);transition:background 1.5s}
.hn-card{position:absolute;top:22%;left:50%;transform:translate(-50%,0) scale(.92);width:min(78vw,300px);padding:26px 16px;text-align:center;background:linear-gradient(160deg,#fbf3e6,#efdcc4);color:var(--text);border-radius:6px;opacity:.25;transition:opacity 1.5s .6s,transform 1.5s .6s;
  box-shadow:inset 0 0 0 1px rgba(201,163,90,.6),inset 0 0 0 7px #fbf3e6,inset 0 0 0 8px rgba(201,163,90,.5);background-image:radial-gradient(circle at 0 0,rgba(176,70,50,.18) 0 18px,transparent 19px),radial-gradient(circle at 100% 0,rgba(176,70,50,.18) 0 18px,transparent 19px),radial-gradient(circle at 0 100%,rgba(176,70,50,.18) 0 18px,transparent 19px),radial-gradient(circle at 100% 100%,rgba(176,70,50,.18) 0 18px,transparent 19px),linear-gradient(160deg,#fbf3e6,#efdcc4)}
.tray{position:absolute;bottom:16%;left:50%;width:min(84vw,330px);height:110px;transform:translateX(-50%);display:flex;justify-content:space-evenly;align-items:flex-end}
.tray-p{position:absolute;left:0;right:0;bottom:-18px;height:44px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#f6e6b4,#c49a4e 50%,#6e4f1b);box-shadow:0 10px 20px rgba(0,0,0,.6)}
.tray-h{position:absolute;left:8%;right:8%;bottom:-8px;height:20px;border-radius:50%;border:1px dashed rgba(91,63,18,.6)}
.cn{position:relative;z-index:2;width:24px;height:calc(56px + var(--i) * 0px);border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#e8dcc6,#fffaf0 45%,#d8c8aa)}
.cn:nth-child(3),.cn:nth-child(5){height:74px}.cn:nth-child(4){height:90px}
.cn b{position:absolute;left:50%;top:-8px;width:2px;height:9px;margin-left:-1px;background:#3b2e1c}
.cn-f{position:absolute;left:50%;top:-34px;width:14px;height:26px;margin-left:-7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#fff 0 15%,#ffd77a 40%,#ff9a3c 75%,transparent 76%);opacity:0;transform:scale(.2);transform-origin:50% 100%;transition:opacity .4s,transform .5s;transition-delay:calc(var(--i) * .3s);animation:flick .15s ease-in-out infinite alternate}
.cn-w{position:absolute;left:50%;top:-60px;width:80px;height:80px;margin-left:-40px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.45),transparent 65%);opacity:0;transition:opacity .8s;transition-delay:calc(var(--i) * .3s)}
@keyframes flick{to{transform:scale(1) skewX(3deg) scaleY(1.06)}}
.lighting .cn-f{opacity:1;transform:scale(1)}.lighting .cn-w{opacity:1}
.lighting.hn-scene{background:radial-gradient(80% 60% at 50% 70%,#6b3f1f,#1d0f08 80%)}
.lighting .hn-card{opacity:1;transform:translate(-50%,0) scale(1)}

/* 11 · LANTERNS */
.lt-scene{background:#0a0807}
.lt-yard{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 55%,#ffe9b8,#d4a75c 50%,#3a2a14 100%)}
.lt-yard .fount{top:68%}
.lt-mono{font-family:var(--ar-cal);color:#5b3f12;font-size:clamp(34px,11vw,54px);opacity:0;transition:opacity 1.2s 2.4s}
html[dir=ltr] .lt-mono{font-family:var(--lat-s)}
.lt-door{position:absolute;top:0;bottom:0;width:50%;z-index:2;background:linear-gradient(90deg,#20160c,#3d2a16 50%,#20160c);color:#a8834a;transition:transform 2.4s cubic-bezier(.5,0,.2,1);box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
.lt-door .lat{position:absolute;inset:12% 10% 6%;width:80%;height:82%;opacity:.85}
.lt-door.l{left:0;transform-origin:left}.lt-door.r{right:0;transform-origin:right}
.lt-scene{perspective:1100px}
.lt-arch{position:absolute;left:0;right:0;top:0;height:14%;z-index:3;background:radial-gradient(70% 140% at 50% 140%,transparent 60%,#140d07 61%)}
.lns{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-evenly;align-items:flex-start;pointer-events:auto}
.ln{position:relative;color:#b99256;width:52px;transform-origin:50% 0;animation:sway 3s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.6s)}
.ln:nth-child(1),.ln:nth-child(5){margin-top:6vh}.ln:nth-child(2),.ln:nth-child(4){margin-top:14vh}.ln:nth-child(3){margin-top:22vh;width:70px}
.ln-ch{display:block;width:1px;margin:0 auto;height:0;background:#b99256}
.ln svg{width:100%;overflow:visible}
.ln-g{fill:#2d2114;transition:fill .5s,filter .5s;transition-delay:calc((2 - var(--i)) * (2 - var(--i)) * .12s + .1s)}
.lighting .ln-g{fill:#ffcf73;filter:drop-shadow(0 0 16px #ffb547)}
.ln::before{content:"";position:absolute;top:0;left:50%;width:1px;height:100vh;transform:translateY(-100%)}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.lt-scene.opening .lt-door.l{transform:rotateY(-100deg)}
.lt-scene.opening .lt-door.r{transform:rotateY(100deg)}
.lt-scene.opening .lt-mono{opacity:1}
.lt-scene.opening .lns{transform:translateY(-6vh);transition:transform 2s 1s}

/* 12 · MOON */
.mn-scene{background:linear-gradient(180deg,#05070f 0%,#0d1428 55%,#1d2440 100%);overflow:hidden}
.mn-moon{position:absolute;top:24%;left:50%;width:120px;height:120px;margin-left:-60px;border-radius:50%;box-shadow:24px -10px 0 0 #f6e6b4;transform:rotate(-20deg);opacity:0;filter:drop-shadow(0 0 30px rgba(246,230,180,.6));transition:opacity 1.6s 1.4s}
.mn-names{position:absolute;top:50%;left:0;right:0;text-align:center;font-family:var(--ar-cal);font-size:clamp(30px,10vw,44px);color:var(--gold-l);opacity:0;transition:opacity 1.4s 2s;line-height:1.3}
.mn-names small,.lp-names small,.rbd-names small,.gl-names small{display:block;font-family:var(--ar-k);font-size:12px;letter-spacing:3px;color:var(--gold)}
html[dir=ltr] .mn-names,html[dir=ltr] .lp-names,html[dir=ltr] .rbd-names,html[dir=ltr] .gl-names{font-family:var(--lat-s)}
.mc{position:absolute;width:90%;height:38%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#2c3456 0%,#1a2140 60%,transparent 70%);filter:blur(6px);transition:transform 2.6s cubic-bezier(.5,0,.2,1) .4s;z-index:3}
.mc.a{left:-30%;top:12%}.mc.b{right:-30%;top:20%}.mc.c{left:-20%;top:42%}.mc.d{right:-25%;top:50%}
.mn-star{position:absolute;left:50%;top:44%;width:76px;height:76px;margin:-38px;z-index:5;animation:breathe 2.4s infinite;filter:drop-shadow(0 0 14px rgba(255,220,140,.9))}
.mn-star svg{width:100%;fill:url(#none);fill:#f3d78f}
.shower i{position:absolute;top:-10%;left:var(--x);width:2px;height:80px;background:linear-gradient(transparent,#fff3c6);opacity:0;transform:rotate(18deg)}
.mn-scene.opening .shower i{animation:shoot 1.3s ease-in var(--d) 2}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}20%{opacity:1}100%{opacity:0;transform:translate(-30vw,110vh) rotate(18deg)}}
.mn-scene.opening .mn-star{animation:none;transform:scale(2.2);opacity:0;transition:transform .6s,opacity .6s}
.mn-scene.opening .mc.a,.mn-scene.opening .mc.c{transform:translateX(-80%)}
.mn-scene.opening .mc.b,.mn-scene.opening .mc.d{transform:translateX(80%)}
.mn-scene.opening .mn-moon,.mn-scene.opening .mn-names{opacity:1}

/* 13 · ROSE WALL */
.rw-scene{overflow:hidden}
.rw-garden{position:absolute;inset:0;background:linear-gradient(180deg,#fff6dc 0%,#f6e7b8 40%,#d9e4c0 62%,#9fba8c 100%)}
.gd-sun{position:absolute;top:20%;left:50%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle,#fffbe8,#ffe9a8 50%,transparent 72%)}
.gd-hill{position:absolute;bottom:-10%;left:-20%;width:90%;height:40%;border-radius:50%;background:#a7c194}
.gd-hill.b{left:auto;right:-25%;background:#8fae7e;height:46%}
.rw-h{position:absolute;top:0;bottom:0;width:52%;z-index:3;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;background:radial-gradient(circle at 30% 30%,#5c7a4a,#2f4426);transition:transform 2.2s cubic-bezier(.6,0,.2,1) .4s;overflow:hidden}
.rw-h .rs{width:calc(50px*var(--sc));margin:-6px -4px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.rw-h.l{left:0}.rw-h.r{right:0}
.rw-med{position:absolute;left:50%;top:50%;margin:-39px;z-index:5;transition:transform .6s,opacity .6s}
.rw-scene.opening .rw-med{transform:scale(1.6);opacity:0;animation:none}
.rw-scene.opening .rw-h.l{transform:translateX(-100%)}
.rw-scene.opening .rw-h.r{transform:translateX(100%)}

/* 14 · STAINED GLASS */
.gl-scene{background:#0b0a08;perspective:1200px}
.gl-light{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 50%,#fffbe8,#ffe7a8 40%,#c9a35a 80%,#5a4220)}
.gl-rose{position:relative;width:min(70vw,280px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fbf7ee 0 52%,#e9efe0 53% 100%);box-shadow:0 0 0 4px rgba(201,163,90,.6),0 0 60px rgba(255,240,200,.9);opacity:0;transform:scale(.6);transition:opacity 1.2s 1.8s,transform 1.4s 1.8s;display:grid;place-items:center}
.gl-rose svg{position:absolute;inset:0;width:100%;height:100%}
.gl-names{position:relative;font-family:var(--ar-cal);color:var(--gold-d);font-size:26px;text-align:center;line-height:1.3}
.gl-names small{color:var(--muted)}
.gl-frame{position:absolute;width:min(84vw,350px);height:min(74vh,600px);display:flex;border-radius:175px 175px 0 0/150px 150px 0 0;padding:10px 10px 0;background:linear-gradient(180deg,#e9d39b,#8c6a2c);box-shadow:0 30px 60px rgba(0,0,0,.7)}
.gl-d{position:relative;flex:1;overflow:hidden;transition:transform 2.6s cubic-bezier(.5,0,.2,1);opacity:.96}
.gl-d svg{width:100%;height:100%;display:block}
.gl-d.l{transform-origin:left;border-radius:165px 0 0 0/140px 0 0 0}.gl-d.r{transform-origin:right;border-radius:0 165px 0 0/0 140px 0 0}
.gl-d.r svg{transform:scaleX(-1)}
.gl-h{position:absolute;top:54%;width:8px;height:44px;border-radius:4px;background:var(--g-grad)}
.gl-d.l .gl-h{right:8px}.gl-d.r .gl-h{left:8px}
.gl-scene.opening .gl-d.l{transform:rotateY(-105deg)}
.gl-scene.opening .gl-d.r{transform:rotateY(105deg)}
.gl-scene.opening .gl-frame{transform:scale(1.6);opacity:0;transition:transform 2.6s 1s,opacity 1s 1.6s}
.gl-scene.opening .gl-rose{opacity:1;transform:scale(1)}

/* 15 · MAGIC LAMP */
.lp-scene{background:radial-gradient(70% 50% at 50% 60%,#2b2116,#0a0806 80%);--p:0}
.lp{position:absolute;bottom:22%;left:50%;width:min(72vw,280px);transform:translateX(-50%);touch-action:none;cursor:grab;filter:drop-shadow(0 calc(var(--p)*0px) calc(10px + var(--p)*30px) rgba(255,214,130,calc(.3 + var(--p)*.6)))}
.lp svg{width:100%}
.lp-glow{position:absolute;left:30%;right:30%;top:-30%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,160,.7),transparent 70%);opacity:var(--p)}
.lp-meter{position:absolute;bottom:15%;left:50%;width:140px;height:3px;margin-left:-70px;background:rgba(201,163,90,.25);border-radius:2px;overflow:hidden}
.lp-meter i{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 6px var(--gold);transition:width .15s}
.lp-smoke{position:absolute;left:50%;bottom:36%;width:0;height:0}
.lp-smoke i{position:absolute;left:-40px;bottom:0;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,210,.55),transparent 70%);opacity:0;filter:blur(4px)}
.opening .lp-smoke i{animation:smoke 2.6s ease-out calc(var(--i)*.12s) forwards}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:.9}100%{opacity:0;transform:translate(calc((var(--i) - 4)*14px),-48vh) scale(3)}}
.lp-names{position:absolute;top:28%;left:0;right:0;text-align:center;font-family:var(--ar-cal);font-size:clamp(30px,10vw,44px);color:var(--gold-l);opacity:0;transition:opacity 1.2s 1.2s;text-shadow:0 0 18px rgba(255,220,150,.6);line-height:1.3}
.lp-scene.opening .lp-names{opacity:1}
.lp-scene.opening .lp-meter{opacity:0}

/* 16 · ROSEBUD */
.rbd-scene{background:radial-gradient(70% 50% at 50% 55%,#33201f,#0c0808 80%)}
.rbd{position:relative;width:160px;height:280px;margin-top:12vh}
.stem{position:absolute;left:50%;top:110px;bottom:0;width:6px;margin-left:-3px;background:linear-gradient(90deg,#3d5a2c,#6f8f52,#3d5a2c);border-radius:3px}
.leaf{position:absolute;top:170px;width:50px;height:24px;background:linear-gradient(#7d9e5e,#3d5a2c);border-radius:0 100% 0 100%}
.leaf.l{right:50%;transform:rotate(20deg)}.leaf.r{left:50%;transform:rotate(-20deg) scaleX(-1);top:200px}
.bud{position:absolute;left:50%;top:0;width:0;height:120px}
.bud i{position:absolute;left:-30px;top:20px;width:60px;height:90px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 30%,var(--rose3),var(--rose) 45%,var(--rose2));box-shadow:inset 0 -6px 12px rgba(120,60,60,.25);transform-origin:50% 100%;transform:rotate(calc((var(--i) - 4.5) * 4deg)) scale(.75);transition:transform 1.6s cubic-bezier(.3,1.2,.4,1);transition-delay:calc(var(--i)*.06s)}
.bud b{position:absolute;left:-14px;top:40px;width:28px;height:40px;border-radius:50%;background:radial-gradient(var(--rose2),#a26a62)}
.rbd-scene.opening .bud i{transform:rotate(calc((var(--i) - 4.5) * 34deg)) scale(1.1)}
.rbd-names{position:absolute;top:24%;left:0;right:0;text-align:center;font-family:var(--ar-cal);font-size:clamp(30px,10vw,44px);color:var(--gold-l);opacity:0;transition:opacity 1.2s 1.2s;line-height:1.3}
.rbd-scene.opening .rbd-names{opacity:1}

/* 17 · ALBUM */
.bk-scene{background:radial-gradient(70% 50% at 50% 50%,#2a2318,#0b0a08);perspective:1500px}
.bk{position:relative;width:min(76vw,300px);height:min(97vw,385px);transform-style:preserve-3d}
.bk-page{position:absolute;inset:0;background:var(--paper);border-radius:2px 8px 8px 2px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.bk-page img{flex:1;min-height:0;width:100%;object-fit:cover;margin:14px 14px 0;width:calc(100% - 28px)}
.bk-cap{padding:10px 8px 14px;text-align:center;color:var(--text)}
.bk-cap b{display:block;font-family:var(--ar-cal);font-size:24px;color:var(--gold-d);line-height:1.2}
html[dir=ltr] .bk-cap b{font-family:var(--lat-s);font-weight:400;font-size:30px}
.bk-cap small{font-family:var(--ar-k);font-size:11px;letter-spacing:2px;color:var(--muted)}
.bk-cover{position:absolute;inset:0;transform-origin:left center;transition:transform 2.2s cubic-bezier(.5,0,.2,1);transform-style:preserve-3d;z-index:2}
html[dir=rtl] .bk-cover{transform-origin:right center}
.bk-front,.bk-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px 8px 8px 2px}
.bk-front{display:grid;place-content:center;justify-items:center;gap:6px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 40%),repeating-radial-gradient(circle at 20% 30%,rgba(0,0,0,.06) 0 2px,transparent 2px 4px),linear-gradient(135deg,var(--velvet2),var(--velvet));box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 8px 0 14px rgba(0,0,0,.4)}
.bk-frame{position:absolute;inset:16px;border:1.5px solid rgba(201,163,90,.75);outline:1px solid rgba(201,163,90,.35);outline-offset:-6px}
.bk-mono{position:relative;font-family:var(--ar-cal);font-size:40px;line-height:1.2}
.bk-mono,.bk-lbl{background:var(--g-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[dir=ltr] .bk-mono{font-family:var(--lat-s)}
.bk-lbl{position:relative;font-family:var(--ar-k);font-size:12px;letter-spacing:4px}
.bk-back{transform:rotateY(180deg);background:linear-gradient(135deg,#efe5d0,#d9c9a8)}
.bk-spine{position:absolute;top:0;bottom:0;left:-10px;width:14px;border-radius:4px 0 0 4px;background:linear-gradient(90deg,var(--velvet),var(--velvet2));z-index:3}
html[dir=rtl] .bk-spine{left:auto;right:-10px;border-radius:0 4px 4px 0}
.bk-scene.opening .bk-cover{transform:rotateY(-170deg)}
html[dir=rtl] .bk-scene.opening .bk-cover{transform:rotateY(170deg)}

/* 18 · INSTANT PHOTO */
.pl-scene{background:radial-gradient(70% 50% at 50% 50%,#2a2318,#0b0a08)}
.pl{width:min(74vw,290px);padding:14px 14px 0;background:#fbf9f4;box-shadow:0 30px 60px rgba(0,0,0,.6);transform:rotate(-3deg);transition:transform 1s}
.pl-img{position:relative;aspect-ratio:1;background:#1c1a17;overflow:hidden}
.pl-img img{width:100%;height:100%;object-fit:cover;filter:sepia(1) brightness(.15) contrast(.6) blur(4px);transition:filter 2.6s ease-out .3s}
.pl-dev{position:absolute;inset:0;background:linear-gradient(135deg,#3d3830,#16130f);transition:opacity 2.4s ease-out .2s}
.pl-cap{font-family:var(--ar-cal);color:#3b3226;font-size:22px;text-align:center;padding:12px 0 16px}
html[dir=ltr] .pl-cap{font-family:var(--lat-s);font-size:26px}
.pl-scene.opening .pl{transform:rotate(0) scale(1.04);animation:shake .5s ease-in-out 2}
.pl-scene.opening .pl-dev{opacity:0}
.pl-scene.opening .pl-img img{filter:none}
@keyframes shake{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ENVELOPE extras — liner + stamp + postmark */
.env-liner{position:absolute;inset:4px;clip-path:polygon(4% 0,96% 0,50% 92%)}
.env-stamp{position:absolute;top:8%;right:6%;width:44px;height:54px;z-index:5;padding:4px;background:#fffaf0;
  border:2px dotted #e9dcc4;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.env-stamp i{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(160deg,var(--velvet2),var(--velvet));color:var(--gold-l);font-style:normal;font-family:var(--ar-cal);font-size:15px;line-height:1}
html[dir=ltr] .env-stamp i{font-family:var(--lat-s);font-size:17px}
.env-post{position:absolute;top:6%;right:16%;width:64px;height:64px;z-index:6;border-radius:50%;border:1.5px solid rgba(91,63,18,.45);display:grid;place-items:center;font-family:var(--lat);font-size:9px;letter-spacing:1px;color:rgba(91,63,18,.6);transform:rotate(-14deg);text-align:center;line-height:1.2}
.env-post::after{content:"";position:absolute;right:-46px;top:20px;width:46px;height:22px;background:repeating-linear-gradient(180deg,rgba(91,63,18,.4) 0 1.5px,transparent 1.5px 6px);border-radius:0 40% 40% 0}
.intro.open .env-stamp,.intro.open .env-post{opacity:0;transition:opacity .4s}

@media (prefers-reduced-motion:reduce){.op *{animation-duration:.01s!important;transition-duration:.3s!important}}