/* ═══════════════════════════════════════════════
   intro.css — Animación de introducción: sobre con sello
   ═══════════════════════════════════════════════ */

/* ── OVERLAY ── */
#intro-overlay {
  display: none;           /* JS lo muestra si procede */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1C3E5E;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.75s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Trama de puntos dorados */
#intro-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(196,152,48,0.11) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Viñeta perimetral */
#intro-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(14,28,44,0.6) 100%);
  pointer-events: none;
}

#intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ── ESCENA ── */
.intro-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}

/* ── TÍTULO ── */
.intro-title {
  text-align: center;
  margin-bottom: 38px;
}

.intro-title-script {
  font-family: 'Great Vibes', cursive;
  font-size: 48px;
  color: #C49830;
  line-height: 1;
  display: block;
}

.intro-title-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.intro-title-rule .line {
  display: block;
  height: 1px;
  width: 54px;
  background: rgba(196,152,48,0.35);
}

.intro-title-rule .diamond {
  width: 5px;
  height: 5px;
  background: rgba(196,152,48,0.65);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── CONTENEDOR DEL SOBRE (perspectiva para hijos 3D si se usa) ── */
.intro-env-wrap {
  position: relative;
  width: 280px;
  height: 188px;
  overflow: visible;        /* la carta puede salir por arriba */
  -webkit-tap-highlight-color: transparent;
}

/* ── SOBRE ── */
#intro-envelope {
  position: absolute;
  inset: 0;
  overflow: visible;
  /* Sombra general del sobre */
  filter: drop-shadow(0 20px 52px rgba(0,0,0,0.58));
}

/* Base crema del sobre */
#intro-envelope::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #F5EFE0;
  border: 1.5px solid rgba(196,152,48,0.3);
  border-radius: 2px;
  z-index: 0;
}

/* ── SOLAPAS DECORATIVAS (parte trasera, forman la X) ── */
/* Las cuatro solapas apuntan al centro (140px, 94px) */

.env-fl {
  position: absolute;
  z-index: 1;
}

/* Solapa inferior: triángulo que apunta hacia arriba desde el borde inferior */
.env-fl-bottom {
  bottom: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(175deg, #dcd1ba, #e4d8c3);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

/* Solapa izquierda: triángulo que apunta al centro desde la izquierda */
.env-fl-left {
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, #ddd2bb, #e6dbca);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* Solapa derecha: triángulo que apunta al centro desde la derecha */
.env-fl-right {
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: linear-gradient(80deg, #e6dbca, #ddd2bb);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* ── CARA DEL SOBRE (borde + sombra interior, sin fondo para que se vean las solapas) ── */
.env-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(196,152,48,0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
  z-index: 3;
  pointer-events: none;
}

/* ── CARTA INTERIOR ── */
.env-letter {
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  width: 78%;
  height: 68%;
  background: linear-gradient(155deg, #FEFDF8, #F8F1E6);
  border: 1px solid rgba(196,152,48,0.28);
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  z-index: 4;
  opacity: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  pointer-events: none;
}

/* Línea interior decorativa */
.env-letter::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(196,152,48,0.18);
  pointer-events: none;
}

.letter-script {
  font-family: 'Great Vibes', cursive;
  font-size: 22px;
  color: #C49830;
  line-height: 1;
}

.letter-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #3C5068;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.letter-place {
  font-family: 'Cormorant Garamond', serif;
  font-size: 9.5px;
  color: #8a7b68;
  letter-spacing: 0.12em;
}

@keyframes letterRise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(-96px); }
}

.env-letter.letter-rising {
  animation: letterRise 0.72s cubic-bezier(0.2, 0.82, 0.2, 1) forwards;
}

/* ── SOLAPA SUPERIOR (la que se abre al hacer clic) ── */
/* Triángulo que apunta hacia el centro desde la parte superior */
.env-flap-top {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 50%;
  background: linear-gradient(165deg, #ebe0c9, #f0e4d2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  border-top: 1.5px solid rgba(196,152,48,0.28);
  z-index: 5;
}

/* Borde dorado lateral de la solapa (efecto doblez) */
.env-flap-top::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, rgba(196,152,48,0.08), transparent 60%);
  pointer-events: none;
}

@keyframes flapFold {
  0%   { transform: scaleY(1);    opacity: 1; }
  42%  { transform: scaleY(0.06); opacity: 0.4; }
  100% { transform: scaleY(0);    opacity: 0; }
}

.env-flap-top.flap-opening {
  animation: flapFold 0.52s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}

/* ── SELLO DE LACRE ── */
/* Centrado exactamente en el punto de convergencia de las cuatro solapas */
.env-seal {
  position: absolute;
  top: calc(50% - 29px);   /* centro vertical del sobre */
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 33%, #b82222, #6e1212);
  border: 2px solid rgba(196,152,48,0.5);
  box-shadow:
    0 3px 14px rgba(0,0,0,0.48),
    inset 0 1px 4px rgba(255,255,255,0.14),
    inset 0 -2px 5px rgba(0,0,0,0.28),
    0 0 0 0px rgba(196,152,48,0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  animation: sealGlow 2.3s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

/* Anillo interior del lacre (textura de cera) */
.env-seal::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
}

.seal-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  color: rgba(245,239,224,0.92);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Pulso dorado para invitar a interactuar */
@keyframes sealGlow {
  0%, 100% {
    box-shadow:
      0 3px 14px rgba(0,0,0,0.48),
      inset 0 1px 4px rgba(255,255,255,0.14),
      inset 0 -2px 5px rgba(0,0,0,0.28),
      0 0 0 0px rgba(196,152,48,0);
  }
  50% {
    box-shadow:
      0 3px 14px rgba(0,0,0,0.48),
      inset 0 1px 4px rgba(255,255,255,0.14),
      inset 0 -2px 5px rgba(0,0,0,0.28),
      0 0 0 11px rgba(196,152,48,0.22);
  }
}

/* Animación de rotura del sello */
@keyframes sealCrack {
  0%   { transform: translateX(-50%) scale(1)    rotate(0deg);   filter: brightness(1);   opacity: 1; }
  22%  { transform: translateX(-50%) scale(1.18) rotate(-7deg);  filter: brightness(1.45); }
  55%  { transform: translateX(-50%) scale(0.82) rotate(5deg);   filter: brightness(0.7);  opacity: 0.7; }
  100% { transform: translateX(-50%) scale(0)    rotate(18deg);  opacity: 0; }
}

.env-seal.seal-breaking {
  animation: sealCrack 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── TEXTO DE AYUDA ── */
.intro-hint {
  margin-top: 34px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: rgba(196,152,48,0.6);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  animation: hintPulse 1.9s ease-in-out infinite;
  transition: opacity 0.22s ease;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.intro-hint.hidden {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 320px) {
  .intro-title-script { font-size: 38px; }
  .intro-title { margin-bottom: 28px; }
  .intro-env-wrap {
    width: 240px;
    height: 161px;
  }
}

@media (max-height: 580px) {
  .intro-title { margin-bottom: 20px; }
  .intro-title-script { font-size: 36px; }
  .intro-hint { margin-top: 20px; }
}