/* =====================================================================
   SOBRE DE ENTRADA — colores y tiempos editables aquí.
   Secuencia: sello se desvanece (0s) → solapa se abre (.35s) →
   carta sube (.75s) → pantalla se disuelve (JS, ~2.3s)
   ===================================================================== */
:root {
  --env: #e9dabb;        /* frente del sobre */
  --env-flap: #dcc9a1;   /* solapa */
  --env-shade: #c9b487;  /* interior */
  --letter: #f6f1e7;     /* carta */
  --seal: #8a3b34;       /* cera del sello */
}

body.is-locked { overflow: hidden; height: 100%; }
body.is-locked .hero__title { animation-play-state: paused; } /* la portada anima al abrir */

.envelope {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 38%, #3d3a39 0%, var(--bg) 58%, #171616 100%);
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.envelope.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.envelope__scene {
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}
.envelope.is-done .envelope__scene { transform: scale(1.35); }

.envelope__box {
  position: relative; width: min(88vw, 440px); aspect-ratio: 3 / 2; perspective: 1200px;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.envelope__box > * { position: absolute; }

.env__back   { inset: 0; background: var(--env-shade); border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.env__letter {
  left: 6%; right: 6%; top: 5%; height: 88%; z-index: 1; border-radius: 4px; background: var(--letter); color: #2c2828;
  display: grid; place-content: center; text-align: center; gap: 8px;
  transition: transform 1s cubic-bezier(.3,.7,.2,1) .75s;
}
.env__letter .script { font-size: min(11vw, 52px); }
.env__letter p:last-child { font-size: min(4vw, 18px); letter-spacing: .12em; text-transform: uppercase; }
.env__front  { inset: 0; z-index: 2; border-radius: 6px; background: linear-gradient(160deg, #f0e3c6, var(--env)); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env__flap   {
  left: 0; right: 0; top: 0; height: 60%; z-index: 3; background: var(--env-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center;
  transition: transform .8s ease-in-out .35s, z-index 0s linear .75s;
}
.env__seal {
  left: 50%; top: 60%; z-index: 4; width: 19%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: #f3dcc0; font-size: min(6.6vw, 30px);
  background: radial-gradient(circle at 35% 30%, #b45a4d, var(--seal) 60%, #5c231f);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.08);
  animation: sealPulse 2.4s ease-in-out infinite; transition: opacity .35s, scale .35s;
}
@keyframes sealPulse { 50% { transform: translate(-50%, -50%) scale(1.07); } }

.envelope__hint { font-size: 15px; letter-spacing: .08em; color: var(--muted); animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .35; } }

/* ---- estado: abriendo ---- */
.envelope.is-opening .env__seal   { opacity: 0; scale: 1.5; animation: none; }
.envelope.is-opening .envelope__hint { opacity: 0; animation: none; transition: opacity .3s; }
.envelope.is-opening .env__flap   { transform: rotateX(180deg); z-index: 0; }
.envelope.is-opening .env__letter { transform: translateY(-62%); }
.envelope.is-opening .envelope__box { cursor: default; }

.envelope__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }