/*
Versión: 0.26.0714.10
Fecha: 2026-07-14
Cambio:
- Se implementa PENUMBRA FOREST SYSTEM con cuatro planos PNG y dos bandas de niebla intercaladas.
- Se agregan animaciones de bajo desplazamiento, responsive y soporte para reduced motion.
- Se separa el parallax en wrappers para conservar el drift interno.
- Se refuerzan tres bandas irregulares de niebla con máscara de entrada más rápida.
- Se simplifica móvil a dos bosques y una niebla, limitados a la zona inferior del viewport.
- Se reduce tablet a tres planos forestales con opacidad intermedia.
- Se libera memoria GPU móvil retirando will-change donde las animaciones ya están detenidas.
- Se elimina el parallax reactivo y se reemplaza por respiración CSS horizontal, reversible y desfasada.
*/

/* =====================================================

PENUMBRA FOREST SYSTEM

Layered forest and ambient fog
Inspired by "Entre Penumbras"

===================================================== */

:root {
  --penumbra-start: 35vh;
  --forest-layer-bleed: 30px;
  --forest-back-opacity: .20;
  --forest-mid-opacity: .34;
  --forest-front-opacity: .56;
  --forest-foreground-opacity: .80;
  --forest-back-speed: 8s;
  --forest-mid-speed: 7s;
  --forest-front-speed: 6s;
  --forest-foreground-speed: 8s;
  --forest-back-drift: 14px;
  --forest-mid-drift: 10px;
  --forest-front-drift: 6px;
  --forest-foreground-drift: 3px;
  --fog-back-opacity: .24;
  --fog-front-opacity: .34;
  --fog-low-opacity: .36;
  --fog-blur: 56px;
  --fog-back-speed: 11s;
  --fog-front-speed: 14s;
  --fog-low-speed: 17s;
}

body {
  position: relative;
  isolation: isolate;
}

body::before,
body::after {
  z-index: -1;
}

.penumbra-forest {
  position: fixed;
  inset: var(--penumbra-start) 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .30) 8%, rgba(0, 0, 0, .75) 22%, #000 45%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .30) 8%, rgba(0, 0, 0, .75) 22%, #000 45%, #000 100%);
}

.penumbra-forest ~ main,
.penumbra-forest ~ .footer {
  position: relative;
  z-index: 2;
}

.penumbra-forest__layer-wrap {
  position: absolute;
  top: 0;
  right: calc(var(--forest-layer-bleed) * -1);
  bottom: 0;
  left: calc(var(--forest-layer-bleed) * -1);
}

.penumbra-forest__layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  transform: translate3d(0, 0, 0);
  transform-origin: center bottom;
  will-change: transform;
}

.penumbra-forest__layer-wrap--back { z-index: 1; }

.penumbra-forest__layer-wrap--mid { z-index: 2; }

.penumbra-forest__layer-wrap--front { z-index: 4; }

.penumbra-forest__layer-wrap--foreground { z-index: 6; }

.penumbra-forest__layer--back {
  opacity: var(--forest-back-opacity);
  background-image: url('/assets/img/forest_back.png?v=0.26.0714.7');
  filter: blur(1.5px);
  animation: forest-drift-back var(--forest-back-speed) ease-in-out infinite;
  animation-delay: 0s;
}

.penumbra-forest__layer--mid {
  opacity: var(--forest-mid-opacity);
  background-image: url('/assets/img/forest_mid.png?v=0.26.0714.7');
  animation: forest-drift-mid var(--forest-mid-speed) ease-in-out infinite;
  animation-delay: -2.4s;
}

.penumbra-forest__layer--front {
  opacity: var(--forest-front-opacity);
  background-image: url('/assets/img/forest_front.png?v=0.26.0714.7');
  animation: forest-drift-front var(--forest-front-speed) ease-in-out infinite;
  animation-delay: -4.1s;
}

.penumbra-forest__layer--foreground {
  opacity: var(--forest-foreground-opacity);
  background-image: url('/assets/img/forest_foreground.png?v=0.26.0714.7');
  animation: forest-drift-foreground var(--forest-foreground-speed) ease-in-out infinite;
  animation-delay: -6.3s;
}

