/* ==========================================================
   ildivorzista — ANIMATIONS
   Versione 1.1
========================================================== */

/* ==========================================================
   REVEAL ON SCROLL
========================================================== */

.idv-reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--idv-reveal-delay, 0ms);

    will-change:
        opacity,
        transform;
}

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

/* Variante delicata per titoli e testi */

.idv-reveal--soft {
    transform: translateY(16px);
}

/* Variante per immagini e pannelli */

.idv-reveal--scale {
    transform:
        translateY(18px)
        scale(0.988);
}

.idv-reveal--scale.is-visible {
    transform:
        translateY(0)
        scale(1);
}

/* ==========================================================
   STAGGER
========================================================== */

.idv-stagger > .idv-reveal:nth-child(1) {
    --idv-reveal-delay: 0ms;
}

.idv-stagger > .idv-reveal:nth-child(2) {
    --idv-reveal-delay: 80ms;
}

.idv-stagger > .idv-reveal:nth-child(3) {
    --idv-reveal-delay: 160ms;
}

.idv-stagger > .idv-reveal:nth-child(4) {
    --idv-reveal-delay: 240ms;
}

.idv-stagger > .idv-reveal:nth-child(5) {
    --idv-reveal-delay: 320ms;
}

.idv-stagger > .idv-reveal:nth-child(6) {
    --idv-reveal-delay: 400ms;
}

/* ==========================================================
   HERO IMAGE INTERACTION
========================================================== */

.idv-hero__media {
    overflow: visible;
}

.idv-hero__media img {
    transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 760ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms ease;
}

.idv-hero__media:hover img {
    transform:
        scale(1.015);

    filter:
        saturate(1.02);
}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {
    .idv-hero__media:hover img {
        transform: none;
        filter: none;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .idv-reveal,
    .idv-reveal--soft,
    .idv-reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .idv-hero__media img {
        transition: none;
    }

    .idv-hero__media:hover img {
        transform: none;
        filter: none;
    }
}