/*
 * Skin-BG controlled motion foundation.
 * Inspired by the accepted VNTech/YARA policy: finite presets, transform/opacity
 * only, mobile reduction and authoritative prefers-reduced-motion.
 */

body.skinbg-motion-enabled {
    --skinbg-motion-duration: 620ms;
    --skinbg-motion-distance: 18px;
    --skinbg-motion-stagger: 70ms;
    --skinbg-motion-ease: cubic-bezier(.22, .61, .36, 1);
    --skinbg-page-motion-duration: 220ms;
}

body.skinbg-motion-enabled.skinbg-motion-intensity-subtle {
    --skinbg-motion-duration: 460ms;
    --skinbg-motion-distance: 10px;
    --skinbg-motion-stagger: 45ms;
    --skinbg-page-motion-duration: 180ms;
}

body.skinbg-motion-enabled.skinbg-motion-intensity-expressive {
    --skinbg-motion-duration: 780ms;
    --skinbg-motion-distance: 24px;
    --skinbg-motion-stagger: 95ms;
    --skinbg-page-motion-duration: 280ms;
}

/* Cross-document entry effect without intercepting links/navigation. */
html.skinbg-page-transition-pending body.skinbg-motion-enabled #primary-content {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
}

html.skinbg-page-transition-pending.skinbg-page-transition-ready
body.skinbg-motion-enabled #primary-content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--skinbg-page-motion-duration) ease,
        transform var(--skinbg-page-motion-duration) ease;
}

/* Homepage scroll choreography. */
body.skinbg-homepage-motion-armed .skinbg-homepage-motion-section {
    transition:
        opacity var(--skinbg-motion-duration) var(--skinbg-motion-ease),
        transform var(--skinbg-motion-duration) var(--skinbg-motion-ease);
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section.is-motion-pending:not(.is-motion-visible) {
    opacity: 0;
    transform: translate3d(0, var(--skinbg-motion-distance), 0);
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section.is-motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Hero stays opaque to protect LCP; only a tiny geometry-safe settle is used. */
body.skinbg-homepage-motion-armed
.skinbg-manager-section--hero.skinbg-homepage-motion-section {
    opacity: 1;
    transform: none;
}

body.skinbg-homepage-motion-armed
.skinbg-manager-section--hero.is-motion-entering
:is(.skinbg-hero-content, .skinbg-hero-media) {
    transform: translate3d(0, 6px, 0);
}

body.skinbg-homepage-motion-armed
.skinbg-manager-section--hero
:is(.skinbg-hero-content, .skinbg-hero-media) {
    transition:
        transform var(--skinbg-motion-duration) var(--skinbg-motion-ease);
}

/* Stagger approved card/list families only.
 * Use an animation instead of replacing the components' existing hover
 * transition property. fill-mode: backwards holds the start frame during
 * delay, then releases transform/opacity back to the component stylesheet. */
@keyframes skinbg-motion-stagger-in {
    from {
        opacity: 0;
        transform: translate3d(0, calc(var(--skinbg-motion-distance) * .65), 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section[data-skinbg-entrance-motion="stagger-soft"]
:is(
    .grid > .group,
    .skinbg-videos-motion-card,
    .skinbg-testimonial-card,
    .skinbg-gallery-item,
    .skinbg-link-card,
    .skinbg-faq-item
) {
    opacity: 1;
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section[data-skinbg-entrance-motion="stagger-soft"].is-motion-visible
:is(
    .grid > .group,
    .skinbg-videos-motion-card,
    .skinbg-testimonial-card,
    .skinbg-gallery-item,
    .skinbg-link-card,
    .skinbg-faq-item
) {
    animation:
        skinbg-motion-stagger-in
        var(--skinbg-motion-duration)
        var(--skinbg-motion-ease)
        backwards;
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section[data-skinbg-entrance-motion="stagger-soft"].is-motion-visible
:is(
    .grid > .group,
    .skinbg-videos-motion-card,
    .skinbg-testimonial-card,
    .skinbg-gallery-item,
    .skinbg-link-card,
    .skinbg-faq-item
):nth-child(2) {
    animation-delay: var(--skinbg-motion-stagger);
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section[data-skinbg-entrance-motion="stagger-soft"].is-motion-visible
:is(
    .grid > .group,
    .skinbg-videos-motion-card,
    .skinbg-testimonial-card,
    .skinbg-gallery-item,
    .skinbg-link-card,
    .skinbg-faq-item
):nth-child(3) {
    animation-delay: calc(var(--skinbg-motion-stagger) * 2);
}

body.skinbg-homepage-motion-armed
.skinbg-homepage-motion-section[data-skinbg-entrance-motion="stagger-soft"].is-motion-visible
:is(
    .grid > .group,
    .skinbg-videos-motion-card,
    .skinbg-testimonial-card,
    .skinbg-gallery-item,
    .skinbg-link-card,
    .skinbg-faq-item
):nth-child(4) {
    animation-delay: calc(var(--skinbg-motion-stagger) * 3);
}

/* Layered content for free text/media/CTA sections. */
body.skinbg-homepage-motion-armed
[data-skinbg-entrance-motion="layered-soft"]
:is(
    .skinbg-text-image-content,
    .skinbg-text-image-media,
    .skinbg-cta-shell,
    .skinbg-section-heading
) {
    transition:
        opacity var(--skinbg-motion-duration) var(--skinbg-motion-ease),
        transform var(--skinbg-motion-duration) var(--skinbg-motion-ease);
}

body.skinbg-homepage-motion-armed
[data-skinbg-entrance-motion="layered-soft"].is-motion-pending:not(.is-motion-visible)
:is(
    .skinbg-text-image-content,
    .skinbg-text-image-media,
    .skinbg-cta-shell,
    .skinbg-section-heading
) {
    opacity: 0;
    transform: translate3d(0, var(--skinbg-motion-distance), 0);
}

@media (max-width: 680px) {
    body.skinbg-motion-enabled.skinbg-motion-reduce-mobile {
        --skinbg-motion-duration: 340ms;
        --skinbg-motion-distance: 7px;
        --skinbg-motion-stagger: 0ms;
        --skinbg-page-motion-duration: 160ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.skinbg-page-transition-pending body #primary-content,
    html.skinbg-page-transition-pending.skinbg-page-transition-ready body #primary-content,
    body.skinbg-motion-enabled .skinbg-homepage-motion-section,
    body.skinbg-motion-enabled .skinbg-homepage-motion-section * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}