.penumbra-forest__fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 45%;
  border-radius: 50%;
  filter: blur(var(--fog-blur));
  background:
    radial-gradient(ellipse at 18% 55%, rgba(160, 166, 162, .24) 0%, rgba(110, 118, 114, .14) 38%, transparent 70%),
    radial-gradient(ellipse at 52% 42%, rgba(145, 151, 147, .20) 0%, rgba(96, 103, 100, .12) 42%, transparent 72%),
    radial-gradient(ellipse at 82% 60%, rgba(155, 161, 157, .22) 0%, rgba(100, 108, 104, .12) 36%, transparent 68%);
  transform: translate3d(0, 0, 0) scale(1.02);
  opacity: var(--fog-opacity-start);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.penumbra-forest__fog--back {
  top: 20%;
  z-index: 3;
  --fog-opacity-start: var(--fog-back-opacity);
  --fog-opacity-peak: .28;
  animation: fog-drift-a var(--fog-back-speed) ease-in-out infinite;
  animation-delay: -1.7s;
}

.penumbra-forest__fog--front {
  top: 50%;
  z-index: 5;
  --fog-opacity-start: var(--fog-front-opacity);
  --fog-opacity-peak: .38;
  animation: fog-drift-b var(--fog-front-speed) ease-in-out infinite;
  animation-delay: -5.2s;
}

.penumbra-forest__fog--low {
  top: 68%;
  z-index: 7;
  height: 38%;
  --fog-opacity-start: var(--fog-low-opacity);
  --fog-opacity-peak: .40;
  animation: fog-drift-a var(--fog-low-speed) ease-in-out infinite reverse;
  animation-delay: -9.1s;
}

@keyframes forest-drift-back {
  0%, 100% { transform: translate3d(calc(var(--forest-back-drift) * -1), 0, 0) scale(1); }
  50% { transform: translate3d(var(--forest-back-drift), 0, 0) scale(1.006); }
}

@keyframes forest-drift-mid {
  0%, 100% { transform: translate3d(calc(var(--forest-mid-drift) * -1), 0, 0) scale(1); }
  50% { transform: translate3d(var(--forest-mid-drift), 0, 0) scale(1.004); }
}

@keyframes forest-drift-front {
  0%, 100% { transform: translate3d(calc(var(--forest-front-drift) * -1), 0, 0) scale(1); }
  50% { transform: translate3d(var(--forest-front-drift), 0, 0) scale(1.003); }
}

@keyframes forest-drift-foreground {
  0%, 100% { transform: translate3d(calc(var(--forest-foreground-drift) * -1), 0, 0) scale(1); }
  50% { transform: translate3d(var(--forest-foreground-drift), 0, 0) scale(1.001); }
}

@keyframes fog-drift-a {
  0%, 100% { transform: translate3d(-7px, 0, 0) scale(1); }
  50% { transform: translate3d(7px, 0, 0) scale(1.01); }
}

@keyframes fog-drift-b {
  0%, 100% { transform: translate3d(5px, 0, 0) scale(1.01); }
  50% { transform: translate3d(-5px, 0, 0) scale(1); }
}

@media (max-width: 1024px) {
  :root {
    --forest-back-opacity: .18;
    --forest-mid-opacity: .30;
    --forest-front-opacity: .50;
    --forest-foreground-opacity: .72;
  }

  .penumbra-forest__layer {
    background-size: auto 96%;
  }

  .penumbra-forest__layer-wrap--foreground,
  .penumbra-forest__fog--low {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --penumbra-start: auto;
    --fog-blur: 40px;
    --forest-back-opacity: .10;
    --forest-mid-opacity: .15;
    --fog-back-opacity: .10;
  }

  .penumbra-forest {
    inset: auto 0 0;
    height: 48vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, .35) 45%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, .35) 45%, #000 100%);
  }

  .penumbra-forest__layer {
    background-size: auto 100%;
  }

  .penumbra-forest__fog {
    filter: blur(40px);
    mix-blend-mode: normal;
  }

  .penumbra-forest__layer-wrap--front,
  .penumbra-forest__layer-wrap--foreground,
  .penumbra-forest__fog--front,
  .penumbra-forest__fog--low {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .penumbra-forest__layer,
  .penumbra-forest__fog {
    animation: none !important;
    will-change: auto;
  }
}