/**
 * Experience layer: estados del header, subrayados del footer, zoom de tarjetas,
 * flechas y soporte de Lenis. Complementa assets/js/animations/experience.js.
 * (Relleno de botones y subrayado/hamburguesa del menu viven en main.css.)
 * Solo transform/opacity (y color de fondo del header): sin cambios de layout.
 */

:root {
    --exp-ease: cubic-bezier(0.33, 1, 0.68, 1); /* power3.out */
    --exp-ease-state: cubic-bezier(0.65, 0, 0.35, 1); /* power2.inOut */
}

/* ------------------------------------------------------------------ */
/* Lenis                                                                */
/* ------------------------------------------------------------------ */

/* Con Lenis activo el scroll suave nativo compite con el suyo. */
html.lenis {
    scroll-behavior: auto;
}

/* ------------------------------------------------------------------ */
/* Header vivo                                                          */
/* ------------------------------------------------------------------ */

.site-header {
    transition: background-color 400ms ease;
}

/* Sombra en capa propia: solo cambia su opacidad. */
.site-header::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: 0 1px 0 rgba(23, 33, 40, 0.06), 0 14px 32px -16px rgba(23, 33, 40, 0.22);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
}

.site-header.is-scrolled::after {
    opacity: 1;
}

/*
 * Header compacto (solo con movimiento): experience.js sube el header --exp-header-shift px
 * y los hijos bajan la mitad con `translate` (independiente del transform que usa la
 * entrada del core). Logo levemente mas chico.
 */
.site-header__inner > * {
    transition: translate 500ms var(--exp-ease);
}

.site-header.is-compact .site-header__inner > * {
    translate: 0 calc(var(--exp-header-shift, 0px) / 2);
}

.site-header .site-brand img,
.site-header .site-brand__fallback {
    transform-origin: 0 50%;
    transition: transform 500ms var(--exp-ease);
}

.site-header.is-compact .site-brand img,
.site-header.is-compact .site-brand__fallback {
    transform: scale(0.88);
}

/* Menu movil: visible mientras corre la animacion de cierre. */
@media (max-width: 900px) {
    .site-nav.is-closing {
        display: block;
    }

    /* El panel movil cuelga del borde inferior del header: no se recentra. */
    .site-header.is-compact .site-header__inner > .site-nav {
        translate: none;
    }
}

/* ------------------------------------------------------------------ */
/* Links del footer: subrayado scaleX desde el origen                   */
/* ------------------------------------------------------------------ */

.site-footer__contact-grid a,
.site-footer__nav a {
    position: relative;
}

/* Las pildoras Google Maps / Waze ya tienen borde: sin subrayado. */
.site-footer__contact-grid a:not(.location-apps__link)::after,
.site-footer__nav a::after {
    position: absolute;
    right: 0;
    bottom: -0.2em;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 450ms var(--exp-ease);
}

.site-footer__contact-grid a:not(.location-apps__link):hover::after,
.site-footer__contact-grid a:not(.location-apps__link):focus-visible::after,
.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ */
/* Tarjetas con imagen: zoom suave al hover / foco de teclado           */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    :root :is(
        .directory-card__media img,
        .hs-card__media img,
        .service-tile__media img,
        .profile-cases__media img,
        .service-card__image,
        .content-card__media img,
        .case-card__media img,
        .article-card__media img,
        .insights-card__media img,
        .case-related__media img,
        .home-team-card__photo,
        .home-team-card__thumb-image,
        .hs-expert__avatar img
    ) {
        transition: transform 800ms var(--exp-ease);
    }

    :root :is(
        .directory-card,
        .hs-card,
        .service-tile,
        .profile-cases__card,
        .insight-card,
        .service-card,
        .content-card,
        .case-card,
        .article-card,
        .insights-card,
        .case-related__card,
        .home-team-card,
        .hs-expert
    ):is(:hover, :focus-visible, :has(:focus-visible)) :is(
        .directory-card__media img,
        .hs-card__media img,
        .service-tile__media img,
        .profile-cases__media img,
        .service-card__image,
        .content-card__media img,
        .case-card__media img,
        .article-card__media img,
        .insights-card__media img,
        .case-related__media img,
        .home-team-card__photo,
        .home-team-card__thumb-image,
        .hs-expert__avatar img
    ) {
        transform: scale(1.05);
    }

    /* Flechas NE: se desplazan en su propia diagonal (translate compone con rotaciones existentes). */
    .icon-arrow {
        transition: translate 450ms var(--exp-ease);
    }

    :is(a, .button):is(:hover, :focus-visible) .icon-arrow,
    :is(
        .directory-card,
        .hs-card,
        .service-tile,
        .profile-cases__card,
        .insight-card,
        .service-card,
        .content-card,
        .case-card,
        .article-card,
        .insights-card,
        .case-related__card,
        .home-team-card,
        .nos-sello__card
    ):is(:hover, :has(:focus-visible)) .icon-arrow {
        translate: 0.18em -0.18em;
    }
}