/*
 * TuCelebración — Animaciones Premium de Entrada
 * tc-animations.css  v2.0
 *
 * Cómo funciona:
 *   1. Al cargar o cambiar de template, agregás la clase .tc-animating al .tc-preview
 *      → todos los hijos se ocultan y pierden su animación.
 *   2. Inmediatamente después (o tras un pequeño delay), reemplazás .tc-animating
 *      por .tc-reveal-active
 *      → cada hijo entra escalonado con su propia curva de entrada.
 *   3. Después de ~2 s podés quitar .tc-reveal-active (los elementos ya están visibles).
 *
 * Clases que se animan automáticamente (dentro de .tc-preview):
 *   .tc-chip, h2, .tc-line (wrapper), .tc-msg, .tc-preview-countdown, .tc-preview-btn
 *
 * Clases auxiliares de transición:
 *   .tc-flash  → micro-destello blanco sobre la tarjeta al cambiar template
 *   .tc-shimmer → efecto de barrido de luz continuo sobre la tarjeta
 */

/* ═══════════════════════════════════════════════════════════════
   1. KEYFRAMES BASE
   ═══════════════════════════════════════════════════════════════ */

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

@keyframes tcRevealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tcFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tcShimmerSweep {
  0%   { left: -80%; opacity: 0; }
  8%   { opacity: 1; }
  55%, 100% { left: 140%; opacity: 0; }
}

@keyframes tcBtnShine {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes tcCountdownPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ═══════════════════════════════════════════════════════════════
   2. ESTADO BASE DE ELEMENTOS ANIMABLES
   (Parten invisibles; la animación los revela)
   ═══════════════════════════════════════════════════════════════ */

.tc-preview .tc-chip,
.tc-preview h2,
.tc-preview .tc-lines-wrap,   /* envolvé tus .tc-line dentro de este div */
.tc-preview .tc-msg,
.tc-preview .tc-preview-countdown,
.tc-preview .tc-preview-btn {
  opacity: 0;
  transform: translateY(14px);
}

/* ═══════════════════════════════════════════════════════════════
   3. ANIMACIÓN INICIAL (al primer render, sin clase extra)
   ═══════════════════════════════════════════════════════════════ */

.tc-preview.tc-loaded .tc-chip {
  animation: tcRevealUp 0.55s 0.25s ease both;
}
.tc-preview.tc-loaded h2 {
  animation: tcRevealUp 0.65s 0.40s ease both;
}
.tc-preview.tc-loaded .tc-lines-wrap {
  animation: tcRevealUp 0.55s 0.58s ease both;
}
.tc-preview.tc-loaded .tc-msg {
  animation: tcRevealUp 0.55s 0.72s ease both;
}
.tc-preview.tc-loaded .tc-preview-countdown {
  animation: tcRevealUp 0.55s 0.88s ease both;
}
.tc-preview.tc-loaded .tc-preview-btn {
  animation: tcRevealUp 0.55s 1.05s ease both;
}

/* ═══════════════════════════════════════════════════════════════
   4. ESTADO "ANIMANDO" — ocultar mientras se hace el swap
   ═══════════════════════════════════════════════════════════════ */

.tc-preview.tc-animating .tc-chip,
.tc-preview.tc-animating h2,
.tc-preview.tc-animating .tc-lines-wrap,
.tc-preview.tc-animating .tc-msg,
.tc-preview.tc-animating .tc-preview-countdown,
.tc-preview.tc-animating .tc-preview-btn {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  animation: none !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. REVEAL ACTIVO — re-entrada escalonada
   ═══════════════════════════════════════════════════════════════ */

.tc-preview.tc-reveal-active .tc-chip {
  animation: tcRevealUp 0.55s 0.15s ease both;
}
.tc-preview.tc-reveal-active h2 {
  animation: tcRevealUp 0.65s 0.28s ease both;
}
.tc-preview.tc-reveal-active .tc-lines-wrap {
  animation: tcRevealUp 0.55s 0.44s ease both;
}
.tc-preview.tc-reveal-active .tc-msg {
  animation: tcRevealUp 0.55s 0.58s ease both;
}
.tc-preview.tc-reveal-active .tc-preview-countdown {
  animation: tcRevealUp 0.55s 0.72s ease both;
}
.tc-preview.tc-reveal-active .tc-preview-btn {
  animation: tcRevealUp 0.55s 0.88s ease both;
}

/* ═══════════════════════════════════════════════════════════════
   6. SHIMMER — barrido de luz continuo sobre la tarjeta
   Agregá este elemento dentro del .tc-preview:
   <div class="tc-shimmer" aria-hidden="true"></div>
   ═══════════════════════════════════════════════════════════════ */

.tc-shimmer {
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.045),
    transparent
  );
  pointer-events: none;
  z-index: 10;
  animation: tcShimmerSweep 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   7. FLASH DE TRANSICIÓN
   Agregá este elemento dentro del .tc-preview:
   <div class="tc-transition-flash" aria-hidden="true"></div>
   Activar: agregar la clase .tc-flash y quitarla tras 300 ms.
   ═══════════════════════════════════════════════════════════════ */

.tc-transition-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  z-index: 20;
  border-radius: inherit;
}

.tc-transition-flash.tc-flash {
  animation: tcFlash 0.28s ease forwards;
}

