/**
 * Animations — US DESIGN
 * Fade-in animations for page load and scroll-triggered elements.
 *
 * Usage:
 *   .fade-in-up              — above-the-fold elements, runs on page load
 *   .fade-in-on-scroll       — below-the-fold elements, runs when .visible is added
 *   .delay-1 to .delay-9     — page load delays (0.2s–1.8s)
 *   .scroll-delay-1 to -12   — scroll delays (0.2s–2.4s)
 */


/* ============================================================
   Shared keyframe
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity:   0;
        transform: translateY(60px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}


/* ============================================================
   Page load — above-the-fold elements
   Runs immediately with optional delay
   ============================================================ */

.fade-in-up {
    opacity:   0;
    transform: translateY(60px);
    animation: fadeInUp 0.8s ease-out forwards;
}


/* ============================================================
   Scroll — below-the-fold elements
   Waits for IntersectionObserver to add .visible
   ============================================================ */

.fade-in-on-scroll {
    --scroll-animation-delay: 0s;
}

/* Content stays visible until a working observer takes responsibility. */
.fade-in-on-scroll.is-scroll-pending:not(.visible) {
    opacity: 0;
    transform: translateY(60px);
}

.fade-in-on-scroll.visible {
    animation: fadeInUp 0.8s ease-out var(--scroll-animation-delay) both;
}


/* ============================================================
   Delay classes — page load
   ============================================================ */

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.2s; }
.delay-7 { animation-delay: 1.4s; }
.delay-8 { animation-delay: 1.6s; }
.delay-9 { animation-delay: 1.8s; }


/* ============================================================
   Delay classes — scroll
   ============================================================ */

.scroll-delay-1 { --scroll-animation-delay: 0.2s; }
.scroll-delay-2 { --scroll-animation-delay: 0.4s; }
.scroll-delay-3 { --scroll-animation-delay: 0.6s; }
.scroll-delay-4 { --scroll-animation-delay: 0.8s; }
.scroll-delay-5 { --scroll-animation-delay: 1.0s; }
.scroll-delay-6 { --scroll-animation-delay: 1.2s; }
.scroll-delay-7 { --scroll-animation-delay: 1.4s; }
.scroll-delay-8 { --scroll-animation-delay: 1.6s; }
.scroll-delay-9 { --scroll-animation-delay: 1.8s; }
.scroll-delay-10 { --scroll-animation-delay: 2.0s; }
.scroll-delay-11 { --scroll-animation-delay: 2.2s; }
.scroll-delay-12 { --scroll-animation-delay: 2.4s; }


