/* Aperturas Premium, segunda tanda: vinilo, pétalos, fuegos artificiales,
   cuenta regresiva de cine, globo con confeti y corazón de luz.
   Tiempos en app.js → OPENINGS. */

/* ---------- 💿 Vinilo ---------- */

.opening-vinilo {
  background: rgba(6, 4, 10, 0.6);
}

.deck {
  position: relative;
  width: 64vmin;
  max-width: 300px;
  aspect-ratio: 1;
  animation: deckIn 0.5s var(--ease-out) both, deckOut 0.6s var(--ease-in-out) 1.75s forwards;
}

.disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(255, 255, 255, 0.05) 18.5%, transparent 19%),
    repeating-radial-gradient(circle, #0c0b0f 0 2px, #1b1a20 2px 3px),
    #111;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  animation: spinUp 1.9s cubic-bezier(0.5, 0, 0.6, 1) forwards;
}

.disc::after {
  /* reflejo que delata el giro */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 14%, rgba(255, 255, 255, 0.16) 18%, transparent 24% 64%, rgba(255, 255, 255, 0.1) 68%, transparent 74%);
}

.disc-label {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle, #1b1a20 0 8%, #d6a860 9% 100%) center / cover;
  box-shadow: 0 0 0 3px #b98a3e;
}

.tonearm {
  position: absolute;
  top: -4%;
  right: 6%;
  width: 6px;
  height: 62%;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9d9df, #8d8d96);
  transform-origin: 50% 4%;
  transform: rotate(-28deg);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
  animation: armDown 0.7s var(--ease-in-out) 0.8s forwards;
}

.tonearm::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3f3f6, #6d6d75);
}

.tonearm::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -5px;
  width: 16px;
  height: 14px;
  border-radius: 3px;
  background: #d6a860;
}

@keyframes spinUp {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1080deg); }
}

@keyframes armDown {
  to { transform: rotate(24deg); }
}

@keyframes deckIn {
  from { opacity: 0; transform: scale(0.85); }
}

@keyframes deckOut {
  to { opacity: 0; transform: scale(1.25); filter: blur(10px); }
}

.opening-vinilo .opening-light {
  animation-delay: 1.5s;
}

/* ---------- 🌹 Pétalos ---------- */

.opening-petalos {
  overflow: hidden;
  background: rgba(20, 4, 12, 0.45);
}

.petal {
  position: absolute;
  top: -8vh;
  left: var(--x);
  width: calc(26px * var(--s));
  height: calc(20px * var(--s));
  border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #ff9ab5, #d42a55 60%, #8e1236);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: petalFall var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) forwards;
}

@keyframes petalFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--r)); }
  10% { opacity: 1; }
  50% { transform: translate(calc(var(--sway) * 0.6), 55vh) rotate(calc(var(--r) + 180deg)); }
  100% { opacity: 0.9; transform: translate(var(--sway), 115vh) rotate(calc(var(--r) + 380deg)); }
}

.petal-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 45% at 50% 50%, rgba(255, 150, 180, 0.35), transparent 70%);
  opacity: 0;
  animation: bloom 1.4s var(--ease-out) 0.9s forwards;
}

/* ---------- 🎆 Fuegos artificiales ---------- */

.opening-fuegos {
  overflow: hidden;
  background: rgba(2, 2, 10, 0.65);
}

.burst {
  position: absolute;
  width: 0;
  height: 0;
}

.rocket {
  position: absolute;
  left: -2px;
  top: 0;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, var(--c));
  opacity: 0;
  animation: rocketUp 0.45s ease-out calc(var(--d) - 0.4s) forwards;
}

@keyframes rocketUp {
  0% { opacity: 1; transform: translateY(70vh); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}

.ember {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px 3px var(--c);
  opacity: 0;
  animation: emberOut 1.1s cubic-bezier(0.1, 0.7, 0.3, 1) var(--d) forwards;
}

@keyframes emberOut {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) translateX(0) scale(0.3); }
}

/* ---------- 🎞️ Cuenta regresiva de cine ---------- */

