/* ============================================================
   AI Search Rankings — Global Page Entry Animations
   Loaded globally via header.php

   1. Text crossfade    : 1-second ease-in with subtle vertical lift
   2. Side images       : slide out from behind the center image (translateY + scale)

   Naming prefix: pga-* (page-animations)
   ACCESSIBILITY: all animations disabled under prefers-reduced-motion
============================================================= */

/* ── Keyframes ──────────────────────────────────────────── */

/* Text: fade in + subtle 10px lift */
@keyframes pga-textFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Fade in only — no motion — for containers */
@keyframes pga-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Side images: start behind the center image (translated up + scaled down)
   then slide to natural position — the "slide out from behind" effect */
@keyframes pga-slideFromCenter {
    from {
        opacity: 0;
        transform: translateY(-52px) scale(0.72);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ── Portfolio Case Study — Hero text (pcs-hero__*) ─────── */

.pcs-hero__badges {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.05s;
}
.pcs-hero__title {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.15s;
}
.pcs-hero__lede {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.30s;
}
.pcs-hero__cta {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.45s;
}

/* ── Portfolio Gallery — main stage fade in ─────────────── */

.pcs-gallery {
    animation: pga-fadeIn 0.6s ease backwards;
    animation-delay: 0.15s;
}

/* Gallery thumbnails — SIDE IMAGES that slide out from behind center
   fill-mode: backwards   → elements hold the first-frame state
                              during the delay period (appear hidden)
                            → after animation ends the regular CSS
                              rules (opacity: 0.7 / 1 for .is-active)
                              take back control with no jump because
                              the existing transition: opacity 160ms
                              smoothly bridges the final step          */
.pcs-gallery__thumb {
    animation: pga-slideFromCenter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.pcs-gallery__thumb:nth-child(1) { animation-delay: 0.40s; }
.pcs-gallery__thumb:nth-child(2) { animation-delay: 0.52s; }
.pcs-gallery__thumb:nth-child(3) { animation-delay: 0.64s; }
.pcs-gallery__thumb:nth-child(4) { animation-delay: 0.76s; }
.pcs-gallery__thumb:nth-child(5) { animation-delay: 0.88s; }

/* Stats row — staggered reveal */
.pcs-stat {
    animation: pga-textFade 0.8s ease backwards;
}
.pcs-stat:nth-child(1) { animation-delay: 0.05s; }
.pcs-stat:nth-child(2) { animation-delay: 0.15s; }
.pcs-stat:nth-child(3) { animation-delay: 0.25s; }
.pcs-stat:nth-child(4) { animation-delay: 0.35s; }
.pcs-stat:nth-child(5) { animation-delay: 0.45s; }


/* ── Homepage Hero (hp-hero__*) — text crossfade ────────── */

.hp-hero__badge {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0s;
}
.hp-hero__h1 {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.12s;
}
.hp-hero__sub {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.28s;
}
.hp-hero__ctas {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.44s;
}
.hp-hero__platforms {
    animation: pga-textFade 0.8s ease backwards;
    animation-delay: 0.58s;
}

/* Hero right visual — citation card fades in */
.hp-hero__citation-card {
    animation: pga-fadeIn 0.7s ease backwards;
    animation-delay: 0.30s;
}

/* Floating stat chips — SIDE IMAGES that slide out from behind
   the center citation card */
.hp-hero__chip--1 {
    animation: pga-slideFromCenter 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.65s;
}
.hp-hero__chip--2 {
    animation: pga-slideFromCenter 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.80s;
}

/* Stats bar at base of hero */
.hp-hero__stats {
    animation: pga-fadeIn 0.5s ease backwards;
    animation-delay: 0.50s;
}


/* ── Services section (hp-services__*) ─────────────────── */

.hp-services__head {
    animation: pga-textFade 1s ease backwards;
    animation-delay: 0.05s;
}

/* Feature cards stagger — handled via nth-child at up to 12 */
.hp-services__feat-card {
    animation: pga-textFade 0.8s ease backwards;
}
.hp-services__feat-card:nth-child(1) { animation-delay: 0.10s; }
.hp-services__feat-card:nth-child(2) { animation-delay: 0.20s; }
.hp-services__feat-card:nth-child(3) { animation-delay: 0.30s; }

.hp-services__card {
    animation: pga-textFade 0.7s ease backwards;
}


/* ── Generic utility classes (apply anywhere) ───────────── */

/* Any text block that should crossfade in on load */
.anim-text-fade {
    animation: pga-textFade 1s ease backwards;
}

/* Any side image that should slide from behind center */
.anim-slide-from-center {
    animation: pga-slideFromCenter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.30s;
}

/* Stagger helpers */
.anim-delay-1 { animation-delay: 0.10s !important; }
.anim-delay-2 { animation-delay: 0.20s !important; }
.anim-delay-3 { animation-delay: 0.30s !important; }
.anim-delay-4 { animation-delay: 0.40s !important; }
.anim-delay-5 { animation-delay: 0.50s !important; }
.anim-delay-6 { animation-delay: 0.60s !important; }


/* ── Reduced motion — disable all pga-* animations ─────── */

@media (prefers-reduced-motion: reduce) {
    .pcs-hero__badges,
    .pcs-hero__title,
    .pcs-hero__lede,
    .pcs-hero__cta,
    .pcs-gallery,
    .pcs-gallery__thumb,
    .pcs-stat,
    .hp-hero__badge,
    .hp-hero__h1,
    .hp-hero__sub,
    .hp-hero__ctas,
    .hp-hero__platforms,
    .hp-hero__citation-card,
    .hp-hero__chip--1,
    .hp-hero__chip--2,
    .hp-hero__stats,
    .hp-services__head,
    .hp-services__feat-card,
    .hp-services__card,
    .anim-text-fade,
    .anim-slide-from-center {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}