/* ═══════════════════════════════════════════════════════════════
   8. BOTÓN — shimmer en hover + animación de fondo
   ═══════════════════════════════════════════════════════════════ */

.tc-preview-btn {
  position: relative;
  overflow: hidden;
  background-size: 200% 100%;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.tc-preview-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.tc-preview-btn:hover::before {
  transform: translateX(100%);
}

.tc-preview-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.tc-preview-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   9. COUNTDOWN — pulse sutil en los números
   ═══════════════════════════════════════════════════════════════ */

.tc-preview-countdown strong {
  display: inline-block; /* necesario para que transform funcione */
}

/* Activar sólo cuando el countdown cambia de valor:
   agregar/quitar la clase .tc-countdown-tick en el elemento <strong> */
.tc-preview-countdown strong.tc-countdown-tick {
  animation: tcCountdownPulse 0.35s ease;
}

/* ═══════════════════════════════════════════════════════════════
   10. REDUCED MOTION — respetar preferencias del usuario
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .tc-preview .tc-chip,
  .tc-preview h2,
  .tc-preview .tc-lines-wrap,
  .tc-preview .tc-msg,
  .tc-preview .tc-preview-countdown,
  .tc-preview .tc-preview-btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }

  .tc-shimmer,
  .tc-transition-flash {
    display: none;
  }

  .tc-preview-btn::before {
    display: none;
  }
}

/* ==========================================================
   TuCelebración · Stickers premium del zip
   Scope seguro: solo preview/editor/invitación
========================================================== */

.tc-editor-wrap #tc_preview .tc-stickers-layer,
body.tc-invitation-single .tc-inv-card .tc-stickers-layer,
body.tc-invitation-single .tc-preview-card .tc-stickers-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.tc-editor-wrap #tc_preview.tc-sticker-none .tc-stickers-layer,
body.tc-invitation-single .tc-inv-card.tc-sticker-none .tc-stickers-layer,
body.tc-invitation-single .tc-preview-card.tc-sticker-none .tc-stickers-layer {
  display: none !important;
}

/* Ornamentos elegantes */

.tc-editor-wrap #tc_preview.tc-sticker-elegante .tc-stickers-layer::before,
.tc-editor-wrap #tc_preview.tc-sticker-elegante .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-elegante .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-elegante .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-elegante .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-elegante .tc-stickers-layer::after {
  content: "✦";
  position: absolute;
  color: var(--tc-primary);
  opacity: .55;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 22px currentColor;
}

.tc-editor-wrap #tc_preview.tc-sticker-elegante .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-elegante .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-elegante .tc-stickers-layer::before {
  top: 28px;
  right: 28px;
}

.tc-editor-wrap #tc_preview.tc-sticker-elegante .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-elegante .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-elegante .tc-stickers-layer::after {
  bottom: 42px;
  left: 26px;
  font-size: 24px;
  opacity: .42;
}

/* Flores */

.tc-editor-wrap #tc_preview.tc-sticker-flores .tc-stickers-layer::before,
.tc-editor-wrap #tc_preview.tc-sticker-flores .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-flores .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-flores .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-flores .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-flores .tc-stickers-layer::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: .42;
  background:
    radial-gradient(circle at 50% 16%, var(--tc-primary) 0 8px, transparent 9px),
    radial-gradient(circle at 75% 38%, var(--tc-primary) 0 8px, transparent 9px),
    radial-gradient(circle at 65% 70%, var(--tc-primary) 0 8px, transparent 9px),
    radial-gradient(circle at 35% 70%, var(--tc-primary) 0 8px, transparent 9px),
    radial-gradient(circle at 25% 38%, var(--tc-primary) 0 8px, transparent 9px);
  filter: blur(.2px);
}

.tc-editor-wrap #tc_preview.tc-sticker-flores .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-flores .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-flores .tc-stickers-layer::before {
  top: -52px;
  right: -48px;
  transform: rotate(18deg);
}

.tc-editor-wrap #tc_preview.tc-sticker-flores .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-flores .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-flores .tc-stickers-layer::after {
  bottom: -58px;
  left: -54px;
  transform: rotate(-18deg);
  opacity: .30;
}

/* Corazones */

.tc-editor-wrap #tc_preview.tc-sticker-corazones .tc-stickers-layer::before,
.tc-editor-wrap #tc_preview.tc-sticker-corazones .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-corazones .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-corazones .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-corazones .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-corazones .tc-stickers-layer::after {
  content: "♡";
  position: absolute;
  color: var(--tc-primary);
  opacity: .42;
  font-size: 44px;
  line-height: 1;
  text-shadow: 0 0 20px currentColor;
}

.tc-editor-wrap #tc_preview.tc-sticker-corazones .tc-stickers-layer::before,
body.tc-invitation-single .tc-inv-card.tc-sticker-corazones .tc-stickers-layer::before,
body.tc-invitation-single .tc-preview-card.tc-sticker-corazones .tc-stickers-layer::before {
  top: 34px;
  right: 34px;
  transform: rotate(12deg);
}

.tc-editor-wrap #tc_preview.tc-sticker-corazones .tc-stickers-layer::after,
body.tc-invitation-single .tc-inv-card.tc-sticker-corazones .tc-stickers-layer::after,
body.tc-invitation-single .tc-preview-card.tc-sticker-corazones .tc-stickers-layer::after {
  bottom: 46px;
  left: 30px;
  font-size: 30px;
  transform: rotate(-14deg);
}