/* Extra envelope styles — see covers.js. Motion uses only transform/opacity; decorations are static. */

/* ---------- shared ---------- */
.px { position: absolute; inset: -30px; pointer-events: none; will-change: transform; } /* bleed so tilting never shows an edge */
.stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; }
.stars.b { animation: starTwinkle 3.2s ease-in-out infinite alternate; will-change: opacity; }
@keyframes starTwinkle { from { opacity: .2; } to { opacity: 1; } }

.petal-rain { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -4vh; left: var(--x); width: 12px; height: 9px; border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ffe3e7, #f09aae); opacity: .9; will-change: transform;
  animation: petalFall var(--dur) linear var(--delay) infinite;
}
@keyframes petalFall {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(var(--sway), 55vh, 0) rotate(200deg); }
  100% { transform: translate3d(calc(var(--sway) * -.4), 112vh, 0) rotate(420deg); }
}

.confetti { position: absolute; left: 50%; top: 50%; z-index: 9; pointer-events: none; }
.cf { position: absolute; width: 8px; height: 13px; border-radius: 2px; opacity: 0; }
.cf.c0 { background: #f6c85f; } .cf.c1 { background: #ef7f9a; } .cf.c2 { background: #7cc6e8; }
.cf.c3 { background: #b69cf0; } .cf.c4 { background: #fff; } .cf.c5 { background: var(--gold); }
.cover.opening .cf { animation: confettiPop 1.6s cubic-bezier(.15,.7,.35,1) calc(var(--delay) + var(--cf-at, .5s)) forwards; will-change: transform, opacity; }
@keyframes confettiPop {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  45% { opacity: 1; transform: translate3d(calc(var(--dx) * .8), var(--dy), 0) rotate(calc(var(--rot) * .5)); }
  100% { opacity: 0; transform: translate3d(var(--dx), calc(var(--dy) + 320px), 0) rotate(var(--rot)); }
}
.flourish { width: min(62%, 220px); height: auto; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.flourish .fill { fill: var(--gold); stroke: none; }
.bow-svg { width: 100%; height: auto; display: block; }
.bow-svg stop.hi { stop-color: var(--rb-hi, #e8454f); }
.bow-svg stop.lo { stop-color: var(--rb, #b3121f); }
.bow-svg .rb-tail { fill: var(--rb, #b3121f); }
/* every extra style fades out as a whole at the end of its opening */
.cover.opening .envelope.pocket, .cover.opening .envelope.curtain, .cover.opening .envelope.gatefold,
.cover.opening .envelope.ribbon-cover, .cover.opening .envelope.scroll-cover, .cover.opening .envelope.gift, .cover.opening .envelope.night,
.cover.opening .envelope.jewelbox, .cover.opening .envelope.spotlight {
  opacity: 0; transition: opacity .45s var(--fade-at, 1.5s);
}

/* ---------- 4. Luxe Pocket ---------- */
.envelope.pocket { --flap: 56%; --side: 30%; perspective: 1600px; background: var(--env); --fade-at: 2.05s; }
.pk-back { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--env) 82%, white); background-image: var(--pattern); background-size: 110px 110px; }
.pk-card {
  position: absolute; left: 9%; right: 9%; top: 20%; height: 46%; z-index: 2; padding: 16px; border-radius: 6px;
  background: var(--paper); box-shadow: 0 2px 12px rgba(0,0,0,.18); color: var(--ink); text-align: center;
  display: grid; align-content: center; justify-items: center; gap: 8px; will-change: transform;
}
.pk-card p { margin: 0; }
.pk-card-mono { font-family: var(--f-script); font-size: calc(48px * var(--ss)); line-height: 1.1; }
.pk-card-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); }
.pk-card-line { font-size: 13px; letter-spacing: .3em; color: var(--gold); }
.pk-front {
  position: absolute; left: 0; right: 0; top: var(--side); bottom: 0; z-index: 3; text-align: center; color: var(--cover-text);
  background-color: var(--env); background-image: var(--pattern), linear-gradient(180deg, color-mix(in srgb, var(--env) 90%, black), var(--env) 25%);
  background-size: 110px 110px, auto; padding: 0 24px max(6vh, 30px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; transition: opacity .4s;
}
.pk-front p { margin: 0; }
.pk-greet, .pk-line2 { font-family: var(--f-script); font-size: calc(clamp(22px, 6vw, 28px) * var(--ss)); line-height: 1.3; }
.pk-label { font-size: 15px; letter-spacing: .32em; line-height: 1.6; }
.pk-cta { font-size: 12px; letter-spacing: .28em; opacity: .8; margin-top: 6px !important; }
.pk-orn.flip { transform: scaleY(-1); }
.pk-orn { display: flex; justify-content: center; width: 100%; }
.pk-flap-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; transition: transform 1s cubic-bezier(.5,0,.2,1) .3s; }
.pk-face { position: absolute; inset: 0; backface-visibility: hidden; }
.pk-face.back { transform: rotateX(180deg); }
.pk-face i { position: absolute; inset: 0; }
.pk-trim { background: linear-gradient(135deg, #f7e3a1, var(--gold) 40%, #a67c2e 70%, #f3d98e); clip-path: polygon(0 0, 100% 0, 100% calc(var(--side) + 4px), 50% calc(var(--flap) + 6px), 0 calc(var(--side) + 4px)); }
.pk-flap {
  clip-path: polygon(0 0, 100% 0, 100% var(--side), 50% var(--flap), 0 var(--side));
  background-color: var(--env); background-image: var(--pattern), linear-gradient(180deg, color-mix(in srgb, var(--env) 88%, white), var(--env));
  background-size: 110px 110px, auto;
}
.pk-flap-in { clip-path: polygon(0 0, 100% 0, 100% var(--side), 50% var(--flap), 0 var(--side)); background: color-mix(in srgb, var(--env) 78%, white); }
.cover-pocket .seal { top: var(--flap); z-index: 6; }
.cover-pocket.opening .pk-flap-wrap { transform: rotateX(-180deg); }
.cover-pocket.opening .pk-front { opacity: .001; transition: opacity .4s 1.7s; }
.cover-pocket.opening .pk-card { animation: pkCard 1.3s cubic-bezier(.4,0,.2,1) 1s forwards; }
@keyframes pkCard {
  0% { transform: none; z-index: 2; }
  55% { transform: translateY(-48%); z-index: 2; }
  56% { z-index: 6; }
  100% { transform: translateY(-20%) scale(1.14); z-index: 6; }
}

/* ---------- 5. Palace Curtains ---------- */
.envelope.curtain { --seal-y: 50%; background: #1c2747; --fade-at: 1.85s; }
.cover-curtain { --cover-text: #fff8ef; }
.ct-sky { background: linear-gradient(180deg, #121b38 0%, #2a3868 36%, #75699a 60%, #e2af98 80%, #f7d7b9 100%); }
.ct-sea { position: absolute; left: 0; right: 0; top: 64%; height: 18%; background: linear-gradient(180deg, rgba(150,170,205,.7), rgba(40,58,98,.95)); }
.ct-arch, .ct-arch .arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-flowers { position: absolute; bottom: 52px; width: 44%; }
.ct-flowers.left { left: 20%; }
.ct-flowers.right { right: 20%; transform: scaleX(-1); }
.ct-flowers .bouquet { width: 100%; height: auto; display: block; }
.ct-glow {
  position: absolute; left: 50%; top: 46%; z-index: 4; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,210,.9), rgba(255,214,165,.35) 32%, transparent 62%);
  opacity: .001; transform: scale(.4); will-change: transform, opacity; transition: transform 1s .5s, opacity .8s .5s; pointer-events: none;
}
.ct-curtain-layer { z-index: 5; }
.ct-curtain {
  position: absolute; top: 30px; bottom: 30px; width: 36%; will-change: transform; transition: transform 1.5s cubic-bezier(.6,0,.2,1) .35s;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(255,255,255,.10) 6%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.32) 17%),
    linear-gradient(180deg, color-mix(in srgb, var(--env) 80%, white), var(--env) 35%, var(--env-deep));
}
/* tied-back drape: gathered at the waist, flared at the floor (static clip-path) */
.ct-curtain.left { left: 30px; clip-path: polygon(0 0, 100% 0, 88% 18%, 50% 47%, 64% 60%, 100% 100%, 0 100%); }
.ct-curtain.right { right: 30px; clip-path: polygon(100% 0, 0 0, 12% 18%, 50% 47%, 36% 60%, 0 100%, 100% 100%); }
.ct-tie { position: absolute; top: 45%; height: 14px; width: 60%; border-radius: 7px; background: linear-gradient(#f5dd98, var(--gold), #93702c); }
.ct-curtain.left .ct-tie { left: 14%; transform: rotate(-10deg); }
.ct-curtain.right .ct-tie { right: 14%; transform: rotate(10deg); }
.ct-valance {
  position: absolute; left: 0; right: 0; top: 30px; height: 12%; will-change: transform; transition: transform 1.2s cubic-bezier(.6,0,.2,1) .35s;
  background: linear-gradient(180deg, var(--env-deep), var(--env)); border-bottom: 3px solid var(--gold);
  -webkit-mask: radial-gradient(30px at 50% calc(100% + 15px), transparent 97%, #000) 50% / 60px 100% repeat-x;
  mask: radial-gradient(30px at 50% calc(100% + 15px), transparent 97%, #000) 50% / 60px 100% repeat-x;
}
.cover-curtain .seal { top: var(--seal-y); z-index: 6; }
.cover-curtain .cover-text { top: calc(var(--seal-y) + 74px); bottom: 14%; z-index: 6; justify-content: flex-start; gap: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.cover-curtain.opening .ct-curtain.left { transform: translateX(-120%); }
.cover-curtain.opening .ct-curtain.right { transform: translateX(120%); }
.cover-curtain.opening .ct-valance { transform: translateY(-140%); }
.cover-curtain.opening .ct-glow { opacity: 1; transform: scale(1.1); }

/* ---------- 6. Palace Doors ---------- */
.envelope.gatefold { perspective: 1800px; --fade-at: 1.65s; }
.gf-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #fffaf0, #ffe4ad 28%, color-mix(in srgb, var(--gold) 55%, white) 58%, var(--env-2)); }
.gf-door {
  position: absolute; top: 0; bottom: 0; width: 50%; will-change: transform; backface-visibility: hidden;
  transition: transform 1.4s cubic-bezier(.55,0,.2,1) .35s; background-color: var(--env); background-size: 150px 150px, auto;
}
.gf-door.left { left: 0; transform-origin: 0 50%; background-image: var(--pattern), linear-gradient(90deg, var(--env-2), var(--env)); box-shadow: inset -3px 0 0 rgba(0,0,0,.28); }
.gf-door.right { right: 0; transform-origin: 100% 50%; background-image: var(--pattern), linear-gradient(270deg, var(--env-2), var(--env)); box-shadow: inset 3px 0 0 rgba(0,0,0,.28); }
.gf-panel {
  position: absolute; inset: 4.5% 10%; border: 2px solid var(--gold); border-radius: 50% 50% 10px 10px / 18% 18% 10px 10px;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--env) 70%, transparent), inset 0 0 0 7.5px color-mix(in srgb, var(--gold) 75%, transparent);
}
.gf-orn { position: absolute; left: 10%; right: 10%; }
.gf-orn.top { top: 9%; }
.gf-orn.bottom { bottom: 5%; transform: scaleY(-1); }
.gf-knob { position: absolute; top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5cc, var(--gold) 55%, #7a5a1c); }
.gf-door.left .gf-knob { right: 8%; }
.gf-door.right .gf-knob { left: 8%; }
.cover-gatefold .seal { top: 44%; z-index: 6; }
.cover-gatefold .cover-text { top: calc(44% + 74px); bottom: 22%; z-index: 6; justify-content: flex-start; gap: 12px; }
.cover-gatefold.opening .gf-door.left { transform: rotateY(-104deg); }
.cover-gatefold.opening .gf-door.right { transform: rotateY(104deg); }

/* ---------- 7. Ribbon Cutting ---------- */
.envelope.ribbon-cover {
  --rb: #b3121f; --rb-hi: #e8454f; --fade-at: 1.85s;
  background-color: var(--env); background-size: 170px 170px, auto;
  background-image: var(--pattern), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--env) 78%, white), var(--env) 70%);
}
.cover-ribbon .cf { --cf-at: .55s; }
.rb-top, .rb-bottom { position: absolute; left: 0; right: 0; padding: 0 24px; text-align: center; color: var(--cover-text); z-index: 5; transition: opacity .4s; }
.rb-top { top: 12%; }
.rb-bottom { bottom: 9%; display: grid; gap: 14px; justify-items: center; }
.rb-top p, .rb-bottom p { margin: 0; }
.rb-greet { font-family: var(--f-script); font-size: calc(28px * var(--ss)); margin-bottom: 8px !important; }
.rb-line1 { font-size: 15px; letter-spacing: .3em; line-height: 1.7; }
.rb-line2 { font-family: var(--f-script); font-size: calc(clamp(24px, 7vw, 32px) * var(--ss)); line-height: 1.3; }
.rb-cta { font-size: 12px; letter-spacing: .28em; opacity: .85; }
.rb-band { position: absolute; top: calc(50% - 26px); height: 52px; width: 50%; z-index: 2; will-change: transform, opacity; transition: transform 1.1s cubic-bezier(.45,0,.7,.4) .8s, opacity .5s 1.3s; }
.rb-band i { position: absolute; inset: 0; border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); background: linear-gradient(180deg, var(--rb-hi), var(--rb) 45%, color-mix(in srgb, var(--rb) 70%, black)); }
.rb-band.left { left: 0; transform-origin: 0 50%; }
.rb-band.right { right: 0; transform-origin: 100% 50%; }
.rb-bow { position: absolute; left: 50%; top: 50%; z-index: 3; width: 210px; margin: -64px 0 0 -105px; will-change: transform, opacity; transition: transform .9s cubic-bezier(.5,0,.8,.4) .8s, opacity .4s 1.25s; }
.cover-ribbon .seal { top: 50%; z-index: 4; width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.cover-ribbon .seal .seal-mono { font-size: calc(24px * var(--ss)); }
.cover-ribbon .seal::after { display: none; }
.rb-scissors { position: absolute; top: calc(50% - 30px); left: 0; z-index: 7; width: 120px; opacity: .001; transform: translateX(-130px); will-change: transform, opacity; pointer-events: none; }
.scissors-svg { width: 100%; height: auto; display: block; }
.scissors-svg .blade { transform-box: view-box; transform-origin: 44px 30px; }
.cover-ribbon.opening .rb-scissors { animation: snipMove 1s ease-out .05s forwards; }
.cover-ribbon.opening .blade.a { animation: snipA .16s ease-in-out .6s 2 alternate; }
.cover-ribbon.opening .blade.b { animation: snipB .16s ease-in-out .6s 2 alternate; }
@keyframes snipMove {
  0% { opacity: 1; transform: translateX(-130px); }
  60% { opacity: 1; transform: translateX(calc(min(100vw, 560px) / 2 - 104px)); }
  85% { opacity: 1; transform: translateX(calc(min(100vw, 560px) / 2 - 104px)); }
  100% { opacity: 0; transform: translateX(calc(min(100vw, 560px) / 2 - 80px)); }
}
@keyframes snipA { to { transform: rotate(-12deg); } }
@keyframes snipB { to { transform: rotate(12deg); } }
.cover-ribbon.opening .rb-band.left { transform: translate(-6%, 34vh) rotate(26deg); opacity: 0; }
.cover-ribbon.opening .rb-band.right { transform: translate(6%, 34vh) rotate(-26deg); opacity: 0; }
.cover-ribbon.opening .rb-bow { transform: translateY(46vh) rotate(18deg); opacity: 0; }
.cover-ribbon.opening .rb-top, .cover-ribbon.opening .rb-bottom { opacity: 0; }
.cover-ribbon.opening .seal { transition-delay: .7s; }

/* ---------- 8. Royal Scroll ---------- */
.envelope.scroll-cover { --ph: 62vh; --fade-at: 2.3s; background-color: var(--env); background-size: 160px 160px, auto; background-image: var(--pattern), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--env) 72%, white), var(--env) 55%, var(--env-deep)); }
.sc-stage { position: absolute; left: 8%; right: 8%; top: 40%; height: 0; z-index: 2; }
.sc-paper {
  position: absolute; left: 3%; right: 3%; top: calc(var(--ph) / -2); height: var(--ph); color: #5a3d1c;
  background: radial-gradient(ellipse at 50% 50%, #fcf3df, #f2e0bd 68%, #dfc190); box-shadow: inset 0 0 44px rgba(140,90,30,.4);
  transform: scaleY(.045); transform-origin: 50% 50%; will-change: transform; transition: transform 1.2s cubic-bezier(.5,0,.2,1) .45s;
  display: grid; place-items: center;
}
.sc-paper-text { opacity: 0; transition: opacity .6s 1.45s; text-align: center; padding: 0 10%; display: grid; gap: 12px; }
.sc-paper-text p { margin: 0; }
.sc-greet { font-family: var(--f-script); font-size: calc(28px * var(--ss)); }
.sc-line { font-size: 13px; letter-spacing: .28em; color: #8c6424; line-height: 1.7; }
.sc-names { font-family: var(--f-script); font-size: calc(clamp(34px, 10vw, 48px) * var(--ss)); color: #6d3a14; line-height: 1.2; }
.sc-line2 { font-style: italic; font-size: 18px; }
.sc-rod {
  position: absolute; left: 0; right: 0; top: -11px; height: 22px; border-radius: 11px; will-change: transform;
  background: linear-gradient(180deg, #f6dd96, var(--gold) 40%, #8c6424 85%, #c9a04e); transition: transform 1.2s cubic-bezier(.5,0,.2,1) .45s;
}
.sc-rod::before, .sc-rod::after { content: ''; position: absolute; top: -5px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, var(--gold) 55%, #6e4f14); }
.sc-rod::before { left: -16px; }
.sc-rod::after { right: -16px; }
.sc-rod.top { transform: translateY(-15px); }
.sc-rod.bottom { transform: translateY(15px); }
.sc-tie { position: absolute; left: 50%; top: -34px; width: 28px; height: 68px; margin-left: -14px; border-radius: 3px; background: linear-gradient(90deg, var(--seal-edge), var(--seal), var(--seal-edge)); transition: opacity .3s .3s; }
.cover-scroll .seal { top: 40%; z-index: 5; }
.cover-scroll .cover-text { top: calc(40% + 84px); z-index: 5; }
.cover-scroll.opening .sc-paper { transform: scaleY(1); }
.cover-scroll.opening .sc-paper-text { opacity: 1; }
.cover-scroll.opening .sc-rod.top { transform: translateY(calc(var(--ph) / -2 - 6px)); }
.cover-scroll.opening .sc-rod.bottom { transform: translateY(calc(var(--ph) / 2 + 6px)); }
.cover-scroll.opening .sc-tie { opacity: 0; }

/* ---------- 9. Gift Box ---------- */
.envelope.gift { --fade-at: 1.5s; --rb: var(--gold); --rb-hi: #f6e2a4; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--env) 68%, white), var(--env) 60%, var(--env-2)); }
.cover-giftbox .cf { --cf-at: .45s; }
.cover-giftbox .confetti { top: 46%; }
.gb-balloon { position: absolute; width: 58px; will-change: transform; animation: balloonBob 5s ease-in-out infinite alternate; }
.gb-balloon .balloon-svg { width: 100%; height: auto; display: block; }
.gb-balloon.b0 { left: 8%; top: 14%; } .gb-balloon.b1 { left: 76%; top: 10%; width: 66px; animation-delay: -1.5s; }
.gb-balloon.b2 { left: 18%; top: 44%; width: 48px; animation-delay: -3s; } .gb-balloon.b3 { left: 80%; top: 46%; width: 52px; animation-delay: -2s; }
.gb-balloon.b4 { left: 46%; top: 6%; width: 44px; animation-delay: -.8s; }
@keyframes balloonBob { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(8px, -22px, 0) rotate(3deg); } }
.cover-giftbox.opening .gb-balloon { animation: balloonFly 1.4s ease-in forwards; }
@keyframes balloonFly { to { transform: translate3d(0, -120vh, 0) rotate(8deg); } }
.gb-box { position: absolute; left: 50%; top: 46%; width: 200px; height: 170px; margin-left: -100px; z-index: 3; will-change: transform, opacity; transition: transform .6s 1s, opacity .4s 1.05s; }
.gb-body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 128px; border-radius: 6px; box-shadow: 0 18px 30px -12px rgba(0,0,0,.4);
  background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 82%, var(--soft)), var(--paper) 50%, color-mix(in srgb, var(--paper) 78%, var(--soft)));
}
.gb-lid {
  position: absolute; left: -10px; right: -10px; top: 0; height: 44px; border-radius: 6px; z-index: 2; box-shadow: 0 6px 8px rgba(0,0,0,.15);
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--paper) 80%, var(--soft)));
  will-change: transform, opacity; transition: transform .9s cubic-bezier(.3,1.3,.5,1) .35s, opacity .45s .85s;
}
.gb-ribbon { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; background: linear-gradient(90deg, #a67c2e, var(--gold), #f3d98e, var(--gold), #a67c2e); }
.gb-bow { position: absolute; left: 50%; bottom: 100%; width: 130px; margin: 0 0 -20px -65px; }
.cover-giftbox .seal { top: calc(46% + 106px); z-index: 4; width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.cover-giftbox .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.cover-giftbox .seal::after { display: none; }
.cover-giftbox .cover-text { top: 8%; bottom: auto; flex-direction: column-reverse; gap: 14px; z-index: 5; }
.cover-giftbox.opening .gb-lid { transform: translate(-40px, -55vh) rotate(-38deg); opacity: 0; }
.cover-giftbox.opening .gb-box { transform: scale(.9); opacity: 0; }

/* ---------- 10. Starry Lanterns ---------- */
.envelope.night { --fade-at: 1.5s; background: linear-gradient(180deg, #060a1d 0%, #111a3c 45%, #28244f 75%, #472e55 100%); }
.cover-lanterns { --cover-text: #fdf3dc; }
.nt-moon { position: absolute; right: 18%; top: 11%; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe8, #f5e1a8 60%, #d8b765); box-shadow: 0 0 44px 12px rgba(255,236,180,.22); }
.nt-lantern { position: absolute; left: var(--x); top: var(--y); width: calc(46px * var(--s)); will-change: transform; animation: lanternBob var(--bob) ease-in-out var(--delay) infinite alternate; }
.nt-lantern.far { opacity: .6; }
.nt-lantern .lantern-svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes lanternBob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6px, -18px, 0); } }
.cover-lanterns.opening .nt-lantern { animation: lanternRise 1.5s cubic-bezier(.5,0,.8,.6) forwards; }
@keyframes lanternRise { to { transform: translate3d(0, -115vh, 0); } }
.nt-city { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; color: #04071a; }
.nt-city .skyline-svg { width: 100%; height: 100%; display: block; }
.cover-lanterns .seal { top: 48%; z-index: 5; }
.cover-lanterns .cover-text { top: calc(48% + 74px); bottom: 14%; z-index: 5; justify-content: flex-start; gap: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* ---------- page parallax background (general.parallax) ---------- */
.page-px { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-px i { position: absolute; left: 0; right: 0; top: 0; will-change: transform; background-repeat: repeat; }
.parallax main, .parallax .foot, .parallax .brand { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .petal-rain, .page-px { display: none; }
}

/* ============ Jewellery styles: shared ============ */
.grain::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gem-field { position: absolute; inset: 0; will-change: transform, opacity; }
.gem { position: absolute; transform: rotate(var(--r)); }
.gem .gem-svg { width: 100%; height: 100%; display: block; }
.gem.soft { opacity: .5; }
.jb-near .gem, .spt-near .gem { animation: gemFloat 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); will-change: transform; }
@keyframes gemFloat { from { transform: rotate(var(--r)) translate3d(0, 0, 0); } to { transform: rotate(calc(var(--r) + 10deg)) translate3d(0, -14px, 0); } }
.bokeh { position: absolute; inset: 0; }
.bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,170,.6), rgba(255,226,170,.16) 45%, transparent 70%); }
.lx-text { position: absolute; left: 0; right: 0; z-index: 5; padding: 0 24px; text-align: center; color: var(--cover-text); display: grid; justify-items: center; gap: 6px; transition: opacity .5s; }
.lx-text.top { top: 6%; }
.lx-text p { margin: 0; }
.lx-mark.logo { max-width: 64%; max-height: 17vh; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.lx-mark.mono { font-family: var(--f-script); font-size: calc(64px * var(--ss)); line-height: 1.1; color: var(--gold); }
.lx-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); }
.lx-line1 { font-size: 12.5px; letter-spacing: .3em; opacity: .9; margin-top: 8px !important; }
.lx-line2 {
  font-family: var(--f-script); font-size: calc(clamp(40px, 12vw, 60px) * var(--ss)); line-height: 1.15;
  background: linear-gradient(180deg, #fff2c6, var(--gold) 55%, #9a6c22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lx-cta { position: absolute; left: 0; right: 0; z-index: 5; margin: 0; text-align: center; color: var(--cover-text); font-size: 12px; letter-spacing: .3em; opacity: .85; transition: opacity .4s; }
.cover.opening .lx-text, .cover.opening .lx-cta { opacity: 0; }
.gem-fallback { width: 150px; height: 110px; }

/* ============ 11. Jewel Box ============ */
.envelope.jewelbox {
  --seam: 58%; --fade-at: 2.35s;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--env) 78%, #7a5424), var(--env) 55%, var(--env-deep));
}
.jb-glow {
  position: absolute; left: 50%; top: calc(var(--seam) - 60px); z-index: 1; width: 56vmin; height: 56vmin; margin: -28vmin 0 0 -28vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,190,.85), rgba(255,210,140,.28) 30%, transparent 60%);
  opacity: .001; transform: scale(.8); will-change: transform, opacity; transition: transform 1.2s .9s, opacity .8s .9s; pointer-events: none;
}
.jb-box { position: absolute; left: 50%; top: var(--seam); z-index: 3; width: 230px; height: 0; margin-left: -115px; perspective: 900px; }
.jb-base {
  position: absolute; left: 0; right: 0; top: 0; height: 104px; z-index: 4; border-top: 3px solid var(--gold);
  border-radius: 6px 6px 26px 26px; background: linear-gradient(180deg, #7a1428, #4a0816 70%, #33050f);
  box-shadow: inset 0 3px 0 rgba(255,220,160,.2), 0 26px 40px -14px rgba(0,0,0,.75);
}
.jb-lid { position: absolute; left: -4px; right: -4px; top: -72px; height: 72px; z-index: 3; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; transition: transform 1s cubic-bezier(.5,0,.2,1) .35s; }
.jb-lid i { position: absolute; inset: 0; border-radius: 34px 34px 4px 4px; backface-visibility: hidden; }
.jb-lid-out { background: linear-gradient(180deg, #8f1b33, #5a0c1c); box-shadow: inset 0 -3px 0 var(--gold), inset 0 5px 12px rgba(255,210,160,.22); }
.jb-lid-in { background: radial-gradient(ellipse at 50% 60%, #fff8ee, #e7d2b7); transform: rotateX(180deg); }
.jb-rise {
  position: absolute; left: -40px; right: -40px; bottom: 0; z-index: 2; display: flex; justify-content: center;
  transform: translateY(45%) scale(.5); opacity: .001; will-change: transform, opacity; transition: transform 1s cubic-bezier(.2,.8,.2,1) 1.05s, opacity .45s 1.05s;
}
.jb-product { max-height: 40vh; max-width: 100%; width: auto; display: block; filter: drop-shadow(0 14px 20px rgba(0,0,0,.55)); }
.cover-jewelbox .seal { top: var(--seam); z-index: 6; width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.cover-jewelbox .seal .seal-mono { font-size: calc(30px * var(--ss)); }
.cover-jewelbox .seal::after { display: none; }
.cover-jewelbox .lx-cta { top: calc(var(--seam) + 128px); }
.cover-jewelbox .sparkles { z-index: 4; }
.cover-jewelbox.opening .jb-lid { transform: rotateX(100deg); }
.cover-jewelbox.opening .jb-rise { transform: translateY(-38%) scale(1); opacity: 1; }
.cover-jewelbox.opening .jb-glow { transform: scale(2.2); opacity: 1; }
.cover-jewelbox.opening .jb-near .gem-field { transform: scale(1.5); opacity: 0; transition: transform 1.4s .9s, opacity 1s 1.2s; }

/* ============ 12. Luxe Spotlight ============ */
.envelope.spotlight {
  --fade-at: 1.85s;
  background: radial-gradient(ellipse at 50% 64%, color-mix(in srgb, var(--env) 82%, #8a8f9e), var(--env) 50%, var(--env-deep));
}
.spt-beam { position: absolute; left: 0; right: 0; top: 0; height: 84%; z-index: 1; pointer-events: none; clip-path: polygon(40% 0, 60% 0, 82% 100%, 18% 100%); background: linear-gradient(180deg, rgba(255,244,220,.24), rgba(255,244,220,.02) 88%); }
.spt-stage { position: absolute; left: 50%; bottom: 19%; z-index: 3; width: min(78%, 360px); height: 0; margin-left: calc(min(78%, 360px) / -2); }
.spt-pedestal { position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 0; will-change: transform; transition: transform .9s cubic-bezier(.5,0,.8,.4) .25s; }
.spt-side { position: absolute; left: 0; right: 0; top: 0; height: 90px; border-radius: 0 0 50% 50% / 0 0 22px 22px; background: linear-gradient(90deg, #121216, #34343c 45%, #141418); }
.spt-top { position: absolute; left: 0; right: 0; top: -22px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 45% 35%, #62626c, #2e2e35 60%, #1a1a1f); box-shadow: inset 0 2px 6px rgba(255,255,255,.14); }
.spt-shadow { position: absolute; left: 27%; right: 27%; top: -16px; height: 18px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%); will-change: transform, opacity; animation: shadowPulse 4s ease-in-out infinite alternate; }
@keyframes shadowPulse { from { transform: scale(1); opacity: .95; } to { transform: scale(.8); opacity: .6; } }
.spt-float { position: absolute; left: -30px; right: -30px; bottom: 24px; z-index: 2; display: flex; justify-content: center; will-change: transform, opacity; animation: productFloat 4s ease-in-out infinite alternate; }
@keyframes productFloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -16px, 0); } }
.spt-product { max-height: 36vh; max-width: 100%; width: auto; display: block; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); }
.spt-flare {
  position: absolute; left: 50%; top: 46%; z-index: 4; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,244,215,.92), rgba(255,220,150,.3) 30%, transparent 60%); opacity: .001; transform: scale(.6); will-change: transform, opacity;
}
.cover-spotlight .seal { top: calc(81% + 45px); z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cover-spotlight .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.cover-spotlight .seal::after { display: none; }
.cover-spotlight .lx-cta { bottom: 3%; }
.cover-spotlight.opening .spt-float { animation: productRise 1.3s cubic-bezier(.3,0,.2,1) .15s forwards; }
@keyframes productRise { from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 70% { opacity: 1; } to { transform: translate3d(0, -26vh, 0) scale(1.3); opacity: 0; } }
.cover-spotlight.opening .spt-pedestal, .cover-spotlight.opening .spt-shadow { transform: translateY(40vh); animation: none; opacity: 0; transition: transform .9s cubic-bezier(.5,0,.8,.4) .25s, opacity .6s .5s; }
.cover-spotlight.opening .spt-flare { animation: flare 1.4s ease-out .4s forwards; }
@keyframes flare { 0% { opacity: .001; transform: scale(.6); } 45% { opacity: 1; transform: scale(2); } 100% { opacity: 0; transform: scale(3.2); } }
.cover-spotlight.opening .spt-near .gem-field { transform: scale(1.6); opacity: 0; transition: transform 1.3s .3s, opacity .9s .6s; }
@media (max-height: 720px) { .lx-mark.logo { max-height: 13vh; } .spt-product, .jb-product { max-height: 30vh; } }

/* ============ Shop icons ============ */
.ico-box { display: inline-grid; place-items: center; }
.ico-box .shop-ico { width: 100%; height: 100%; display: block; }

/* ============ 13. Shutter Up ============ */
.envelope.shutter { --fade-at: 1.85s; background: linear-gradient(180deg, var(--env-deep), var(--env) 40%, var(--env-2)); }
.cover-shutter .cf { --cf-at: .75s; }
.cover-shutter .confetti { top: 62%; }
.shu-line1 { position: absolute; top: 3.2%; left: 0; right: 0; z-index: 3; margin: 0; padding: 0 20px; text-align: center; color: var(--cover-text); font-size: 12px; letter-spacing: .28em; transition: opacity .4s; }
.shu-sign {
  position: absolute; top: 8%; left: 7%; right: 7%; height: 18%; z-index: 3; padding: 12px 18px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--env-deep) 80%, black), var(--env-deep));
  border: 2px solid var(--gold); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7), inset 0 0 0 5px rgba(0,0,0,.25);
}
.shu-bulbs { position: absolute; left: 12px; right: 12px; height: 8px; background: radial-gradient(circle, #fff3c4 0 2.5px, transparent 3.5px) 0 0 / 18px 8px repeat-x; animation: bulbs 1.4s steps(2) infinite; will-change: opacity; }
.shu-bulbs.a { top: 5px; }
.shu-bulbs.b { bottom: 5px; animation-delay: .7s; }
@keyframes bulbs { 50% { opacity: .3; } }
.shu-ico { width: 46px; height: 46px; flex: none; color: var(--gold); }
.shu-mark.name {
  margin: 0; text-align: center; font-family: var(--f-script); font-size: calc(clamp(30px, 9vw, 44px) * var(--ss)); line-height: 1.1;
  background: linear-gradient(180deg, #fff2c6, var(--gold) 55%, #9a6c22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shu-mark.logo { max-height: 11vh; max-width: 62%; object-fit: contain; }
.shu-awning {
  position: absolute; top: 27.5%; left: 4%; right: 4%; height: 7%; z-index: 3; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, var(--dark-1) 0 34px, #fbf7ef 34px 68px);
  -webkit-mask: radial-gradient(17px at 17px 100%, transparent 96%, #000) 0 0 / 34px 100% repeat-x; mask: radial-gradient(17px at 17px 100%, transparent 96%, #000) 0 0 / 34px 100% repeat-x;
}
.shu-door { position: absolute; top: 35%; bottom: 5%; left: 10%; right: 10%; z-index: 2; overflow: hidden; border: 6px solid color-mix(in srgb, var(--env-deep) 75%, black); border-bottom: 0; border-radius: 6px 6px 0 0; }
.shu-inside { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 58%, #fff4d6, #f3c77a 35%, #a26a2c 70%, #3a2410); }
.shu-shutter {
  position: absolute; inset: 0; padding: 0 16px 80px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28)), repeating-linear-gradient(180deg, #d5dae1 0 13px, #a3aab4 13px 15px, #eef1f5 15px 17px);
  will-change: transform; transition: transform 1.2s cubic-bezier(.6,0,.3,1) .3s;
}
.shu-shutter p { margin: 0; }
.shu-greet { font-family: var(--f-script); font-size: calc(28px * var(--ss)); color: #2b2f36; }
.shu-line2 { font-size: clamp(19px, 5.6vw, 26px); letter-spacing: .2em; line-height: 1.4; color: #23272e; }
.shu-cta { font-size: 11.5px; letter-spacing: .3em; color: #4a505a; }
.shu-handle { position: absolute; bottom: 18px; left: 32%; right: 32%; height: 10px; border-radius: 5px; background: linear-gradient(#8d949e, #5c626b); }
.cover-shutter .seal { top: calc(95% - 78px); z-index: 4; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.cover-shutter .seal::after { display: none; }
.cover-shutter .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.cover-shutter.opening .shu-shutter { transform: translateY(-101%); }
.cover-shutter.opening .shu-line1 { opacity: 0; }

/* ============ 14. Showroom Unveil ============ */
.envelope.unveil { --fade-at: 1.95s; background: radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--env) 70%, #6b6f7a), var(--env) 50%, var(--env-deep)); }
.uv-spot, .uv-beam { position: absolute; top: -6%; height: 95%; z-index: 1; pointer-events: none; transform-origin: 50% 0; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,248,230,.3), rgba(255,248,230,0) 85%); }
.uv-spot { width: 70%; will-change: transform, opacity; animation: sweep 5s ease-in-out infinite alternate; transition: opacity .5s .3s; }
.uv-spot.l { left: -12%; --a: 20deg; --b: -4deg; }
.uv-spot.r { right: -12%; --a: -20deg; --b: 4deg; animation-delay: -2.5s; }
@keyframes sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
.uv-beam { left: 12%; width: 76%; opacity: .001; will-change: opacity; transition: opacity .8s .6s; }
.uv-mark.name {
  margin: 0; font-family: var(--f-script); font-size: calc(clamp(38px, 11vw, 54px) * var(--ss)); line-height: 1.1;
  background: linear-gradient(180deg, #fff2c6, var(--gold) 55%, #9a6c22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uv-mark.logo { max-width: 62%; max-height: 14vh; object-fit: contain; }
.uv-stage { position: absolute; left: 0; right: 0; top: 36%; bottom: 24%; z-index: 2; display: grid; place-items: end center; }
.uv-floor { position: absolute; left: 12%; right: 12%; bottom: -14px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,240,210,.4), transparent 70%); }
.uv-item { position: relative; width: 100%; height: 100%; display: grid; place-items: end center; will-change: transform; transition: transform .9s cubic-bezier(.2,.8,.2,1) 1s; }
.uv-product { max-height: 100%; max-width: 86%; object-fit: contain; display: block; filter: drop-shadow(0 18px 20px rgba(0,0,0,.6)); }
.uv-product.ico { width: 150px; height: 150px; margin-bottom: 20px; color: var(--gold); filter: none; }
.uv-product.name { margin: 0 0 30px; font-family: var(--f-script); font-size: 52px; color: var(--gold); filter: none; }
.uv-cloth {
  position: absolute; left: 8%; right: 8%; top: 34%; bottom: 21%; z-index: 3; overflow: hidden;
  border-radius: 48% 48% 14px 14px / 34% 34% 14px 14px; background: linear-gradient(180deg, #b0263c, #7d1426 60%, #5c0d1b);
  box-shadow: 0 30px 40px -18px rgba(0,0,0,.7);
  will-change: transform, opacity; transition: transform 1.25s cubic-bezier(.55,0,.25,1) .35s, opacity .5s 1.1s;
}
.uv-folds { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.32), transparent 50%), linear-gradient(90deg, rgba(0,0,0,.22), transparent 12%, rgba(255,255,255,.08) 22%, rgba(0,0,0,.14) 34%, rgba(255,255,255,.1) 47%, rgba(0,0,0,.16) 60%, rgba(255,255,255,.08) 72%, rgba(0,0,0,.12) 84%, rgba(0,0,0,.24)); }
.cover-unveil .seal { top: 56%; z-index: 4; width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.cover-unveil .seal::after { display: none; }
.cover-unveil .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.uv-bottom { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 5; padding: 0 20px; text-align: center; display: grid; gap: 10px; justify-items: center; transition: opacity .4s; }
.uv-bottom p { margin: 0; }
.lx-cta-in { font-size: 12px; letter-spacing: .3em; color: var(--cover-text); opacity: .85; }
.cover-unveil .sparkles { z-index: 4; }
.cover-unveil.opening .uv-cloth { transform: translate(38%, -125%) rotate(24deg); opacity: 0; }
.cover-unveil.opening .uv-spot { opacity: 0; }
.cover-unveil.opening .uv-beam { opacity: 1; }
.cover-unveil.opening .uv-item { transform: scale(1.06); }
.cover-unveil.opening .uv-bottom { opacity: 0; }

/* ============ 15. Neon Sign ============ */
.envelope.neon {
  --fade-at: 1.25s; --neon: #ff4fd8; --neon2: #4ff3ff; background-color: #1c1210; background-size: auto, 112px 56px;
  background-image: radial-gradient(ellipse at 50% 38%, transparent 0, rgba(0,0,0,.6) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56'%3E%3Crect width='112' height='56' fill='%231c1210'/%3E%3Cg fill='%23452c26'%3E%3Crect x='1' y='1' width='54' height='26' rx='2'/%3E%3Crect x='57' y='1' width='54' height='26' rx='2'/%3E%3Crect x='-27' y='29' width='54' height='26' rx='2'/%3E%3Crect x='29' y='29' width='54' height='26' rx='2'/%3E%3Crect x='85' y='29' width='54' height='26' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="navy"] .envelope.neon, [data-theme="charcoal"] .envelope.neon { --neon: #3fe0ff; --neon2: #ff5ad9; }
[data-theme="emerald"] .envelope.neon { --neon: #3dffa8; --neon2: #fff27a; }
[data-theme="marigold"] .envelope.neon, [data-theme="ivory"] .envelope.neon, [data-theme="noir"] .envelope.neon, [data-theme="velvet"] .envelope.neon { --neon: #ffb13d; --neon2: #ff5ad9; }
[data-theme="maroon"] .envelope.neon { --neon: #ff4f6d; --neon2: #4ff3ff; }
.ne-glow { position: absolute; left: 50%; top: 34%; width: 96vmin; height: 64vmin; margin: -32vmin 0 0 -48vmin; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--neon) 34%, transparent), transparent 70%); }
.ne-line1 { position: absolute; top: 11%; left: 0; right: 0; z-index: 3; margin: 0; padding: 0 20px; text-align: center; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: .3em; transition: opacity .4s; }
.ne-sign {
  position: absolute; top: 19%; left: 6%; right: 6%; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center;
  animation: neonFlicker 5s linear infinite; will-change: transform, opacity; transition: transform .7s .15s, opacity .6s .2s;
}
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 55%, 57%, 100% { opacity: 1; } 20%, 22%, 56% { opacity: .55; } }
.ne-ico { width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 22px var(--neon)); }
.ne-name { margin: 0; font-family: var(--f-script); font-size: calc(clamp(44px, 13vw, 68px) * var(--ss)); line-height: 1.12; color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 22px var(--neon), 0 0 44px var(--neon); }
.ne-line2 { margin: 6px 0 0; font-size: clamp(16px, 5vw, 22px); letter-spacing: .26em; line-height: 1.5; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--neon2), 0 0 26px var(--neon2); }
.ne-greet { position: absolute; top: 50%; left: 0; right: 0; z-index: 3; margin: 0; text-align: center; color: #fff; font-family: var(--f-script); font-size: calc(26px * var(--ss)); transition: opacity .4s; }
.cover-neon .seal {
  top: 62%; z-index: 4; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; animation: none;
  background: rgba(0,0,0,.35); box-shadow: 0 0 0 2px var(--neon), 0 0 16px var(--neon), inset 0 0 16px color-mix(in srgb, var(--neon) 55%, transparent);
}
.cover-neon .seal::before, .cover-neon .seal::after { display: none; }
.cover-neon .seal .seal-mono { color: #fff; text-shadow: 0 0 6px var(--neon), 0 0 14px var(--neon); font-size: calc(30px * var(--ss)); }
.ne-cta { position: absolute; top: calc(62% + 62px); left: 0; right: 0; z-index: 3; margin: 0; text-align: center; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: .3em; transition: opacity .4s; }
.ne-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .001; will-change: opacity; background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--neon) 55%, white) 40%, transparent 75%); }
.cover-neon.opening .ne-flash { animation: neonFlash .9s ease-out .1s forwards; }
@keyframes neonFlash { 0% { opacity: .001; } 35% { opacity: .95; } 100% { opacity: 0; } }
.cover-neon.opening .ne-sign { animation: none; transform: scale(1.12); opacity: 0; }
.cover-neon.opening .ne-line1, .cover-neon.opening .ne-greet, .cover-neon.opening .ne-cta { opacity: 0; }

/* ============ 16. Fresh & Clean ============ */
.envelope.bubbles { --fade-at: 1.45s; background: linear-gradient(180deg, #effaff 0%, #cdeefc 45%, #9bd9f6 100%); }
.cover-bubbles { --cover-text: #0d3b5a; }
.bb-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform, opacity; transition: transform .5s ease-out .1s, opacity .4s .1s; }
.bb {
  position: absolute; bottom: -12vh; border-radius: 50%; will-change: transform; animation: bubbleRise var(--dur) linear var(--delay) infinite;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,.2) 22%, rgba(120,200,240,.14) 55%, rgba(255,255,255,.6) 68%, transparent 71%);
}
@keyframes bubbleRise { from { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(var(--sway), -60vh, 0); } to { transform: translate3d(0, -125vh, 0); } }
.bb-top.name { margin: 0; font-family: var(--f-script); font-size: calc(clamp(40px, 12vw, 58px) * var(--ss)); line-height: 1.1; color: #0f6fa8; }
.bb-top.logo { max-width: 62%; max-height: 14vh; object-fit: contain; }
.bb-line2 { font-family: var(--f-script); font-size: calc(clamp(26px, 7vw, 34px) * var(--ss)); color: #0f6fa8; }
.bb-disc {
  position: absolute; left: 50%; top: 44%; z-index: 3; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #e6f6ff 60%, #c3e6f8); box-shadow: 0 18px 30px -12px rgba(20,90,140,.45), inset 0 -6px 14px rgba(40,140,200,.2);
  will-change: transform, opacity; animation: discBob 3.5s ease-in-out infinite alternate; transition: opacity .4s .1s;
}
@keyframes discBob { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(0, -10px, 0) rotate(3deg); } }
.bb-ico { width: 84px; height: 84px; color: #1a7fc0; }
.bb-mark.name { margin: 0; font-family: var(--f-script); font-size: 30px; color: #1a7fc0; }
.bb-mark.logo { max-width: 104px; max-height: 104px; object-fit: contain; }
.cover-bubbles .seal { top: calc(44% + 118px); z-index: 4; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.cover-bubbles .seal::after { display: none; }
.cover-bubbles .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.bb-cta { top: calc(44% + 170px); }
.bb-wave { position: absolute; left: 0; right: 0; top: 100%; height: 130%; z-index: 7; background: linear-gradient(180deg, #7fcdf1, #bfe8fb 30%, #f4fbff); transform: translateY(-9vh); will-change: transform; transition: transform 1.1s cubic-bezier(.5,0,.2,1) .2s; pointer-events: none; }
.bb-wave-top { position: absolute; left: 0; top: -38px; width: 200%; height: 40px; background: radial-gradient(ellipse 50px 40px at 50px 40px, #7fcdf1 98%, transparent) 0 0 / 100px 40px repeat-x; animation: waveMove 3s linear infinite; will-change: transform; }
@keyframes waveMove { to { transform: translateX(-100px); } }
.cover-bubbles.opening .bb-field { transform: scale(1.25); opacity: 0; }
.cover-bubbles.opening .bb-disc { opacity: 0; }
.cover-bubbles.opening .bb-wave { transform: translateY(-122vh); }

/* ============ 17. VIP Pass ============ */
.envelope.ticket { --fade-at: 1.55s; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--env) 70%, white 12%), var(--env) 55%, var(--env-deep)); }
.cover-ticket .cf { --cf-at: .35s; }
.tk-rays {
  position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,230,160,.10) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 58%); mask: radial-gradient(circle, #000 18%, transparent 58%);
}
.tk-line1 { position: absolute; top: 6%; left: 0; right: 0; z-index: 3; margin: 0; padding: 0 20px; text-align: center; color: var(--cover-text); font-size: 12px; letter-spacing: .3em; transition: opacity .4s; }
.tk {
  position: absolute; left: 50%; top: 45%; z-index: 3; width: min(80%, 340px); transform: translate(-50%, -50%) rotate(-3deg);
  will-change: transform, opacity; transition: transform .8s cubic-bezier(.5,0,.2,1) .75s, opacity .5s 1s;
}
.tk::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -18px; height: 40px; z-index: -1; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(14px); }
.tk p { margin: 0; }
.tk-main {
  padding: 26px 20px 22px; text-align: center; display: grid; justify-items: center; gap: 8px; color: #3a2610; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(135deg, #fff6df, #f3dfae 60%, #e8c97e);
  -webkit-mask: radial-gradient(circle 14px at 0 100%, transparent 96%, #000) left bottom / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 96%, #000) right bottom / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 100%, transparent 96%, #000) left bottom / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, transparent 96%, #000) right bottom / 51% 100% no-repeat;
}
.tk-admit { font-size: 11px; letter-spacing: .34em; color: #8a6424; }
.tk-ico { width: 44px; height: 44px; color: #8a6424; }
.tk-greet { font-family: var(--f-script); font-size: calc(24px * var(--ss)); }
.tk-mark.name { font-family: var(--f-script); font-size: calc(clamp(38px, 11vw, 52px) * var(--ss)); line-height: 1.1; color: #5a3a12; }
.tk-mark.logo { max-width: 70%; max-height: 12vh; object-fit: contain; }
.tk-line2 { font-size: 15px; letter-spacing: .3em; line-height: 1.5; }
.tk-when { margin-top: 4px !important; font-size: 15px; font-style: italic; color: #5a3a12; }
.tk-stub {
  padding: 16px 20px 18px; display: grid; justify-items: center; gap: 10px; color: #3a2610; border-top: 2px dashed rgba(90,60,20,.45); border-radius: 6px 6px 18px 18px;
  background: linear-gradient(135deg, #f3dfae, #e2bd6a); transform-origin: 20% 0; will-change: transform, opacity; transition: transform .9s cubic-bezier(.5,0,.8,.5) .25s, opacity .5s .7s;
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000) left top / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, transparent 96%, #000) right top / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 0, transparent 96%, #000) left top / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, transparent 96%, #000) right top / 51% 100% no-repeat;
}
.tk-vip { font-size: 13px; letter-spacing: .4em; }
.tk-barcode { width: 70%; height: 34px; background: repeating-linear-gradient(90deg, #3a2610 0 2px, transparent 2px 4px, #3a2610 4px 5px, transparent 5px 8px, #3a2610 8px 11px, transparent 11px 13px); }
.cover-ticket .seal { top: 78%; z-index: 4; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.cover-ticket .seal::after { display: none; }
.cover-ticket .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.tk-cta { position: absolute; top: calc(78% + 54px); left: 0; right: 0; z-index: 3; margin: 0; text-align: center; color: var(--cover-text); font-size: 12px; letter-spacing: .3em; transition: opacity .4s; }
.cover-ticket.opening .tk-stub { transform: translate(-30px, 60vh) rotate(-24deg); opacity: 0; }
.cover-ticket.opening .tk { transform: translate(-50%, -62%) rotate(0) scale(1.08); opacity: 0; }
.cover-ticket.opening .tk-line1, .cover-ticket.opening .tk-cta { opacity: 0; }

/* shop icon on the invitation card (when no tradition symbol is shown) */
.faith-symbol.shop .shop-ico { width: 44px; height: 44px; color: var(--gold); }

.cover.opening .envelope.shutter, .cover.opening .envelope.unveil, .cover.opening .envelope.neon,
.cover.opening .envelope.bubbles, .cover.opening .envelope.ticket { opacity: 0; transition: opacity .45s var(--fade-at, 1.5s); }

/* ============ 3D styles (canvas over a CSS version; the CSS version stays when 3D can't run) ============ */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; opacity: 0; transition: opacity .7s; touch-action: pan-y; }
.fx-ready .fx-canvas { opacity: 1; }
.fx-fallback { position: absolute; inset: 0; z-index: 1; transition: opacity .7s; }
.fx-ready .fx-fallback { opacity: 0; }
.fx-flash {
  position: absolute; left: 50%; top: 46%; z-index: 4; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,246,222,.95), rgba(255,220,150,.3) 30%, transparent 60%); opacity: .001; transform: scale(.6); will-change: transform, opacity;
}
.cover.opening .fx-flash { animation: flare 1.4s ease-out .5s forwards; }
.cover.opening .envelope.fx3d { opacity: 0; transition: opacity .5s var(--fade-at, 1.5s); }

.envelope.fx-diamond { --fade-at: 1.8s; background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--env) 70%, #8a8f9e), var(--env) 52%, var(--env-deep)); }
.fx-gem { position: absolute; left: 50%; top: 52%; width: 160px; height: 116px; margin: -58px 0 0 -80px; animation: productFloat 4s ease-in-out infinite alternate; will-change: transform; }
.fx-gem .gem-svg { width: 100%; height: 100%; }
.cover-diamond3d .seal { top: 87%; z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cover-diamond3d .seal::after { display: none; }
.cover-diamond3d .seal .seal-mono { font-size: calc(24px * var(--ss)); }
.cover-diamond3d .lx-cta { bottom: 3%; }
.fx-hint { position: absolute; top: 79%; left: 0; right: 0; z-index: 5; margin: 0; text-align: center; color: var(--cover-text); font-size: 10.5px; letter-spacing: .3em; opacity: 0; transition: opacity .6s .8s; }
.fx-ready .fx-hint { opacity: .6; }
.cover.opening .fx-hint { opacity: 0; transition-delay: 0s; }

.envelope.fx-galaxy { --fade-at: 1.5s; background: radial-gradient(ellipse at 50% 45%, #1b1633, #0a0918 60%, #04040a); }
.cover-galaxy3d { --cover-text: #f6ecd2; }
.fx-gx-text {
  position: absolute; left: 0; right: 0; top: 36%; margin: 0; padding: 0 20px; text-align: center; font-family: var(--f-script);
  font-size: calc(clamp(44px, 13vw, 70px) * var(--ss)); line-height: 1.15;
  background: linear-gradient(180deg, #fff2c6, #e9c06a 55%, #9a6c22); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-gx-top, .fx-gx-bottom { position: absolute; left: 0; right: 0; z-index: 5; padding: 0 22px; text-align: center; color: var(--cover-text); display: grid; gap: 6px; justify-items: center; transition: opacity .5s; }
.fx-gx-top { top: 12%; }
.fx-gx-bottom { top: 60%; }
.fx-gx-top p, .fx-gx-bottom p { margin: 0; }
.fx-gx-line2 { font-family: var(--f-script); font-size: calc(clamp(26px, 7.5vw, 36px) * var(--ss)); }
.cover-galaxy3d .seal { top: 76%; z-index: 6; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.cover-galaxy3d .seal::after { display: none; }
.cover-galaxy3d .seal .seal-mono { font-size: calc(26px * var(--ss)); }
.cover-galaxy3d .lx-cta { top: calc(76% + 54px); }
.cover.opening .fx-gx-top, .cover.opening .fx-gx-bottom { opacity: 0; }

.envelope.fx-petals {
  --fade-at: 1.4s; background-color: var(--env); background-size: 170px 170px, auto;
  background-image: var(--pattern), radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--env) 80%, white), var(--env) 60%, var(--env-2));
}
.cover-petals3d .cover-text { z-index: 5; }
.cover-petals3d .seal { z-index: 6; }

/* 3D page background */
.page-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s; }
.page-fx.on { opacity: 1; }
.has-fx main, .has-fx .foot, .has-fx .brand, .has-fx .sc-hero { position: relative; z-index: 1; }