/* ============================================================
   JUNGLE IMMERSIVE ELEMENTS — Decorative Layer Only
   ============================================================ */

/* ---- Global atmosphere container ---- */
.jungle-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ---- Hero depth layers ---- */
.jungle-hero-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.jungle-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

/* Sunlight rays */
.jungle-layer-rays {
  background:
    linear-gradient(118deg, transparent 38%, rgba(201, 162, 39, 0.06) 44%, transparent 50%),
    linear-gradient(125deg, transparent 55%, rgba(245, 220, 160, 0.04) 60%, transparent 68%),
    linear-gradient(108deg, transparent 25%, rgba(201, 162, 39, 0.05) 32%, transparent 40%);
  opacity: 0.85;
  animation: raysPulse 14s ease-in-out infinite alternate;
}

@keyframes raysPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Mist */
.jungle-layer-mist {
  background:
    radial-gradient(ellipse 80% 40% at 30% 70%, rgba(200, 220, 210, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 35% at 70% 80%, rgba(180, 200, 190, 0.06) 0%, transparent 65%);
  animation: mistDrift 20s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  0% { transform: translateX(-2%) translateY(0); opacity: 0.7; }
  100% { transform: translateX(2%) translateY(-1%); opacity: 1; }
}

/* Distant mountains silhouette */
.jungle-layer-mountains {
  bottom: 0;
  top: auto;
  height: 45%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%230a1612' fill-opacity='0.5' d='M0 200 L0 120 Q150 60 300 100 T600 80 T900 110 T1200 70 L1200 200Z'/%3E%3Cpath fill='%231a3d2f' fill-opacity='0.35' d='M0 200 L0 140 Q200 90 400 130 T800 100 T1200 130 L1200 200Z'/%3E%3C/svg%3E")
    bottom center / 100% 100% no-repeat;
}

/* Wildlife silhouettes — distant, low opacity */
.jungle-layer-wildlife {
  bottom: 8%;
  top: auto;
  height: 35%;
  opacity: 0.18;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cpath fill='%23060e0b' d='M120 180c20-40 35-90 10-110-15-12-35 5-40 30-8 45 10 60 30 80z M600 175c15-35 8-80-20-95-18-10-30 15-28 45 3 35 20 50 48 50z'/%3E%3Cellipse cx='400' cy='160' rx='55' ry='30' fill='%23060e0b'/%3E%3Cpath fill='%23060e0b' d='M355 160 Q340 120 360 100 Q380 90 400 100 Q420 90 440 100 Q460 120 445 160'/%3E%3C/svg%3E")
    center bottom / 70% auto no-repeat;
}

/* Canopy darkening at top */
.jungle-layer-canopy {
  background: linear-gradient(to bottom, rgba(6, 12, 10, 0.55) 0%, transparent 35%, transparent 65%, rgba(6, 12, 10, 0.4) 100%);
}

/* ---- Foreground foliage (SVG leaves) ---- */
.jungle-foliage {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
}

.jungle-foliage--left {
  left: -2%;
  bottom: -5%;
  width: clamp(120px, 22vw, 280px);
  height: clamp(160px, 30vw, 360px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'%3E%3Cpath fill='%231a3d2f' d='M20 280 Q10 180 40 120 Q70 60 100 40 Q80 100 90 180 Q95 230 20 280Z'/%3E%3Cpath fill='%232d5a45' d='M60 280 Q50 200 80 140 Q110 80 130 60 Q120 130 125 200 Q128 250 60 280Z'/%3E%3Cpath fill='%233d6b52' opacity='0.8' d='M0 200 Q30 160 50 100 Q70 50 90 30 Q75 90 70 150 Q65 210 0 200Z'/%3E%3C/svg%3E");
  animation: foliageSway 8s ease-in-out infinite alternate;
  transform-origin: bottom left;
}

.jungle-foliage--right {
  right: -2%;
  bottom: -5%;
  width: clamp(100px, 20vw, 260px);
  height: clamp(140px, 28vw, 320px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280'%3E%3Cpath fill='%231a3d2f' d='M180 280 Q190 180 160 120 Q130 60 100 40 Q120 100 110 180 Q105 230 180 280Z'/%3E%3Cpath fill='%232d5a45' d='M140 280 Q150 200 120 140 Q90 80 70 60 Q80 130 75 200 Q72 250 140 280Z'/%3E%3C/svg%3E");
  animation: foliageSway 9s ease-in-out infinite alternate-reverse;
  transform-origin: bottom right;
}

.jungle-foliage--top-left {
  top: -2%;
  left: -1%;
  width: clamp(80px, 15vw, 180px);
  height: clamp(100px, 18vw, 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 200'%3E%3Cpath fill='%232d5a45' opacity='0.7' d='M10 10 Q60 30 90 80 Q120 130 170 150 Q100 100 60 50 Q30 20 10 10Z'/%3E%3Cpath fill='%233d6b52' opacity='0.5' d='M30 0 Q80 20 110 70 Q140 120 180 140 Q110 90 70 40 Q40 10 30 0Z'/%3E%3C/svg%3E");
  animation: foliageSway 10s ease-in-out infinite alternate;
}

.jungle-foliage--top-right {
  top: -2%;
  right: -1%;
  width: clamp(80px, 15vw, 180px);
  height: clamp(100px, 18vw, 200px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 200'%3E%3Cpath fill='%232d5a45' opacity='0.7' d='M170 10 Q120 30 90 80 Q60 130 10 150 Q80 100 120 50 Q150 20 170 10Z'/%3E%3C/svg%3E");
  animation: foliageSway 11s ease-in-out infinite alternate-reverse;
}

@keyframes foliageSway {
  0% { transform: rotate(-1deg) translateX(0); }
  100% { transform: rotate(1.5deg) translateX(3px); }
}

/* ---- Hanging vines ---- */
.jungle-vine {
  position: absolute;
  top: 0;
  width: clamp(40px, 8vw, 90px);
  height: clamp(80px, 18vw, 200px);
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  animation: vineSway 7s ease-in-out infinite alternate;
  transform-origin: top center;
}

.jungle-vine--left {
  left: 3%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 200'%3E%3Cpath stroke='%232d5a45' stroke-width='2' fill='none' d='M30 0 Q25 60 35 120 Q40 160 28 200'/%3E%3Cellipse cx='32' cy='80' rx='8' ry='14' fill='%233d6b52' opacity='0.6' transform='rotate(-20 32 80)'/%3E%3Cellipse cx='28' cy='140' rx='7' ry='12' fill='%232d5a45' opacity='0.5' transform='rotate(15 28 140)'/%3E%3C/svg%3E");
}

.jungle-vine--right {
  right: 4%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 200'%3E%3Cpath stroke='%232d5a45' stroke-width='2' fill='none' d='M30 0 Q35 70 25 130 Q20 170 32 200'/%3E%3Cellipse cx='27' cy='90' rx='8' ry='13' fill='%233d6b52' opacity='0.55' transform='rotate(25 27 90)'/%3E%3C/svg%3E");
  animation-delay: -3s;
}

@keyframes vineSway {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(3deg); }
}

/* ---- Birds ---- */
.jungle-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.jungle-bird {
  position: absolute;
  width: 24px;
  height: 8px;
  opacity: 0.25;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath fill='%23f5f0e6' d='M0 4 Q6 0 12 4 Q18 8 24 4'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: birdFly linear infinite;
}

.jungle-bird--1 { top: 12%; animation-duration: 45s; animation-delay: 0s; }
.jungle-bird--2 { top: 18%; animation-duration: 55s; animation-delay: -20s; opacity: 0.15; width: 18px; }
.jungle-bird--3 { top: 8%; animation-duration: 60s; animation-delay: -35s; opacity: 0.12; width: 16px; }

@keyframes birdFly {
  0% { transform: translateX(-5vw) translateY(0); }
  50% { transform: translateX(50vw) translateY(-8px); }
  100% { transform: translateX(105vw) translateY(0); }
}

/* ---- Butterflies ---- */
.jungle-butterfly {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cellipse cx='7' cy='10' rx='6' ry='4' fill='%23c9a227' opacity='0.7'/%3E%3Cellipse cx='13' cy='10' rx='6' ry='4' fill='%23d4af37' opacity='0.6'/%3E%3Crect x='9' y='8' width='2' height='6' rx='1' fill='%236b5344'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: butterflyFloat 12s ease-in-out infinite;
}

.jungle-butterfly--1 { top: 35%; left: 15%; animation-delay: 0s; }
.jungle-butterfly--2 { top: 55%; right: 20%; animation-delay: -5s; animation-duration: 15s; opacity: 0.2; }

@keyframes butterflyFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -20px) rotate(5deg); }
  50% { transform: translate(30px, -10px) rotate(-3deg); }
  75% { transform: translate(10px, -25px) rotate(4deg); }
}

/* ---- Falling leaves ---- */
.jungle-falling-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.jungle-leaf-fall {
  position: absolute;
  top: -30px;
  width: 14px;
  height: 18px;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath fill='%233d6b52' d='M7 0 Q14 5 12 14 Q7 18 2 14 Q0 5 7 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: leafFall linear infinite;
}

.jungle-leaf-fall:nth-child(1) { left: 10%; animation-duration: 18s; animation-delay: 0s; width: 12px; }
.jungle-leaf-fall:nth-child(2) { left: 30%; animation-duration: 22s; animation-delay: -8s; width: 16px; opacity: 0.7; }
.jungle-leaf-fall:nth-child(3) { left: 55%; animation-duration: 20s; animation-delay: -4s; }
.jungle-leaf-fall:nth-child(4) { left: 75%; animation-duration: 25s; animation-delay: -12s; width: 11px; }
.jungle-leaf-fall:nth-child(5) { left: 90%; animation-duration: 19s; animation-delay: -6s; width: 13px; }
.jungle-leaf-fall:nth-child(6) { left: 45%; animation-duration: 24s; animation-delay: -15s; width: 10px; opacity: 0.5; }

@keyframes leafFall {
  0% { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
  5% { opacity: 0.35; }
  90% { opacity: 0.2; }
  100% { transform: translateY(105vh) translateX(40px) rotate(360deg); opacity: 0; }
}

/* ---- Section organic dividers ---- */
.jungle-divider {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 70px);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23122019' d='M0 60 L0 30 Q200 50 400 25 T800 35 T1200 20 L1200 60Z'/%3E%3Cpath fill='%231a3d2f' fill-opacity='0.3' d='M0 60 L0 40 Q300 55 600 30 T1200 35 L1200 60Z'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
  margin-top: -1px;
}

.jungle-divider--cream {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='%230f1f18' d='M0 0 L0 25 Q300 45 600 20 T1200 30 L1200 0Z'/%3E%3C/svg%3E");
}

/* ---- Section corner accents ---- */
.jungle-section-accent {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-repeat: no-repeat;
  background-size: contain;
}

.jungle-section-accent--tl {
  top: 0; left: 0;
  width: 100px; height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%233d6b52' opacity='0.4' d='M0 0 Q50 20 80 0 Q60 50 0 80Z'/%3E%3C/svg%3E");
}

.jungle-section-accent--br {
  bottom: 0; right: 0;
  width: 120px; height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%232d5a45' opacity='0.35' d='M120 120 Q70 100 40 120 Q60 70 120 40Z'/%3E%3C/svg%3E");
}

/* ---- Paw print decorations ---- */
.jungle-paw-trail {
  position: absolute;
  pointer-events: none;
  opacity: 0.06;
  font-size: 0.85rem;
  color: var(--gold, #c9a227);
  z-index: 0;
}

/* ---- Footer jungle canopy ---- */
.footer .jungle-footer-canopy {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath fill='%231a3d2f' opacity='0.5' d='M0 50 L0 20 Q100 35 200 15 T400 25 T600 10 T800 28 T1000 12 T1200 22 L1200 50Z'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
}

.footer { position: relative; overflow: visible; }

/* ---- Card hover jungle enhancements ---- */
.bento-card,
.rescue-card,
.volunteer-card,
.animal-card,
.stat-card,
.transparency-card,
.gallery-item {
  position: relative;
  overflow: hidden;
}

.bento-card::before,
.rescue-card::before,
.volunteer-card::before,
.animal-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a227' opacity='0.08' d='M12 2c-1.5 2-3 3-3 5.5 0 2 1.5 3.5 3 3.5s3-1.5 3-3.5C15 5 13.5 4 12 2z'/%3E%3Ccircle cx='7' cy='14' r='2.5' fill='%23c9a227' opacity='0.06'/%3E%3Ccircle cx='12' cy='16' r='2.5' fill='%23c9a227' opacity='0.06'/%3E%3Ccircle cx='17' cy='14' r='2.5' fill='%23c9a227' opacity='0.06'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.bento-card:hover::before,
.rescue-card:hover::before,
.volunteer-card:hover::before,
.animal-card:hover::before {
  opacity: 1;
}

/* Ensure content stays above decorations */
.hero-inner,
.hero-content,
.hero-visual,
.section-inner,
.vol-hero-inner {
  position: relative;
  z-index: 2;
}

.hero,
.vol-hero,
.mission-section,
.story-section,
.rescue-section,
.animals-section,
.founder-section,
.volunteer-section,
.adoption-section,
.transparency-section,
.gallery-section,
.contact-section,
.vol-stories,
.vol-gallery-section,
.vol-cta-section {
  position: relative;
  overflow: hidden;
}

/* ---- Waterfall hint in contact/adoption ---- */
.contact-section::before,
.adoption-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
}

.adoption-card::after {
  bottom: 0; right: 0;
  width: 120px; height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(130, 180, 200, 0.3));
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .jungle-layer-rays,
  .jungle-layer-mist,
  .jungle-foliage--left,
  .jungle-foliage--right,
  .jungle-foliage--top-left,
  .jungle-foliage--top-right,
  .jungle-vine,
  .jungle-bird,
  .jungle-butterfly,
  .jungle-leaf-fall {
    animation: none !important;
  }

  .jungle-falling-leaves { display: none; }
}

/* ---- Mobile: reduce decorative density ---- */
@media (max-width: 768px) {
  .jungle-foliage--top-left,
  .jungle-foliage--top-right { opacity: 0.5; width: 60px; height: 70px; }

  .jungle-layer-wildlife { opacity: 0.08; }

  .jungle-butterfly,
  .jungle-bird--3 { display: none; }

  .jungle-leaf-fall:nth-child(n+4) { display: none; }

  .jungle-vine { opacity: 0.35; height: 60px; }

  .jungle-section-accent { display: none; }
}

@media (max-width: 480px) {
  .jungle-foliage--left,
  .jungle-foliage--right { width: 70px; height: 90px; opacity: 0.6; }

  .jungle-falling-leaves { display: none; }

  .jungle-bird { display: none; }
}