/* ==========================================================================
   Motion layer (only active with html.clt-motion; off for reduced motion)
   1. Scroll reveal   2. Page + header entrance   3. Hero stage
   4. Hero art per page   5. Small interactions   6. Safety
   ========================================================================== */

/* ---------- 1. Scroll reveal ----------
   motion.js adds .is-in when a block is seen (plays once) and .is-done when it
   has finished, which hands the block back to its own styles (hover etc.). */
.clt-motion [data-reveal]:not(.is-in),
.clt-motion .nt-reveal:not(.is-in) { opacity: 0; }
.clt-motion [data-reveal].is-in:not(.is-done),
.clt-motion .nt-reveal.is-in:not(.is-done) {
	animation: clt-rv-up .72s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--d, 0) * 75ms);
	will-change: opacity, transform;
}
.clt-motion [data-reveal="left"].is-in:not(.is-done) { animation-name: clt-rv-left; }
.clt-motion [data-reveal="right"].is-in:not(.is-done) { animation-name: clt-rv-right; }
.clt-motion [data-reveal="zoom"].is-in:not(.is-done) { animation-name: clt-rv-zoom; }
.clt-motion [data-reveal="fade"].is-in:not(.is-done) { animation-name: clt-rv-fade; }
@keyframes clt-rv-up { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes clt-rv-left { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes clt-rv-right { from { opacity: 0; transform: translate3d(36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes clt-rv-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes clt-rv-fade { from { opacity: 0; } to { opacity: 1; } }

/* Section title underline draws in */
.clt-motion .section-title[data-reveal] h2::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s .25s cubic-bezier(.2, .7, .2, 1); }
.clt-motion .section-title[data-reveal].is-in h2::after { transform: scaleX(1); }

/* Scroll progress bar */
.clt-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
	transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, var(--primary-color), #7dd3fc, #34d399);
	pointer-events: none;
}
.admin-bar .clt-progress { top: 32px; }

/* ---------- 2. Page + header entrance ---------- */
.clt-motion .main { animation: clt-page-in .6s ease-out both; }
@keyframes clt-page-in { from { opacity: 0; } to { opacity: 1; } }
.clt-motion .header { animation: clt-header-in .7s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes clt-header-in { from { opacity: 0; transform: translate3d(0, -16px, 0); } }

/* ---------- 3. Hero stage (every page banner) ---------- */
.clt-hero { position: relative; overflow: hidden; --fx: color-mix(in srgb, var(--primary-color, #22a7f0) 55%, #fff); }
.clt-hero > .container { position: relative; z-index: 1; }

/* Light and particles behind the words */
.clt-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.clt-fx > * { position: absolute; }
.clt-fx.is-off * { animation-play-state: paused !important; }

/* A soft light that follows the pointer and drifts a little on its own */
.clt-fx-glow { left: 0; top: 0; width: 0; height: 0; transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.clt-fx-glow::before {
	content: ""; position: absolute; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--fx) 30%, transparent), transparent 62%);
	opacity: .85; animation: clt-fx-drift 14s ease-in-out infinite alternate;
}
@keyframes clt-fx-drift { from { transform: translate3d(-70px, 24px, 0) scale(.9); } to { transform: translate3d(50px, -34px, 0) scale(1.12); } }

/* A band of light that sweeps across now and then */
.clt-fx-beam {
	top: -40%; bottom: -40%; left: 0; width: 18%; min-width: 120px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
	transform: translate3d(-160%, 0, 0) skewX(-18deg);
	animation: clt-fx-beam 9s ease-in-out 1.4s infinite;
}
@keyframes clt-fx-beam { 0% { transform: translate3d(-160%, 0, 0) skewX(-18deg); } 42%, 100% { transform: translate3d(760%, 0, 0) skewX(-18deg); } }

/* Rings that open out from one point */
.clt-fx-ring {
	left: var(--fx-x, 84%); top: var(--fx-y, 34%); width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--fx) 60%, transparent);
	opacity: 0; animation: clt-fx-ring 6.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.clt-fx-ring:nth-of-type(2) { animation-delay: 2.2s; }
.clt-fx-ring:nth-of-type(3) { animation-delay: 4.4s; }
@keyframes clt-fx-ring { 0% { opacity: 0; transform: scale(.35); } 12% { opacity: .55; } 100% { opacity: 0; transform: scale(4.4); } }

/* Small lights rising */
.clt-fx-dot {
	left: var(--x, 50%); bottom: -12px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%;
	background: var(--fx); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--fx) 70%, transparent);
	opacity: 0; animation: clt-fx-rise var(--t, 9s) linear var(--dl, 0s) infinite;
}
@keyframes clt-fx-rise {
	0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
	12% { opacity: .75; }
	70% { opacity: .35; }
	100% { opacity: 0; transform: translate3d(var(--dx, 20px), calc(var(--h, 420px) * -1), 0) scale(1.1); }
}

/* Words and blocks of the banner come in one after another */
/* (they wait, hidden, until the page loader is gone: html.clt-go) */
.clt-motion:not(.clt-go) .clt-hx, .clt-motion:not(.clt-go) .clt-split .clt-w { opacity: 0; }
.clt-split .clt-w { display: inline-block; }
.clt-motion.clt-go .clt-hx { animation: clt-hx-in .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 95ms + 140ms); }
@keyframes clt-hx-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
.clt-motion.clt-go .clt-split .clt-w { animation: clt-word .85s cubic-bezier(.2, .75, .2, 1) backwards; animation-delay: calc(var(--w, 0) * 70ms + var(--i, 0) * 95ms + 140ms); }
@keyframes clt-word { from { opacity: 0; transform: translate3d(0, .55em, 0) rotate(3deg); } }
.clt-motion .clt-hero [class*="eyebrow"] > i { display: inline-block; animation: clt-nudge 4.5s ease-in-out 1.6s infinite; }
@keyframes clt-nudge { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-14deg) scale(1.15); } 92% { transform: rotate(10deg) scale(1.15); } }

