/* =========================================================
   KIT DE ANIMACIONES WEB  ·  v1.0
   Basado en los principios de Emil Kowalski (animations.dev):
   - Solo se animan transform, opacity y filter (60fps siempre).
   - Ease-out para entradas, ease-in-out para movimientos.
   - Rápido en interacción (150-250ms), más lento en entradas grandes.
   - Todo se desactiva si el usuario pide menos movimiento.
   Sin librerías. Sin dependencias. Copiar y pegar.
   ========================================================= */

:root {
  /* --- Curvas (easings) --- */
  --ek-out:        cubic-bezier(0.23, 1, 0.32, 1);     /* entradas y salidas */
  --ek-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);      /* entradas grandes / cinematográficas */
  --ek-in-out:     cubic-bezier(0.77, 0, 0.175, 1);    /* algo que va de A a B */
  --ek-drawer:     cubic-bezier(0.32, 0.72, 0, 1);     /* paneles, estilo iOS */
  --ek-spring:     cubic-bezier(0.34, 1.25, 0.64, 1);  /* rebote SUTIL: 1.4 era demasiado */

  /* --- Duraciones --- */
  --ek-fast:   150ms;  /* hover, botones */
  --ek-base:   250ms;  /* la mayoría de cosas */
  --ek-slow:   450ms;  /* entradas al hacer scroll */
  --ek-cine:   800ms;  /* héroe, portada, primera impresión */

  /* --- Ajustes del revelado --- */
  --ek-shift:  18px;   /* cuánto sube el elemento al aparecer */
  --ek-blur:   6px;    /* desenfoque inicial (el truco de Emil) */
  --ek-stagger: 70ms;  /* retraso entre hermanos en una lista */
}

/* =========================================================
   1. REVELADO AL HACER SCROLL
   Uso:  <div data-ek-reveal>...</div>
   Variantes: data-ek-reveal="up" | "down" | "left" | "right" | "scale" | "fade"
   Extra:     data-ek-delay="200"   (milisegundos)
   ========================================================= */

/* Solo se esconde si el JS ha cargado: si falla, todo se ve igual */
.ek-js [data-ek-reveal] {
  opacity: 0;
  filter: blur(var(--ek-blur));
  transform: translate3d(0, var(--ek-shift), 0);
  transition:
    opacity   var(--ek-slow) var(--ek-out),
    filter    var(--ek-slow) var(--ek-out),
    transform var(--ek-slow) var(--ek-out);
  transition-delay: var(--ek-delay, 0ms);
  will-change: opacity, transform, filter;
}

.ek-js [data-ek-reveal="down"]  { transform: translate3d(0, calc(var(--ek-shift) * -1), 0); }
.ek-js [data-ek-reveal="left"]  { transform: translate3d(var(--ek-shift), 0, 0); }
.ek-js [data-ek-reveal="right"] { transform: translate3d(calc(var(--ek-shift) * -1), 0, 0); }
.ek-js [data-ek-reveal="scale"] { transform: scale(0.94); }
.ek-js [data-ek-reveal="fade"]  { transform: none; filter: blur(0); }
.ek-js [data-ek-reveal="cine"]  {
  transform: translate3d(0, 40px, 0) scale(1.02);
  filter: blur(10px);
  transition-duration: var(--ek-cine);
  transition-timing-function: var(--ek-out-expo);
}

/* Estado final: el JS añade .ek-in */
.ek-js [data-ek-reveal].ek-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* =========================================================
   2. LISTAS EN CASCADA (stagger)
   Uso:  <div data-ek-stagger>  <a>1</a> <a>2</a> <a>3</a>  </div>
   El JS pone data-ek-reveal a cada hijo y calcula el retraso.
   Ajusta el ritmo con  style="--ek-stagger: 40ms"
   ========================================================= */
.ek-js [data-ek-stagger] > * {
  --ek-delay: calc(var(--ek-i, 0) * var(--ek-stagger));
}

/* =========================================================
   3. TEXTO QUE APARECE PALABRA A PALABRA
   Uso:  <h1 data-ek-text>Tu titular aquí</h1>
   ========================================================= */
.ek-word {
  display: inline-block;
  white-space: pre;
}
.ek-js [data-ek-text] .ek-word {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 0.45em, 0);
  transition:
    opacity   var(--ek-slow) var(--ek-out-expo),
    filter    var(--ek-slow) var(--ek-out-expo),
    transform var(--ek-slow) var(--ek-out-expo);
  transition-delay: calc(var(--ek-i, 0) * 45ms + var(--ek-delay, 0ms));
}
.ek-js [data-ek-text].ek-in .ek-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* =========================================================
   4. HOVER Y CLIC (el detalle que hace que se sienta "caro")
   ========================================================= */

