/* ==========================================================================
   The customer's car on the catalog (wpc/_vehicle_image.php, sp/car.js).
   Photos are 2:1, the car standing on a common ground line with its own floor
   shadow, so every model lands in the same place.

   data-state: pending (hidden, about to play) → play → done. No state = parked.
   data-facing: left | right, which way the nose points. The car drives in from
   behind; without a facing it rises into place instead.
   ========================================================================== */

.sp-car {
    --sp-car-dir: 0;
    position: relative;
    width: min(100%, 520px);
    margin: -12px 0 0;
}
.sp-car[data-facing="right"] { --sp-car-dir: 1; }
.sp-car[data-facing="left"]  { --sp-car-dir: -1; }

.sp-car-stage { position: relative; aspect-ratio: 2 / 1; isolation: isolate; }

/* Studio floor: a soft pool of light under the car, no box around it. */
.sp-car-stage::before {
    content: "";
    position: absolute; z-index: -1;
    left: 0; right: 0; top: 40%; bottom: -8%;
    background: radial-gradient(closest-side at 50% 62%, var(--sp-surface-2) 0, rgba(236, 238, 234, .55) 50%, rgba(236, 238, 234, 0) 100%);
}

.sp-car-body { position: relative; }
.sp-car-img { display: block; width: 100%; height: auto; }
/* The prepared photos place tyre contact at 93.5%. Only the remaining floor
   shadow fades, so it reaches transparency before the image ends. */
.sp-car-img,
.sp-car-intro-car > img {
    -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
}

/* The light sweep: a band of light that only falls on the car (masked by its own photo). */
.sp-car-sheen {
    position: absolute; inset: 0;
    overflow: hidden; pointer-events: none;
    -webkit-mask: var(--sp-car-img) center / 100% 100% no-repeat;
            mask: var(--sp-car-img) center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
}
.sp-car-sheen::before {
    content: "";
    position: absolute; top: -10%; bottom: -10%; left: 30%; width: 40%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .12) 30%,
        rgba(255, 255, 255, .62) 50%,
        rgba(255, 255, 255, .12) 70%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-12deg);
}

/* Glints: small four-point stars on the brightest chrome, placed by sp/car.js. */
.sp-car-glint {
    position: absolute; z-index: 2;
    width: clamp(14px, 5.5%, 30px); aspect-ratio: 1;
    margin: calc(clamp(14px, 5.5%, 30px) / -2) 0 0 calc(clamp(14px, 5.5%, 30px) / -2);
    pointer-events: none;
    opacity: 0; scale: 0;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 0 7px rgba(186, 210, 255, .7));
}
.sp-car-glint svg { display: block; width: 100%; height: 100%; }

/* --- Waiting: hidden until the photo is decoded. Shows anyway after 2.5 s if the script never runs. */
.sp-car[data-state="pending"] .sp-car-body,
.sp-car[data-state="pending"] .sp-car-stage::before {
    opacity: 0;
    animation: sp-car-fallback 0s 2.5s forwards;
}
@keyframes sp-car-fallback { to { opacity: 1; } }

