/* Motion layer for the public landing. Keep layout and the hero scene in landing.css/WAAPI. */
body.landing-body {
    --lp-motion-out-quart: cubic-bezier(.25, 1, .5, 1);
    --lp-motion-out-expo: cubic-bezier(.16, 1, .3, 1);
}

body.landing-body .skip-link {
    transition: transform 180ms var(--lp-motion-out-quart);
}

body.landing-body .landing-nav__brand,
body.landing-body .landing-footer__brand > a {
    transition: opacity 160ms var(--lp-motion-out-quart), transform 160ms var(--lp-motion-out-quart);
}

body.landing-body .landing-nav__links a {
    position: relative;
    transition: color 180ms var(--lp-motion-out-quart);
}

body.landing-body .landing-nav__links a::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 1px;
    background: currentColor;
    content: '';
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms var(--lp-motion-out-expo);
}

body.landing-body .landing-nav__cta {
    transition: background-color 180ms var(--lp-motion-out-expo), color 180ms var(--lp-motion-out-quart), transform 160ms var(--lp-motion-out-quart);
}

body.landing-body .landing-nav__cta svg,
body.landing-body .landing-footer__links svg {
    transition: transform 180ms var(--lp-motion-out-quart);
}

body.landing-body .theme-toggle {
    transition: background-color 160ms var(--lp-motion-out-quart), color 160ms var(--lp-motion-out-quart), transform 140ms var(--lp-motion-out-quart);
}

body.landing-body .btn {
    transition: background-color 180ms var(--lp-motion-out-expo), color 160ms var(--lp-motion-out-quart), opacity 140ms var(--lp-motion-out-quart), transform 180ms var(--lp-motion-out-quart);
}

body.landing-body .btn__round {
    transition: background-color 180ms var(--lp-motion-out-expo), transform 180ms var(--lp-motion-out-expo);
}

body.landing-body .hero-watch {
    transition: color 180ms var(--lp-motion-out-quart), opacity 140ms var(--lp-motion-out-quart), transform 160ms var(--lp-motion-out-quart);
}

body.landing-body .hero-watch > span {
    transition: background-color 180ms var(--lp-motion-out-expo), border-color 180ms var(--lp-motion-out-quart), transform 160ms var(--lp-motion-out-quart);
}

body.landing-body .text-link {
    transition: color 160ms var(--lp-motion-out-quart), opacity 140ms var(--lp-motion-out-quart);
}

body.landing-body .text-link svg,
body.landing-body .hero-bottom a svg {
    transition: transform 180ms var(--lp-motion-out-expo);
}

body.landing-body .hero-bottom a {
    transition: color 160ms var(--lp-motion-out-quart), opacity 140ms var(--lp-motion-out-quart);
}

body.landing-body .hero-service {
    transition: background-color 180ms var(--lp-motion-out-expo), border-color 160ms var(--lp-motion-out-quart), color 160ms var(--lp-motion-out-quart), transform 140ms var(--lp-motion-out-quart);
}

/* Catalog entries are links; the country list and payment articles are informational. */
body.landing-body .service-catalog a {
    transition: background-color 180ms var(--lp-motion-out-expo), color 160ms var(--lp-motion-out-quart), transform 180ms var(--lp-motion-out-quart);
}

body.landing-body .service-catalog a > svg {
    transition: color 160ms var(--lp-motion-out-quart), transform 180ms var(--lp-motion-out-expo);
}

body.landing-body .faq-item summary {
    transition: color 160ms var(--lp-motion-out-quart);
}

body.landing-body .faq-item__plus {
    transition: transform 130ms var(--lp-motion-out-quart);
}

body.landing-body .faq-item__plus::after {
    transition: transform 180ms var(--lp-motion-out-expo);
}

@supports selector(.faq-item::details-content) and (transition-behavior: allow-discrete) {
    body.landing-body .faq-item::details-content {
        opacity: 0;
        transition: content-visibility 200ms allow-discrete, opacity 200ms var(--lp-motion-out-quart);
    }

    body.landing-body .faq-item[open]::details-content { opacity: 1; }
}

body.landing-body .landing-footer__links a {
    transition: color 160ms var(--lp-motion-out-quart), opacity 140ms var(--lp-motion-out-quart);
}

/* The sticky bar's viewport visibility is controlled elsewhere; only its link gets feedback. */
body.landing-body .sticky-cta__btn {
    transition: background-color 180ms var(--lp-motion-out-expo), transform 140ms var(--lp-motion-out-quart);
}

