/* Subtle page transitions and scroll reveal, used on every front-end page. */

/* ---------- Page enter / leave ---------- */
@keyframes astech-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body {
    animation: astech-page-in .45s ease-out both;
}
body.page-leave {
    opacity: 0;
    transition: opacity .2s ease-in;
}

/* ---------- Scroll reveal (classes added by anim.js) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.in {
    opacity: 1;
    transform: none;
}

/* ---------- Hero text: fades up each time a slide becomes active ---------- */
@keyframes astech-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.main-banner .swiper-slide-active .slide-content h1 {
    animation: astech-fade-up .7s ease-out both;
}
.main-banner .swiper-slide-active .slide-content p {
    animation: astech-fade-up .7s ease-out .12s both;
}

/* ---------- Hover lift on cards (pointer devices only) ---------- */
.card-cs,
.card-custom,
.card-testimoni,
.image-gallery,
.logo-product,
.btn-astech {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
@media (hover: hover) {
    .card-cs:hover,
    .card-custom:hover,
    .card-testimoni:hover,
    .logo-product:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0,0,0,.08);
    }
    .image-gallery:hover {
        transform: scale(1.02);
    }
    .btn-astech:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(220,68,40,.3);
    }
}

/* ---------- Footer accordion: content fades in when opened ---------- */
@keyframes astech-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.footer .footer-acc.open .nav {
    animation: astech-fade-in .25s ease-out;
}

/* ---------- Respect the "reduce motion" system setting ---------- */
@media (prefers-reduced-motion: reduce) {
    body,
    .main-banner .swiper-slide-active .slide-content h1,
    .main-banner .swiper-slide-active .slide-content p,
    .footer .footer-acc.open .nav {
        animation: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    body.page-leave {
        opacity: 1;
    }
}