/* ==========================================================================
   Site-wide animations: Scroll Reveal + Hover Effects
   ========================================================================== */

/* --- Scroll Reveal -------------------------------------------------------- */

.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children inside revealed sections */
.scroll-reveal-child {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-reveal-child.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hover: Cards --------------------------------------------------------- */

.doing .item,
.counts .count-item,
.steps .step-item,
.why .item,
.tech .item,
.reviews .item,
.portfolio .item,
.services-page .item,
.doing-page .item,
.faq .panel {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doing .item:hover,
.counts .count-item:hover,
.steps .step-item:hover,
.why .item:hover,
.tech .item:hover,
.portfolio .item:hover,
.services-page .item:hover,
.doing-page .item:hover {
    transform: scale(1.02);
}

.faq .panel:hover {
    transform: scale(1.01);
}

/* Don't fight slick slider transforms */
.slick-slide .item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slick-slide .item:hover {
    transform: scale(1.02);
}

/* --- Hover: Logo (header only) -------------------------------------------- */

header .logo img {
    transition: transform 0.3s ease;
}

header .logo img:hover {
    transform: scale(1.15);
}

/* --- Exclude airSticky blocks from all hover/animation effects ------------ */

.airSticky .item,
.airSticky .item:hover,
.project-info .item,
.project-info .item:hover {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
}

/* --- Hover: Buttons ------------------------------------------------------- */

.btn-castom,
.btn-square,
.btn-line {
    transition: box-shadow 0.3s ease, transform 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-castom:hover,
.btn-square:hover {
    box-shadow: 0 0 16px rgba(0, 119, 194, 0.45);
    transform: translateY(-1px);
}

.btn-line:hover {
    box-shadow: 0 0 12px rgba(0, 119, 194, 0.3);
}

/* --- Respect reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal-child {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .doing .item,
    .counts .count-item,
    .steps .step-item,
    .why .item,
    .tech .item,
    .reviews .item,
    .portfolio .item,
    .services-page .item,
    .doing-page .item,
    .faq .panel,
    .slick-slide .item,
    .btn-castom,
    .btn-square,
    .btn-line {
        transition: none;
    }

    .doing .item:hover,
    .counts .count-item:hover,
    .steps .step-item:hover,
    .why .item:hover,
    .tech .item:hover,
    .portfolio .item:hover,
    .services-page .item:hover,
    .doing-page .item:hover,
    .faq .panel:hover,
    .slick-slide .item:hover {
        transform: none;
    }

    .btn-castom:hover,
    .btn-square:hover,
    .btn-line:hover {
        box-shadow: none;
        transform: none;
    }

    header .logo img {
        transition: none;
    }

    header .logo img:hover {
        transform: none;
    }
}