/* ===========================
   COSTA RICA NATURE PATTERNS
   Leaf Patterns & Wildlife Silhouettes
   Authentic Rainforest Design Elements
   =========================== */

/* ===========================
   SVG PATTERN DEFINITIONS
   =========================== */

/* Inline SVG patterns for better performance */
.leaf-pattern-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.leaf{fill:rgba(0,168,89,0.1);}.stem{stroke:rgba(124,179,66,0.08);stroke-width:1;fill:none;}</style></defs><path class="leaf" d="M20,40 Q30,20 40,40 Q30,60 20,40 Z"/><path class="leaf" d="M60,30 Q70,10 80,30 Q70,50 60,30 Z"/><path class="stem" d="M25,50 L35,30"/><path class="stem" d="M65,40 L75,20"/><circle fill="rgba(2,119,189,0.06)" cx="15" cy="70" r="3"/><circle fill="rgba(255,111,0,0.05)" cx="85" cy="80" r="2"/></svg>');
  background-size: 120px 120px;
  background-repeat: repeat;
  background-position: 0 0;
  animation: leafDrift 25s linear infinite;
}

@keyframes leafDrift {
  0% { background-position: 0 0; }
  100% { background-position: 120px 120px; }
}

/* Tropical vine patterns */
.vine-pattern {
  position: relative;
  overflow: hidden;
}

.vine-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: calc(100% + 40px);
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 200"><path d="M10,0 Q20,20 10,40 Q0,60 10,80 Q20,100 10,120 Q0,140 10,160 Q20,180 10,200" stroke="rgba(0,168,89,0.15)" stroke-width="2" fill="none"/><circle cx="15" cy="30" r="3" fill="rgba(124,179,66,0.1)"/><circle cx="5" cy="70" r="2" fill="rgba(0,168,89,0.08)"/><circle cx="15" cy="110" r="2.5" fill="rgba(124,179,66,0.1)"/><circle cx="5" cy="150" r="2" fill="rgba(0,168,89,0.08)"/></svg>');
  background-size: 30px 200px;
  background-repeat: repeat-y;
  animation: vineGrow 30s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes vineGrow {
  0%, 100% { 
    opacity: 0.3;
    transform: translateY(0);
  }
  50% { 
    opacity: 0.6;
    transform: translateY(-20px);
  }
}

/* ===========================
   WILDLIFE SILHOUETTES
   =========================== */

/* Toucan silhouette accent */
.wildlife-toucan {
  position: relative;
}

.wildlife-toucan::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 30px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30"><path d="M5,15 Q10,5 20,10 Q35,8 35,15 Q30,20 25,18 Q15,25 10,20 Q5,25 5,15 Z" fill="rgba(255,111,0,0.3)"/><circle cx="28" cy="12" r="2" fill="rgba(0,0,0,0.4)"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  animation: toucAnFly 8s ease-in-out infinite;
  z-index: 2;
}

@keyframes toucAnFly {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(5px) translateY(-2px); }
  50% { transform: translateX(-3px) translateY(3px); }
  75% { transform: translateX(2px) translateY(-1px); }
}

/* Sloth silhouette */
.wildlife-sloth {
  position: relative;
}

.wildlife-sloth::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 25px;
  height: 35px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 35"><ellipse cx="12" cy="10" rx="8" ry="6" fill="rgba(93,64,55,0.2)"/><ellipse cx="12" cy="20" rx="6" ry="8" fill="rgba(93,64,55,0.2)"/><circle cx="12" cy="8" r="4" fill="rgba(93,64,55,0.25)"/><path d="M8,15 Q6,25 4,30" stroke="rgba(93,64,55,0.2)" stroke-width="2" fill="none"/><path d="M16,15 Q18,25 20,30" stroke="rgba(93,64,55,0.2)" stroke-width="2" fill="none"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.4;
  animation: slothSway 12s ease-in-out infinite;
  z-index: 1;
}

@keyframes slothSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Butterfly accents */
.wildlife-butterfly {
  position: relative;
}

