/* ═══════════════════════════════════════════
   CELEBRACIÓN FINAL — 5 Mayo 2026
════════════════════════════════════════════ */

/* ── Keyframes ── */

@keyframes celebFlash {
  0%   { opacity: 0; }
  15%  { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes heartBurstFly {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--rot)); opacity: 0; }
}

@keyframes celebTitleReveal {
  0%   { opacity: 0; letter-spacing: -0.05em; transform: scale(0.85); }
  60%  { opacity: 1; letter-spacing: 0.25em;  transform: scale(1.04); }
  100% { opacity: 1; letter-spacing: 0.12em;  transform: scale(1); }
}

@keyframes celebSubReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes celebBadgeIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes particleFall {
  0%   { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift)) rotate(var(--spin)); opacity: 0; }
}

@keyframes celebBgGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

@keyframes numberSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}


/* ── Sección de celebración ── */

.celebration {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tl-bg) 0%, #0f0609 100%);
}

/* Gradiente de fondo que resplandece */
.celebration::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(255,77,109,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(255,143,163,0.1) 0%, transparent 60%);
  animation: celebBgGlow 3s ease-in-out infinite;
}


/* ── Flash inicial ── */

.celebration__flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  animation-play-state: paused;
  animation: none;
}

.celebration.is-active .celebration__flash {
  animation: celebFlash 0.7s ease forwards;
}


/* ── Corazones explosivos ── */

.celebration__hearts {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.celebration__heart {
  position: absolute;
  font-size: 1.5rem;
  color: var(--tl-red);
  text-shadow: 0 0 10px var(--tl-red-glow);
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__heart {
  animation: heartBurstFly 1.2s var(--ease-bounce) var(--delay, 0s) forwards;
}


/* ── Partículas confetti ── */

.celebration__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.celebration__particle {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__particle {
  animation: particleFall var(--duration, 3s) ease var(--delay, 0s) forwards;
}


/* ── Contenido central ── */

.celebration__content {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: 3rem 2rem;
  max-width: 700px;
}

.celebration__eyebrow {
  font-family: var(--font-val);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--tl-pink);
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__eyebrow {
  animation: celebSubReveal 0.6s ease 0.6s both;
}

.celebration__title {
  font-family: var(--font-rom);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 7rem);
  color: var(--tl-text);
  line-height: 1;
  margin: 0.5rem 0 1rem;
  opacity: 0;
  animation-play-state: paused;
  text-shadow: 0 0 40px rgba(255,228,232,0.2);
}

.celebration.is-active .celebration__title {
  animation: celebTitleReveal 1s var(--ease-cinema) 0.5s both;
}

.celebration__description {
  font-family: var(--font-rom);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--tl-text-muted);
  line-height: 1.85;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__description {
  animation: celebSubReveal 0.8s ease 0.9s both;
}

/* Badge "3 Años" */
.celebration__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border: 2px solid var(--tl-border-strong);
  border-radius: 8px;
  padding: 1.5rem 2.5rem;
  background: rgba(255,77,109,0.06);
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__badge {
  animation: celebBadgeIn 0.7s var(--ease-bounce) 1.1s both;
}

.celebration__badge-number {
  font-family: var(--font-rom);
  font-weight: 600;
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--tl-red);
  line-height: 1;
  text-shadow: 0 0 30px var(--tl-red-glow);
  display: block;
}

.celebration.is-active .celebration__badge-number {
  animation: numberSpin 1.2s var(--ease-bounce) 1.2s both;
}

.celebration__badge-text {
  font-family: var(--font-val);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tl-pink);
}

/* Imagen/vídeo del evento final */
.celebration__media-wrapper {
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--tl-border-strong);
  box-shadow: 0 0 40px var(--tl-pink-glow);
  opacity: 0;
  animation-play-state: paused;
}

.celebration.is-active .celebration__media-wrapper {
  animation: celebSubReveal 0.8s ease 0.3s both;
}

.celebration__media-wrapper img,
.celebration__media-wrapper video {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}