/* ─────────────────────────────────────────────────────────────────────────────
   Nikalas Foundation — motion and hover layer for the homepage, header and footer.
   Loaded after the section stylesheets (App.razor). Pure CSS, no JS.

   Theme: warmth and giving — a breathing lotus, a beating heart on every Donate,
   photos that arrive one by one and warm up under the pointer, underlines that
   draw themselves, ripples around the orange icons.

   Rules of the layer:
   - All movement lives inside @media (prefers-reduced-motion: no-preference);
     outside it only colour/opacity hover feedback remains.
   - Entry effects animate `translate` / `scale` / `opacity` / `clip-path`, never
     `transform`, so the existing hover transforms keep working after they finish.
   - Scroll-linked effects use CSS scroll timelines; browsers without them simply
     show the finished state.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hover feedback that is not motion (applies to everyone) ───────────────── */

/* Warm orange-to-navy wash over photos on hover. */
.nfd-photo::after,
.nf-hero__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(200deg, rgba(255, 140, 40, .22) 0%, rgba(255, 140, 40, 0) 45%, rgba(16, 47, 101, .28) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}
.nfd-photo:hover::after,
.nf-hero__card:hover::after { opacity: 1; }
.rioc-app .nfd-photo img[width],
.nf-hero .nf-hero__card img[width] { transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .45s ease; }
.rioc-app .nfd-photo:hover img,
.nf-hero .nf-hero__card:hover img { filter: saturate(1.12) brightness(1.04); }

/* Shine sweep across the orange buttons and the stat cards. */
.nfd-btn,
.nfh__donate,
.nff__donate-btn,
.nf-stats__card { position: relative; overflow: hidden; isolation: isolate; }
.nfd-btn::after,
.nfh__donate::after,
.nff__donate-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    z-index: -1;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
.nfd-btn > *, .nfh__donate > *, .nff__donate-btn > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {

    /* ── Shared keyframes ──────────────────────────────────────────────────── */

    @keyframes nfm-shine      { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
    @keyframes nfm-heartbeat  { 0%, 40%, 100% { scale: 1; } 8% { scale: 1.2; } 16% { scale: 1; } 24% { scale: 1.12; } }
    @keyframes nfm-ripple     { from { box-shadow: 0 0 0 0 rgba(255, 121, 0, .45); } to { box-shadow: 0 0 0 16px rgba(255, 121, 0, 0); } }
    @keyframes nfm-breathe    { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.12; opacity: 1; } }
    @keyframes nfm-float      { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
    @keyframes nfm-draw       { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes nfm-pop        { from { opacity: 0; translate: 0 26px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
    @keyframes nfm-rise       { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
    @keyframes nfm-underline  { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
    @keyframes nfm-twinkle    { 0%, 100% { opacity: .55; scale: .85; rotate: 0deg; } 50% { opacity: 1; scale: 1.1; rotate: 20deg; } }
    @keyframes nfm-ring       { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.45; } }

    /* ── Buttons: shine on hover, heartbeat on every Donate heart ──────────── */

    .nfd-btn:hover::after,
    .nfh__donate:hover::after,
    .nff__donate-btn:hover::after { animation: nfm-shine .75s ease-out; }

    .nfh__donate svg { animation: nfm-heartbeat 3.2s ease-in-out 2s infinite; transform-origin: center; }
    .nfh__donate:hover svg { animation-duration: 1.4s; }
    .nff__card--donate .nff__heading svg { animation: nfm-heartbeat 3.2s ease-in-out 1s infinite; }
    .nff__hands path:first-child { animation: nfm-float 3.6s ease-in-out infinite; }

    /* ── Hero ──────────────────────────────────────────────────────────────── */

    /* The lotus "breathes" — its warm glow swells and settles. */
    .nf-hero__mark-wrap::before { animation: nfm-breathe 5s ease-in-out infinite; }

    /* Underline under the tagline draws in once the hero has settled. */
    .nf-hero__swoosh { animation: nfm-draw 1.1s cubic-bezier(.2, .7, .2, 1) .9s both; }

    /* "underprivileged children" gets an orange underline that grows across it. */
    .nf-hero__hl {
        background: linear-gradient(90deg, var(--nfd-orange), var(--nfd-orange-2)) left bottom / 0% 3px no-repeat;
        padding-bottom: 2px;
        animation: nfm-underline .9s cubic-bezier(.2, .7, .2, 1) 1.3s forwards;
    }

    /* Photo cards drift very slightly once they have risen in (desktop layout only). */
    @media (min-width: 1100px) {
        .nf-hero__card {
            animation:
                nf-rise .7s cubic-bezier(.2, .7, .2, 1) var(--delay) backwards,
                nfm-float 7s ease-in-out calc(var(--delay) + 1.2s) infinite;
        }
        .nf-hero__card--l2, .nf-hero__card--r1, .nf-hero__card--r3 { animation-duration: .7s, 8s; }
    }

    /* Focus-area icons ripple on hover; the Equal Opportunities heart beats. */
    .nf-hero__feature:hover .nf-hero__icon { animation: nfm-ripple .9s ease-out; }
    .nf-hero__feature:nth-child(4):hover .nf-hero__icon svg { animation: nfm-heartbeat 1.4s ease-in-out infinite; }
    .nf-hero__feature { transition: translate .3s ease; }
    .nf-hero__feature:hover { translate: 0 -2px; }

    /* ── Section headings: the brush underline draws in on scroll ──────────── */

    @supports (animation-timeline: view()) {
        .nfd-stroke,
        .nf-stats__underline {
            animation: nfm-draw linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 35%;
        }

        /* Photos arrive one by one as their gallery scrolls in. */
        .nfd-photo {
            animation: nfm-pop linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
        .nfd-photo:nth-of-type(2) { animation-range: entry 8% entry 78%; }
        .nfd-photo:nth-of-type(3) { animation-range: entry 16% entry 86%; }
        .nfd-photo:nth-of-type(4) { animation-range: entry 24% entry 94%; }

        /* Feature-card items and stat cards rise in a short stagger. */
        .nfd-feature,
        .nf-stats__card {
            animation: nfm-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
        .nfd-feature:nth-child(2), .nf-stats__card:nth-child(2) { animation-range: entry 6% entry 66%; }
        .nfd-feature:nth-child(3), .nf-stats__card:nth-child(3) { animation-range: entry 12% entry 72%; }
        .nfd-feature:nth-child(4) { animation-range: entry 18% entry 78%; }
    }

    /* ── Icons: ripple ring on hover across every feature card ─────────────── */

    .nfd-feature:hover .nfd-icon { animation: nfm-ripple .9s ease-out; }

    /* ── Impact: a soft ring pulses around the play button ─────────────────── */

    .nf-imp__play::after {
        content: "";
        position: absolute;
        inset: -6px;
        border: 2px solid rgba(255, 255, 255, .85);
        border-radius: 22px;
        animation: nfm-ring 2.2s ease-out infinite;
    }
    .nf-imp__poster:hover .nf-imp__play::after { animation-duration: 1.2s; }

    /* ── Stats ─────────────────────────────────────────────────────────────── */

    .nf-stats__sparkle { animation: nfm-twinkle 3.4s ease-in-out infinite; }
    .nf-stats__card::before { transition: left .4s ease, right .4s ease; }
    .nf-stats__card:hover::before { left: 0; right: 0; }

    /* ── Footer ────────────────────────────────────────────────────────────── */

    .nff__link-ico { transition: scale .3s ease; }
    .nff__link:hover .nff__link-ico { scale: 1.15; }
    .nff__social a:hover svg { animation: nfm-heartbeat 1.2s ease-in-out; }
}