/* Levanta ligeramente. Uso: class="ek-lift" */
.ek-lift {
  transition: transform var(--ek-fast) var(--ek-out),
              box-shadow var(--ek-base) var(--ek-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .ek-lift:hover { transform: translate3d(0, -3px, 0); }
}
.ek-lift:active { transform: translate3d(0, -1px, 0) scale(0.985); transition-duration: 80ms; }

/* Escala mínima. Uso: class="ek-scale" */
.ek-scale { transition: transform var(--ek-fast) var(--ek-spring); }
@media (hover: hover) and (pointer: fine) {
  .ek-scale:hover { transform: scale(1.03); }
}
.ek-scale:active { transform: scale(0.97); transition-duration: 80ms; }

/* Botón que se hunde al pulsar. Uso: class="ek-press" */
.ek-press { transition: transform 80ms var(--ek-out), filter var(--ek-fast) var(--ek-out); }
.ek-press:active { transform: scale(0.96); filter: brightness(1.1); }

/* Zoom dentro de una tarjeta con foto.
   Uso: <div class="ek-zoom"><img src="..."></div>  */
.ek-zoom { overflow: hidden; }
.ek-zoom img,
.ek-zoom video {
  display: block;
  width: 100%;
  transition: transform var(--ek-cine) var(--ek-out-expo);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .ek-zoom:hover img,
  .ek-zoom:hover video { transform: scale(1.06); }
}

/* Subrayado que crece de izquierda a derecha. Uso: class="ek-underline" */
.ek-underline {
  position: relative;
  text-decoration: none;
}
.ek-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--ek-base) var(--ek-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .ek-underline:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* =========================================================
   5. IMÁGENES QUE ENTRAN AL CARGAR (adiós al "salto" feo)
   Uso:  <img src="foto.jpg" data-ek-img alt="">
   ========================================================= */
.ek-js img[data-ek-img] {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.03);
  transition:
    opacity   var(--ek-cine) var(--ek-out),
    filter    var(--ek-cine) var(--ek-out),
    transform var(--ek-cine) var(--ek-out);
}
.ek-js img[data-ek-img].ek-loaded {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Esqueleto de carga. Uso: class="ek-skeleton" */
.ek-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.ek-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: ek-shimmer 1.6s infinite;
}
@keyframes ek-shimmer { to { transform: translateX(100%); } }

/* =========================================================
   6. MODAL Y DRAWER (panel que sube desde abajo, tipo app)
   Uso:  <button data-ek-open="#mi-modal">Abrir</button>
         <div class="ek-overlay" id="mi-modal" hidden>
           <div class="ek-modal">  ...contenido...  </div>
         </div>
   Para el panel inferior usa class="ek-drawer" en vez de ek-modal.
   Cierra con Escape, clic fuera, [data-ek-close] o arrastrando hacia abajo.
   ========================================================= */
.ek-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--ek-base) var(--ek-out);
  overscroll-behavior: contain;
}
.ek-overlay[hidden] { display: none; }
.ek-overlay.ek-open { opacity: 1; }

.ek-modal {
  transform: scale(0.96) translate3d(0, 8px, 0);
  opacity: 0;
  transition:
    transform var(--ek-base) var(--ek-spring),
    opacity   var(--ek-base) var(--ek-out);
  max-height: 88vh;
  overflow: auto;
}
.ek-overlay.ek-open .ek-modal { transform: none; opacity: 1; }

.ek-overlay:has(.ek-drawer) { align-items: flex-end; padding: 0; }
.ek-drawer {
  width: 100%;
  margin-top: auto;   /* pegado abajo aunque el navegador no soporte :has() */
  max-height: 88vh;
  overflow: auto;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--ek-slow) var(--ek-drawer);
  touch-action: pan-y;
}
.ek-overlay.ek-open .ek-drawer { transform: none; }
.ek-drawer.ek-dragging { transition: none; }

/* Bloquea el scroll de fondo mientras hay algo abierto */
body.ek-locked { overflow: hidden; }

/* =========================================================
   7. BARRA SUPERIOR QUE SE ESCONDE AL BAJAR
   Uso:  <header data-ek-nav> ... </header>   (posición fixed/sticky)
   ========================================================= */
[data-ek-nav] {
  transition: transform var(--ek-base) var(--ek-in-out),
              background-color var(--ek-base) var(--ek-out);
  will-change: transform;
}
[data-ek-nav].ek-nav-hidden { transform: translate3d(0, -105%, 0); }

/* =========================================================
   8. ENTRADA DE PÁGINA (lo primero que se ve)
   Uso:  <div class="ek-enter"> ... </div>
   ========================================================= */
.ek-js .ek-enter {
  animation: ek-enter var(--ek-cine) var(--ek-out-expo) both;
  animation-delay: var(--ek-delay, 0ms);
}
@keyframes ek-enter {
  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Pulso suave para llamar la atención (CTA). Uso: class="ek-pulse" */
.ek-pulse { animation: ek-pulse 2.8s var(--ek-in-out) infinite; }
@keyframes ek-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* Flecha de "sigue bajando". Uso: class="ek-bob" */
.ek-bob { animation: ek-bob 2s var(--ek-in-out) infinite; }
@keyframes ek-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* Barra de progreso de lectura. Uso: <div data-ek-progress></div> */
[data-ek-progress] {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
  z-index: 10000;
  pointer-events: none;
}

/* =========================================================
   8-bis. MOVIL — el desenfoque es lo mas caro que existe para la GPU
   de un telefono. Al hacer scroll se nota. En movil entra sin blur:
   se ve casi igual y va fluido.
   ========================================================= */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .ek-js [data-ek-reveal],
  .ek-js [data-ek-reveal="cine"],
  .ek-js [data-ek-text] .ek-word,
  .ek-js img[data-ek-img] {
    filter: none !important;
  }
  .ek-js [data-ek-reveal] {
    transition-property: opacity, transform;
  }
  .ek-js .ek-enter { animation-name: ek-enter-movil; }
}
@keyframes ek-enter-movil {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   9. ACCESIBILIDAD — obligatorio
   Si el sistema del visitante pide menos movimiento, todo queda quieto
   pero VISIBLE. Nunca dejes contenido escondido.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .ek-js [data-ek-reveal],
  .ek-js [data-ek-text] .ek-word,
  .ek-js img[data-ek-img],
  .ek-js .ek-enter {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .ek-pulse, .ek-bob, .ek-skeleton::after { animation: none !important; }
  .ek-lift, .ek-scale, .ek-press, .ek-zoom img { transition: none !important; }
}