/* --- Drive-in (default) ---------------------------------------------------- */
.sp-car[data-state="play"] .sp-car-body {
    animation:
        sp-car-arrive 1.2s cubic-bezier(.14, .8, .26, 1) both,
        sp-car-brake .75s .86s cubic-bezier(.3, 0, .3, 1) both;
}
.sp-car[data-state="play"][data-facing="right"] .sp-car-body { transform-origin: 24% 92%; }
.sp-car[data-state="play"][data-facing="left"]  .sp-car-body { transform-origin: 76% 92%; }
.sp-car[data-state="play"] .sp-car-stage::before { animation: sp-car-floor .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.sp-car[data-state="play"] .sp-car-sheen { animation: sp-car-sheen-show 1s 1.05s ease-in-out both; }
.sp-car[data-state="play"] .sp-car-sheen::before { animation: sp-car-sweep 1s 1.05s cubic-bezier(.45, .05, .35, 1) both; }
.sp-car[data-state="play"] .sp-car-glint { animation: sp-car-twinkle .8s var(--sp-car-glint-delay, 1.7s) cubic-bezier(.3, 0, .2, 1) both; }

@keyframes sp-car-arrive {
    0%   { translate: calc(var(--sp-car-dir) * -38%) 0; opacity: 0; }
    30%  { opacity: 1; }
    100% { translate: 0 0; opacity: 1; }
}
/* Without a facing the car rises into place. */
.sp-car:not([data-facing])[data-state="play"] .sp-car-body { animation: sp-car-rise 1s cubic-bezier(.14, .8, .26, 1) both; }
@keyframes sp-car-rise {
    from { translate: 0 5%; scale: .97; opacity: 0; }
    to   { translate: 0 0; scale: 1; opacity: 1; }
}
/* Braking: the nose dips a fraction and the suspension settles. */
@keyframes sp-car-brake {
    0%   { rotate: 0deg; }
    35%  { rotate: calc(var(--sp-car-dir) * .9deg); }
    70%  { rotate: calc(var(--sp-car-dir) * -.22deg); }
    100% { rotate: 0deg; }
}
@keyframes sp-car-floor {
    from { opacity: 0; scale: .55 1; }
    to   { opacity: 1; scale: 1 1; }
}
@keyframes sp-car-sheen-show {
    0%, 100% { opacity: 0; }
    20%, 75% { opacity: 1; }
}
/* The light runs from the nose to the tail, as if the car had rolled under it. */
@keyframes sp-car-sweep {
    from { translate: calc(var(--sp-car-dir, 1) * 190%) 0; }
    to   { translate: calc(var(--sp-car-dir, 1) * -190%) 0; }
}
.sp-car:not([data-facing]) .sp-car-sheen::before { --sp-car-dir: -1; }
@keyframes sp-car-twinkle {
    0%   { opacity: 0; scale: 0; rotate: -30deg; }
    40%  { opacity: 1; scale: 1; rotate: 0deg; }
    100% { opacity: 0; scale: .2; rotate: 25deg; }
}

/* --- Intro: the car that was just chosen, full screen ----------------------
   The page turns from white to the header green, the car drives in with the plate
   large under it and its name spelled out, then the green fades while the car flies
   into its place in the heading (sp/car.js). #bil-intro=curtain|short in the URL
   shows the earlier alternatives: the green lifts like a curtain, or a quick fade.
   data-state on .sp-car-intro: (none) waiting → play → exit. */
.sp-car[data-state="intro"] .sp-car-body,
.sp-car[data-state="intro"] .sp-car-stage::before {
    opacity: 0;
    animation: sp-car-fallback 0s 4s forwards;
}
/* While sp/car.js runs the intro the heading's car waits, with no timed fallback. */
.sp-car[data-state="intro-live"] .sp-car-body,
.sp-car[data-state="intro-live"] .sp-car-stage::before { opacity: 0; }
/* Landed: the car that flew into the heading glints a few times (no light sweep). */
.sp-car[data-state="landed"] .sp-car-glint { animation: sp-car-twinkle .8s var(--sp-car-glint-delay, .4s) cubic-bezier(.3, 0, .2, 1) both; }

.sp-car-intro {
    position: fixed; inset: 0; z-index: 2147483000; /* above the cookie banner for these 4 s; a tap ends it */
    display: grid; place-items: center;
    padding: 24px 16px;
    background: var(--sp-paper);
    color: var(--sp-paper);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sp-car-intro[hidden] { display: none; }
/* Never a white screen for long if the script does not run. */
.sp-car-intro:not([data-state]) { animation: sp-intro-gone 0s 3s forwards; }
@keyframes sp-intro-gone { to { visibility: hidden; } }

.sp-car-intro-stage {
    display: grid; justify-items: center;
    width: min(100%, 860px);
    text-align: center;
}
.sp-car-intro-car { position: relative; width: 100%; transform-origin: 0 0; }
.sp-car-intro-car img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
    /* The photo has air around the car; let it bleed so the car fills the phone,
       but a side view (92.5 % of the photo) still clears the screen edges. */
    .sp-car-intro-car { width: 112%; }
}
.sp-car-intro-car::before {
    content: "";
    position: absolute; z-index: -1; left: -4%; right: -4%; top: 30%; bottom: -14%;
    background: radial-gradient(closest-side at 50% 62%, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 100%);
}
.sp-car-intro-car .sp-car-sheen { -webkit-mask: var(--sp-car-img) center / 100% 100% no-repeat; mask: var(--sp-car-img) center / 100% 100% no-repeat; }
.sp-car-intro-plate {
    display: inline-flex; align-items: stretch; margin: clamp(10px, 2.5vh, 26px) 0 0;
    height: clamp(58px, 9vw, 84px);
    border-radius: 10px; overflow: hidden;
    background: var(--sp-paper); color: var(--sp-plate-ink);
    /* A white frame lifts the plate off the green, like a plate holder. */
    box-shadow: 0 0 0 clamp(2px, .3vw, 3px) var(--sp-paper), 0 18px 50px rgba(0, 0, 0, .28);
}
.sp-car-intro-eu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: clamp(34px, 5vw, 48px);
    background: var(--sp-plate-blue); color: var(--sp-paper);
    font: 600 clamp(13px, 1.8vw, 17px)/1 var(--sp-font);
}
.sp-car-intro-eu svg { width: 60%; height: auto; }
.sp-car-intro-reg {
    display: flex; align-items: center; padding: 0 .45em 0 .4em;
    font: 600 clamp(38px, 6.6vw, 62px)/1 var(--sp-font-plate); letter-spacing: .08em; white-space: nowrap;
}
.sp-car-intro-line {
    min-height: 1.3em;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .88); font-size: clamp(17px, 2vw, 21px); font-weight: 600;
}
/* The name is spelled out by sp/car.js: one span per letter with its own delay. */
.sp-car-intro-line span { display: inline-block; white-space: pre; }

