/* =========================================================
   Global Subtle Animations
   ---------------------------------------------------------
   Reveal-on-scroll, hero entrance, optional parallax, and a
   soft image fade-in when loaded. Hover effects are left to
   the existing theme styles. All motion is disabled when the
   user prefers reduced motion.
   ========================================================= */

:root {
    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-base: 0.35s;
    --dur-slow: 0.6s;
    --reveal-distance: 24px;
    --card-lift: -4px;
    --card-shadow: 0 18px 40px -22px rgba(0, 54, 54, 0.28),
        0 6px 16px -10px rgba(0, 0, 0, 0.12);
}

/* ---------- Team + blog card hover ---------- */

.blog-list > li,
.three-column-blog .blog-list > li,
.four-column-team-section li,
.featured-blog-section .post,
.featured-blog-section article {
    transition: transform var(--dur-base) var(--ease-smooth);
    will-change: transform;
}

.blog-list > li:hover,
.three-column-blog .blog-list > li:hover,
.four-column-team-section li:hover,
.featured-blog-section .post:hover,
.featured-blog-section article:hover {
    transform: translateY(var(--card-lift));
}

.blog-list > li .image-section,
.four-column-team-section li .image-section,
.featured-blog-section .image-section {
    overflow: hidden;
}

.blog-list > li .image-section img,
.four-column-team-section li .image-section img,
.featured-blog-section .image-section img {
    transition: transform var(--dur-slow) var(--ease-smooth);
    will-change: transform;
}

.blog-list > li:hover .image-section img,
.four-column-team-section li:hover .image-section img,
.featured-blog-section .post:hover .image-section img,
.featured-blog-section article:hover .image-section img {
    transform: scale(1.04);
}

.blog-list > li h3,
.blog-list > li .h4,
.featured-blog-section article h3,
.featured-blog-section .post h3 {
    transition: color var(--dur-base) var(--ease-soft);
}

.blog-list > li:hover h3,
.blog-list > li:hover .h4,
.featured-blog-section article:hover h3,
.featured-blog-section .post:hover h3 {
    color: #003636;
}

html {
    scroll-behavior: smooth;
}

/* ---------- Images (global soft fade-in when loaded) ---------- */

img {
    transition: opacity var(--dur-slow) var(--ease-soft);
}

/* ---------- Reveal on scroll ---------- */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition: opacity var(--dur-slow) var(--ease-smooth),
        transform var(--dur-slow) var(--ease-smooth);
    will-change: opacity, transform;
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="left"] {
    transform: translate3d(calc(var(--reveal-distance) * -1.2), 0, 0);
}

[data-reveal="right"] {
    transform: translate3d(calc(var(--reveal-distance) * 1.2), 0, 0);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered children inside revealed containers */
[data-reveal-children].is-revealed > * {
    animation: reveal-child var(--dur-slow) var(--ease-smooth) both;
}

[data-reveal-children].is-revealed > *:nth-child(1) { animation-delay: 0.04s; }
[data-reveal-children].is-revealed > *:nth-child(2) { animation-delay: 0.1s; }
[data-reveal-children].is-revealed > *:nth-child(3) { animation-delay: 0.16s; }
[data-reveal-children].is-revealed > *:nth-child(4) { animation-delay: 0.22s; }
[data-reveal-children].is-revealed > *:nth-child(5) { animation-delay: 0.28s; }
[data-reveal-children].is-revealed > *:nth-child(6) { animation-delay: 0.34s; }
[data-reveal-children].is-revealed > *:nth-child(7) { animation-delay: 0.4s; }
[data-reveal-children].is-revealed > *:nth-child(8) { animation-delay: 0.46s; }
[data-reveal-children].is-revealed > *:nth-child(n+9) { animation-delay: 0.5s; }

@keyframes reveal-child {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ---------- Hero / first-paint entrance ---------- */

.home-hero-banner .content > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: hero-in 0.9s var(--ease-smooth) forwards;
}

.home-hero-banner .content > *:nth-child(1) { animation-delay: 0.15s; }
.home-hero-banner .content > *:nth-child(2) { animation-delay: 0.3s; }
.home-hero-banner .content > *:nth-child(3) { animation-delay: 0.45s; }
.home-hero-banner .content > *:nth-child(4) { animation-delay: 0.6s; }
.home-hero-banner .content > *:nth-child(n+5) { animation-delay: 0.75s; }

.home-hero-banner .media-section img,
.home-hero-banner .media-section video,
.home-hero-banner .media-section picture {
    opacity: 0;
    animation: hero-media-in 1.1s var(--ease-smooth) 0.05s forwards;
}

@keyframes hero-in {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-media-in {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Optional subtle parallax target ---------- */

[data-parallax] {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform 0.1s linear;
}

/* ---------- Reduced motion: disable everything ---------- */

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

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    [data-parallax] {
        transform: none !important;
    }

    .home-hero-banner .content > *,
    .home-hero-banner .media-section img,
    .home-hero-banner .media-section video,
    .home-hero-banner .media-section picture {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}