/* Vehero v5.0 – homepage motion. Pure CSS + home-motion-v5.js, no libraries.
   Everything is gated on html.js-anim, which is only set when motion is allowed. */

html body[data-page="home"] .content { overflow-x: clip; }

/* ---- Hero aurora: two slow drifting light pools behind the search ---- */
html body .home-hero { position: relative; isolation: isolate; }
html body .home-hero::before,
html body .home-hero::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px);
}
html body .home-hero::before { width: 520px; height: 360px; left: -140px; top: -90px; background: radial-gradient(closest-side, rgba(56, 189, 248, .30), transparent); }
html body .home-hero::after { width: 460px; height: 340px; right: 8%; top: 40px; background: radial-gradient(closest-side, rgba(129, 140, 248, .20), transparent); }
@media (prefers-reduced-motion: no-preference) {
    html body .home-hero::before { animation: hm-drift-a 16s ease-in-out infinite alternate; }
    html body .home-hero::after { animation: hm-drift-b 20s ease-in-out infinite alternate; }
}
@keyframes hm-drift-a { to { transform: translate(180px, 50px) scale(1.15); } }
@keyframes hm-drift-b { to { transform: translate(-200px, 70px) scale(1.2); } }

/* ---- Reveal on scroll / on load (attribute is added by JS) ---- */
html.js-anim [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--hm-d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--hm-d, 0ms);
}
html.js-anim [data-reveal].is-in { opacity: 1; transform: none; }
html.js-anim .home-hero .home-section, html.js-anim .home-section, html.js-anim .home-hero { animation: none; }

/* ---- Section heading: gold rule draws itself ---- */
html body .home-section-head h2 { position: relative; }
html body .home-section-head h2::after {
    content: ''; position: absolute; left: 0; bottom: -10px; height: 2px; width: 0; border-radius: 2px;
    background: linear-gradient(90deg, #e6c987, rgba(230, 201, 135, 0));
}
html.js-anim .home-section-head.is-in h2::after { width: 56px; transition: width .9s cubic-bezier(.2, .7, .2, 1) .35s; }
html:not(.js-anim) .home-section-head h2::after { width: 56px; }

/* ---- Cursor spotlight on cards (desktop pointers) ---- */
html body .home-card, html body .brand-tile, html body .budget-tile, html body .fuel-tile, html body .why-card, html body .blog-card { position: relative; }
html body .home-card::after, html body .brand-tile::after, html body .budget-tile::after,
html body .fuel-tile::after, html body .why-card::after, html body .blog-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, .14), transparent 60%);
}
@media (hover: hover) {
    html body .home-card:hover::after, html body .brand-tile:hover::after, html body .budget-tile:hover::after,
    html body .fuel-tile:hover::after, html body .why-card:hover::after, html body .blog-card:hover::after { opacity: 1; }
}

/* ---- Car of the day: slide-in, slow Ken Burns on the photo, pointer tilt + glare ---- */
html.js-anim .home-hero-aside[data-reveal] { transform: translateX(36px) scale(.97); }
html.js-anim .home-hero-aside[data-reveal].is-in { transform: none; }
html body .home-hero-aside { perspective: 1000px; }
html body .home-hero-aside .cod-card {
    transform-style: preserve-3d; will-change: transform;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .2s ease;
}
html body .home-hero-aside .cod-card.is-tilting { transition: transform .08s linear, border-color .2s ease, box-shadow .2s ease; }
html body .home-hero-aside .cod-card::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 55%);
}
@media (hover: hover) { html body .home-hero-aside .cod-card:hover::after { opacity: 1; } }
html body .cod-image { overflow: hidden; }
html body .cod-card:hover .cod-image img { transform: none; }
@media (prefers-reduced-motion: no-preference) {
    html body .cod-image img { animation: hm-kenburns 16s ease-in-out infinite alternate; transform-origin: 60% 55%; }
    html body .cod-label { position: relative; overflow: hidden; }
    html body .cod-label::after {
        content: ''; position: absolute; inset: 0; transform: translateX(-120%);
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
        animation: hm-shine 4.5s ease-in-out 1.2s infinite;
    }
}
@keyframes hm-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }
@keyframes hm-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---- Sell CTA: slow light sweep ---- */
html body .sell-cta { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    html body .sell-cta::after {
        content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(125, 211, 252, .12), transparent);
        animation: hm-sweep 7s ease-in-out infinite;
    }
}
@keyframes hm-sweep { 0% { left: -50%; } 60%, 100% { left: 130%; } }
html body .sell-cta > * { position: relative; z-index: 1; }

/* ---- Search button: soft pulse once the hero has settled ---- */
@media (prefers-reduced-motion: no-preference) {
    html body .hs-submit { animation: hm-pulse 3.2s ease-out 2s 2; }
}
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(56, 189, 248, 0); } }

/* ---- Trust row ticks draw themselves ---- */
html.js-anim .trust-row li path { stroke-dasharray: 30; stroke-dashoffset: 30; }
html.js-anim .trust-row li.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease .45s; }