/*--------------------------------------------------------------[Animations]
File: animations.css
Author: Evert Amsenga
Created: 2026-06-24
Updated: 2026-06-24
*/

:root {
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --motion-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    --motion-shadow-hover: 0 18px 36px rgba(15, 23, 42, 0.14);
}

@keyframes motion-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        filter: blur(6px);
    }

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

@keyframes motion-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes motion-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes motion-sheen {
    0% {
        transform: translate3d(-18%, 0, 0);
        opacity: 0;
    }

    18% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.22;
    }

    100% {
        transform: translate3d(18%, 0, 0);
        opacity: 0;
    }
}

@keyframes motion-scale-x {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

html.motion-enhanced .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}

html.motion-instant .motion-reveal {
    opacity: 1;
    transform: none;
}

html.motion-enhanced .motion-reveal.is-visible {
    animation: motion-fade-up 720ms var(--motion-ease-out) both;
    animation-delay: var(--motion-delay, 0ms);
}

html.motion-enhanced .motion-reveal.motion-fade {
    transform: none;
}

html.motion-enhanced .motion-reveal.motion-fade.is-visible {
    animation-name: motion-fade-in;
}

.truck-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms var(--motion-ease-soft), visibility 0s linear 180ms;
}

.truck-loading-overlay.is-visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.truck-loading-overlay__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(26, 26, 46, 0.12);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(194, 23, 30, 0.18);
    border-top-color: #c2171e;
    animation: truck-loading-spin 1s linear infinite;
}

@keyframes truck-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.homepage-hero {
    isolation: isolate;
}

.homepage-hero::before,
.homepage-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.homepage-hero::before {
    left: auto;
    top: -12%;
    right: -6%;
    width: 42%;
    height: 70%;
    background:
        radial-gradient(circle at 35% 35%, rgba(237, 28, 36, 0.18), transparent 48%),
        radial-gradient(circle at 65% 65%, rgba(245, 217, 10, 0.08), transparent 52%);
    filter: blur(8px);
    animation: motion-float 14s ease-in-out infinite;
}

.homepage-hero::after {
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 44%, transparent 58%);
    animation: motion-sheen 12s linear infinite;
}

.homepage-hero-overlay {
    overflow: hidden;
}

.homepage-hero-overlay::before {
    content: "";
    position: absolute;
    inset: auto -15% -16% auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 23, 30, 0.26), transparent 68%);
    filter: blur(12px);
    animation: motion-float 16s ease-in-out infinite;
}

.homepage-hero-content {
    will-change: transform;
}

.homepage-hero-content > *,
.homepage-section-head,
.homepage-intro-panel,
.homepage-intro-support,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location,
.homepage-category-card,
.homepage-actions > *,
.homepage-hero-stats > * {
    position: relative;
    z-index: 1;
}

.homepage-hero-content > *.is-visible {
    animation: motion-fade-up 720ms var(--motion-ease-out) both;
    animation-delay: var(--motion-delay, 0ms);
}

.homepage-section-head {
    padding-bottom: 14px;
}

.homepage-section-head::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin-top: 14px;
    background: linear-gradient(90deg, #c2171e 0%, rgba(194, 23, 30, 0.28) 100%);
    transform-origin: left center;
    transform: scaleX(0);
}

.homepage-section-head.is-visible::after {
    animation: motion-scale-x 540ms var(--motion-ease-out) both;
}

.homepage-kicker,
.homepage-description,
.homepage-heading {
    text-wrap: balance;
}

.homepage-actions > *,
.homepage-hero-stats > *,
.homepage-category-card,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location {
    transition:
        transform 240ms var(--motion-ease-soft),
        box-shadow 240ms var(--motion-ease-soft),
        border-color 240ms var(--motion-ease-soft),
        background-color 240ms var(--motion-ease-soft);
    box-shadow: var(--motion-shadow);
}

.homepage-actions > *:hover,
.homepage-actions > *:focus-visible,
.homepage-hero-stats > *:hover,
.homepage-hero-stats > *:focus-visible,
.homepage-support-panel:hover,
.homepage-support-panel:focus-within,
.homepage-stat-card:hover,
.homepage-feature-card:hover,
.homepage-location:hover,
.homepage-location:focus-within,
.homepage-category-card:hover,
.homepage-category-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--motion-shadow-hover);
}

.homepage-stat strong {
    transition: transform 220ms var(--motion-ease-soft), color 220ms var(--motion-ease-soft);
}

.homepage-stat:hover strong {
    color: #f5d90a;
    transform: translateY(-1px);
}

.homepage-button,
.content-button {
    position: relative;
    overflow: hidden;
    transition:
        transform 220ms var(--motion-ease-soft),
        box-shadow 220ms var(--motion-ease-soft),
        color 220ms var(--motion-ease-soft),
        border-color 220ms var(--motion-ease-soft);
}

.homepage-button::after,
.content-button::after,
.pricing-download-button::after,
.specifications-download-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 70%);
    transform: translateX(-140%);
    opacity: 0;
    transition: transform 520ms var(--motion-ease-soft), opacity 220ms var(--motion-ease-soft);
    pointer-events: none;
}

