/* ============================================================
   SISTEMA DE ANIMACIONES PREMIUM — Che Guri Store
   Los 6 estilos: líquido, scroll fluido, entradas coreografiadas,
   transiciones morphing, motion blur y ritmo musical
   ============================================================ */

/* 1. EASING PREMIUM (movimiento líquido coreografiado) */
:root {
  --ease-liquido: cubic-bezier(0.22, 1, 0.36, 1);    /* entrada suave con desaceleración natural */
  --ease-musical: cubic-bezier(0.65, 0, 0.35, 1);     /* ritmo: acelera y frena */
  --ease-float: cubic-bezier(0.16, 1, 0.3, 1);        /* flotación ligera */
  --duracion-rapida: 500ms;
  --duracion-media: 900ms;
  --duracion-lenta: 1400ms;
}

/* 2. SCROLL ULTRAFLUIDO (como arrastrar dedo por agua) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  -webkit-font-smoothing: antialiased;
  transition: background 1.2s var(--ease-liquido);
}

/* 3. ENTRADAS COREOGRAFIADAS — cada elemento entra distinto,
      mismo lenguaje visual de fluidez elegante */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity, filter;
  transition-property: opacity, transform, filter;
  transition-timing-function: var(--ease-liquido);
}
/* Variantes de entrada (se asignan por JS rotando para que nunca dos iguales) */
[data-anim="up"]     { transform: translateY(46px);    filter: blur(6px);  transition-duration: var(--duracion-media); }
[data-anim="down"]   { transform: translateY(-36px);   filter: blur(5px);  transition-duration: var(--duracion-media); }
[data-anim="left"]   { transform: translateX(56px);    filter: blur(7px);  transition-duration: var(--duracion-lenta); }
[data-anim="right"]  { transform: translateX(-56px);   filter: blur(7px);  transition-duration: var(--duracion-lenta); }
[data-anim="zoom"]   { transform: scale(0.82);         filter: blur(8px);  transition-duration: var(--duracion-media); }
[data-anim="blur"]   { transform: scale(1.04);         filter: blur(14px); transition-duration: var(--duracion-lenta); }
[data-anim="flip"]   { transform: rotateX(24deg) translateY(30px); filter: blur(5px); transition-duration: var(--duracion-media); }

/* Ritmo: elementos con delay escalonado (musicalidad visual) */
[data-anim][data-delay="1"] { transition-delay: 80ms; }
[data-anim][data-delay="2"] { transition-delay: 180ms; }
[data-anim][data-delay="3"] { transition-delay: 300ms; }
[data-anim][data-delay="4"] { transition-delay: 440ms; }
[data-anim][data-delay="5"] { transition-delay: 600ms; }

/* Estado visible (lo agrega JS cuando el elemento entra al viewport) */
[data-anim].visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 4. TRANSICIONES MORPHING ENTRE SECCIONES — los fondos se deforman
      gradualmente en lugar de cambiar de golpe */
section, .seccion, .hero, .barras, .countdown-wrap, footer {
  transition: background 1.4s var(--ease-liquido), color 1.2s var(--ease-liquido);
}

/* 5. MOTION BLUR REALISTA en movimientos rápidos (peso físico) */
@keyframes floatPremium {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.01); filter: blur(0.3px); }
}
.flotante, .mockup .flotante, .flotante.f1, .flotante.f2 {
  animation: floatPremium 3.2s var(--ease-float) infinite;
  will-change: transform, filter;
}

/* 6. RITMO: alternancia rápida/lenta en el hero y botones */
.hero h1, .hero .badge {
  animation: entradaLiquida 1.6s var(--ease-musical) both;
}
@keyframes entradaLiquida {
  0%   { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(10px); }
  60%  { filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.cta, .btn-nav, .cta-principal, .cta-grande, .btn {
  transition: transform var(--duracion-rapida) var(--ease-musical),
              box-shadow var(--duracion-rapida) var(--ease-musical),
              background var(--duracion-media) var(--ease-liquido);
}
.cta:hover, .btn-nav:hover, .cta-principal:hover, .cta-grande:hover, .btn:hover {
  transform: translateY(-3px) scale(1.02);
}
/* Cards con entrada escalonada (grid) */
.card, .modulo, .logro, .para, .barra, details {
  transition: transform var(--duracion-media) var(--ease-float),
              box-shadow var(--duracion-media) var(--ease-float),
              border-color var(--duracion-media) var(--ease-liquido),
              opacity var(--duracion-media) var(--ease-liquido);
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1; transform: none; filter: none; transition: none; }
  .flotante, .hero h1, .hero .badge { animation: none; }
}