/* Custom Styles for Bird BnB */

body {
    font-family: 'Nunito', sans-serif;
    overflow-x: hidden;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #10B981;
    border-radius: 5px;
}

/* Float Animation */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Sway Animation for leaves/perches */
@keyframes sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

.animate-sway {
    animation: sway 6s ease-in-out infinite;
}

/* Feather Drift Animation */
@keyframes drift {
    0% {
        transform: translateY(-10vh) translateX(-10vw) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(110vh) translateX(20vw) rotate(360deg);
        opacity: 0;
    }
}

.feather {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310B981' fill-opacity='0.2'%3E%3Cpath d='M20.66,3.34a1,1,0,0,0-1.42,0l-7.79,7.79A10.74,10.74,0,0,0,6,12.55,6.58,6.58,0,0,1,3.22,12a1,1,0,0,0-1.37,1.18,9.75,9.75,0,0,0,5.77,6.34A10.45,10.45,0,0,0,12,20.68a1,1,0,0,0,.71-.29l7.92-7.92A1,1,0,0,0,20.66,3.34Zm-1.41,7.08-1.54-1.54,1.41-1.42,1.55,1.54ZM15,10.59,13.41,9l1.41-1.41L16.42,9.17ZM19.25,7.76l-1.55-1.55,1.41-1.41,1.55,1.54Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Hero Pattern Background - static dots (animation removed for smooth scrolling) */
.hero-pattern {
    background-color: #ECFDF5;
    background-image: radial-gradient(#10B981 0.5px, transparent 0.5px), radial-gradient(#10B981 0.5px, #ECFDF5 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.5;
}

/* Soft glowing aurora behind the hero */
.hero-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.hero-aurora::before,
.hero-aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

.hero-aurora::before {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #10B981, transparent 70%);
    top: -10%;
    left: -10%;
    animation: auroraFloat1 10s ease-in-out infinite;
}

.hero-aurora::after {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FCD34D, transparent 70%);
    bottom: -20%;
    right: -10%;
    animation: auroraFloat2 12s ease-in-out infinite;
}

@keyframes auroraFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(150px, 100px) scale(1.2); }
}

@keyframes auroraFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-130px, -80px) scale(1.25); }
}

/* Wave divider gentle animation */
.wave-divider svg {
    animation: waveSlide 6s ease-in-out infinite;
}

@keyframes waveSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3%); }
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}



/* Gallery Pop-Out Cards */
#gallery-grid > div {
    overflow: visible;
}

#gallery-grid {
    overflow: visible;
    padding-top: 2rem;
}

@media (min-width: 768px) {
    #gallery-grid {
        padding-top: 6rem;
    }
}

#gallery {
    overflow: visible;
}


/* Hero Pop-Out Effect */
.hero-pattern + div .lg\:w-1\/2 {
    overflow: visible;
}


/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-pattern,
    .hero-aurora::before,
    .hero-aurora::after,
    .wave-divider svg,
    .animate-float,
    .animate-sway,
    .feather {
        animation: none !important;
    }
}


/* ===== Section Background Animations ===== */

/* Container for floating decorations within a section */
.section-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Paper bird SVG - tiny stylized bird silhouette */
.paper-bird {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310B981'%3E%3Cpath d='M12 2L8 8l-6 2 6 2 1 7 3-5 3 5 1-7 6-2-6-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
}

.paper-bird.yellow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F59E0B'%3E%3Cpath d='M12 2L8 8l-6 2 6 2 1 7 3-5 3 5 1-7 6-2-6-2z'/%3E%3C/svg%3E");
}

.paper-bird.pink {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EC4899'%3E%3Cpath d='M12 2L8 8l-6 2 6 2 1 7 3-5 3 5 1-7 6-2-6-2z'/%3E%3C/svg%3E");
}

/* Slow horizontal drift across the section */
@keyframes flyAcross {
    0% {
        transform: translateX(-10vw) translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateX(50vw) translateY(-20px) rotate(3deg);
    }
    100% {
        transform: translateX(110vw) translateY(0) rotate(-5deg);
    }
}

@keyframes flyAcrossReverse {
    0% {
        transform: translateX(110vw) translateY(0) rotate(5deg);
    }
    50% {
        transform: translateX(50vw) translateY(20px) rotate(-3deg);
    }
    100% {
        transform: translateX(-10vw) translateY(0) rotate(5deg);
    }
}

.fly-1 {
    top: 12%;
    left: 0;
    animation: flyAcross 28s linear infinite;
}

.fly-2 {
    top: 35%;
    left: 0;
    animation: flyAcrossReverse 36s linear infinite;
    animation-delay: -12s;
}

.fly-3 {
    top: 65%;
    left: 0;
    animation: flyAcross 32s linear infinite;
    animation-delay: -8s;
}

.fly-4 {
    top: 80%;
    left: 0;
    animation: flyAcrossReverse 40s linear infinite;
    animation-delay: -20s;
}

.fly-5 {
    top: 22%;
    left: 0;
    animation: flyAcrossReverse 34s linear infinite;
    animation-delay: -16s;
}

.fly-6 {
    top: 50%;
    left: 0;
    animation: flyAcross 38s linear infinite;
    animation-delay: -24s;
}

/* Slow rotating decorative blob */
.decor-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    will-change: transform;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.1); }
}

.blob-emerald {
    width: 300px;
    height: 300px;
    background: #10B981;
    animation: blobFloat 15s ease-in-out infinite;
}

.blob-yellow {
    width: 350px;
    height: 350px;
    background: #FCD34D;
    animation: blobFloat 18s ease-in-out infinite;
    animation-delay: -5s;
}

/* Reduced motion - disable section animations */
@media (prefers-reduced-motion: reduce) {
    .paper-bird,
    .decor-blob {
        animation: none !important;
    }
}


/* ===== Smooth section transitions =====
   Each section gets a subtle gradient at top/bottom that blends with adjacent sections */

/* Section gradient flow:
   Hero (emerald-50, ends white via wave) → Gallery (yellow-50) → About (white) → Services (gray) → Reviews (white) → Contact (cream) */

/* Gallery comes right after hero, blending hero's white wave bottom into yellow-50 then into white for About */
#gallery {
    background: linear-gradient(to bottom, #ffffff 0%, #FEFCE8 20%, #FEFCE8 80%, #ffffff 100%);
}

/* About picks up from gallery's white and fades into gray for services */
#about {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #f9fafb 100%);
}

/* Services fades from About white-gray into Reviews white */
#services {
    background: linear-gradient(to bottom, #f9fafb 0%, #f9fafb 50%, #ffffff 100%);
}

/* Reviews white — softly transitions into a warm cream contact section */
#reviews {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 80%, #FEFCE8 100%);
}

/* Contact section - warm cream tone matching the rest of the site */
#contact {
    background: linear-gradient(to bottom, #FEFCE8 0%, #FEF3C7 100%);
    color: #064e3b;
}


/* ===== Mobile performance optimizations ===== */
@media (max-width: 768px) {
    /* Heavy GPU effects disabled on mobile to keep scrolling smooth */
    .hero-aurora::before,
    .hero-aurora::after {
        animation: none !important;
        opacity: 0.25;
    }

    .wave-divider svg {
        animation: none !important;
    }

    .decor-blob {
        animation: none !important;
    }

    /* Keep paper birds for charm but slow them slightly */
    .paper-bird {
        animation-duration: 50s !important;
    }
}