text/css jungle_old.css ( UTF-8 Unicode text )

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: #dff4c8;
}

.jungle-scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;

  background:
    radial-gradient(circle at 16% 10%, rgba(255, 245, 170, .95), transparent 18%),
    linear-gradient(
      180deg,
      #efffcf 0%,
      #d9f2be 28%,
      #b8df9f 58%,
      #6aa76b 100%
    );
}

/* Luz superior izquierda */
.sun-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(115deg, rgba(255,255,210,.58) 0 7%, transparent 8% 100%),
    linear-gradient(125deg, rgba(255,255,210,.42) 0 5%, transparent 6% 100%),
    linear-gradient(138deg, rgba(255,255,210,.32) 0 4%, transparent 5% 100%);
  transform-origin: top left;
  animation: raysMove 18s ease-in-out infinite alternate;
}

/* Neblina suave */
.mist {
  position: absolute;
  inset: 20% 0 0;
  z-index: 5;
  background:
    radial-gradient(circle at 30% 60%, rgba(255,255,255,.38), transparent 36%),
    radial-gradient(circle at 72% 52%, rgba(255,255,255,.32), transparent 38%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.26));
  filter: none; /* antes blur(8px), pesado */
  animation: mistMove 18s ease-in-out infinite alternate;
}

/* Árboles lejanos */
.trees-back,
.trees-mid {
  position: absolute;
  left: -5%;
  width: 110%;
  bottom: 13%;
  height: 42%;
  z-index: 3;
  opacity: .42;

  background:
    radial-gradient(circle at 8% 66%, #5d9a65 0 6%, transparent 6.5%),
    radial-gradient(circle at 17% 58%, #5d9a65 0 7%, transparent 7.5%),
    radial-gradient(circle at 31% 64%, #5d9a65 0 8%, transparent 8.5%),
    radial-gradient(circle at 47% 55%, #5d9a65 0 7%, transparent 7.5%),
    radial-gradient(circle at 62% 67%, #5d9a65 0 8%, transparent 8.5%),
    radial-gradient(circle at 78% 56%, #5d9a65 0 7%, transparent 7.5%),
    radial-gradient(circle at 92% 65%, #5d9a65 0 8%, transparent 8.5%);
}

.trees-back::after,
.trees-mid::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background:
    linear-gradient(90deg,
      transparent 7%,
      rgba(48,100,54,.55) 7% 7.4%,
      transparent 7.4% 16%,
      rgba(48,100,54,.55) 16% 16.4%,
      transparent 16.4% 30%,
      rgba(48,100,54,.55) 30% 30.4%,
      transparent 30.4% 46%,
      rgba(48,100,54,.55) 46% 46.4%,
      transparent 46.4% 61%,
      rgba(48,100,54,.55) 61% 61.4%,
      transparent 61.4% 77%,
      rgba(48,100,54,.55) 77% 77.4%,
      transparent 77.4% 92%,
      rgba(48,100,54,.55) 92% 92.4%,
      transparent 92.4%
    );
}

.trees-mid {
  bottom: 8%;
  height: 36%;
  z-index: 6;
  opacity: .5;
  transform: scale(1.08);
}

/* Hojas superiores */
.canopy {
  position: absolute;
  top: -7%;
  width: 46%;
  height: 32%;
  z-index: 12;
  opacity: .95;
  filter: none; /* filter: drop-shadow(0 14px 22px rgba(15, 69, 35, .24)); */
}

.canopy-left {
  left: -5%;
  background:
    radial-gradient(ellipse at 12% 40%, #225f28 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 28% 18%, #397f33 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 46% 32%, #2f7930 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 62% 12%, #6fa53e 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 78% 32%, #2e7130 0 12%, transparent 12.5%);
  animation: canopyFloat 8s ease-in-out infinite alternate;
}

.canopy-right {
  right: -4%;
  background:
    radial-gradient(ellipse at 16% 34%, #3f8736 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 32% 12%, #28692c 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 50% 32%, #6fa53e 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 68% 14%, #2f7832 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 86% 36%, #215f28 0 12%, transparent 12.5%);
  animation: canopyFloat 9s ease-in-out infinite alternate-reverse;
}

/* Lianas */
.vine {
  position: absolute;
  top: -3%;
  width: 3px;
  height: 32%;
  z-index: 14;
  background: linear-gradient(#1f5b24, #438d38);
  border-radius: 50%;
  transform-origin: top center;
  animation: vineSwing 6s ease-in-out infinite;
}

.vine::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 24%;
  width: 28px;
  height: 14px;
  background: #6aa84f;
  border-radius: 100% 0 100% 0;
  transform: rotate(-35deg);
}

.v1 { left: 15%; height: 42%; }
.v2 { right: 25%; height: 36%; animation-delay: 1.3s; }
.v3 { right: 12%; height: 47%; animation-delay: 2.1s; }

/* Piso de selva */

.jungle-floor {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2%;
  height: 34%;
  z-index: 16;

  background:
    radial-gradient(ellipse at 5% 84%, #174d26 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 15% 76%, #2d7130 0 13%, transparent 13.5%),

    radial-gradient(ellipse at 43% 78%, #3d8736 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 57% 86%, #245f2a 0 15%, transparent 15.5%),

    radial-gradient(ellipse at 88% 86%, #1f5a29 0 17%, transparent 17.5%),
    linear-gradient(180deg, transparent 0%, #1d5b2b 50%, #0d3d23 100%);
}


/* Luciérnagas */
.fireflies {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.fireflies span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 232, 104, .95);
  box-shadow: 0 0 8px rgba(255, 232, 104, .55);
  animation: firefly 10s ease-in-out infinite;
}

.fireflies span:nth-child(1) { left: 12%; top: 52%; }
.fireflies span:nth-child(2) { left: 24%; top: 38%; animation-delay: .8s; }
.fireflies span:nth-child(3) { left: 36%; top: 68%; animation-delay: 1.7s; }
.fireflies span:nth-child(4) { left: 48%; top: 48%; animation-delay: 2.3s; }
.fireflies span:nth-child(5) { left: 62%; top: 62%; animation-delay: 1.2s; }
.fireflies span:nth-child(6) { left: 76%; top: 42%; animation-delay: 2.7s; }
.fireflies span:nth-child(7) { left: 86%; top: 58%; animation-delay: 3.5s; }
.fireflies span:nth-child(8) { left: 18%; top: 78%; animation-delay: 4s; }
.fireflies span:nth-child(9) { left: 68%; top: 76%; animation-delay: 4.6s; }
.fireflies span:nth-child(10) { left: 90%; top: 30%; animation-delay: 5.2s; }

/* Aves simples */
.birds {
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: 10;
  opacity: .48;
  animation: birdsDrift 28s linear infinite;
}

.birds span {
  position: absolute;
  width: 32px;
  height: 16px;
  border-top: 3px solid #3f6d49;
  border-radius: 50%;
  transform: rotate(12deg);
}

.birds span::after {
  content: "";
  position: absolute;
  left: 15px;
  top: -3px;
  width: 32px;
  height: 16px;
  border-top: 3px solid #3f6d49;
  border-radius: 50%;
  transform: rotate(-25deg);
}

.birds span:nth-child(2) {
  left: 75px;
  top: 28px;
  transform: scale(.75);
}

.birds span:nth-child(3) {
  left: -86px;
  top: 42px;
  transform: scale(.65);
}

/* Texto */
.book-content {
  position: relative;
  z-index: 30;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #174c2d;
  padding-bottom: 7vh;
}

.book-content h1 {
  font-size: clamp(52px, 8vw, 112px);
  letter-spacing: .12em;
  line-height: 1;
  text-shadow:
    0 5px 25px rgba(255,255,255,.7),
    0 2px 4px rgba(21,70,35,.18);
}

.book-content p {
  margin-top: 18px;
  font-size: clamp(20px, 2.6vw, 34px);
  color: #336b3c;
  text-shadow: 0 4px 18px rgba(255,255,255,.75);
}

/* Animaciones */
@keyframes raysMove {
  from {
    opacity: .72;
    transform: scale(1) rotate(0deg);
  }
  to {
    opacity: 1;
    transform: scale(1.04) rotate(1.5deg);
  }
}

@keyframes mistMove {
  from {
    transform: translateX(-2%);
    opacity: .65;
  }
  to {
    transform: translateX(2%);
    opacity: .95;
  }
}

@keyframes canopyFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(8px) rotate(1.5deg);
  }
}

@keyframes vineSwing {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

@keyframes firefly {
  0%, 100% {
    opacity: .25;
    transform: translate(0, 0) scale(.8);
  }
  50% {
    opacity: 1;
    transform: translate(18px, -26px) scale(1.25);
  }
}

@keyframes birdsDrift {
  from {
    transform: translateX(-30vw);
  }
  to {
    transform: translateX(55vw);
  }
}

@media (max-width: 768px) {
  .sun-rays,
  .mist {
    animation: none;
  }

  .trees-back {
    display: none;
  }

  .fireflies span:nth-child(n+6) {
    display: none;
  }

  .canopy {
    opacity: .8;
  }

  .vine {
    animation-duration: 14s;
  }

  .jungle-floor {
    height: 24%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      #2f7a34 24%,
      #1d5b2b 62%,
      #0d3d23 100%
    );
  }

  .jungle-floor::before {
    display: none;
  }
  
  .mist {
    display: none;
  }  
}