/* Homepage fixes layered over the grain background: immediate section
   content, hero loading, a bar behind the fixed controls, and mobile layout.
   Loaded on the front page only; selectors are weighted to win over the
   later inline blocks. */
body.home-page {
    --cb-scrim: rgba(255, 255, 255, .78);
    --cb-hairline: rgba(24, 38, 31, .1);
}
body.home-page.dark-mode {
    --cb-scrim: rgba(10, 12, 11, .82);
    --cb-hairline: rgba(255, 255, 255, .08);
}

/* Sections are visible as soon as they scroll in; no blank fade-in. */
html body .section-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Hero: show the logo straight away and fade the video in once it can play. */
html body #hero .hero-loading { background: transparent; }
html body #hero .loading-spinner { display: none; }
@supports selector(:has(a)) {
    #hero .hero-video { opacity: 0; transition: opacity .8s ease; }
    #hero:has(.hero-loading.hidden) .hero-video { opacity: 1; }
}

/* A quiet bar behind the floating controls once the hero has scrolled away. */
body.home-page::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 104px;
    z-index: 9990;
    pointer-events: none;
    background: var(--cb-scrim);
    border-bottom: 1px solid var(--cb-hairline);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .25s ease, transform .25s ease;
}
body.home-page.cb-past-hero::after { opacity: 1; transform: none; }
body.home-page:has(#menuOverlay.active)::after { opacity: 0; }
/* Menu jumps and the hero arrow land with headings clear of the bar. */
body.home-page section[id]:not(#hero) { scroll-margin-top: 104px; }
html body.home-page #inventory { padding-top: 124px; }

@media (max-width: 820px) {
    body.home-page::after { height: 84px; }
    body.home-page section[id]:not(#hero) { scroll-margin-top: 84px; }
    html body.home-page #inventory { padding-top: 100px; }

    /* Odd steps kept their desktop rows, pushing the number below the text. */
    html body #custom-import .story-stage:nth-child(n) > *,
    html body #custom-import .story-stage:nth-child(n) .story-detail {
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-video, body.home-page::after { transition: none; }
}

/* Entrance animations. design-foundation.js adds .cb-rv plus one effect
   class to elements below the fold, .cb-in when they scroll into view, and
   removes all three once the move has finished so the theme's own hover
   transitions return. Only translate, scale, opacity and clip-path move. */
html body .cb-rv {
    --cb-ease: cubic-bezier(.2, .7, .2, 1);
    transition: opacity .6s var(--cb-ease), translate .7s var(--cb-ease),
        scale .8s var(--cb-ease), clip-path .9s var(--cb-ease) !important;
    transition-delay: var(--cb-d, 0ms) !important;
}
html body .cb-rv--rise:not(.cb-in) { opacity: 0 !important; translate: 0 22px; }
html body .cb-rv--right:not(.cb-in) { opacity: 0 !important; translate: 32px 0; }
html body .cb-rv--pop:not(.cb-in) { opacity: 0 !important; scale: .82; }

/* Headings rise from behind a mask. */
html body .cb-rv--mask:not(.cb-in) { clip-path: inset(100% 0 0 0); translate: 0 .4em; }
html body .cb-rv--mask.cb-in { clip-path: inset(-12% -4% -16% -4%); }

/* Lines, rows and bars draw from left to right. */
html body .cb-rv--wipe:not(.cb-in) { clip-path: inset(0 100% 0 0); }
html body .cb-rv--wipe.cb-in { clip-path: inset(0 0 0 0); }

/* Large image cards open from a slightly inset frame. */
html body .cb-rv--frame:not(.cb-in) { opacity: 0 !important; clip-path: inset(7% 5% 7% 5% round 6px); scale: 1.02; }
html body .cb-rv--frame.cb-in { clip-path: inset(0 0 0 0 round 6px); }

/* Process photos wipe in from the side they sit on. */
html body #custom-import .story-stage.cb-rv::before {
    transition: clip-path 1s var(--cb-ease) var(--cb-d, 0ms), scale 1.2s var(--cb-ease) var(--cb-d, 0ms);
}
html body #custom-import .story-stage.cb-rv:not(.cb-in)::before { clip-path: inset(0 100% 0 0); scale: 1.06; }
html body #custom-import .story-stage.cb-rv:nth-child(even):not(.cb-in)::before { clip-path: inset(0 0 0 100%); }
html body #custom-import .story-stage.cb-rv.cb-in::before { clip-path: inset(0 0 0 0); }

/* One scan line sweeps across the inspection cutaway. */
html body #inspection-services .story-vehicle-visual { overflow: hidden; }
html body #inspection-services .story-vehicle-visual.cb-rv::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(198, 236, 210, .95) 30%, rgba(198, 236, 210, .95) 70%, transparent);
    box-shadow: 0 0 22px 6px rgba(150, 220, 180, .28);
    opacity: 0;
}
html body #inspection-services .story-vehicle-visual.cb-rv.cb-in::after {
    animation: cb-scan 1.7s var(--cb-ease) calc(var(--cb-d, 0ms) + 250ms) 1 both;
}
@keyframes cb-scan {
    0% { left: 0; opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@media (max-width: 820px) {
    html body .cb-rv--rise:not(.cb-in) { translate: 0 14px; }
    html body .cb-rv--right:not(.cb-in) { translate: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .cb-rv { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; transition: none !important; }
    html body .cb-rv::before, html body .cb-rv::after { clip-path: none !important; scale: none !important; animation: none !important; }
}
@media print {
    html body .cb-rv { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
}