@import url("storefront-shell-v6.css?v=7");

/*
 * FAMA Factory — motion system
 * Efectos públicos progresivos. La página sigue siendo totalmente utilizable
 * cuando JavaScript está desactivado o el usuario reduce el movimiento.
 */

:root {
    --ff-motion-fast: 180ms;
    --ff-motion-base: 520ms;
    --ff-motion-slow: 760ms;
    --ff-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --ff-motion-soft: cubic-bezier(.2, .75, .25, 1);
}

.ff-scroll-progress {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    transform: scaleX(var(--ff-scroll-progress, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, #d9165c, #f56a9b);
    box-shadow: 0 0 18px rgba(217, 22, 92, .32);
}

.site-public .ff-header,
.site-public .ff-header-main {
    transition:
        background-color var(--ff-motion-base) var(--ff-motion-ease),
        border-color var(--ff-motion-base) var(--ff-motion-ease),
        box-shadow var(--ff-motion-base) var(--ff-motion-ease),
        transform var(--ff-motion-base) var(--ff-motion-ease);
}

.site-public .ff-header.is-scrolled .ff-header-main {
    background: rgba(15, 17, 22, .94);
    box-shadow: 0 18px 42px rgba(6, 8, 12, .18);
    backdrop-filter: blur(16px) saturate(130%);
}

.site-public.motion-ready [data-motion]:not(.is-motion-visible) {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}

.site-public.motion-ready [data-motion="reveal-left"]:not(.is-motion-visible) {
    transform: translate3d(-34px, 0, 0);
}

.site-public.motion-ready [data-motion="reveal-right"]:not(.is-motion-visible) {
    transform: translate3d(34px, 0, 0);
}

.site-public.motion-ready [data-motion="reveal-scale"]:not(.is-motion-visible) {
    transform: scale(.965);
}

.site-public.motion-ready [data-motion] {
    transition:
        opacity var(--ff-motion-slow) var(--ff-motion-ease),
        transform var(--ff-motion-slow) var(--ff-motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.site-public.motion-ready [data-motion].is-motion-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.site-public .ff-hero-slide.active .ff-hero-copy > * {
    animation: ff-hero-copy-in var(--ff-motion-slow) both var(--ff-motion-ease);
}

.site-public .ff-hero-slide.active .ff-hero-copy > :nth-child(2) { animation-delay: 70ms; }
.site-public .ff-hero-slide.active .ff-hero-copy > :nth-child(3) { animation-delay: 130ms; }
.site-public .ff-hero-slide.active .ff-hero-copy > :nth-child(4) { animation-delay: 190ms; }
.site-public .ff-hero-slide.active .ff-hero-copy > :nth-child(5) { animation-delay: 250ms; }

@keyframes ff-hero-copy-in {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.site-public .ff-motion-interactive {
    position: relative;
    isolation: isolate;
}

.site-public .ff-motion-interactive::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    content: "";
    opacity: 0;
    background: radial-gradient(
        360px circle at var(--motion-pointer-x, 50%) var(--motion-pointer-y, 50%),
        rgba(255, 255, 255, .20),
        transparent 58%
    );
    transition: opacity var(--ff-motion-base) var(--ff-motion-ease);
}

.site-public .ff-motion-interactive.is-pointer-active::after {
    opacity: 1;
}

.site-public .ff-category-card img,
.site-public .ff-product-card img,
.site-public .ff-moto-card img,
.site-public .ff-story-card img,
.site-public .ff-type-rail img {
    transition: transform var(--ff-motion-slow) var(--ff-motion-ease);
}

.site-public .ff-button,
.site-public .ff-nav a,
.site-public .ff-news-list a,
.site-public .ff-discovery-chips a {
    transition:
        color var(--ff-motion-fast) ease,
        background-color var(--ff-motion-fast) ease,
        border-color var(--ff-motion-fast) ease,
        box-shadow var(--ff-motion-base) var(--ff-motion-ease),
        transform var(--ff-motion-base) var(--ff-motion-ease);
}

.site-public .ff-editorial-image img {
    transform: translate3d(0, var(--motion-shift, 0px), 0) scale(1.035);
}

.site-public .ff-location {
    background-position: center calc(50% + var(--motion-shift, 0px));
}

.site-public .ff-hero-stage {
    transform: translate3d(0, calc(var(--motion-shift, 0px) * .7), 0);
}

@media (hover: hover) and (pointer: fine) {
    .site-public .ff-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(11, 14, 21, .15);
    }

    .site-public .ff-category-card:hover img,
    .site-public .ff-product-card:hover img,
    .site-public .ff-moto-card:hover img,
    .site-public .ff-story-card:hover img,
    .site-public .ff-type-rail a:hover img {
        transform: scale(1.035);
    }
}

@media (max-width: 920px) {
    .ff-scroll-progress {
        height: 3px;
    }

    .site-public .ff-editorial-image img,
    .site-public .ff-location,
    .site-public .ff-hero-stage {
        --motion-shift: 0px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-public *,
    .site-public *::before,
    .site-public *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .site-public [data-motion] {
        opacity: 1 !important;
        transform: none !important;
    }

    .ff-scroll-progress,
    .site-public .ff-motion-interactive::after {
        display: none;
    }
}