/**
 * Headway Custom CSS
 * Non-Tailwind styles, font declarations, animations
 *
 * @package Headway
 */

/* ── Base ── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*
     * Prevents horizontal scrollbar caused by slide animations.
     * slide-left/slide-right use translateX(±60px) which some browsers
     * include in scroll-width calculation. overflow-x:hidden clips those
     * offscreen elements without affecting vertical scroll.
     */
    overflow-x: hidden;
}

/* ── Navbar — guaranteed full width at every viewport ── */
#navbar {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 100% !important;
    overflow: visible !important;
}

/* ── Self-hosted Font Faces ──
 * Uncomment and update paths when woff2 files are placed in assets/fonts/
 *
 * @font-face {
 *     font-family: 'Inter';
 *     src: url('../fonts/Inter-Regular.woff2') format('woff2');
 *     font-weight: 400;
 *     font-style: normal;
 *     font-display: swap;
 * }
 * @font-face {
 *     font-family: 'Inter';
 *     src: url('../fonts/Inter-Medium.woff2') format('woff2');
 *     font-weight: 500;
 *     font-style: normal;
 *     font-display: swap;
 * }
 * @font-face {
 *     font-family: 'Inter';
 *     src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
 *     font-weight: 600;
 *     font-style: normal;
 *     font-display: swap;
 * }
 * @font-face {
 *     font-family: 'Inter';
 *     src: url('../fonts/Inter-Bold.woff2') format('woff2');
 *     font-weight: 700;
 *     font-style: normal;
 *     font-display: swap;
 * }
 * @font-face {
 *     font-family: 'Playfair Display';
 *     src: url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2');
 *     font-weight: 700;
 *     font-style: normal;
 *     font-display: swap;
 * }
 */


/* ── Selection Color ── */
::selection {
    background: rgba(46, 125, 50, 0.2);
    color: #1B4D3E;
}


/* ── Smooth Scroll (CSS fallback) ── */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── Focus Styles (Accessibility) ── */
:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
}


/* ── Hero Background ── */
.hero-bg {
    background-size: cover;
    background-position: center;
}


/* ── Section Header Underline Accent ── */
.section-header {
    position: relative;
    display: inline-block;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60%;
    height: 3px;
    background: linear-gradient(to right, #2E7D32, #4CAF50);
    border-radius: 2px;
}


/* ── Stat Numbers ── */
.stat-number {
    font-variant-numeric: tabular-nums;
}


/* ── Donation Modal Backdrop ── */
#donation-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ════════════════════════════════════════════════════
   PHASE 3 — Scroll Entrance Animations v3
   Elementor-Pro-grade motion design.

   Philosophy:
   - CSS transitions (not keyframe animations) for smoother feel
   - Elements start in their "hidden" position via CSS
   - JS adds .is-visible → CSS transition smoothly interpolates
   - This approach is smoother than keyframes because the browser
     can optimize a single transition better than a keyframe sequence

   GPU-safe: only transform + opacity.
   prefers-reduced-motion handled above.
   ════════════════════════════════════════════════════ */


/* ══════════════════════════════════════
   HIDDEN STATES — where elements start
   Exit transition (0.6s) is faster than
   entrance (1.2s) — feels natural, like
   elements fading away quickly but
   arriving gracefully.
   ══════════════════════════════════════ */

[data-animate] {
    opacity: 0 !important;
    will-change: transform, opacity;
    transition:
        opacity 0.6s cubic-bezier(0.45, 0, 0.55, 0.2),
        transform 0.6s cubic-bezier(0.45, 0, 0.55, 0.2);
}

[data-animate="fade-up"] {
    transform: translateY(50px);
}

[data-animate="fade-in"] {
    transform: scale(0.96);
}

[data-animate="slide-left"] {
    transform: translateX(-60px);
}

[data-animate="slide-right"] {
    transform: translateX(60px);
}

[data-animate="zoom-in"] {
    transform: scale(0.88);
}


/* ══════════════════════════════════════
   VISIBLE STATE — where elements land
   Single transition handles everything.
   Duration: 1.2s — long enough to feel
   smooth, short enough to not feel lazy.
   Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
   This is a gentle deceleration — elements
   start with momentum, then glide to rest.
   ══════════════════════════════════════ */

[data-animate].is-visible {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
    transition:
        opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms),
        transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms);
    will-change: auto;
}

/* Zoom-in gets a slightly longer duration for elegance */
[data-animate="zoom-in"].is-visible {
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms),
        transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms);
}

/* Slides get slightly longer too — more distance to cover */
[data-animate="slide-left"].is-visible,
[data-animate="slide-right"].is-visible {
    transition:
        opacity 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms),
        transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms);
}


/* ══════════════════════════════════════
   HERO — page-load animation
   Uses keyframes (not scroll-triggered)
   because hero is above the fold.
   Slower, more cinematic timing.
   ══════════════════════════════════════ */

@keyframes hw-hero-enter {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hw-hero-animate {
    opacity: 0;
    animation: hw-hero-enter 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hw-hero-delay-1 { animation-delay: 0.2s; }
.hw-hero-delay-2 { animation-delay: 0.5s; }
.hw-hero-delay-3 { animation-delay: 0.8s; }
.hw-hero-delay-4 { animation-delay: 1.05s; }

/* Scroll indicator — gentle floating loop */
@keyframes hw-float {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 0.8; }
}
.hw-float {
    animation: hw-float 2.5s ease-in-out infinite;
}


/* ── Print Styles ── */
@media print {
    nav,
    #donation-modal,
    .scroll-indicator,
    button {
        display: none !important;
    }

    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}