/* ─── KEYFRAMES ─────────────────────────────────────────────
   All keyframes are defined unconditionally; the @media queries
   below control whether animations are actually applied.
   ────────────────────────────────────────────────────────── */

@keyframes pb-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--pb-space-12))); }
}

/* ─── HERO ENTRANCE (§21.10 #8 — 250-300ms transform/opacity) ─── */

@media (prefers-reduced-motion: no-preference) {
    .hero-headline {
        animation: pb-fade-up 300ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
    }

    .hero-sub {
        animation: pb-fade-up 280ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
    }

    .hero-actions {
        animation: pb-fade-up 250ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
    }

    .hero-trust {
        animation: pb-fade-in 300ms cubic-bezier(0.22, 1, 0.36, 1) 440ms both;
    }
}

/* ─── SCROLL REVEAL — driven by JS IntersectionObserver ─── */

@media (prefers-reduced-motion: no-preference) {
    .pb-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 300ms ease-out, transform 300ms ease-out;
    }

    .pb-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger delays via data-delay attribute */
    .pb-reveal[data-delay="1"] { transition-delay: 80ms; }
    .pb-reveal[data-delay="2"] { transition-delay: 160ms; }
    .pb-reveal[data-delay="3"] { transition-delay: 240ms; }
    .pb-reveal[data-delay="4"] { transition-delay: 320ms; }
    .pb-reveal[data-delay="5"] { transition-delay: 400ms; }
    .pb-reveal[data-delay="6"] { transition-delay: 480ms; }
    .pb-reveal[data-delay="7"] { transition-delay: 560ms; }
    .pb-reveal[data-delay="8"] { transition-delay: 640ms; }
}

/* When motion is reduced: make reveal elements immediately visible */
@media (prefers-reduced-motion: reduce) {
    .pb-reveal,
    .pb-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── LOGO MARQUEE ─── */

.pb-marquee-track {
    display: flex;
    gap: var(--pb-space-12);
    width: max-content;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .pb-marquee-track {
        animation: pb-marquee 50s linear infinite;
    }

    .pb-marquee:hover .pb-marquee-track {
        animation-play-state: paused;
    }
}

/* ─── HOVER TRANSITIONS (cards, buttons, links) ─── */

@media (prefers-reduced-motion: no-preference) {
    /* Sector bento cards */
    .sector-card {
        transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    }

    .sector-card:hover {
        transform: scale(1.02);
        box-shadow: var(--pb-shadow-xl);
    }

    /* Project cards — overlay slides up */
    .project-card__overlay {
        transform: translateY(100%);
        transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .project-card:hover .project-card__overlay,
    .project-card:focus-within .project-card__overlay {
        transform: translateY(0);
    }

    /* Service icon items */
    .service-item:hover .service-item__name {
        color: var(--pb-blue-dark);
        transition: color 150ms ease;
    }
}

/* ─── SKIP LINK — visible on focus ─── */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--pb-space-4);
    z-index: 9999;
    padding: var(--pb-space-3) var(--pb-space-6);
    background-color: var(--pb-navy);
    color: var(--pb-white);
    font-size: var(--pb-text-sm);
    font-weight: var(--pb-weight-semibold);
    border-radius: var(--pb-radius-md);
    text-decoration: none;
    transition: top var(--pb-transition-fast);
}

.skip-link:focus {
    top: var(--pb-space-4);
}