.homepage-button:hover,
.homepage-button:focus-visible,
.content-button:hover,
.content-button:focus-visible,
.pricing-download-button:hover,
.pricing-download-button:focus-visible,
.specifications-download-button:hover,
.specifications-download-button:focus-visible {
    transform: translateY(-2px);
}

.homepage-button:hover::after,
.homepage-button:focus-visible::after,
.content-button:hover::after,
.content-button:focus-visible::after,
.pricing-download-button:hover::after,
.pricing-download-button:focus-visible::after,
.specifications-download-button:hover::after,
.specifications-download-button:focus-visible::after {
    transform: translateX(140%);
    opacity: 1;
}

.tilt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(0) scale(1);
    will-change: transform;
}

.tilt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 45%);
    opacity: 0;
    transition: opacity 240ms var(--motion-ease-soft);
    pointer-events: none;
    z-index: 1;
}

.tilt-card:hover::before,
.tilt-card:focus-visible::before {
    opacity: 1;
}

.tilt-card img {
    transform: translateZ(0);
    transition: transform 420ms var(--motion-ease-soft), filter 420ms var(--motion-ease-soft);
}

.tilt-card:hover img,
.tilt-card:focus-visible img {
    transform: scale(1.04);
    filter: saturate(1.04) contrast(1.02);
}

.homepage-category-card-body {
    position: relative;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.homepage-category-card-body strong {
    transition: color 220ms var(--motion-ease-soft);
}

.homepage-category-card img {
    display: block;
    width: 100%;
    height: 180px;
    padding: 10px 0 10px 0;
    object-fit: contain;
    object-position: center center;
    background: #f8fafc;
}

.homepage-category-card:hover .homepage-category-card-body strong,
.homepage-category-card:focus-visible .homepage-category-card-body strong {
    color: #c2171e;
}

.homepage-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(194, 23, 30, 0.12), transparent 36%);
    opacity: 0;
    transition: opacity 260ms var(--motion-ease-soft);
    pointer-events: none;
    z-index: 1;
}

.homepage-category-card:hover::after,
.homepage-category-card:focus-visible::after {
    opacity: 1;
}

.homepage-intro-panel,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location,
.homepage-category-card {
    position: relative;
}

.homepage-intro-panel::after,
.homepage-support-panel::after,
.homepage-stat-card::after,
.homepage-feature-card::after,
.homepage-location::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(194, 23, 30, 0.78), rgba(245, 217, 10, 0.5), transparent 85%);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms var(--motion-ease-soft), opacity 300ms var(--motion-ease-soft);
    z-index: 1;
}

.homepage-intro-panel:hover::after,
.homepage-support-panel:hover::after,
.homepage-stat-card:hover::after,
.homepage-feature-card:hover::after,
.homepage-location:hover::after,
.homepage-intro-panel:focus-within::after,
.homepage-support-panel:focus-within::after,
.homepage-stat-card:focus-within::after,
.homepage-feature-card:focus-within::after,
.homepage-location:focus-within::after,
.homepage-category-card:hover::after,
.homepage-category-card:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.homepage-support-panel--secondary iframe,
.homepage-location-map iframe,
.homepage-hero video {
    backface-visibility: hidden;
}

.homepage-support-video {
    display: flex;
    min-height: 314px;
}

.homepage-support-video__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 314px;
    margin: 0;
    padding: 28px;
    border: 0;
    border-radius: 12px;
    background:
        radial-gradient(circle at center, rgba(237, 28, 36, 0.16), transparent 44%),
        linear-gradient(145deg, rgba(10, 10, 10, 0.98), rgba(26, 26, 26, 0.94));
    cursor: pointer;
    overflow: hidden;
}

.homepage-support-video__trigger:focus-visible {
    outline: 2px solid #f5d90a;
    outline-offset: 3px;
}

.homepage-support-video__logo {
    width: min(72%, 250px);
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
    position: relative;
    z-index: 1;
}

.homepage-support-video__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.34));
    z-index: 2;
}

.homepage-support-video .fb-video,
.homepage-support-video .fb-video span,
.homepage-support-video iframe {
    display: block;
    width: 100% !important;
    min-height: 314px;
}

.homepage-hero video {
    animation: motion-fade-in 900ms ease-out both;
}

.homepage-section-head.is-visible,
.homepage-intro-panel.is-visible,
.homepage-intro-support.is-visible,
.homepage-support-panel.is-visible,
.homepage-stat-card.is-visible,
.homepage-feature-card.is-visible,
.homepage-location.is-visible,
.homepage-category-card.is-visible {
    animation: motion-fade-up 720ms var(--motion-ease-out) both;
    animation-delay: var(--motion-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .homepage-hero::before,
    .homepage-hero::after,
    .homepage-hero-overlay::before {
        animation: none;
    }

    html.motion-enhanced .motion-reveal,
    html.motion-enhanced .motion-reveal.is-visible,
    .homepage-hero video,
    .homepage-actions > *,
    .homepage-hero-stats > *,
    .homepage-category-card,
    .homepage-support-panel,
    .homepage-stat-card,
    .homepage-feature-card,
    .homepage-location,
    .homepage-button,
    .content-button,
    .pricing-download-button,
    .specifications-download-button,
    .tilt-card,
    .tilt-card img,
    .tilt-card::before,
    .homepage-category-card::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}