/* Premium editions: the original stages keep their existing appearance and timelines. */
#envelopeScreen[data-opening-edition="premium"] { --rp-dark:#32131e; --rp-gold:#d6b772; --rp-paper:#f4eddb; --rp-ink:#36251e; background:radial-gradient(ellipse at 50% 40%,#632b3c, var(--rp-dark) 72%); overflow-y:auto; }
body[data-design-layout="coastal"] #envelopeScreen[data-opening-edition="premium"] { --rp-dark:#102c3c; background:radial-gradient(ellipse at 50% 40%,#285467,var(--rp-dark) 72%); }
body[data-design-layout="earth"] #envelopeScreen[data-opening-edition="premium"] { --rp-dark:#37231c; background:radial-gradient(ellipse at 50% 40%,#76513d,var(--rp-dark) 72%); }
body[data-design-layout="deco"] #envelopeScreen[data-opening-edition="premium"] { --rp-dark:#132b29; background:radial-gradient(ellipse at 50% 40%,#315b51,var(--rp-dark) 72%); }
[data-opening-edition="premium"] .opening-stage:not(.premium-opening-stage) { display:none!important; }
[data-opening-edition="premium"] .premium-opening-stage { display:flex; }
[data-opening-edition="premium"] .envelope-stage-container { width:min(86vw,calc(max(180px,100dvh - 220px)*.68),390px); min-height:0; max-height:none; margin:auto; padding:18px 0; }
.rp-kicker { font:500 9px/1.6 var(--font-sans,sans-serif); letter-spacing:.22em; color:#f4eddb; margin:0 0 16px; }
.rp-canvas { width:100%; aspect-ratio:2/3; position:relative; perspective:1100px; isolation:isolate; }
.rp-photo { position:absolute; inset:0; overflow:hidden; border-radius:50% 50% 0 0 / 33.33% 33.33% 0 0; opacity:0; }
.rp-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.rp-photo-shade { position:absolute; inset:0; background:linear-gradient(transparent 70%,#0003); pointer-events:none; }
.rp-frame { position:absolute; inset:-5px; border:1px solid var(--rp-gold); border-radius:50% 50% 0 0 / 33.33% 33.33% 0 0; pointer-events:none; }
.rp-frame::after { content:''; position:absolute; inset:5px; border:1px solid #d6b77280; border-radius:inherit; }
.rp-mechanism { position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.rp-mechanism * { box-sizing:border-box; }
.rp-names { color:#fff7e8; font:400 clamp(19px,4.8vw,28px)/1.25 var(--font-serif,Georgia,serif); margin:18px 0 0; overflow-wrap:anywhere; max-width:100%; }
.rp-open { display:flex; align-items:center; justify-content:center; gap:20px; min-height:44px; width:min(100%,240px); border:1px solid var(--rp-gold); border-radius:99px; margin:16px auto 0; padding:10px 18px; background:var(--rp-paper); color:var(--rp-ink); font:500 12px/1.4 var(--font-sans,sans-serif); cursor:pointer; }
.rp-open:focus-visible { outline:3px solid #fff7e8; outline-offset:5px; }
.rp-open:hover { background:#fff8e9; }
.rp-caption { color:#f4eddb; font:400 10px/1.6 var(--font-sans,sans-serif); margin:10px 0 0; }
.rp-letter { position:absolute; inset:10% 3%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:28px; border:1px solid #ab874c; padding:30px; background:repeating-linear-gradient(0deg,#fff3 0 1px,transparent 1px 3px),var(--rp-paper); box-shadow:0 10px 30px #0004; transform-origin:50% 100%; }
.rp-letter::after { content:''; position:absolute; inset:8px; border:1px solid #ab874c80; }
.rp-letter-rule { width:70%; height:1px; background:#ab874c80; }
.rp-letter-monogram { color:var(--rp-ink); font:400 clamp(28px,9vw,54px)/1.3 var(--font-script,Georgia,serif); }
.rp-seal { position:absolute; left:50%; top:66%; width:24%; aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:48% 52% 47% 53%; background:radial-gradient(circle at 35% 28%,#a55051,#62222d 65%); box-shadow:inset 0 0 0 5px #8c3a43,inset 0 0 0 6px #cc8a7155,0 4px 10px #0004; }
.rp-seal-monogram { color:#f3d9a4; font:400 13px/1.4 var(--font-serif,Georgia,serif); }
.rp-door { position:absolute; top:0; bottom:0; width:50%; overflow:hidden; background:linear-gradient(90deg,#c6a55e30,transparent),var(--rp-paper); border:1px solid #ab874c; box-shadow:inset 0 0 0 5px #ede1c3,inset 0 0 0 6px #ab874c; backface-visibility:hidden; }
.rp-door.rp-left { left:0; border-radius:100% 0 0 0 / 33.33% 0 0 0; transform-origin:0 50%; }
.rp-door.rp-right { right:0; border-radius:0 100% 0 0 / 0 33.33% 0 0; transform-origin:100% 50%; }
.rp-engraving { position:absolute; inset:15% 15% 8%; border:1px solid #ab874c90; border-radius:80px 80px 0 0; background:repeating-linear-gradient(90deg,transparent 0 18px,#ab874c55 18px 19px,transparent 19px 38px); }
.rp-door-handle { position:absolute; top:58%; width:14px; height:22px; border:3px solid #a48043; border-radius:50%; box-shadow:0 2px 3px #0003; }
.rp-left .rp-door-handle { right:10%; }.rp-right .rp-door-handle { left:10%; }
.rp-scroll-sheet { position:absolute; inset:27% 0; display:grid; place-items:center; background:linear-gradient(90deg,#dac49b,var(--rp-paper) 15% 85%,#dac49b); }
.rp-roller { position:absolute; left:-4%; width:108%; height:5%; border-radius:99px; background:linear-gradient(#8b662e,#efd299 42%,#a1793b); box-shadow:0 4px 8px #0004; }
.rp-roller.rp-top { top:25%; }.rp-roller.rp-bottom { bottom:25%; }
.rp-curtain { position:absolute; top:0; bottom:0; width:51%; background:repeating-linear-gradient(90deg,#3c1020 0%,#873c4f 10%,#4d1729 18%,#9b4c5c 24%); border-bottom:5px solid #c7a262; box-shadow:inset -8px 0 14px #210a1980; }
.rp-curtain.rp-left { left:0; border-radius:100% 0 0 0 / 33.33% 0 0 0; transform-origin:left; }.rp-curtain.rp-right { right:0; border-radius:0 100% 0 0 / 0 33.33% 0 0; transform-origin:right; }
.rp-valance { position:absolute; inset:0 0 auto; height:23%; border-radius:50% 50% 20% 20% / 100% 100% 35% 35%; background:repeating-linear-gradient(90deg,#48182c,#884151 18px,#49162b 34px); border-bottom:3px solid #c7a262; }
.rp-tassel { position:absolute; right:8%; top:24%; width:2px; height:42%; background:#ddbf81; }.rp-tassel::after { content:''; position:absolute; bottom:0; width:13px; height:28px; left:-5px; background:repeating-linear-gradient(90deg,#b38c48 0 1px,#efd19a 1px 3px); border-radius:50% 50% 20% 20%; }
.rp-box-body { position:absolute; inset:38% 12% 17%; background:linear-gradient(90deg,#682434,#913e51,#692335); border:1px solid #c08d72; box-shadow:0 10px 25px #0005; }
.rp-ribbon { display:block; width:22%; height:100%; margin:auto; background:linear-gradient(90deg,#b58c43,#f3d898,#b58c43); }
.rp-box-lid { position:absolute; left:9%; right:9%; height:10%; top:32%; background:linear-gradient(#a85361,#6c2739); border:1px solid #c08d72; box-shadow:0 5px 10px #0005; }
.rp-bow { position:absolute; width:32%; height:100%; bottom:75%; border:8px solid #d6b772; border-radius:60% 60% 40% 40%; }.rp-bow.rp-left { left:20%; transform:rotate(20deg); }.rp-bow.rp-right { right:20%; transform:rotate(-20deg); }.rp-knot { position:absolute; left:44%; top:-10%; width:12%; height:55%; background:#e4c583; border-radius:25%; }
.rp-magnetic-band { position:absolute; top:48%; left:-1%; right:-1%; height:4px; background:linear-gradient(#f0d794,#ad8746); }
.rp-magnet { position:absolute; top:40%; width:39%; height:20%; background:linear-gradient(#4a545d,#192128); border:2px solid #c6a866; box-shadow:0 8px 20px #0005,inset 0 2px 4px #fff3; }
.rp-magnet.rp-left { left:11%; border-radius:50px 4px 4px 50px; }.rp-magnet.rp-right { right:11%; border-radius:4px 50px 50px 4px; }
.rp-envelope-back { position:absolute; inset:37% 0 15%; background:#e9dcc0; }
.rp-envelope-pocket { position:absolute; inset:37% 0 15%; background:linear-gradient(135deg,#fbf4e6,#dfcca6); clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); filter:drop-shadow(0 5px 5px #0003); }
.rp-envelope-flap { position:absolute; inset:37% 0 15%; background:linear-gradient(#fdf4e2,#d7c4a0); clip-path:polygon(0 0,100% 0,50% 56%); transform-origin:50% 0; }
.rp-envelope-seal { position:absolute; width:15%; aspect-ratio:1; left:42.5%; top:59%; border-radius:50%; background:radial-gradient(circle at 30% 25%,#ecdbad,#aa8346); box-shadow:inset 0 0 0 3px #cfb676,0 3px 5px #0004; }
.rp-petal { position:absolute; top:25%; left:38%; width:24%; height:31%; transform-origin:50% 80%; transform:rotate(var(--angle)); border-radius:70% 70% 45% 45%; background:linear-gradient(#f5e3c3,#d49894 70%,#a96573); box-shadow:inset 0 0 0 1px #fff5,0 1px 6px #0003; }
.rp-flower-heart { position:absolute; left:44%; top:45%; width:12%; aspect-ratio:1; border-radius:50%; background:radial-gradient(#f5dd9d,#b78a43); }
.rp-mist { position:absolute; inset:-5%; border-radius:50%; background:radial-gradient(ellipse at 50% 40%,#f5e9dadd,transparent 68%); filter:blur(12px); }
.rp-mist-1 { top:25%; left:-30%; }.rp-mist-2 { top:-20%; left:25%; }
.rp-mist-orb { position:absolute; left:41%; top:44%; width:18%; aspect-ratio:1; background:radial-gradient(#fff9dd,#d6b77288,transparent 70%); border-radius:50%; }
.rp-mirror-frame { position:absolute; inset:0; border:11px double #d6b772; border-radius:50% 50% 3% 3% / 33.33% 33.33% 3% 3%; box-shadow:inset 0 0 0 2px #94703c,0 2px 18px #0004; }
.rp-mirror-glass { position:absolute; inset:12px; border-radius:50% 50% 0 0 / 33.33% 33.33% 0 0; background:linear-gradient(145deg,#263d3b,#98aaa0 42%,#e4dccc 46%,#445d59 50%,#253b3a); }
.rp-reflection { position:absolute; inset:4%; background:linear-gradient(110deg,transparent 30%,#fff8cfaa 46%,transparent 57%); border-radius:50% 50% 0 0; }
.rp-book-cover,.rp-book-page { position:absolute; inset:5% 0; transform-origin:0 50%; border-radius:4px 10px 10px 4px; backface-visibility:hidden; }
.rp-book-cover { display:grid; place-items:center; background:linear-gradient(90deg,#351a20 0 5%,#783843 7%,#49212a 11%,#622d37); border:2px solid #bc9855; box-shadow:8px 5px 0 #e8d7ad,10px 6px 20px #0005; }.rp-book-cover .rp-letter-monogram { color:#f1d394; }
.rp-book-page { background:repeating-linear-gradient(0deg,#eadfc4 0 3px,#d8c9a7 3px 4px); border:1px solid #d6b772; }
.rp-book-clasp { position:absolute; right:-4%; top:46%; height:12%; width:20%; border:1px solid #e5c781; border-radius:3px; background:linear-gradient(#b28d4c,#f3d99e,#b28d4c); }
.rp-lock-plate { position:absolute; inset:0; width:100%; height:100%; color:#d6b772; filter:drop-shadow(0 5px 12px #0004); }
.rp-key { position:absolute; width:48%; left:27%; top:51%; fill:none; stroke:#ffdfa0; stroke-width:4; filter:drop-shadow(0 2px 3px #0007); }
.rp-ray { position:absolute; left:49.7%; bottom:50%; height:45%; width:.6%; transform-origin:50% 100%; transform:rotate(var(--angle)); background:linear-gradient(transparent,#e8cf8b); }
.rp-sun { position:absolute; left:40%; top:43.3%; width:20%; aspect-ratio:1; border-radius:50%; background:radial-gradient(#fff8d9,#d6b77255,transparent 70%); box-shadow:0 0 30px #e8c98055; }
.rp-fan-leaf { position:absolute; width:15%; height:32%; left:42.5%; top:38%; transform-origin:50% 100%; transform:rotate(var(--angle)); border-radius:55% 55% 4% 4%; background:repeating-linear-gradient(90deg,#f1dfad 0 6px,#c5a368 6px 7px,#e4cd9a 7px 13px); border:1px solid #eed7a5; box-shadow:0 2px 7px #0003; }
.rp-fan-pivot { position:absolute; left:47%; top:70%; width:6%; aspect-ratio:1; border-radius:50%; background:radial-gradient(#fff2cb,#b79251); }
.rp-gatefold { position:absolute; top:0; height:100%; width:33.34%; background:linear-gradient(90deg,#e1d4b5,#fff6e5,#e1d4b5); border:1px solid #c6a76a; backface-visibility:hidden; }
.rp-gatefold.rp-left { left:0; border-radius:100% 0 0 0 / 33.33% 0 0 0; transform-origin:0 50%; }.rp-gatefold.rp-right { right:0; border-radius:0 100% 0 0 / 0 33.33% 0 0; transform-origin:100% 50%; }.rp-gatefold.rp-center { left:33.33%; display:grid; place-items:center; transform-origin:50% 100%; }
.rp-satin-band { position:absolute; top:57%; width:108%; left:-4%; height:9%; background:linear-gradient(#dfc99a,#fff0c9 50%,#cab181); box-shadow:0 2px 5px #0003; }
.rp-coil { position:absolute; inset:16% 0; border:1px solid #e8ca87; border-radius:50%; transform:rotate(var(--angle)) scaleX(.72); box-shadow:0 0 8px #d9ba6950; }
.rp-dust { position:absolute; left:49%; top:49%; width:3px; height:3px; border-radius:50%; background:#f4dd99; transform:rotate(var(--angle)) translateY(calc(-60px - var(--i)*3px)); opacity:.7; }
@media(prefers-reduced-motion:reduce) { .premium-opening-stage * { animation:none!important; transition:none!important; } }
@media(max-height:500px) { .rp-kicker { margin-bottom:7px; font-size:8px; }.rp-names { margin-top:10px; font-size:17px; }.rp-open { margin-top:8px; }.rp-caption { margin-top:5px; } }