/* Animated gradient banners + floating orbs */
.clt-motion .clt-ev-hero,
.clt-motion .clt-cmp-hero,
.clt-motion .clt-jobs-hero,
.clt-motion .clt-page-header-fallback,
.clt-motion .test-drive-header,
.clt-motion .request-quote-header { background-size: 180% 180%; animation: clt-hero-shift 16s ease-in-out infinite alternate; }
@keyframes clt-hero-shift { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }
.clt-anim-hero { overflow: hidden; }
.clt-anim-hero::before { transform: translateY(var(--py, 0)); }
.clt-orb {
	position: absolute; border-radius: 50%; filter: blur(50px); opacity: .45; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 80%, #fff), transparent 70%);
}
.clt-orb-1 { width: 380px; height: 380px; right: -80px; top: -60px; }
.clt-orb-2 { width: 260px; height: 260px; left: 8%; bottom: -120px; background: radial-gradient(circle, #34d399, transparent 70%); opacity: .25; }
.clt-motion .clt-orb-1 { animation: clt-orb 12s ease-in-out infinite; }
.clt-motion .clt-orb-2 { animation: clt-orb 15s ease-in-out infinite reverse; }
@keyframes clt-orb { 50% { transform: translate(-40px, 30px) scale(1.1); } }

/* ---------- 4. Hero art per page ---------- */
/* Service centers: the sunburst turns and breathes, rings open from its centre */
.clt-sch { --fx: #fbbf24; }
.clt-sch:not(.is-showroom) { --fx-x: calc(100% - 130px); --fx-y: calc(100% - 110px); }
html.clt-motion .clt-sch::after { animation: clt-gear 28s linear infinite, clt-sun 5s ease-in-out infinite alternate; }
@keyframes clt-gear { to { transform: rotate(360deg); } }
@keyframes clt-sun { from { opacity: .7; } to { opacity: 1; } }
.clt-sch.is-showroom { --fx: #60a5fa; }

/* Charging stations: current runs along the bottom, the bolt flickers */
.clt-sth { --fx: #22d3ee; }
.clt-motion .clt-sth .clt-fx::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, transparent, #22d3ee, #4ade80, transparent) no-repeat 0 0 / 38% 100%;
	animation: clt-current 3.4s linear infinite;
}
@keyframes clt-current { from { background-position: -70% 0; } to { background-position: 170% 0; } }
.clt-motion .clt-sth .clt-sth-eyebrow > i { animation: clt-zap 2.6s steps(1, end) infinite; }
@keyframes clt-zap { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #22d3ee); } 8% { opacity: .35; filter: none; } 12% { opacity: 1; } 16% { opacity: .5; } 20% { opacity: 1; filter: drop-shadow(0 0 10px #67e8f9); } }

/* Warranty: an orbit and a pulse around the shield */
.clt-wrh { --fx: #34d399; --fx-x: 78%; --fx-y: 46%; }
.clt-wrh-shield { position: relative; }
.clt-motion .clt-wrh-shield::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(110, 231, 183, .38); animation: clt-gear 26s linear infinite; }
.clt-motion .clt-wrh-shield::after { content: ""; position: absolute; inset: 52px; border-radius: 50%; animation: clt-ripple 2.8s ease-out infinite; }
@keyframes clt-ripple { from { box-shadow: 0 0 0 0 rgba(52, 211, 153, .42); } to { box-shadow: 0 0 0 46px rgba(52, 211, 153, 0); } }
.clt-motion .clt-wrh-shield i { position: relative; z-index: 1; filter: drop-shadow(0 10px 24px rgba(52, 211, 153, .45)); }

/* FAQ: the question mark bobs */
.clt-motion .clt-faqh-icon i { display: inline-block; animation: clt-bob 3.6s ease-in-out infinite; }
@keyframes clt-bob { 50% { transform: translateY(-6px) rotate(-6deg); } }

/* Stats cards pop */
.clt-motion .clt-ev-stats li { transition: transform .3s, background .3s; }
.clt-motion .clt-ev-stats li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .14); }
.clt-motion .clt-hero :is([class$="-stat"], [class*="-stat "]) { transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s; }
.clt-motion .clt-hero :is([class$="-stat"], [class*="-stat "]):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fx) 55%, transparent); }

