/* Aperturas Premium v2: más espectáculo. Va después de latido.css y pisa
   los tiempos de la primera versión (app.js → OPENINGS). */

/* ---------- Telón: respira, se enciende la costura, un foco barre el
   escenario y se abre recogiéndose hacia los lados ---------- */

.opening-telon .curtain {
  animation: curtainSway 0.6s var(--ease-in-out) 0.1s, curtainOpen2 1.5s var(--ease-in-out) 0.7s forwards;
}

.opening-telon .curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background: repeating-linear-gradient(90deg, #e6bf72 0 3px, #9b6f2a 3px 6px);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
}

.opening-telon .seam-glow {
  position: absolute;
  top: 9vh;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background: linear-gradient(180deg, rgba(255, 230, 170, 0), #ffe7ae 30%, #ffe7ae 70%, rgba(255, 230, 170, 0));
  box-shadow: 0 0 18px 6px rgba(255, 210, 130, 0.7);
  opacity: 0;
  animation: seam 0.9s ease-out 0.25s forwards;
}

.opening-telon .stage-spot {
  position: absolute;
  top: -20vh;
  left: 50%;
  width: 60vmax;
  height: 140vh;
  margin-left: -30vmax;
  background: radial-gradient(50% 60% at 50% 70%, rgba(255, 238, 200, 0.45), transparent 70%);
  transform-origin: 50% 0;
  opacity: 0;
  animation: spotSweep 1.8s var(--ease-in-out) 0.5s forwards;
}

.opening-telon .valance {
  animation: valanceUp 0.7s var(--ease-in-out) 1.6s forwards;
}

@keyframes curtainSway {
  0%, 100% { transform: skewX(0); }
  40% { transform: skewX(calc(var(--dir) * 1.2deg)); }
  70% { transform: skewX(calc(var(--dir) * -0.8deg)); }
}

@keyframes curtainOpen2 {
  0% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(calc(var(--dir) * 72%)) scaleX(0.28); filter: brightness(0.75); }
}

@keyframes seam {
  0% { opacity: 0; transform: scaleY(0.2); }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes spotSweep {
  0% { opacity: 0; transform: rotate(-24deg); }
  30% { opacity: 1; }
  100% { opacity: 0.9; transform: rotate(0deg); }
}

@keyframes valanceUp {
  to { transform: translateY(-110%); }
}

/* ---------- Carta: sobre más grande, sello de lacre que late y se rompe,
   la tarjeta sube entre brillos y el sobre viene hacia ti ---------- */

.envelope {
  width: 260px;
  height: 170px;
  animation: envIn 0.55s var(--ease-out) both, envOut2 0.7s var(--ease-in-out) 1.85s forwards;
}

.env-flap {
  animation: flapOpen 0.6s var(--ease-in-out) 0.75s forwards;
}

.env-card {
  animation: cardUp 0.8s var(--ease-out) 1.15s forwards;
}

.env-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8344c, #8e1626 70%);
  color: #f6d6a0;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.15);
  z-index: 5;
  animation: sealBeat 0.5s var(--ease-in-out) 0.2s 1, sealBreak 0.35s ease-in 0.7s forwards;
}

@keyframes sealBeat {
  50% { transform: scale(1.15); }
}

@keyframes sealBreak {
  to { opacity: 0; transform: scale(1.6) rotate(25deg); }
}

.opening-carta .spark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff3cf;
  box-shadow: 0 0 10px 3px rgba(255, 215, 140, 0.9);
  opacity: 0;
  animation: sparkFly 0.9s var(--ease-out) var(--d) forwards;
}

@keyframes sparkFly {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(1); }
}

@keyframes envOut2 {
  to { opacity: 0; transform: translateY(-10px) scale(1.5); filter: blur(12px); }
}

/* ---------- Estrellas: el doble de chispas que llegan girando, un núcleo
   de luz que late y estalla con una onda ---------- */

.star {
  animation: starIn2 1.1s var(--ease-in-out) var(--d) forwards, starOut 0.7s var(--ease-out) 1.45s forwards;
}

@keyframes starIn2 {
  0% { opacity: 0; transform: rotate(var(--rot)) translate(var(--x), var(--y)) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) translate(0, 0) scale(1); }
}

.star-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0, #ffd98a 45%, rgba(255, 200, 100, 0) 70%);
  opacity: 0;
  animation: coreGrow 1.5s var(--ease-in-out) 0.3s forwards;
}

@keyframes coreGrow {
  0% { opacity: 0; transform: scale(0.2); }
  60% { opacity: 1; transform: scale(2.2); }
  75% { transform: scale(1.8); }
  100% { opacity: 0; transform: scale(9); }
}

.opening-estrellas .opening-wave {
  animation-delay: 1.4s;
}

.opening-estrellas .opening-light {
  animation-delay: 1.35s;
}

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