/* ==========================================================
   animaciones.css - Fondo de pixel art con efecto parallax
   Cada línea está explicada para que puedas estudiarla.
   ========================================================== */


/* ----------------------------------------------------------
   1) VARIABLE GLOBAL
   ---------------------------------------------------------- */

:root {
  /* ":root" es la etiqueta <html>, la raíz de la página.
     Lo que definas aquí lo puedes usar en TODO el archivo. */

  --ancho-capa: calc(100dvh * 320 / 180);
  /* Una variable en CSS siempre empieza con dos guiones (--).
     Aquí guardamos cuánto mide de ancho tu dibujo cuando se
     estira hasta ocupar toda la altura de la pantalla:
       100dvh  = la altura visible de la pantalla
       320/180 = la proporción de tu dibujo (320 de ancho, 180 de alto)
     Si algún día cambias el tamaño de tu dibujo en Aseprite,
     cambia solo esos dos números. */
}


/* ----------------------------------------------------------
   2) LA CAJA QUE CONTIENE TODO EL FONDO
   ---------------------------------------------------------- */

.fondo {
  /* El punto significa "los elementos con class='fondo'". */

  position: fixed;
  /* Clava la caja a la pantalla: no se mueve aunque hagas scroll. */

  top: 0;
  /* Pegada al borde de arriba (0 píxeles de distancia). */

  left: 0;
  /* Pegada al borde de la izquierda. */

  width: 100%;
  /* Ocupa todo el ancho de la pantalla. */

  height: 100dvh;
  /* Ocupa toda la altura VISIBLE (dvh descuenta las barras del
     navegador del celular, y vh no lo hace). */

  z-index: -1;
  /* z-index decide qué queda encima de qué. Un número negativo
     manda la caja DETRÁS de tu título, tu botón y todo lo demás. */

  overflow: hidden;
  /* Recorta lo que se salga de la caja. Así las capas, al moverse,
     no crean barras de scroll. */

  background-color: #0B1026;
  /* Color de respaldo (tu color 1). Se ve mientras cargan las
     imágenes o donde alguna capa sea transparente. */
}


/* ----------------------------------------------------------
   3) REGLAS COMUNES A LAS 5 CAPAS
   ---------------------------------------------------------- */

.capa {
  /* Todas las capas llevan class="capa", así que todo lo que
     pongas aquí se repite en las cinco sin escribirlo cinco veces. */

  position: absolute;
  /* Se coloca respecto a su caja padre (.fondo), no a la pantalla.
     Las capas quedan apiladas: la última del HTML queda arriba. */

  top: 0;
  left: 0;
  /* Cada capa arranca en la esquina superior izquierda. */

  width: 100%;
  height: 100%;
  /* Cada capa mide lo mismo que .fondo: cubre todo. */

  background-repeat: no-repeat;
  /* Por defecto, la imagen no se repite. (Algunas capas lo
     cambiarán más abajo.) */

  background-position: center bottom;
  /* Dónde se coloca la imagen: centrada de izquierda a derecha
     y pegada abajo. Así el suelo nunca se corta. */

  background-size: auto 100%;
  /* Tamaño de la imagen:
       auto = el ancho se calcula solo, sin deformar el dibujo
       100% = el alto es el de toda la capa
     Es lo que hace que el dibujo mida justo --ancho-capa. */

  image-rendering: pixelated;
  /* Al agrandar, no suaviza los píxeles. Sin esto, el pixel art
     se vería borroso. */
}


/* ----------------------------------------------------------
   4) CADA CAPA CON SU IMAGEN Y SU VELOCIDAD
   Regla: más segundos = más lento. Lo lejano es lento y
   lo cercano es rápido. Eso crea la sensación de profundidad.
   ---------------------------------------------------------- */

.cielo {
  background-image: url("/imagenes/cielo.png");
  /* Qué imagen se muestra. La ruta se cuenta desde la carpeta
     donde está ESTE archivo css. */

  background-size: cover;
  /* Esta línea reemplaza la de .capa: la imagen se estira para
     llenar todo, recortando lo que sobre. El cielo no se mueve,
     así que no necesita repetirse. */
}

.montanas {
  background-image: url("/imagenes/montana.png");

  background-repeat: repeat-x;
  /* Repite la imagen hacia los lados (x = horizontal). Es
     necesario: al moverse, tiene que haber otra copia detrás
     para llenar el hueco. */

  animation: desplazar 120s linear infinite;
  /* Aplica la animación llamada "desplazar" (se define abajo):
       120s     = tarda 120 segundos en dar una vuelta (muy lento)
       linear   = velocidad constante, sin acelerar ni frenar
       infinite = se repite para siempre */
}

.bosque {
  background-image: url("/imagenes/bosque.png");
  background-repeat: repeat-x;
  animation: desplazar 60s linear infinite;
  /* 60s: el doble de rápido que las montañas, porque está
     más cerca de nosotros. */
}

.suelo {
  background-image: url("/imagenes/suelo.png");
  background-repeat: repeat-x;
  animation: desplazar 40s linear infinite;
  /* 40s: más rápido que el bosque. */
}

.pinos-frente {
  background-image: url("/imagenes/pinos-frente.png");
  background-repeat: repeat-x;
  animation: desplazar 25s linear infinite;
  /* 25s: la capa más rápida, la más cercana a nosotros. */
}


/* ----------------------------------------------------------
   5) LA ANIMACIÓN EN SÍ
   ---------------------------------------------------------- */

@keyframes desplazar {
  /* "keyframes" significa fotogramas clave: tú defines cómo se
     ve al principio y al final, y el navegador calcula todos
     los pasos de en medio. El nombre "desplazar" es el que se
     usa arriba en cada "animation". */

  from { background-position-x: 0; }
  /* Al principio: la imagen empieza en la posición 0, pegada
     al borde izquierdo (x = eje horizontal). */

  to   { background-position-x: calc(var(--ancho-capa) * -1); }
  /* Al final: la imagen se movió hacia la IZQUIERDA (por eso el
     -1) exactamente un ancho de imagen.
     var(--ancho-capa) lee la variable del principio.
     Como se movió justo lo que mide la imagen, el final se ve
     idéntico al principio, y al reiniciarse no se nota el salto. */
}