/* ---------- 4b. A picture for each kind of page (built by scenes.js) ----------
   Vehicles pages: vehicles drive along the bottom of the banner.
   Other pages: a small scene beside the words (people at work, a car charging ...). */
.clt-scene {
	position: absolute; right: 0; bottom: -14px; z-index: -1; width: clamp(250px, 31vw, 410px); aspect-ratio: 16 / 9;
	color: rgba(255, 255, 255, .92); pointer-events: none;
}
.clt-scene svg, .clt-veh svg { display: block; width: 100%; height: 100%; overflow: visible; }
.clt-anim-hero.has-scene > .container, .clt-jobs-hero.has-scene > .container, .clt-cmp-hero.has-scene > .container { min-height: 190px; }
.clt-page-header-fallback .clt-scene { width: clamp(170px, 20vw, 220px); bottom: -24px; }
.test-drive-header .clt-scene, .request-quote-header .clt-scene { width: clamp(200px, 22vw, 300px); bottom: -10px; }
.clt-motion:not(.clt-go) .clt-scene, .clt-motion:not(.clt-go) .clt-road { opacity: 0; }
.clt-motion.clt-go .clt-scene { animation: clt-scene-in 1s .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.clt-motion.clt-go .clt-road { animation: clt-rv-fade 1s .3s ease-out backwards; }
@keyframes clt-scene-in { from { opacity: 0; transform: translate3d(36px, 10px, 0) scale(.96); } }
.clt-hero.is-off .clt-scene *, .clt-hero.is-off .clt-road * { animation-play-state: paused !important; }

/* Paint */
.clt-scene .a, .clt-veh .a { stroke: var(--fx); }
.clt-scene .af, .clt-veh .af { fill: var(--fx); stroke: none; }
.clt-scene .ag, .clt-veh .ag { fill: color-mix(in srgb, var(--fx) 30%, transparent); stroke: var(--fx); }
.clt-scene .gl, .clt-veh .gl { fill: rgba(255, 255, 255, .11); }
.clt-scene .wf, .clt-veh .wf { fill: currentColor; stroke: none; }
.clt-scene .dk, .clt-veh .dk { fill: rgba(6, 12, 24, .72); }
.clt-scene .dm { opacity: .42; }
.clt-scene .th, .clt-veh .th { stroke-width: 1.5; }
.clt-scene .beam { fill: color-mix(in srgb, var(--fx) 16%, transparent); stroke: none; }
.clt-scene .flash { fill: rgba(255, 255, 255, .32); stroke: none; }

/* Movement (each part turns about its own middle unless it says otherwise) */
.clt-scene [class*="sc-"], .clt-veh [class*="sc-"] { transform-box: fill-box; transform-origin: center; }
.clt-scene .sc-o { transform-box: view-box; }
.clt-motion .sc-spin { animation: sc-spin var(--t, 1.4s) linear infinite; }
.clt-motion .sc-spin-r { animation: sc-spin var(--t, 1.4s) linear infinite reverse; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.clt-motion .sc-bob { animation: sc-bob var(--t, 2.4s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes sc-bob { to { transform: translateY(calc(var(--a, 4px) * -1)); } }
.clt-scene .sc-swing { transform-origin: 50% 0%; }
.clt-motion .sc-swing, .clt-motion .sc-rock { animation: sc-swing var(--t, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes sc-swing { from { transform: rotate(calc(var(--a, 8deg) * -1)); } to { transform: rotate(var(--a, 8deg)); } }
.clt-motion .sc-pop { animation: sc-pop var(--t, 4s) ease-in-out var(--dl, 0s) infinite; }
@keyframes sc-pop { 0%, 8% { opacity: 0; transform: scale(.3); } 18%, 68% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.3); } }
.clt-motion .sc-blink { animation: sc-blink var(--t, 1.6s) steps(1, end) var(--dl, 0s) infinite; }
@keyframes sc-blink { 0% { opacity: 1; } 50% { opacity: var(--lo, .15); } }
.clt-motion .sc-pulse { animation: sc-pulse var(--t, 2s) ease-in-out var(--dl, 0s) infinite; }
@keyframes sc-pulse { 50% { transform: scale(1.14); opacity: .78; } }
.clt-motion .sc-dash { stroke-dasharray: 5 7; animation: sc-dash var(--t, 1.2s) linear infinite; }
@keyframes sc-dash { to { stroke-dashoffset: -12; } }
.clt-motion .sc-draw { stroke-dasharray: var(--len, 120); stroke-dashoffset: var(--len, 120); animation: sc-draw var(--t, 3.6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes sc-draw { 0%, 6% { stroke-dashoffset: var(--len, 120); opacity: 1; } 38%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.clt-scene .sc-grow { transform-origin: 50% 100%; }
.clt-motion .sc-grow { animation: sc-grow var(--t, 5s) cubic-bezier(.2, .8, .2, 1) var(--dl, 0s) infinite; }
@keyframes sc-grow { 0%, 4% { transform: scaleY(0); } 22%, 86% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.clt-scene .sc-fillx { transform-origin: 0% 50%; }
.clt-motion .sc-fillx { animation: sc-fillx var(--t, 6s) ease-out var(--dl, 0s) infinite; }
@keyframes sc-fillx { 0%, 4% { transform: scaleX(0); opacity: 1; } 20%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.clt-motion .sc-drop { animation: sc-drop var(--t, 4s) cubic-bezier(.3, 1.4, .5, 1) var(--dl, 0s) infinite; }
@keyframes sc-drop { 0%, 5% { opacity: 0; transform: translateY(-34px); } 18%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.clt-motion .sc-float { animation: sc-float var(--t, 5s) ease-in var(--dl, 0s) infinite; }
@keyframes sc-float { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }
.clt-motion .sc-type { animation: sc-type .32s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes sc-type { to { transform: translateY(-2.4px); } }
.clt-motion .sc-c1 { animation: sc-c1 3.6s steps(1, end) infinite; }
.clt-motion .sc-c2 { animation: sc-c2 3.6s steps(1, end) infinite; }
.clt-motion .sc-c3 { animation: sc-c3 3.6s steps(1, end) infinite; }
.clt-motion .sc-c4 { animation: sc-c4 3.6s steps(1, end) infinite; }
@keyframes sc-c1 { 0% { opacity: .16; } 12% { opacity: 1; } 94% { opacity: .16; } }
@keyframes sc-c2 { 0% { opacity: .16; } 32% { opacity: 1; } 94% { opacity: .16; } }
@keyframes sc-c3 { 0% { opacity: .16; } 52% { opacity: 1; } 94% { opacity: .16; } }
@keyframes sc-c4 { 0% { opacity: .16; } 72% { opacity: 1; } 94% { opacity: .16; } }
.clt-motion .sc-ring { animation: sc-ring 2.4s ease-out var(--dl, 0s) infinite; }
@keyframes sc-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.clt-motion .sc-needle { animation: sc-needle 2.8s cubic-bezier(.5, 0, .3, 1) infinite alternate; }
@keyframes sc-needle { from { transform: rotate(-64deg); } to { transform: rotate(58deg); } }
.clt-motion .sc-tilt { animation: sc-tilt 2.8s ease-in-out infinite alternate; }
@keyframes sc-tilt { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.clt-scene .sc-wave { transform-origin: 0% 50%; }
.clt-motion .sc-wave { animation: sc-wave 1.1s ease-in-out infinite alternate; }
@keyframes sc-wave { from { transform: skewY(-5deg) scaleX(.96); } to { transform: skewY(5deg) scaleX(1.04); } }
.clt-motion .sc-cloud { animation: sc-cloud var(--t, 24s) linear infinite; }
@keyframes sc-cloud { from { transform: translateX(40px); opacity: 0; } 12%, 80% { opacity: 1; } to { transform: translateX(-250px); opacity: 0; } }
.clt-motion .sc-arrive { animation: sc-arrive 9s cubic-bezier(.3, .7, .3, 1) infinite; }
@keyframes sc-arrive { 0% { transform: translateX(-250px); opacity: 0; } 6% { opacity: 1; } 42%, 80% { transform: none; opacity: 1; } 100% { transform: translateX(170px); opacity: 0; } }
.clt-scene .sc-shine { opacity: 0; }
.clt-motion .sc-shine { animation: sc-shine 3.6s ease-in-out infinite; }
@keyframes sc-shine { 0%, 55% { opacity: 0; transform: translateX(-16px); } 66% { opacity: .9; } 86%, 100% { opacity: 0; transform: translateX(72px); } }
.clt-motion .sc-climb { animation: sc-climb 6.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes sc-climb { 0%, 6% { transform: none; opacity: 0; } 12% { transform: none; opacity: 1; } 30%, 38% { transform: translate(70px, -27px); } 56%, 64% { transform: translate(140px, -54px); } 84% { transform: translate(206px, -81px); opacity: 1; } 100% { transform: translate(206px, -81px); opacity: 0; } }
.clt-motion .sc-slide { animation: sc-slide var(--t, 6s) cubic-bezier(.2, .8, .2, 1) var(--dl, 0s) infinite; }
@keyframes sc-slide { 0%, 4% { opacity: 0; transform: translateX(46px); } 16%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-20px); } }
.clt-scene .sc-fly { transform-box: view-box; transform-origin: 0 0; offset-rotate: auto; }
.clt-motion .sc-fly { animation: sc-fly 4.2s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes sc-fly { 0% { offset-distance: 0%; opacity: 0; } 10%, 82% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* The road */
.clt-road { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 66px; overflow: hidden; pointer-events: none; color: rgba(255, 255, 255, .92); }
.clt-road-line { position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 22px, transparent 22px 48px); }
.clt-road-far { position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: rgba(255, 255, 255, .18); }
.clt-motion .clt-road-line { animation: clt-road .9s linear infinite; }
@keyframes clt-road { to { background-position-x: -48px; } }
.clt-veh { position: absolute; left: 0; bottom: 7px; width: var(--w, 110px); will-change: transform; }
.clt-motion .clt-veh { animation: clt-drive var(--t, 12s) linear var(--dl, 0s) infinite; }
@keyframes clt-drive { from { transform: translate3d(-190px, 0, 0); } to { transform: translate3d(calc(100vw + 30px), 0, 0); } }
.clt-veh.is-far { bottom: 22px; opacity: .5; scale: .78; transform-origin: 0 100%; }
.clt-motion .clt-veh.is-back { animation-name: clt-drive-back; }
@keyframes clt-drive-back { from { transform: translate3d(calc(100vw + 30px), 0, 0); } to { transform: translate3d(-220px, 0, 0); } }
.clt-veh.is-back svg { transform: scaleX(-1); }
.clt-motion .clt-veh svg { animation: clt-veh-bob .45s ease-in-out infinite alternate; }
@keyframes clt-veh-bob { to { translate: 0 -1.3px; } }
/* Room for the road under the title of the vehicles pages */
.clt-page-header-fallback.has-road { min-height: 250px; padding-bottom: 76px; }

/* Centred words: the picture stands beside them only where there is room, otherwise below. */
.clt-hero.is-center .clt-scene { width: min(320px, calc((100% - 640px) / 2)); bottom: 0; }
@media (min-width: 1200px) {
	.clt-hero.is-center.has-scene > .container > :is(h1, p), .clt-hero.is-center.has-scene > .container > div > :is(h1, p) { max-width: 600px; margin-left: auto; margin-right: auto; }
}
/* Team page: the people at work are the picture of the page, so they get the middle of the banner. */
.clt-teamh.is-center .clt-scene { position: relative; right: auto; bottom: auto; display: block; width: min(88%, 440px); margin: 24px auto -12px; }
.clt-teamh.is-center.has-scene > .container > :is(h1, p) { max-width: none; }
/* These two banners started under the fixed header (their title was cut off at the top). */
.test-drive-header.clt-hero, .request-quote-header.clt-hero { padding-top: 112px; padding-bottom: 64px; }
@media (max-width: 1199.98px) {
	.clt-hero.is-center .clt-scene { position: relative; right: auto; bottom: auto; display: block; width: min(86%, 320px); margin: 22px auto -8px; }
	.clt-hero.is-center.has-scene > .container { min-height: 0; }
}
@media (max-width: 991.98px) {
	.clt-scene { width: clamp(220px, 34vw, 300px); }
}
@media (max-width: 767.98px) {
	/* Under the words on phones, instead of beside them. */
	.clt-anim-hero .clt-scene, .clt-jobs-hero .clt-scene, .clt-cmp-hero .clt-scene, .test-drive-header .clt-scene, .request-quote-header .clt-scene { position: relative; right: auto; bottom: auto; display: block; width: min(86%, 300px); margin: 22px auto -8px; }
	.clt-hero.has-scene > .container { min-height: 0; }
	.clt-page-header-fallback .clt-scene { width: 150px; bottom: -28px; opacity: .6; }
	.clt-veh.is-extra { display: none; }
	.clt-page-header-fallback.has-road { min-height: 230px; }
}

/* ---------- 5. Small interactions ---------- */
/* 3D tilt */
.clt-tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease-out, box-shadow .25s; transform-style: preserve-3d; }
.clt-tilt::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 55%);
}
.clt-tilt:hover::after { opacity: 1; }
.clt-tilt:hover { box-shadow: 0 22px 45px rgba(13, 31, 58, .16); }

/* Button shine + press */
.clt-motion .btn-primary, .clt-motion .btn-getstarted, .clt-motion .compare-submit-btn { position: relative; overflow: hidden; }
.clt-motion .btn-primary::before, .clt-motion .btn-getstarted::before, .clt-motion .compare-submit-btn::before {
	content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg); transition: left .7s ease;
}
.clt-motion .btn-primary:hover::before, .clt-motion .btn-getstarted:hover::before, .clt-motion .compare-submit-btn:hover::before { left: 140%; }
.clt-motion .btn:active, .clt-motion .clt-pill:active, .clt-motion .btn-getstarted:active { transform: scale(.97); }

/* Arrows lean forward, icons in tiles lift */
.clt-motion a .bi-arrow-right, .clt-motion button .bi-arrow-right, .clt-motion a .bi-chevron-right { display: inline-block; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.clt-motion a:hover .bi-arrow-right, .clt-motion button:hover .bi-arrow-right, .clt-motion a:hover .bi-chevron-right { transform: translateX(4px); }

/* Vehicle card image zoom */
.clt-motion .vehicle-card { overflow: hidden; }
.clt-motion .vehicle-card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.clt-motion .vehicle-card:hover img { transform: scale(1.06); }

/* Header "Book Now" gentle pulse */
.clt-motion .btn-getstarted { animation: clt-glow 3.5s ease-in-out infinite; }
@keyframes clt-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 18%, transparent); } }

/* Phones: lighter stage */
@media (max-width: 767.98px) {
	.clt-fx-glow::before { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
	.clt-fx-ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-color: color-mix(in srgb, var(--fx) 38%, transparent); }
	/* No shield beside the words on phones: the rings move up to the corner, clear of the text. */
	.clt-wrh { --fx-x: 90%; --fx-y: 10%; }
	.clt-fx-ring:nth-of-type(3) { display: none; }
}

/* ---------- 6. Safety ---------- */
@media (prefers-reduced-motion: reduce) {
	.clt-motion [data-reveal], .clt-motion .nt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.clt-motion *, .clt-motion *::before, .clt-motion *::after { animation: none !important; }
	.clt-tilt { transform: none !important; }
	.clt-fx, .clt-road { display: none; }
}
@media print {
	[data-reveal], .nt-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.clt-progress, .clt-fx, .clt-road, .clt-scene { display: none; }
}