.wildlife-butterfly::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 30px;
  width: 20px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 15"><path d="M5,7 Q2,3 5,1 Q8,3 5,7" fill="rgba(2,119,189,0.4)"/><path d="M15,7 Q18,3 15,1 Q12,3 15,7" fill="rgba(2,119,189,0.4)"/><path d="M5,7 Q2,11 5,13 Q8,11 5,7" fill="rgba(124,179,66,0.3)"/><path d="M15,7 Q18,11 15,13 Q12,11 15,7" fill="rgba(124,179,66,0.3)"/><line x1="10" y1="1" x2="10" y2="13" stroke="rgba(93,64,55,0.5)" stroke-width="1"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  animation: butterflyFlutter 4s ease-in-out infinite;
  z-index: 3;
}

@keyframes butterflyFlutter {
  0%, 100% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.7;
  }
  25% { 
    transform: translateX(3px) translateY(-2px) scale(1.1);
    opacity: 0.9;
  }
  50% { 
    transform: translateX(-2px) translateY(4px) scale(0.9);
    opacity: 0.5;
  }
  75% { 
    transform: translateX(1px) translateY(-1px) scale(1.05);
    opacity: 0.8;
  }
}

/* Monkey silhouette for adventure sections */
.wildlife-monkey {
  position: relative;
}

.wildlife-monkey::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 10px;
  width: 30px;
  height: 35px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 35"><circle cx="15" cy="12" r="6" fill="rgba(93,64,55,0.3)"/><ellipse cx="15" cy="22" rx="4" ry="8" fill="rgba(93,64,55,0.3)"/><circle cx="12" cy="10" r="1.5" fill="rgba(0,0,0,0.4)"/><circle cx="18" cy="10" r="1.5" fill="rgba(0,0,0,0.4)"/><path d="M10,20 Q5,25 3,30" stroke="rgba(93,64,55,0.25)" stroke-width="2" fill="none"/><path d="M20,20 Q25,25 27,30" stroke="rgba(93,64,55,0.25)" stroke-width="2" fill="none"/><path d="M15,30 Q20,32 25,35" stroke="rgba(93,64,55,0.2)" stroke-width="2" fill="none"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  animation: monkeySwing 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes monkeySwing {
  0%, 100% { transform: rotate(-5deg) translateX(0); }
  50% { transform: rotate(5deg) translateX(3px); }
}

/* ===========================
   NATURE TEXTURE OVERLAYS
   =========================== */

/* Rainforest canopy texture */
.canopy-texture {
  position: relative;
}

.canopy-texture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(0, 168, 89, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(124, 179, 66, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 40% 80%, rgba(2, 119, 189, 0.04) 0%, transparent 30%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><circle cx="20" cy="20" r="3" fill="rgba(0,168,89,0.05)"/><circle cx="60" cy="40" r="2" fill="rgba(124,179,66,0.04)"/><circle cx="40" cy="65" r="2.5" fill="rgba(2,119,189,0.03)"/><path d="M10,10 Q15,5 20,10 Q15,15 10,10" fill="rgba(0,168,89,0.06)"/><path d="M55,25 Q60,20 65,25 Q60,30 55,25" fill="rgba(124,179,66,0.05)"/></svg>');
  background-size: 300px 300px, 250px 250px, 200px 200px, 80px 80px;
  background-position: 0 0, 100px 50px, 50px 150px, 0 0;
  animation: canopyMove 40s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes canopyMove {
  0%, 100% { 
    background-position: 0 0, 100px 50px, 50px 150px, 0 0;
    opacity: 0.7;
  }
  50% { 
    background-position: 150px 100px, 200px 150px, 150px 250px, 40px 40px;
    opacity: 1;
  }
}

/* Water ripple effect */
.water-ripple {
  position: relative;
  overflow: hidden;
}

.water-ripple::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 40%, rgba(2, 119, 189, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(2, 119, 189, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 50% 20%, rgba(2, 119, 189, 0.06) 0%, transparent 25%);
  background-size: 150px 150px, 200px 200px, 100px 100px;
  animation: waterRipple 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes waterRipple {
  0%, 100% {
    background-size: 150px 150px, 200px 200px, 100px 100px;
    opacity: 0.6;
  }
  50% {
    background-size: 200px 200px, 250px 250px, 150px 150px;
    opacity: 0.8;
  }
}

/* ===========================
   ADVENTURE-SPECIFIC PATTERNS
   =========================== */

/* Zipline cable pattern */
.zipline-pattern {
  position: relative;
}

.zipline-pattern::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(93, 64, 55, 0.3) 20%,
    rgba(93, 64, 55, 0.5) 50%,
    rgba(93, 64, 55, 0.3) 80%,
    transparent 100%
  );
  animation: ziplineGlide 6s ease-in-out infinite;
  z-index: 2;
}

.zipline-pattern::after {
  content: '🏃';
  position: absolute;
  top: 10%;
  left: -30px;
  font-size: 1.5rem;
  animation: ziplineRider 6s ease-in-out infinite;
  z-index: 3;
}

@keyframes ziplineGlide {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

@keyframes ziplineRider {
  0% { 
    left: -30px;
    transform: rotate(-10deg);
  }
  100% { 
    left: calc(100% + 30px);
    transform: rotate(-15deg);
  }
}

/* Rappelling rope pattern */
.rappelling-pattern {
  position: relative;
}

.rappelling-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  width: 3px;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(93, 64, 55, 0.4) 0px,
    rgba(93, 64, 55, 0.4) 8px,
    transparent 8px,
    transparent 12px
  );
  animation: ropeSwing 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes ropeSwing {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(5px) rotate(2deg); }
}