.opening-cuenta {
  background: rgba(12, 10, 8, 0.85);
}

.leader {
  position: relative;
  width: 70vmin;
  max-width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #cfc6b4;
  box-shadow: 0 0 0 6px #1a1612, 0 0 60px rgba(0, 0, 0, 0.6);
  filter: sepia(0.5) contrast(1.1);
  animation: leaderFlicker 0.12s steps(2) infinite, deckOut 0.4s ease-in 1.75s forwards;
}

.leader::before,
.leader::after {
  /* cruz del visor */
  content: "";
  position: absolute;
  background: rgba(20, 16, 12, 0.7);
}

.leader::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
}

.leader::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
}

.leader-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(20, 16, 12, 0.55) 0 var(--p, 0%), transparent var(--p, 0%));
  animation: sweep 0.55s linear 3;
}

@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes sweep {
  from { --p: 0%; }
  to { --p: 100%; }
}

.leader-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 3px solid rgba(20, 16, 12, 0.75);
}

.leader-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif-display);
  font-size: min(34vmin, 150px);
  font-weight: 600;
  color: #1a1612;
  opacity: 0;
  animation: num 0.55s steps(1) calc(var(--i) * 0.55s) forwards;
}

@keyframes num {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes leaderFlicker {
  50% { filter: sepia(0.5) contrast(1.1) brightness(1.08); }
}

.film-scratch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(255, 255, 255, 0.25) 31.2%, transparent 31.5%),
    linear-gradient(90deg, transparent 0 72%, rgba(0, 0, 0, 0.35) 72.1%, transparent 72.3%);
  animation: scratch 0.18s steps(3) infinite;
}

@keyframes scratch {
  33% { transform: translateX(-3vw); }
  66% { transform: translateX(4vw); }
}

.opening-cuenta .opening-light {
  animation-delay: 1.6s;
}

/* ---------- 🎈 Globo y confeti ---------- */

.opening-confeti {
  overflow: hidden;
  background: rgba(10, 6, 20, 0.5);
}

.balloon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 118px;
  margin: -59px 0 0 -48px;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, #ffb3c4, #e8355e 45%, #a3123a);
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.25);
  animation: balloonUp 0.85s var(--ease-out) both, balloonWobble 0.5s ease-in-out 0.85s, pop 0.18s ease-in 1.15s forwards;
}

.balloon-string {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

@keyframes balloonUp {
  from { transform: translateY(70vh) scale(0.8); }
  to { transform: translateY(0) scale(1); }
}

@keyframes balloonWobble {
  25% { transform: rotate(-5deg) scale(1.03); }
  75% { transform: rotate(4deg) scale(1.06); }
}

@keyframes pop {
  to { transform: scale(1.6); opacity: 0; }
}

.confetto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 13px;
  margin: -6px 0 0 -4px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: confettoOut 1.1s cubic-bezier(0.15, 0.7, 0.4, 1) 1.15s forwards;
}

@keyframes confettoOut {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); }
  60% { opacity: 1; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(var(--spin)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(var(--spin)) translateY(var(--fall)); }
}

/* ---------- ❤️ Corazón de luz ---------- */

.opening-corazon {
  background: rgba(16, 4, 10, 0.55);
}

.heart-draw {
  width: 52vmin;
  max-width: 240px;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255, 190, 140, 0.55));
  animation: heartOut 0.6s var(--ease-in-out) 1.6s forwards;
}

.heart-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s var(--ease-in-out) 0.1s forwards;
}

.heart-fill {
  opacity: 0;
  transform-origin: 50% 55%;
  animation: heartFill 0.5s var(--ease-out) 0.95s forwards, heartbeat 0.8s var(--ease-in-out) 1.1s 1;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes heartFill {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes heartOut {
  to { opacity: 0; transform: scale(1.6); filter: blur(10px) drop-shadow(0 0 30px rgba(255, 150, 160, 0.9)); }
}

.opening-corazon .opening-wave {
  animation-delay: 1.3s;
  border-color: #ff8fa8;
}

.opening-corazon .opening-light {
  animation-delay: 1.3s;
}