/* ================================================================
   FONDO ANIMADO POR CAPAS – CamiCare / Cuentitos
   Solo activo en ver.php.

   Stacking context:
     aurora (::before)      z-index: -1
     #ct-layers             z-index:  1   ← estas capas
     .cuentitos-page        z-index:  2   ← contenido de la página
   ================================================================ */

/* Elevar el contenido de la página sobre las capas */
.cuentitos-single .cuentitos-page {
  position: relative;
  z-index: 2;
}

/* ── Contenedor principal: fijo en la base del viewport ── */
#ct-layers {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  opacity: 0.6;
}

/* ── Capa individual ── */
.ct-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  /* auto en ancho preserva la proporción; 100% en alto rellena el contenedor */
  background-size: auto 100%;
  will-change: background-position-x;
}

/* ================================================================
   PROFUNDIDAD POR CAPA
   Técnica: cada capa tiene su propio height y bottom.
   - height  → escala visual de la imagen (sin deformar).
   - bottom  → qué tan alto flota sobre la base del contenedor.
   La progresión fondo→frente: elementos más pequeños y altos
   atrás, más grandes y bajos al frente.
   ================================================================ */

/*
   Regla anti-clipping: height% + bottom% ≤ 97%
   garantiza que el borde superior del elemento
   nunca salga del contenedor.
   Layer 5 es la única excepción intencional (suelo).
*/

/* Layer 1 · Colinas lejanas → h68 + b20 = 88%, top 12px */
#ct-layers .ct-layer:nth-child(1) {
  height: 68%;
  bottom: 20%;
  background-position: left bottom;
}

/* Layer 2 · Árboles pequeños fondo → h76 + b13 = 89%, top 11px */
#ct-layers .ct-layer:nth-child(2) {
  height: 76%;
  bottom: 13%;
  background-position: left bottom;
}

/* Layer 3 · Casitas – plano medio → h84 + b8 = 92%, top 8px */
#ct-layers .ct-layer:nth-child(3) {
  height: 84%;
  bottom: 8%;
  background-position: left bottom;
}

/* Layer 4 · Árboles grandes → h91 + b3 = 94%, top 6px */
#ct-layers .ct-layer:nth-child(4) {
  height: 91%;
  bottom: 3%;
  background-position: left bottom;
}

/* Layer 5 · Suelo y arbustos → desborde intencional 5px en top */
#ct-layers .ct-layer:nth-child(5) {
  height: 105%;
  bottom: 0;
  background-position: left bottom;
}

/* Layer 6 · Partículas → h48 + b40 = 88%, flota zona media */
#ct-layers .ct-layer:nth-child(6) {
  height: 48%;
  bottom: 40%;
  background-position: left center;
}

/* ── Mobile: altura reducida ── */
@media (max-width: 600px) {
  #ct-layers {
    height: 72px;
  }
}

/* ── Reduced motion: sin animación, sin capas ── */
@media (prefers-reduced-motion: reduce) {
  #ct-layers {
    display: none;
  }
}