/* ==========================================================================
   Top Lux — motion layer
   Purely additive: no layout, color or font changes. Uses the site's own
   palette (--ink, --paper, --acid). To switch everything off, remove the
   <link> to this file from index.html.
   Everything lives inside prefers-reduced-motion: no-preference, so visitors
   who ask their device for less motion get the original static site.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    :root {
        --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ---------- Keyframes (only a "from" state, so the element always ends
       exactly where the original CSS puts it) ---------- */

    @keyframes tl-fade {
        from { opacity: 0; }
    }

    @keyframes tl-drop {
        from { opacity: 0; transform: translateY(-100%); }
    }

    @keyframes tl-rise {
        from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    }

    @keyframes tl-reveal {
        from { opacity: 0; transform: translateY(36px); }
    }

    @keyframes tl-wipe-up {
        from { clip-path: inset(100% 0 0 0); }
    }

    @keyframes tl-wipe-right {
        from { clip-path: inset(0 100% 0 0); }
    }

    @keyframes tl-zoom-settle {
        from { transform: scale(1.18); }
    }

    @keyframes tl-line-grow {
        from { transform: scaleX(0); }
    }

    @keyframes tl-label-in {
        from { transform: translateY(100%); }
    }

    @keyframes tl-stamp-in {
        from { opacity: 0; transform: rotate(-120deg) scale(0.2); }
    }

    @keyframes tl-stamp-float {
        0%, 100% { transform: rotate(-15deg) translateY(0); }
        50%      { transform: rotate(-15deg) translateY(-8px); }
    }

    @keyframes tl-twinkle {
        0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
        50%      { transform: rotate(180deg) scale(1.25); opacity: 0.7; }
    }

    @keyframes tl-modal-in {
        from { opacity: 0; transform: translateY(26px) scale(0.97); }
    }

    @keyframes tl-backdrop-in {
        from { opacity: 0; backdrop-filter: blur(0); }
    }

    /* ---------- Page load: top of the page ---------- */

    .announcement {
        animation: tl-drop 0.7s var(--ease-out) backwards;
    }

    .site-header {
        animation: tl-fade 0.9s 0.15s ease backwards;
        transition: box-shadow 0.4s ease;
    }

    .site-header.is-scrolled {
        box-shadow: 0 14px 30px -22px rgba(23, 23, 22, 0.45);
    }

    .brand-mark {
        transition: transform 0.5s var(--ease-spring), background 0.3s ease, color 0.3s ease;
    }

    .brand:hover .brand-mark {
        transform: rotate(360deg);
    }

    /* ---------- Hero ---------- */

    .hero-copy > * {
        animation: tl-rise 0.9s var(--ease-out) backwards;
    }

    .hero-copy > :nth-child(1) { animation-delay: 0.25s; }
    .hero-copy > :nth-child(2) { animation-delay: 0.38s; }
    .hero-copy > :nth-child(3) { animation-delay: 0.52s; }
    .hero-copy > :nth-child(4) { animation-delay: 0.64s; }

    .eyebrow-line {
        transform-origin: left center;
        animation: tl-line-grow 0.9s 0.5s var(--ease-out) backwards;
    }

    .hero-image-wrap {
        animation: tl-fade 1.3s 0.1s ease backwards;
    }

    .hero-image {
        animation: tl-zoom-settle 1.7s 0.2s var(--ease-out) backwards;
    }

    .hero-image-label {
        animation: tl-label-in 0.8s 1s var(--ease-out) backwards;
    }

    /* ---------- Ticker ---------- */

    .ticker span {
        animation: tl-twinkle 5s ease-in-out infinite;
    }

    .ticker span:nth-of-type(2) { animation-delay: 0.8s; }

    /* ---------- Scroll progress bar (created by animations.js) ---------- */

    .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 6;
        pointer-events: none;
        background: linear-gradient(90deg, var(--red), #ff8a91);
        transform: scaleX(0);
        transform-origin: left center;
    }

    /* ---------- Scroll reveals (classes added by animations.js) ---------- */

    .anim-js .reveal:not(.in) {
        opacity: 0;
    }

    .reveal.in {
        animation: tl-reveal 0.95s var(--ease-out) backwards;
        animation-delay: var(--d, 0s);
    }

    .reveal-wipe.in {
        animation: tl-wipe-right 1.3s var(--ease-out) backwards;
        animation-delay: var(--d, 0s);
    }

    .car-card.in .car-image img {
        animation: tl-zoom-settle 1.3s var(--ease-out) backwards;
        animation-delay: var(--d, 0s);
    }

    .manifesto-image.parallax img {
        transform: translate3d(0, calc(var(--py, 0) * 1%), 0) scale(1.14);
        will-change: transform;
    }

    /* ---------- Hover polish ---------- */

    .outline-btn,
    .solid-btn {
        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            transform 0.3s var(--ease-out),
            box-shadow 0.3s ease;
    }

    .outline-btn:hover,
    .solid-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -14px rgba(232, 34, 46, 0.7);
    }


    .outline-btn:active,
    .solid-btn:active {
        transform: translateY(0) scale(0.97);
        box-shadow: none;
    }

    .outline-btn span,
    .solid-btn span,
    .text-link span {
        display: inline-block;
        transition: transform 0.3s var(--ease-out);
    }

    .outline-btn:hover span,
    .text-link:hover span {
        transform: translate(3px, -3px);
    }

    .solid-btn:hover span {
        transform: translateY(3px);
    }

    .nav-links a {
        background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
        transition: background-size 0.4s var(--ease-out);
    }

    .nav-links a:hover {
        background-size: 100% 1px;
        text-decoration: none;
    }

    .car-card {
        position: relative;
    }

    .car-card:hover {
        transform: translateY(-6px);
    }

    .car-card:active {
        transform: scale(0.98);
    }

    .car-image {
        transition: box-shadow 0.45s var(--ease-out);
    }

    .car-card:hover .car-image {
        box-shadow: 0 26px 40px -26px rgba(232, 34, 46, 0.55);
    }

    .car-number {
        transition: transform 0.4s var(--ease-out);
    }

    .car-card:hover .car-number {
        transform: translateY(-3px);
    }

    .car-meta {
        position: relative;
    }

    .car-meta::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: var(--acid);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.55s var(--ease-out);
    }

    .car-card:hover .car-meta::after {
        transform: scaleX(1);
    }

    .journal-grid article {
        transition: background 0.4s ease, border-color 0.4s ease;
    }

    .journal-grid article:hover {
        background: var(--card-hi);
        border-color: rgba(232, 34, 46, 0.5);
    }

    .benefit-card:hover {
        transform: translateY(-4px);
    }

    .journal-grid h3 {
        transition: transform 0.45s var(--ease-out);
    }

    .journal-grid article:hover h3 {
        transform: translateX(8px);
    }

    input,
    textarea {
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    input:focus,
    textarea:focus {
        box-shadow: 0 1px 0 0 var(--red);
    }

    .hero-search input:focus {
        box-shadow: none;
    }

    .hero-search {
        transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out);
    }

    .hero-search:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 0 0 4px rgba(232, 34, 46, 0.35), 0 24px 50px -24px rgba(0, 0, 0, 0.8);
    }

    /* ---------- Modals & vehicle detail (replay on every open) ---------- */

    .auth-modal.active,
    .booking-modal.active,
    .confirm-modal.active {
        backdrop-filter: blur(4px);
        animation: tl-backdrop-in 0.35s ease backwards;
    }

    .auth-modal.active .auth-box,
    .booking-modal.active .booking-box,
    .confirm-modal.active .confirm-box {
        animation: tl-modal-in 0.55s var(--ease-out) backwards;
    }

    .vehicle-detail.active {
        animation: tl-fade 0.35s ease backwards;
    }

    .vehicle-detail.active .vehicle-detail-image {
        animation: tl-wipe-right 0.95s var(--ease-out) backwards;
    }

    .vehicle-detail.active .vehicle-detail-image img {
        animation: tl-zoom-settle 1.4s var(--ease-out) backwards;
    }

    .vehicle-detail.active .vehicle-detail-info > * {
        animation: tl-rise 0.85s var(--ease-out) backwards;
    }

    .vehicle-detail.active .vehicle-detail-info > :nth-child(1) { animation-delay: 0.20s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(2) { animation-delay: 0.28s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(3) { animation-delay: 0.36s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(4) { animation-delay: 0.44s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(5) { animation-delay: 0.52s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(6) { animation-delay: 0.60s; }
    .vehicle-detail.active .vehicle-detail-info > :nth-child(n+7) { animation-delay: 0.68s; }
}

/* Never leave content hidden when printing */
@media print {
    .reveal { opacity: 1 !important; animation: none !important; }
    .scroll-progress { display: none; }
}