/* BMWO Custom Styles */

html { scroll-behavior: smooth; }
body { font-family: 'Outfit', system-ui, sans-serif; }

/* FOUC prevention for JS-loaded includes */
[data-include] { display: none; }

/* Organic grain texture overlay */
.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Scroll-reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Hero parallax-like depth */
.hero-image {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* Organic blob shapes */
.blob-1 {
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    animation: morph 12s ease-in-out infinite;
}
.blob-2 {
    border-radius: 42% 58% 62% 38% / 45% 55% 45% 55%;
    animation: morph 15s ease-in-out infinite reverse;
}
@keyframes morph {
    0%, 100% { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
    33% { border-radius: 45% 55% 62% 38% / 53% 47% 53% 47%; }
    66% { border-radius: 55% 45% 38% 62% / 46% 54% 46% 54%; }
}

/* Gallery hover */
.gallery-item {
    overflow: hidden;
    border-radius: 12px;
}
.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.gallery-item:hover img {
    transform: scale(1.06);
}

/* Nav transparency transition */
.nav-glass {
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.nav-scrolled {
    background-color: rgba(255, 253, 248, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 24px rgba(0,0,0,0.06) !important;
}
.nav-scrolled .nav-link-hero { color: #2b3a32 !important; }
.nav-scrolled .nav-logo-light { opacity: 0; }
.nav-scrolled .nav-logo-dark { opacity: 1; }
.nav-logo-light { transition: opacity 0.4s ease; }
.nav-logo-dark { transition: opacity 0.4s ease; opacity: 0; position: absolute; inset: 0; }

/* Solid nav for inner pages (no transparency) */
.nav-solid {
    background-color: rgba(255, 253, 248, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 24px rgba(0,0,0,0.06) !important;
}
.nav-solid .nav-link-hero { color: #2b3a32 !important; }
.nav-solid .nav-logo-light { opacity: 0; }
.nav-solid .nav-logo-dark { opacity: 1; }

/* Donate button pulse */
.donate-pulse {
    animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(223, 160, 32, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(223, 160, 32, 0); }
}

/* Wavy section divider */
.wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Card lift */
.card-lift {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px -12px rgba(0,0,0,0.1);
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}

/* Staggered count-up numbers */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Smooth link underline */
.link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size 0.35s ease;
}
.link-underline:hover {
    background-size: 100% 1.5px;
}

/* Donate overlay (legacy modal - kept for compatibility) */
.donate-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.donate-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.donate-panel {
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.donate-overlay.active .donate-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Donate method tab */
.donate-tab {
    transition: all 0.25s ease;
}
.donate-tab.active {
    background-color: #355d47;
    color: white;
    border-color: #355d47;
}

/* Responsive video embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Inner page header */
.page-header {
    padding-top: 7rem;
    padding-bottom: 3rem;
}

/* Active nav link */
.nav-link-active {
    opacity: 1 !important;
}
.nav-link-active .link-underline,
.link-underline.nav-link-active {
    background-size: 100% 1.5px;
}