/* ============================================
   CHELVANAYAKAM MEMORIAL TRUST
   Animations — CSS transitions, hover effects,
   keyframes, and reduced-motion
   ============================================ */

/* ─── LINK UNDERLINE ANIMATION ─── */
a:not(.btn):not(.header__nav-link):not(.header__donate-btn):not(.header__logo):not(.mobile-menu__link):not(.footer__link):not(.footer__social-link):not(.footer__top-link):not(.involved__card-link):not(.contact__detail-value):not(.contact__social-link):not(.gallery__image-wrapper):not(.floating-donate-cta) {
    position: relative;
}


/* ─── BUTTON MICRO-INTERACTIONS ─── */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0.08);
    transition: height 0.3s var(--ease-premium);
    z-index: 0;
}

.btn:hover::before {
    height: 100%;
}

.btn--primary::before {
    background: rgba(0, 0, 0, 0.15);
}

.btn > * {
    position: relative;
    z-index: 1;
}


/* ─── MAP PULSE ANIMATION ─── */
@keyframes pulse {
    0% {
        r: 5;
        opacity: 0.6;
    }
    100% {
        r: 20;
        opacity: 0;
    }
}

.map__pulse {
    animation: pulse 2s ease-out infinite;
}

/* Only animate when visible */
.map__pulse {
    animation-play-state: paused;
}

.section--map.is-visible .map__pulse {
    animation-play-state: running;
}


/* ─── SCROLL INDICATOR BOUNCE ─── */
@keyframes scrollBounce {
    0%, 100% {
        transform: scaleY(1);
        transform-origin: top;
    }
    50% {
        transform: scaleY(0.6);
        transform-origin: top;
    }
}

.hero__scroll-line {
    animation: scrollBounce 2s ease-in-out infinite;
}


/* ─── CARD HOVER LIFTS ─── */
.goal,
.donation-card,
.involved__card {
    transition: transform 0.4s var(--ease-premium),
                border-color 0.4s var(--ease-premium),
                box-shadow 0.4s var(--ease-premium);
}


/* ─── GALLERY IMAGE SCALE ─── */
.gallery__image-wrapper img {
    transition: transform 0.8s var(--ease-premium);
}


/* ─── LOADER SEQUENCE (CSS fallback) ─── */
@keyframes loaderLetterIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loaderFill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes loaderNameIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ─── NAVIGATION ACTIVE DOT ─── */
.header__nav-link.is-active::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--cmt-teal);
    border-radius: 50%;
}


/* ─── MOBILE MENU STAGGER (CSS base — enhanced by GSAP) ─── */
.mobile-menu.is-open .mobile-menu__link {
    transition: transform 0.5s var(--ease-premium),
                opacity 0.5s var(--ease-premium);
}

.mobile-menu__item:nth-child(1) .mobile-menu__link { transition-delay: 0.05s; }
.mobile-menu__item:nth-child(2) .mobile-menu__link { transition-delay: 0.1s; }
.mobile-menu__item:nth-child(3) .mobile-menu__link { transition-delay: 0.15s; }
.mobile-menu__item:nth-child(4) .mobile-menu__link { transition-delay: 0.2s; }
.mobile-menu__item:nth-child(5) .mobile-menu__link { transition-delay: 0.25s; }
.mobile-menu__item:nth-child(6) .mobile-menu__link { transition-delay: 0.3s; }

.mobile-menu.is-open .mobile-menu__footer {
    transition: opacity 0.5s var(--ease-premium) 0.35s;
}


/* ─── TRANSPARENCY FLOW ANIMATION ─── */
.transparency__node {
    transition: transform 0.4s var(--ease-premium),
                background 0.4s var(--ease-premium);
}

.transparency__node:hover {
    background: var(--cmt-teal-bg);
    transform: translateY(-2px);
}


/* ─── FOCUS STYLES ─── */
:focus-visible {
    outline: 2px solid var(--cmt-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}


/* ─── INITIAL STATES FOR GSAP ─── */
/* Elements that GSAP will animate — hidden by default */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
}

.gallery__item[data-reveal] {
    transform: translateY(30px) scale(0.97);
}

.principle[data-reveal] {
    transform: translateY(30px);
}

/* Text reveals handled by GSAP — keep visible for no-JS */
[data-reveal-text] {
    /* Handled by JS — words get opacity:0 + translateY */
}

/* Counters start at 0 */
[data-counter] {
    /* Value set in HTML */
}


/* ═══════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Show all elements immediately */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__title-word {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__eyebrow,
    .hero__subtitle,
    .hero__description,
    .hero__cta,
    .hero__scroll-indicator {
        opacity: 1 !important;
    }

    .hero__image-wrapper {
        clip-path: none !important;
    }

    .hero__image {
        transform: none !important;
    }

    .loader {
        display: none !important;
    }

    .cursor {
        display: none !important;
    }

    body {
        cursor: auto !important;
    }

    a, button, [data-cursor-hover] {
        cursor: auto !important;
    }

    .map__country,
    .map__north,
    .map__jaffna {
        stroke-dashoffset: 0 !important;
    }

    .map__marker,
    .map__svg text {
        opacity: 1 !important;
    }

    .hero__scroll-line {
        animation: none !important;
    }

    .scroll-progress {
        display: none !important;
    }

    .mobile-menu__link {
        opacity: 1 !important;
        transform: none !important;
    }

    .mobile-menu__footer {
        opacity: 1 !important;
    }
}


/* ─── NO-JS FALLBACK ─── */
.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}

.no-js .hero__title-word {
    opacity: 1;
    transform: none;
}

.no-js .hero__eyebrow,
.no-js .hero__subtitle,
.no-js .hero__description,
.no-js .hero__cta,
.no-js .hero__scroll-indicator {
    opacity: 1;
}

.no-js .hero__image-wrapper {
    clip-path: none;
}

.no-js .hero__image {
    transform: none;
}

/* ─── FLOATING CTA PULSE & GLOW KEYFRAMES ─── */
@keyframes floatingCtaAura {
    0% {
        transform: scale(0.96);
        opacity: 0.75;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@keyframes floatingCtaGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-donate-cta__pulse,
    .floating-donate-cta__glow {
        animation: none !important;
        display: none !important;
    }
}

.no-js .loader {
    display: none;
}

.no-js .cursor {
    display: none;
}

.no-js .floating-donate-cta {
    opacity: 1 !important;
    transform: none !important;
}