/* Front page portrait: fade upward once its existing image is ready. */
@keyframes portraitSettle {
    from { opacity: 0; transform: translate3d(0, 32px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .front-page .front-hero-v2__portrait.is-portrait-ready {
        animation: portraitSettle 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

/* Coordinated home entrances. Layout wrappers stay stationary. */
@keyframes frontMotionEnter {
    from { opacity: 0; transform: translate3d(0, var(--front-motion-distance, 18px), 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter {
    --front-motion-duration: 900ms;
    --front-motion-distance: 18px;
    --front-motion-delay: 0ms;
}
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-media { --front-motion-distance: 20px; --front-motion-duration: 1000ms; }
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter.is-scroll-pending:not(.visible) {
    opacity: 0;
    transform: translate3d(0, var(--front-motion-distance), 0);
}
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter.visible {
    animation: frontMotionEnter var(--front-motion-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--front-motion-delay) both;
}
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-card:nth-child(3n + 2) { --front-motion-delay: 100ms; }
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-card:nth-child(3n) { --front-motion-delay: 200ms; }
@media (min-width: 768px) and (max-width: 1023px) {
    :is(.site-main, .usd-error-hero, .usd-404) .front-motion-card:nth-child(n) { --front-motion-delay: 0ms; }
    :is(.site-main, .usd-error-hero, .usd-404) .front-motion-card:nth-child(2n) { --front-motion-delay: 80ms; }
}
@media (max-width: 767px) {
    :is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter {
        --front-motion-distance: 8px;
        --front-motion-duration: 650ms;
        --front-motion-delay: 0ms !important;
    }
    .front-page .front-hero-v2__portrait.is-portrait-ready { animation-duration: 1100ms; }
}
/* Keyboard focus and reduced motion reveal content immediately. */
.fade-in-on-scroll.is-scroll-immediate,
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter.is-scroll-immediate {
    animation: none;
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .fade-in-up, .fade-in-on-scroll,
    :is(.site-main, .usd-error-hero, .usd-404) .front-motion-enter,
    .front-page .front-hero-v2__portrait.is-portrait-ready {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* A short pause gives calls to action a slower, distinct entrance. */
:is(.site-main, .usd-error-hero, .usd-404) .front-motion-action { --front-motion-duration: 1500ms; }
@media (max-width: 767px) {
    :is(.site-main, .usd-error-hero, .usd-404) .front-motion-action {
        --front-motion-duration: 1000ms;
        --front-motion-delay: 80ms !important;
    }
}
/* The hero is visible by default; only an initialized script enables motion. */
@keyframes heroTextEnter {
    from { opacity: 0; transform: translate3d(0, var(--hero-motion-distance, 14px), 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroBackgroundEnter { from { opacity: 0; } to { opacity: 0.8; } }
@media (prefers-reduced-motion: no-preference) {
    .front-page .front-hero-v2.is-hero-motion-ready::before {
        animation: heroBackgroundEnter 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .front-page .is-hero-motion-ready .front-hero-v2__title {
        animation: heroTextEnter 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .front-page .is-hero-motion-ready .front-hero-v2__subtitle {
        animation: heroTextEnter 1100ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
    }
    .front-page .is-hero-motion-ready .front-hero-v2__text {
        animation: heroTextEnter 1200ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
    }
}
@media (max-width: 767px) {
    .front-page .front-hero-v2 { --hero-motion-distance: 8px; }
}

/* About timeline: year, marker and text settle together; rows overlap gently. */
@keyframes timelineRowEnter {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
    .about-page .timeline-motion-item.is-scroll-pending:not(.visible) {
        opacity: 0;
    }
    .about-page .timeline-motion-item.visible:not(.is-scroll-immediate) {
        animation: timelineRowEnter 900ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--timeline-delay, 0ms) both;
    }
}
@media (prefers-reduced-motion: reduce) {
    .about-page .timeline-motion-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Desktop megamenu: stationary hit area, softly settling panel and grouped links. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .site-header__mega-menu {
        transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
    }
    .site-header__menu-item--services:is(:hover, :focus-within) .site-header__mega-menu {
        transition-delay: 0s;
    }
    .site-header__mega-menu-inner {
        transform: translate3d(0, -8px, 0);
        transition: transform 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-header__menu-item--services:is(:hover, :focus-within) .site-header__mega-menu-inner {
        transform: translate3d(0, 0, 0);
    }
    .site-header__service-item {
        --mega-item-delay: 40ms;
        opacity: 0;
        transform: translate3d(0, 8px, 0);
        transition: opacity 600ms ease-in-out, transform 650ms ease-in-out;
    }
    .site-header__service-item:nth-child(4n + 2) { --mega-item-delay: 80ms; }
    .site-header__service-item:nth-child(4n + 3) { --mega-item-delay: 120ms; }
    .site-header__service-item:nth-child(4n) { --mega-item-delay: 160ms; }
    .site-header__menu-item--services:is(:hover, :focus-within) .site-header__service-item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-duration: 800ms;
        transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-delay: var(--mega-item-delay);
    }
    .site-header__service-link {
        transition: color 650ms ease-in-out, background-color 650ms ease-in-out, border-color 650ms ease-in-out;
    }
    .site-header__service-icon {
        transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-header__service-link:is(:hover, :focus-visible) .site-header__service-icon {
        transform: translate3d(0, -3px, 0);
    }
    .site-header__service-item:focus-within {
        opacity: 1;
        transform: none;
        transition-delay: 0ms !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-header__mega-menu,
    .site-header__mega-menu-inner,
    .site-header__service-item,
    .site-header__service-link,
    .site-header__service-icon {
        transition: none !important;
    }
}

/* Contact rail: slightly overlapping entrances; independent of hover transform. */
@keyframes floatingContactEnter {
    from { opacity: 0; translate: calc(100% + 1rem) 0; }
    to { opacity: 1; translate: 0 0; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .floating-contact-icons__item {
        animation: floatingContactEnter 650ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms backwards;
    }
    .floating-contact-icons__item:nth-child(2) { animation-delay: 650ms; }
    .floating-contact-icons__item:nth-child(3) { animation-delay: 1100ms; }
    .floating-contact-icons__item,
    a.floating-contact-icons__item,
    a.floating-contact-icons__item:visited {
        transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 450ms ease-in-out;
    }
    .floating-contact-icons__item:focus-visible {
        animation: none;
        opacity: 1;
        translate: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .floating-contact-icons__item {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        translate: none;
    }
}