/* ==========================================================================
   Elias Roy — Software & AI
   Animaciones de entrada.

   Cómo funciona:
     - Cada bloque lleva una clase: .anim-left, .anim-right o .anim-image.
     - La animación es 100% CSS: se dispara sola en cada carga, sin JS.
     - animations.js solo añade la repetición al hacer scroll: reinicia la
       animación (currentTime = 0) cada vez que el bloque vuelve a entrar en
       pantalla, bajando o subiendo.
     - animation-fill-mode: both mantiene el estado inicial y el final, así
       que no hay parpadeos ni saltos; el layout nunca se toca (solo
       transform y opacity).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fotogramas de entrada
   -------------------------------------------------------------------------- */

@keyframes eliasEnterLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes eliasEnterRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes eliasEnterImage {
  from { opacity: 0; transform: translateX(-32px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Versión solo con opacidad, para cuando el visitante cede el control al
   sistema (html.respect-motion). La animación NO se omite: omitirla se
   percibe como que la web está rota. */
@keyframes eliasEnterFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. Base de la animación
   -------------------------------------------------------------------------- */

.anim-left,
.anim-right,
.anim-image {
  animation-duration: 700ms !important;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  animation-fill-mode: both !important;
  animation-iteration-count: 1;
}

.anim-left  { animation-name: eliasEnterLeft; }
.anim-right { animation-name: eliasEnterRight; }
.anim-image { animation-name: eliasEnterImage; }

/* --------------------------------------------------------------------------
   3. Escalonado (retardos para que no aparezcan todos a la vez)
   -------------------------------------------------------------------------- */

.anim-hero-text      { animation-delay: 60ms; }
.anim-hero-media     { animation-delay: 220ms; }
.anim-section-head   { animation-delay: 90ms; }

.services-grid .anim-left:nth-child(1) { animation-delay: 160ms; }
.services-grid .anim-left:nth-child(2) { animation-delay: 250ms; }
.services-grid .anim-left:nth-child(3) { animation-delay: 340ms; }
.services-grid .anim-left:nth-child(4) { animation-delay: 430ms; }

.anim-featured-text  { animation-delay: 150ms; }
.anim-featured-note  { animation-delay: 300ms; }

.projects-grid .anim-left:nth-child(1) { animation-delay: 160ms; }
.projects-grid .anim-left:nth-child(2) { animation-delay: 250ms; }
.projects-grid .anim-left:nth-child(3) { animation-delay: 340ms; }

.process-list .anim-left:nth-child(1) { animation-delay: 140ms; }
.process-list .anim-left:nth-child(2) { animation-delay: 210ms; }
.process-list .anim-left:nth-child(3) { animation-delay: 280ms; }
.process-list .anim-left:nth-child(4) { animation-delay: 350ms; }
.process-list .anim-left:nth-child(5) { animation-delay: 420ms; }
.process-list .anim-left:nth-child(6) { animation-delay: 490ms; }

.anim-about-text     { animation-delay: 150ms; }
.anim-about-card     { animation-delay: 290ms; }
.anim-contact-actions { animation-delay: 150ms; }
.anim-contact-data    { animation-delay: 290ms; }

/* --------------------------------------------------------------------------
   4. Menos movimiento (html.respect-motion)

   Por defecto la web muestra siempre el desplazamiento lateral. Añade
   respect-motion en <html> (o abre con ?anim=motion) para ceder el control
   al sistema: si el visitante pide menos movimiento, la entrada se mantiene
   pero solo con fundido y sin retardos.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.respect-motion .anim-left,
  html.respect-motion .anim-right,
  html.respect-motion .anim-image {
    animation-name: eliasEnterFade !important;
    animation-duration: 600ms !important;
    animation-delay: 0ms !important;
  }
}

/* --------------------------------------------------------------------------
   5. Interruptores por URL
   ?anim=1 fuerza el desplazamiento lateral (gana a respect-motion)
   ?anim=0 desactiva la animación
   -------------------------------------------------------------------------- */

html.force-anim .anim-left,
html.force-anim .anim-right,
html.force-anim .anim-image {
  animation-name: var(--anim-entrada) !important;
  animation-duration: 700ms !important;
}

html.force-anim .anim-left  { --anim-entrada: eliasEnterLeft; }
html.force-anim .anim-right { --anim-entrada: eliasEnterRight; }
html.force-anim .anim-image { --anim-entrada: eliasEnterImage; }

html.no-anim .anim-left,
html.no-anim .anim-right,
html.no-anim .anim-image {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   6. Restauración desde la caché del navegador (bfcache)
   animations.js añade anim-resal, fuerza reflow y la quita: al volver a
   poner el animation-name, todas las entradas se ejecutan otra vez.
   -------------------------------------------------------------------------- */

html.anim-reset .anim-left,
html.anim-reset .anim-right,
html.anim-reset .anim-image {
  animation-name: none !important;
}

/* --------------------------------------------------------------------------
   7. Impresión: sin animaciones
   -------------------------------------------------------------------------- */

@media print {
  .anim-left,
  .anim-right,
  .anim-image,
  .anim-hero-text,
  .anim-hero-media,
  .anim-section-head,
  .anim-featured-text,
  .anim-featured-note,
  .anim-about-text,
  .anim-about-card,
  .anim-contact-actions,
  .anim-contact-data,
  .services-grid .anim-left,
  .projects-grid .anim-left,
  .process-list .anim-left {
    animation: none !important;
  }
}