/*
 * SAP Services — livello di movimento
 * Da caricare DOPO main.css. Non cambia il layout: anima solo
 * opacity, transform, translate e scale.
 * Tutto ciò che si muove è dentro prefers-reduced-motion: no-preference.
 */

/* =========================
   TRANSIZIONE FRA PAGINE
   (i browser che non la supportano la ignorano)
   ========================= */
@view-transition {
    navigation: auto;
}

/* L'header resta fermo mentre il contenuto sfuma. */
.site-header {
    view-transition-name: site-header;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* =========================
   KEYFRAMES
   ========================= */
@keyframes sap-rise {
    from {
        opacity: 0;
        translate: 0 1.75rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes sap-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes sap-settle {
    from { scale: 1.08; }
    to   { scale: 1; }
}

@keyframes sap-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(1.25rem, -1rem, 0) rotate(7deg); }
}

@keyframes sap-drift-reverse {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(-1rem, 1.25rem, 0) rotate(-6deg); }
}

/* =========================
   MOVIMENTO (solo se l'utente non lo disabilita)
   ========================= */
@media (prefers-reduced-motion: no-preference) {

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 1.5rem;
    }

    /* ---- Hero: entrata a cascata al caricamento ---- */
    .sap-hero > *,
    .sap-service-hero > * {
        animation: sap-rise .8s cubic-bezier(.2, .7, .2, 1) var(--hero-delay, 0ms) backwards;
    }

    .sap-hero > :nth-child(2),
    .sap-service-hero > :nth-child(2) { --hero-delay: 110ms; }
    .sap-hero > :nth-child(3),
    .sap-service-hero > :nth-child(3) { --hero-delay: 220ms; }
    .sap-hero > :nth-child(4),
    .sap-service-hero > :nth-child(4) { --hero-delay: 330ms; }
    .sap-hero > :nth-child(n + 5),
    .sap-service-hero > :nth-child(n + 5) { --hero-delay: 440ms; }

    /* Forme ambientali: movimento lento, decorativo e non distrattivo. */
    .sap-home-paths::before,
    .sap-hero::before,
    .sap-mfp-section::before,
    body.page-template-service-page .page-content::before {
        animation: sap-drift 14s ease-in-out infinite;
    }

    .sap-home-paths::after,
    .sap-mfp-section::after,
    body.page-template-service-page .page-content::after {
        animation: sap-drift-reverse 17s ease-in-out infinite;
    }

    /* ---- Rivelazione allo scroll (classi aggiunte da motion.js) ----
       Si usa `translate`, non `transform`, così non confligge con
       gli hover delle card che usano già `transform`. */
    .js-motion .reveal:not(.is-visible) {
        opacity: 0;
        translate: 0 1.75rem;
    }

    .js-motion .reveal.is-visible {
        animation: sap-rise .75s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) backwards;
    }

    /* Le foto "si assestano" mentre compaiono. */
    .js-motion .reveal.is-visible:not(.sap-brand-item) .wp-block-image img {
        animation: sap-settle 1.2s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) backwards;
    }

    /* Linea sotto il numero dei vantaggi: si disegna. */
    .js-motion .sap-benefit-item.is-visible::after {
        transform-origin: left center;
        animation: sap-grow .9s cubic-bezier(.2, .7, .2, 1) calc(var(--reveal-delay, 0ms) + 250ms) backwards;
    }

    /* ---- Pulsanti ---- */
    .button,
    .wp-block-button__link {
        transition:
            background-color .2s ease,
            border-color .2s ease,
            color .2s ease,
            box-shadow .25s ease,
            transform .2s ease;
    }

    .sap-assistance-cta .wp-block-button__link::after {
        transition: transform .2s ease;
    }

    /* ---- Card ---- */
    .sap-card,
    .sap-path-card,
    .sap-contact-card,
    .sap-mfp-option,
    .sap-choice-item,
    .sap-brand-item,
    .sap-about-values > .wp-block-column,
    .sap-office-category,
    .sap-print-card {
        transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;
    }

    /* Foto dentro le card e nelle vetrine: zoom lento. */
    .sap-service-card .wp-block-image img,
    .sap-office-category .wp-block-image img,
    .sap-print-card .wp-block-image img {
        transition: transform .35s ease;
    }

    .sap-custom-showcase .wp-block-cover__image-background {
        transition: transform .7s ease;
    }

    .footer-map-pin {
        transition: transform .25s ease;
    }
}

/* ---- Hover (solo dispositivi con puntatore) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .button:hover,
    .wp-block-button__link:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px #16294a2e;
    }

    .button:active,
    .wp-block-button__link:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .sap-assistance-cta .wp-block-button__link:hover::after {
        transform: translateX(.3rem);
    }

    .sap-card:hover,
    .sap-path-card:hover,
    .sap-contact-card:hover,
    .sap-mfp-option:hover,
    .sap-choice-item:hover,
    .sap-brand-item:hover,
    .sap-about-values > .wp-block-column:hover,
    .sap-office-category:hover,
    .sap-print-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px #16294a1a;
        border-color: #2e5eaa55;
    }

    .sap-mfp-option:hover {
        box-shadow: 0 34px 80px rgb(0 0 0 / 30%);
    }

    .sap-mfp-visual > .wp-block-image img {
        transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
    }

    .sap-mfp-visual:hover > .wp-block-image img {
        transform: scale(1.035);
    }

    .sap-service-card:hover .wp-block-image img,
    .sap-office-category:hover .wp-block-image img,
    .sap-print-card:hover .wp-block-image img {
        transform: scale(1.04);
    }

    .sap-custom-showcase:hover .wp-block-cover__image-background {
        transform: scale(1.06);
    }

    .footer-map:hover .footer-map-pin {
        transform: translate(-50%, -64%) rotate(-45deg);
    }
}

/* ---- Menu desktop: sottolineatura che scorre ---- */
@media (min-width: 80rem) and (prefers-reduced-motion: no-preference) {
    .primary-menu a {
        background: linear-gradient(currentColor, currentColor) 0 calc(100% - .3rem) / 0 2px no-repeat;
        transition: background-size .3s ease;
    }

    .primary-menu a:hover,
    .primary-menu .current-menu-item > a {
        text-decoration: none;
        background-size: 100% 2px;
    }
}

/* ---- Stampa: mai contenuti nascosti ---- */
@media print {
    .js-motion .reveal:not(.is-visible) {
        opacity: 1 !important;
        translate: none !important;
    }
}