/* ===========================
   SEASONAL NATURE VARIATIONS
   =========================== */

/* Dry season (lighter, more golden) */
.nature-dry-season {
  filter: sepia(0.2) brightness(1.1) contrast(1.05);
}

.nature-dry-season .leaf-pattern-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.leaf{fill:rgba(255,193,7,0.15);}.stem{stroke:rgba(255,111,0,0.12);stroke-width:1;fill:none;}</style></defs><path class="leaf" d="M20,40 Q30,20 40,40 Q30,60 20,40 Z"/><path class="leaf" d="M60,30 Q70,10 80,30 Q70,50 60,30 Z"/><path class="stem" d="M25,50 L35,30"/><path class="stem" d="M65,40 L75,20"/></svg>');
}

/* Rainy season (lush, more vibrant) */
.nature-rainy-season {
  filter: saturate(1.2) brightness(0.95) hue-rotate(10deg);
}

.nature-rainy-season .leaf-pattern-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.leaf{fill:rgba(0,168,89,0.2);}.stem{stroke:rgba(76,175,80,0.15);stroke-width:1.5;fill:none;}</style></defs><path class="leaf" d="M20,40 Q30,20 40,40 Q30,60 20,40 Z"/><path class="leaf" d="M60,30 Q70,10 80,30 Q70,50 60,30 Z"/><path class="stem" d="M25,50 L35,30"/><path class="stem" d="M65,40 L75,20"/><circle fill="rgba(2,119,189,0.1)" cx="15" cy="70" r="4"/><circle fill="rgba(2,119,189,0.08)" cx="85" cy="80" r="3"/></svg>');
}

/* ===========================
   INTERACTIVE NATURE ELEMENTS
   =========================== */

/* Hover-activated nature sounds visualization */
.nature-interactive:hover .leaf-pattern-bg {
  animation-duration: 5s;
  opacity: 1.5;
}

.nature-interactive:hover .wildlife-butterfly::after {
  animation-duration: 2s;
  transform: scale(1.2);
}

.nature-interactive:hover .vine-pattern::before {
  opacity: 0.8;
  animation-duration: 15s;
}

/* ===========================
   RESPONSIVE NATURE PATTERNS
   =========================== */

/* Mobile optimizations */
@media (max-width: 767px) {
  .leaf-pattern-bg {
    background-size: 80px 80px;
  }
  
  .vine-pattern::before {
    background-size: 20px 150px;
  }
  
  .wildlife-toucan::after,
  .wildlife-monkey::before {
    width: 25px;
    height: 20px;
  }
  
  .zipline-pattern::after {
    font-size: 1rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .leaf-pattern-bg,
  .vine-pattern::before,
  .canopy-texture::before {
    background-size: 60px 60px, 100px 100px, 40px 40px;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .leaf-pattern-bg,
  .vine-pattern::before,
  .wildlife-toucan::after,
  .wildlife-sloth::before,
  .wildlife-butterfly::after,
  .wildlife-monkey::before,
  .canopy-texture::before,
  .water-ripple::after,
  .zipline-pattern::before,
  .zipline-pattern::after,
  .rappelling-pattern::before {
    animation: none;
  }
}