/* Envelope entrance. The envelope fills a portrait column; flaps meet under the seal.
   Sequence: seal lights → light traces outward → top flap folds back → move into the envelope. */
.entrance {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: transparent; transition: opacity 1s ease; overflow: hidden;
}
.entrance::before { content: ''; position: absolute; inset: 0; background: #0f2419; transition: opacity .9s ease .3s; }
.entrance.diving::before { opacity: 0; }
.entrance.leaving { opacity: 0; pointer-events: none; }

.envelope {
  position: absolute; top: 0; bottom: 0; width: min(100%, 560px); left: 50%; translate: -50% 0;
  perspective: 1500px; perspective-origin: 50% 20%;
  transform-origin: 50% 34%; transition: transform 1.6s cubic-bezier(.55, 0, .3, 1), opacity 1.1s ease .45s;
}
.entrance.diving .envelope { transform: scale(3.4); opacity: 0; }

.flap {
  position: absolute; inset: 0; background-color: #1d3f2c;
  background-image: linear-gradient(var(--shade, 180deg), #0000 30%, #0b1c1366), url("../assets/emboss.webp");
  background-size: 100% 100%, cover;
  background-position: center;
}
.flap-top { clip-path: polygon(0 0, 100% 0, 50% 52%); --shade: 180deg; transform-origin: 50% 0; z-index: 3; }
.flap-bottom { clip-path: polygon(0 100%, 100% 100%, 50% 48%); --shade: 0deg; background-position: center, left bottom; z-index: 2; }
.flap-left { clip-path: polygon(0 0, 54% 50%, 0 100%); --shade: 90deg; background-position: center, left center; z-index: 1; }
.flap-right { clip-path: polygon(100% 0, 46% 50%, 100% 100%); --shade: 270deg; background-position: center, right center; z-index: 1; }

/* The lined inside of the envelope, seen once the top flap folds back. */
.inside {
  position: absolute; inset: 0; z-index: 0; clip-path: polygon(0 0, 100% 0, 50% 52%);
  background:
    radial-gradient(ellipse 50% 40% at 50% 38%, #fff8e4, #0000 70%),
    linear-gradient(180deg, #e9dcbc 0%, #f6edd6 45%, #d8c69c 100%);
}
.entrance.lifting .inside { animation: inside-glow 1.6s ease forwards; }

/* The top flap lifts on its hinge; its paler underside catches the light as it turns. */
.entrance.lifting .flap-top { animation: flap-lift 1.3s cubic-bezier(.5, 0, .25, 1) forwards; }

/* Gold fold lines where the flaps meet; a dark line beneath gives them depth. */
.folds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; transition: opacity .5s; }
.folds path { fill: none; vector-effect: non-scaling-stroke; }
.folds .fold-shadow { stroke: #06120c99; stroke-width: 5; filter: blur(2px); }
.folds .fold-gold { stroke: #d9bd7f; stroke-width: 1.2; opacity: .85; }
.entrance.lifting .folds { opacity: .25; }

/* Soft light falling on the paper: darker edges, a gentle sheen across the centre, fine grain. */
.vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity .8s ease;
  background:
    radial-gradient(ellipse 75% 60% at 50% 46%, #0000 45%, #04100acc 100%),
    linear-gradient(115deg, #0000 35%, #ffffff12 48%, #0000 60%),
    var(--grain);
}
.entrance.lifting .vignette { opacity: .5; }
.entrance.diving .vignette { opacity: 0; }

/* Wax seal: stays whole and lights from the centre outward. */
.seal { position: absolute; left: 50%; top: 50%; width: clamp(132px, 38vw, 180px); aspect-ratio: 1; translate: -50% -50%; z-index: 6; filter: drop-shadow(0 8px 14px #0008); transition: opacity .6s ease; }
.seal { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seal:focus-visible { outline: 2px solid #e6cf94; outline-offset: 6px; }
.entrance.glowing .seal { cursor: default; pointer-events: none; }
.seal svg { width: 100%; height: 100%; display: block; }
.seal-light {
  position: absolute; inset: 14%; border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, #fffdf2 0%, #ffe9a8cc 30%, #f2c96a55 60%, #0000 75%);
}
.entrance:not(.glowing) .seal { animation: seal-breathe 4.5s ease-in-out infinite; }
.entrance.glowing .seal { animation: seal-warm 1.1s ease-in-out infinite alternate; }
.entrance.glowing .seal-light { animation: seal-light 1.1s ease-in-out infinite alternate; }
.entrance.diving .seal { opacity: 0; }

.seal-glow {
  position: absolute; left: 50%; top: 50%; width: 70vmin; aspect-ratio: 1; translate: -50% -50%; z-index: 5;
  border-radius: 50%; background: radial-gradient(circle, #fff6d6 0%, #f3d58a88 22%, #e9c46a22 48%, transparent 70%);
  opacity: 0; scale: .4; transition: opacity 1s ease, scale 1.6s ease;
}
.entrance.glowing .seal-glow { opacity: .8; scale: 1; }
.entrance.lifting .seal-glow { opacity: .45; }

/* Threads of light tracing outward from the seal */
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; filter: drop-shadow(0 0 2px #fff3c8) drop-shadow(0 0 8px #f1c766); transition: opacity .8s; }
.cracks path { fill: none; stroke: #fff6d8; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.cracks .branch { stroke-width: 1.1; }
.entrance.cracking .cracks path { animation: crack-run 1.5s cubic-bezier(.25, .6, .35, 1) var(--delay) forwards; }
.entrance.lifting .cracks { opacity: .35; }

.sparks { position: absolute; left: 50%; top: 50%; z-index: 7; }
.sparks i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff4cf; box-shadow: 0 0 6px #f5d27a; opacity: 0; animation: spark var(--d) ease-out var(--w) forwards; }

/* Warm haze passed through on the way into the scene. */
.flash { position: fixed; inset: 0; z-index: 8; background: radial-gradient(ellipse at 50% 40%, #fffdf4, #fbf1dbd9 45%, #f7eedc88 80%); opacity: 0; pointer-events: none; }
.entrance.diving .flash { animation: flash 1.6s ease-in-out forwards; }

.open-invitation {
  position: absolute; z-index: 9; bottom: max(11%, 56px); left: 50%; translate: -50% 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--metal); border-radius: 2px;
  padding: 16px 30px; box-shadow: 0 6px 26px #0006; text-transform: uppercase;
  font: 500 14px/1.6 var(--serif); letter-spacing: .12em; transition: opacity .35s, transform .25s;
}
.open-invitation small { display: block; text-transform: none; letter-spacing: .04em; font-size: 15px; font-style: italic; color: var(--accent); }
.open-invitation:hover { transform: translateY(-2px); }
.open-invitation:active { transform: scale(.98); }
.entrance.glowing .open-invitation { opacity: 0; pointer-events: none; }
.skip-opening {
  position: absolute; z-index: 9; top: 20px; right: max(20px, calc(50% - 260px));
  border: 1px solid #fff8; background: #0f2419cc; color: #fff; border-radius: 30px; padding: 9px 18px; font-size: 13px;
}

@keyframes seal-breathe { 50% { scale: 1.025; } }
@keyframes seal-warm { from { filter: drop-shadow(0 0 6px #f6d98a) brightness(1.02); } to { filter: drop-shadow(0 0 26px #ffe7a6) brightness(1.1); } }
@keyframes seal-light { from { opacity: .45; scale: .85; } to { opacity: 1; scale: 1.08; } }
@keyframes crack-run { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }
@keyframes flap-lift {
  0% { transform: rotateX(0); filter: brightness(1); }
  55% { filter: brightness(1.7) sepia(.35); }
  100% { transform: rotateX(-172deg); filter: brightness(2.3) sepia(.5); }
}
@keyframes inside-glow { from { filter: brightness(.7); } to { filter: brightness(1.15); } }
@keyframes flash { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* The hero scene settles into place as we arrive. */
.hero .scene-art { transition: transform 2.6s cubic-bezier(.2, .7, .2, 1), filter 2.2s ease; }
body.locked .hero .scene-art { transform: scale(1.16); filter: brightness(1.1) blur(1.5px); }
body.scene-arriving .hero .scene-art { transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .entrance *, .entrance { animation: none !important; transition: none !important; }
  body.locked .hero .scene-art { transform: none; filter: none; }
}