/* Entrada del sobre.
   Variables (la escala final la calcula intro-envelope.js):
   --envelope-width        ancho del sobre
   --envelope-ratio        ancho / alto
   --envelope-perspective  perspectiva del giro de la solapa
   --envelope-y            centro vertical del sobre
   --envelope-inset        fracción del ancho del sobre que ocupa la tarjeta
   --envelope-tuck         cuánto queda escondida al principio (fracción del alto)
   --flap-open             giro final de la solapa
   --intro-hold            pausa con el sobre cerrado
   --intro-flap-delay      espera antes de abrir
   --intro-flap            duración de la solapa
   --intro-card-delay      la tarjeta empieza a subir (la solapa sigue abriéndose)
   --intro-rise            subida, sin cambiar de escala
   --intro-settle-delay    empieza el crecimiento hasta la página
   --intro-settle          escala y traslado hasta el sitio final
   --intro-fade-delay      espera antes de retirar el sobre
   --intro-fade            el sobre baja y se desvanece

   GSAP (solo con la entrada): power2.out en solapa y subida,
   power3.out en el crecimiento. Sin rebote.
   Núcleo 3.12.7: https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js

   Cenefa del sobre: assets/envelope/cenefa-orla.webp
   Recorte del borde de «Cesta Gótica I», catálogo de stock (lámina 6):
   https://realfabricadetapices.com/wp-content/uploads/2026/07/Catalogo-stock-de-tapices_6.07.2026.pdf
*/

:root {
  --envelope-width: min(88vw, 28rem);
  --envelope-ratio: 1.62;
  --envelope-perspective: min(1400px, 200vw);
  --envelope-y: 44%;
  --envelope-inset: 0.86;
  --envelope-tuck: 0.72;
  --flap-open: 186deg;
  --intro-hold: 900ms;
  --intro-flap-delay: 900ms;
  --intro-flap: 1150ms;
  --intro-card-delay: 1400ms;
  --intro-rise: 1100ms;
  --intro-settle-delay: 2500ms;
  --intro-settle: 1700ms;
  --intro-fade-delay: 2850ms;
  --intro-fade: 1400ms;
}

.intro-stage {
  display: none;
  position: fixed;
  z-index: 40;
  inset: 0;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -8%, #fffaf3 0%, transparent 58%),
    var(--paper, #f7f1e6);
}

html.is-intro .intro-stage {
  display: block;
}

html.is-intro-lock {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
  overscroll-behavior: none;
}

html.is-intro-lock body {
  overflow: hidden;
}

.intro-skip {
  position: absolute;
  z-index: 8;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.95rem, env(safe-area-inset-right));
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft, #5c5146);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  color: var(--ink, #2c261f);
}

.intro-skip:focus-visible {
  outline: 2px solid var(--gold, #7d6438);
  outline-offset: 3px;
}

.envelope__back,
.envelope__pocket,
.envelope__flap,
.envelope-crests {
  position: absolute;
  top: var(--envelope-y);
  left: 50%;
  width: var(--envelope-width);
  height: calc(var(--envelope-width) / var(--envelope-ratio));
  transform: translate(-50%, -50%);
}

.envelope__back {
  z-index: 1;
  background:
    linear-gradient(#fbf7f1, #f7f1e6) center / 88% 82% no-repeat,
    linear-gradient(180deg, #efe2cf, #e5d6c0);
  box-shadow:
    0 0 0 1px rgba(110, 74, 56, 0.45),
    0 0 0 3px rgba(196, 168, 106, 0.35),
    0 16px 30px rgba(70, 48, 18, 0.13);
}

.envelope__back::after,
.envelope__pocket::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  height: 6px;
  background: url("assets/envelope/cenefa-orla.webp") center / auto 100% repeat-x;
  opacity: 0.72;
  pointer-events: none;
}

.envelope__back::after {
  top: 9%;
}

.envelope__pocket::after {
  bottom: 8%;
}

.envelope__pocket {
  z-index: 3;
  background:
    linear-gradient(112deg, rgba(70, 48, 18, 0.07), transparent 24%),
    linear-gradient(248deg, rgba(70, 48, 18, 0.07), transparent 24%),
    linear-gradient(180deg, #fbf7f1 0%, #f1e6d4 100%);
  clip-path: polygon(0 40%, 50% 69%, 100% 40%, 100% 100%, 0 100%);
}

.envelope__flap {
  z-index: 4;
  pointer-events: none;
}

.envelope__hinge {
  position: absolute;
  inset: 0;
  perspective: var(--envelope-perspective);
  perspective-origin: center top;
}

.envelope__flap-pivot {
  position: absolute;
  inset: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
}

.envelope__flap-paper,
.envelope__flap-inner {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 74%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.envelope__flap-paper {
  background: linear-gradient(180deg, #fbf6ee 0%, #e7dcc6 100%);
}

.envelope__flap-inner {
  background: linear-gradient(180deg, #e3d3b8 0%, #f3e9da 100%);
  transform: rotateX(180deg);
}

.envelope__seal {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 74%;
  width: min(5rem, 30%);
  height: auto;
  transform: translate(-50%, -78%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

/* La tarjeta real vive aquí mientras sale del sobre.
   El recorte es clip-path; top/left/width/height no se animan. */
.card-clip {
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(46% 10% 36% 10%);
}

.card-clip .card {
  pointer-events: none;
}

/* Ramo provisional (SVG). No pide floral-bouquet.webp mientras no exista.
   Cuando el archivo esté en assets/envelope/floral-bouquet.webp:
   descomenta background-image y oculta .floral-fallback. */
.envelope__floral {
  position: absolute;
  z-index: 5;
  top: var(--envelope-y);
  left: calc(50% + var(--envelope-width) / 2);
  width: calc(var(--envelope-width) * 0.42);
  aspect-ratio: 150 / 210;
  transform: translate(-86%, -64%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* background-image: url("assets/envelope/floral-bouquet.webp"); */
}

.floral-fallback {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 12px rgba(70, 48, 18, 0.12));
}

.envelope__floral[hidden] {
  display: none !important;
}

.envelope-crests {
  z-index: 5;
  pointer-events: none;
}

.intro-grain {
  position: absolute;
  z-index: 0;
  inset: -10%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(90, 60, 30, 0.015) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(90, 60, 30, 0.012) 0 1px,
      transparent 1px 5px
    );
}

@media (max-width: 420px) {
  :root {
    --envelope-y: 46%;
    --envelope-perspective: 900px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-stage {
    display: none !important;
  }

  html.is-intro-lock,
  html.is-intro-lock body {
    overflow: auto;
    padding-right: 0;
  }
}

@media print {
  .intro-stage {
    display: none !important;
  }
}