/* Play: white → green, the car drives in, then the plate, the name and the glints. */
.sp-car-intro[data-state] { background: var(--sp-header); animation: sp-intro-bg .42s ease-out both; }
@keyframes sp-intro-bg { from { background-color: var(--sp-paper); } to { background-color: var(--sp-header); } }
.sp-car-intro:not([data-state]) .sp-car-intro-stage > * { opacity: 0; }
.sp-car-intro[data-state="play"] .sp-car-intro-car {
    animation:
        sp-car-arrive 1.6s .2s cubic-bezier(.14, .8, .26, 1) both,
        sp-car-brake .8s 1.5s cubic-bezier(.3, 0, .3, 1) both;
}
.sp-car-intro[data-facing="right"] .sp-car-intro-car { --sp-car-dir: 1; }
.sp-car-intro[data-facing="left"]  .sp-car-intro-car { --sp-car-dir: -1; }
.sp-car-intro:not([data-facing])[data-state="play"] .sp-car-intro-car { animation: sp-car-rise 1.3s .2s cubic-bezier(.14, .8, .26, 1) both; }
.sp-car-intro[data-state="play"] .sp-car-intro-car::before { animation: sp-car-floor 1s .4s cubic-bezier(.2, .7, .2, 1) both; }
.sp-car-intro[data-state="play"] .sp-car-sheen { animation: sp-car-sheen-show 1s 1.85s ease-in-out both; }
.sp-car-intro[data-state="play"] .sp-car-sheen::before { animation: sp-car-sweep 1s 1.85s cubic-bezier(.45, .05, .35, 1) both; }
.sp-car-intro[data-state="play"] .sp-car-glint { animation: sp-car-twinkle .8s var(--sp-car-glint-delay, 1.7s) cubic-bezier(.3, 0, .2, 1) both; }
.sp-car-intro[data-state="play"] .sp-car-intro-plate { animation: sp-intro-plate .55s 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
.sp-car-intro[data-state="play"] .sp-car-intro-line span { animation: sp-intro-letter .32s var(--sp-letter-delay, 2s) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sp-intro-plate { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes sp-intro-letter { from { opacity: 0; translate: 0 .35em; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: none; } }

/* Short: no drive-in, everything in at once, out after a beat. */
.sp-car-intro[data-variant="short"][data-state="play"] .sp-car-intro-car { animation: sp-car-rise .55s .1s cubic-bezier(.14, .8, .26, 1) both; }
.sp-car-intro[data-variant="short"][data-state="play"] .sp-car-intro-car::before { animation: sp-car-floor .5s .1s ease-out both; }
.sp-car-intro[data-variant="short"][data-state="play"] .sp-car-intro-plate { animation-delay: .25s; }
.sp-car-intro[data-variant="short"][data-state="play"] .sp-car-sheen,
.sp-car-intro[data-variant="short"][data-state="play"] .sp-car-sheen::before { animation-delay: .5s; }

/* Exit. The plate, the name and the glints fade out with the green while the car flies.
   Animations, not transitions: they take over from the play animations without a jump. */
.sp-car-intro[data-state="exit"] { cursor: default; pointer-events: none; }
.sp-car-intro[data-state="exit"] .sp-car-intro-plate,
.sp-car-intro[data-state="exit"] .sp-car-intro-line,
.sp-car-intro[data-state="exit"] .sp-car-glint { animation: sp-intro-out .5s ease-out both; }
@keyframes sp-intro-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 8px; } }
.sp-car-intro[data-state="exit"] .sp-car-glint { animation-duration: .25s; }
/* An animation, not a transition: swapping out the white-to-green animation in the same
   style change would make a transition jump straight to transparent. */
.sp-car-intro[data-state="exit"]:not([data-variant="curtain"]) { animation: sp-intro-bg-out .75s ease-in-out both; }
@keyframes sp-intro-bg-out { from { background-color: var(--sp-header); } to { background-color: rgba(28, 63, 59, 0); } }
.sp-car-intro[data-variant="short"][data-state="exit"] .sp-car-intro-car { opacity: 0; transition: opacity .35s ease-in; }
.sp-car-intro[data-variant="curtain"][data-state="exit"] { translate: 0 -100%; transition: translate .7s cubic-bezier(.7, 0, .25, 1); animation: none; }

@media (prefers-reduced-motion: reduce) {
    .sp-car-intro { display: none !important; }
    .sp-car[data-state="intro"] .sp-car-body { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-car .sp-car-body,
    .sp-car .sp-car-stage::before,
    .sp-car .sp-car-sheen,
    .sp-car .sp-car-sheen::before { animation: none !important; opacity: 1; }
    .sp-car .sp-car-sheen,
    .sp-car .sp-car-glint { display: none; }
}

/* --- Catalog heading with the car beside it on wide screens ---------------- */
@media (min-width: 900px) {
    .sp-cat-head.has-car {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
        column-gap: 40px;
        align-items: end;
    }
    .sp-cat-head.has-car > * { grid-column: 1; }
    .sp-cat-head.has-car > .sp-car {
        grid-column: 2; grid-row: 1 / span 5;
        width: 100%; margin: -24px 0 0;
    }
}

/* Keep the whole intro visible on landscape phones and short desktop windows. */
@media (max-height: 600px) {
    .sp-car-intro { padding:12px 16px; }
    .sp-car-intro-stage { width:min(100%, 100vh); }
    .sp-car-intro-car { width:100%; }
    .sp-car-intro-plate { height:48px; margin-top:4px; }
    .sp-car-intro-reg { font-size:34px; }
    .sp-car-intro-line { margin-top:8px; font-size:16px; }
}