/* Neutralize the legacy hover rules on touch; hover affordances are restored for fine pointers below. */
body.landing-body .landing-nav__links a:hover { color: var(--lp-mute); }
body.landing-body .landing-nav__cta:hover { background-color: var(--lp-ink); }
body.landing-body .theme-toggle:hover { background-color: transparent; color: var(--lp-mute); }
body.landing-body .btn:hover { transform: none; }
body.landing-body .btn--hero:hover { background-color: #f4f8ff; }
body.landing-body .hero-watch:hover { color: #f4f8ff; }
body.landing-body .hero-bottom a:hover { text-decoration: none; }
body.landing-body .hero-service:hover { border-color: #8bbdff40; }
body.landing-body .text-link:hover svg { transform: none; }
body.landing-body .service-catalog a:hover { background-color: var(--lp-card); transform: none; }
body.landing-body .faq-item summary:hover { color: var(--lp-ink); }
body.landing-body .landing-footer__links a:hover { color: var(--lp-mute); }

body.landing-body .closing-panel a:focus-visible { outline-color: #fff; }

@media (hover: hover) and (pointer: fine) {
    body.landing-body .landing-nav__brand:hover,
    body.landing-body .landing-footer__brand > a:hover { opacity: .88; }

    body.landing-body .landing-nav__links a:hover,
    body.landing-body .landing-nav__links a:focus-visible { color: var(--lp-ink); }

    body.landing-body .landing-nav__links a:hover::after,
    body.landing-body .landing-nav__links a:focus-visible::after { transform: scaleX(1); }

    body.landing-body .landing-nav__cta:hover {
        background-color: color-mix(in srgb, var(--lp-ink) 88%, var(--lp-signal));
        transform: translateY(-1px);
    }

    body.landing-body .landing-nav__cta:hover svg,
    body.landing-body .landing-footer__links a:hover svg { transform: translateX(2px); }

    body.landing-body .theme-toggle:hover { background-color: var(--lp-card-alt); color: var(--lp-ink); }
    body.landing-body .btn:hover { transform: translateY(-2px); }
    body.landing-body .btn--hero:hover { background-color: #dceeff; }
    body.landing-body .btn--hero:hover .btn__round { background-color: #245fd0; transform: translateX(3px); }
    body.landing-body .hero-watch:hover { color: #a5d5ff; }
    body.landing-body .hero-watch:hover > span { background-color: #a5d5ff18; border-color: #a5d5ff; }
    body.landing-body .text-link:hover svg { transform: translate(3px, -2px); }
    body.landing-body .hero-bottom a:hover { text-decoration: underline; text-underline-offset: 5px; }
    body.landing-body .hero-bottom a:hover svg { transform: translateX(2px); }
    body.landing-body .hero-service:hover { border-color: #b0d4ff; }
    body.landing-body .service-catalog a:hover {
        background-color: color-mix(in srgb, var(--lp-card) 84%, var(--lp-signal));
        transform: translateY(-2px);
    }
    body.landing-body .service-catalog a:hover > svg { color: var(--lp-signal); transform: translateX(2px); }
    body.landing-body .faq-item summary:hover { color: var(--lp-signal); }
    body.landing-body .landing-footer__links a:hover { color: var(--lp-signal); }
    body.landing-body .sticky-cta__btn:hover { background-color: #1d5fc5; transform: translateY(-1px); }
}

body.landing-body .landing-nav__links a:active { color: var(--lp-signal); }
body.landing-body .landing-nav__brand:active,
body.landing-body .landing-footer__brand > a:active { opacity: .76; transform: scale(.985); }
body.landing-body .landing-nav__cta:active { background-color: color-mix(in srgb, var(--lp-ink) 86%, var(--lp-signal)); transform: scale(.985); }
body.landing-body .theme-toggle:active { background-color: var(--lp-card-alt); transform: scale(.92); }
body.landing-body .btn:active { transition-duration: 110ms; transform: translateY(1px) scale(.985); }
body.landing-body .btn--hero:active { background-color: #dceeff; }
body.landing-body .btn--hero:active .btn__round { transform: scale(.94); }
body.landing-body .hero-watch:active { opacity: .82; transform: scale(.985); }
body.landing-body .hero-watch:active > span { transform: scale(.92); }
body.landing-body .text-link:active,
body.landing-body .hero-bottom a:active { opacity: .76; }
body.landing-body .hero-service:active { transform: scale(.96); }
body.landing-body .service-catalog a:active { background-color: color-mix(in srgb, var(--lp-card) 91%, var(--lp-signal)); transform: translateY(1px) scale(.99); }
body.landing-body .service-catalog a:active > svg { transform: translateX(2px); }
body.landing-body .faq-item summary:active .faq-item__plus { transform: scale(.9); }
body.landing-body .landing-footer__links a:active { opacity: .76; }
body.landing-body .sticky-cta__btn:active { background-color: #1d5fc5; transform: scale(.99); }

body.landing-body .faq-item[open] > summary { color: var(--lp-signal); }

@media (prefers-reduced-motion: reduce) {
    body.landing-body .landing-nav__links a::after { display: none; }
    body.landing-body .landing-nav__brand:active,
    body.landing-body .landing-footer__brand > a:active,
    body.landing-body .landing-nav__cta:is(:hover, :active),
    body.landing-body .theme-toggle:active,
    body.landing-body .btn:is(:hover, :active),
    body.landing-body .btn--hero:is(:hover, :active) .btn__round,
    body.landing-body .hero-watch:is(:hover, :active),
    body.landing-body .hero-watch:is(:hover, :active) > span,
    body.landing-body .landing-nav__cta:hover svg,
    body.landing-body .text-link:hover svg,
    body.landing-body .hero-bottom a:hover svg,
    body.landing-body .hero-service:active,
    body.landing-body .service-catalog a:is(:hover, :active),
    body.landing-body .service-catalog a:is(:hover, :active) > svg,
    body.landing-body .faq-item summary:active .faq-item__plus,
    body.landing-body .landing-footer__links a:hover svg,
    body.landing-body .sticky-cta__btn:is(:hover, :active) { transform: none !important; }

    body.landing-body .faq-item[open] .faq-item__plus::after { display: none; }

    @supports selector(.faq-item::details-content) and (transition-behavior: allow-discrete) {
        body.landing-body .faq-item::details-content { transition: none !important; }
    }
}