/*
Theme Name: Costa Rica Travel Theme
Theme URI: https://costaricabusguide.com/
Author: Costa Rica Bus Guide
Description: International ecotourism platform (GetYourGuide / Airbnb style) with a Living Forest hero, local wildlife animation (butterfly, toucan, sloth, foliage parallax), Glassmorphism search, DaisyUI/Flowbite components, Plus Jakarta Sans typography, and fixed HD Unsplash images.
Version: 2.1.0
Text Domain: costarica-travel-theme
*/

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Living Forest: local wildlife keyframes ---------- */

/* Morpho Blue butterfly flying diagonally across the hero */
@keyframes flyButterfly {
    0%   { transform: translate(-60px, 90px) scale(0.6) rotate(-20deg); opacity: 0; }
    10%  { opacity: 1; }
    25%  { transform: translate(120px, 30px) scale(0.95) rotate(8deg); }
    50%  { transform: translate(520px, -50px) scale(1.1) rotate(15deg); }
    75%  { transform: translate(820px, 10px) scale(1) rotate(-5deg); }
    100% { transform: translate(1150px, 60px) scale(0.7) rotate(-15deg); opacity: 0; }
}

@keyframes butterflyWing {
    0%, 100% { transform: rotateY(0deg) scaleX(1); }
    50%      { transform: rotateY(50deg) scaleX(0.6); }
}

.animate-butterfly {
    animation: flyButterfly 16s infinite ease-in-out;
    will-change: transform;
}

.animate-butterfly-wing {
    display: inline-block;
    animation: butterflyWing 0.28s infinite alternate ease-in-out;
    transform-origin: center;
    will-change: transform;
}

/* Toucan flapping its wings near the top of the forest canopy */
@keyframes toucanFlap {
    0%, 46%, 54%, 100% { transform: translateY(0) rotate(0deg); }
    48%  { transform: translateY(-4px) rotate(-3deg); }
    50%  { transform: translateY(-10px) rotate(3deg); }
    52%  { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes toucanSway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(4deg); }
}
.cr-toucan {
    animation: toucanSway 5s infinite ease-in-out;
    transform-origin: bottom center;
    will-change: transform;
}
.cr-toucan-wing {
    display: inline-block;
    animation: toucanFlap 1.6s infinite ease-in-out;
    transform-origin: center;
    will-change: transform;
}

/* Sloth swaying gently on a branch */
@keyframes slothSway {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(4px); }
}
.cr-sloth {
    animation: slothSway 4s infinite ease-in-out;
    transform-origin: top center;
    will-change: transform;
}

/* Sloth hanging upside down from the big right branch */
@keyframes slothHangSway {
    0%, 100% { transform: rotate(180deg) rotate(-2deg); }
    50%      { transform: rotate(180deg) rotate(3deg) translateY(-4px); }
}
.cr-sloth-hang span:first-child {
    display: inline-block;
    animation: slothHangSway 4.5s infinite ease-in-out;
    transform-origin: top center;
    will-change: transform;
}

/* Falling leaves for the subtle Lottie-adjacent canopy effect */
@keyframes fallingLeaf {
    0%   { transform: translateY(-10px) rotate(0deg) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    100% { transform: translateY(320px) rotate(260deg) translateX(40px); opacity: 0; }
}
.cr-leaf {
    position: absolute;
    top: 0;
    animation: fallingLeaf 9s linear infinite;
    will-change: transform;
}
.cr-leaf:nth-child(2) { left: 30%; animation-duration: 11s; animation-delay: 2s; }
.cr-leaf:nth-child(3) { left: 60%; animation-duration: 8s; animation-delay: 4s; }
.cr-leaf:nth-child(4) { left: 85%; animation-duration: 12s; animation-delay: 1s; }

/* ---------- Glassmorphism ---------- */
.cr-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.45);
}

/* ---------- Card interaction ---------- */
.cr-card-interactive {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    will-change: transform, box-shadow;
}
.cr-card-interactive:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 40px -20px rgba(5, 46, 22, 0.35), 0 12px 15px -8px rgba(0, 0, 0, 0.12);
}

/* ---------- Vector branches: wind sway ---------- */
@keyframes sway {
    0%, 100% { transform: rotate(0deg) translateY(0px); }
    50%      { transform: rotate(2deg) translateY(-5px); }
}

.cr-branch {
    animation: sway 6s infinite ease-in-out;
    will-change: transform;
}
.cr-branch-left {
    transform-origin: top left;
}
.cr-branch-right {
    transform-origin: top right;
}

/* ---------- Living forest hero multi-layer ---------- */
.cr-hero-section {
    isolation: isolate;
}
.cr-foliage {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

/* ---------- Buttons overrides (clean, no flat green bus) ---------- */
.cr-btn-eco {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #0f382c;
    color: #ffffff;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -10px rgba(15, 56, 44, 0.5);
}
.cr-btn-eco:hover {
    background-color: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -12px rgba(21, 128, 61, 0.6);
}