:root {
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 12000;
    height: 2px;
    background: var(--gold, #b8925d);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: site-scroll-progress linear both;
        animation-timeline: scroll();
    }
}

@keyframes site-scroll-progress {
    to {
        transform: scaleX(1);
    }
}

[data-motion-media] {
    overflow: hidden;
    isolation: isolate;
}

[data-motion-media] img {
    transform-origin: center;
}

@supports (animation-timeline: view()) {
    .motion-parallax {
        animation: motion-image-depth linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
}

@keyframes motion-image-depth {
    from {
        transform: scale(1.025) translate3d(0, -0.6%, 0);
    }

    to {
        transform: scale(1.025) translate3d(0, 0.6%, 0);
    }
}

:is(
    .hero-card,
    .legal-excellence-item,
    .practice-area,
    .formation-list article,
    .feature-item,
    .timeline-item,
    .consulting-card,
    .specialty-card,
    .publication-card,
    .article-card
) i {
    transition: transform 220ms var(--motion-ease-soft), color 220ms var(--motion-ease-soft);
}

.button,
.hero-whatsapp,
.topic-pill,
.footer-links a {
    transition-timing-function: var(--motion-ease-soft);
}

.button:active,
.hero-whatsapp:active,
.topic-pill:active {
    transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
    :is(
        .hero-card,
        .legal-excellence-item,
        .practice-area,
        .formation-list article,
        .feature-item,
        .timeline-item,
        .consulting-card,
        .specialty-card,
        .publication-card,
        .article-card
    ):hover i {
        color: var(--gold, #b8925d);
        transform: translate3d(0, -2px, 0) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        display: none;
    }

    .motion-parallax {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 820px) {
    .motion-parallax {
        animation: none !important;
        transform: none !important;
    }
}