/* Motion sobre - reveal, hover icones, parallaxe heroes */

@media (prefers-reduced-motion: no-preference) {
    html.js .section-title,
    html.js .section-subtitle,
    html.js .service-card,
    html.js .prestation-card,
    html.js .pour-qui-copy,
    html.js .reveal {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        transition:
            opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    html.js .section-title.is-visible,
    html.js .section-subtitle.is-visible,
    html.js .service-card.is-visible,
    html.js .prestation-card.is-visible,
    html.js .pour-qui-copy.is-visible,
    html.js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

.service-card > i.ph,
.prestation-card > i.ph {
    display: inline-block;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

.service-card:hover > i.ph,
.prestation-card:hover > i.ph {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
}

.prestation-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

html.js .prestation-card.is-visible,
.prestation-card {
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s ease, box-shadow 0.35s ease;
}

.prestation-card:hover,
html.js .prestation-card.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

html.js .service-card.is-visible:hover {
    transform: translateY(-10px);
}

html.motion-fallback .section-title,
html.motion-fallback .section-subtitle,
html.motion-fallback .service-card,
html.motion-fallback .prestation-card,
html.motion-fallback .pour-qui-copy,
html.motion-fallback .reveal {
    opacity: 1 !important;
    transform: none !important;
}

.hero-parallax-img {
    will-change: transform;
    transform: scale(1.08);
    transform-origin: center center;
}

.tilt-3d {
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

.tilt-3d.is-tilting {
    transition: box-shadow 0.2s ease;
    box-shadow: 0 18px 36px rgba(10, 18, 32, 0.16);
    z-index: 2;
}

.tilt-3d > i.ph,
.tilt-3d img {
    transform: translateZ(22px);
    backface-visibility: hidden;
}

.tilt-3d-shine {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
    .hero-parallax-img {
        transform: none;
        will-change: auto;
    }

    .service-card > i.ph,
    .prestation-card > i.ph,
    .prestation-card,
    .tilt-3d {
        transition: none;
    }

    .tilt-3d > i.ph,
    .tilt-3d img {
        transform: none;
    }
}