/* Homepage-only styles: loaded on the front page only. */

/* ---------- Hero: animated road scene ---------- */
.ck-hero { isolation: isolate; }
.ck-hero::before { /* slow drifting orange glow */
	content: ""; position: absolute; z-index: 0; width: 70vmax; height: 70vmax; right: -25vmax; top: -35vmax;
	background: radial-gradient(circle, rgba(244, 81, 42, .45) 0%, rgba(244, 81, 42, 0) 60%);
	animation: ck-glow 12s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes ck-glow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.15); } }

.ck-hero__content { z-index: 2; padding-bottom: 120px; }
.ck-hero__controls { z-index: 4; bottom: 96px; }
.ck-hero__kicker { display: inline-flex; align-items: center; gap: 8px; }
.ck-hero__kicker::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--ck-primary); animation: ck-grow .9s ease-out both; transform-origin: left; }
@keyframes ck-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ck-hero__slide.is-active .ck-hero__title,
.ck-hero__content--plain .ck-hero__title { animation: ck-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.ck-hero__slide.is-active .ck-hero__summary,
.ck-hero__content--plain .ck-hero__summary { animation: ck-rise .8s .12s cubic-bezier(.2, .8, .2, 1) both; }
.ck-hero__slide.is-active .ck-hero__cta,
.ck-hero__content--plain .ck-hero__cta { animation: ck-rise .8s .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ck-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ck-hero__img img { animation: ck-kenburns 18s ease-out both; }
@keyframes ck-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }

.ck-road { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 1; pointer-events: none; overflow: hidden; }
.ck-road::before { /* asphalt */
	content: ""; position: absolute; inset: auto 0 0 0; height: 34px; background: linear-gradient(#1F2937, #0B1220);
	border-top: 2px solid rgba(255, 255, 255, .12);
}
.ck-road__lane { position: absolute; left: 0; bottom: 15px; width: 200%; height: 4px;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 38px, transparent 38px 84px);
	animation: ck-lane 1.4s linear infinite; }
@keyframes ck-lane { to { transform: translateX(-84px); } }
.ck-road__car { position: absolute; bottom: 20px; left: 0; width: 190px; animation: ck-drive 16s linear infinite; will-change: transform; }
@keyframes ck-drive { from { transform: translateX(-220px); } to { transform: translateX(calc(100vw + 40px)); } }
.ck-car-svg { width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); animation: ck-bounce .5s ease-in-out infinite alternate; }
@keyframes ck-bounce { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.ck-wheel { transform-box: fill-box; transform-origin: center; animation: ck-spin .45s linear infinite; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-headbeam { animation: ck-beam 1.2s ease-in-out infinite alternate; }
@keyframes ck-beam { from { opacity: .35; } to { opacity: .8; } }

/* Real car photo variant */
.ck-road--photo { height: calc(var(--ck-car-w, 300px) * .42 + 18px); }
.ck-road--photo .ck-road__car { width: var(--ck-car-w, 300px); bottom: 14px; }
.ck-road__photo { width: 100%; height: auto; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .5)); animation: ck-bounce .6s ease-in-out infinite alternate; }
.ck-road__photo.is-flipped { transform: scaleX(-1); animation: none; }
@media (max-width: 699px) { .ck-road--photo { --ck-car-w: min(var(--ck-car-w, 300px), 200px); } }

/* ---------- Quick finder (overlaps hero) ---------- */
.ck-finder { position: relative; z-index: 5; margin-top: -48px; margin-bottom: 8px; }
.ck-finder__card { background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: 18px; padding: 18px; box-shadow: 0 18px 40px rgba(17, 24, 39, .18); }
.ck-finder__title { font-size: 1.15rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ck-finder__title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ck-primary); animation: ck-pulse 1.8s ease-out infinite; }
@keyframes ck-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 81, 42, .6); } 100% { box-shadow: 0 0 0 12px rgba(244, 81, 42, 0); } }
.ck-finder__form { display: grid; gap: 12px; grid-template-columns: 1fr; }
.ck-finder__budget { margin-top: 14px; }
.ck-finder__budget p { margin: 0 0 6px; font-size: .85rem; font-weight: 600; color: var(--ck-text-2); }
.ck-chipnav { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.ck-chipnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--ck-border); background: #fff; color: var(--ck-text); text-decoration: none; font-weight: 600; font-size: .9rem; position: relative; overflow: hidden; transition: transform .2s, border-color .2s, background .2s; }
.ck-chipnav a:hover { transform: translateY(-2px); border-color: var(--ck-primary); background: #FFF4F0; }

/* ---------- Brand ticker ---------- */
.ck-brands { background: #111827 !important; color: #fff; padding-block: 18px; overflow: hidden; }
.ck-brands__label { margin: 0 0 8px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #FDBA74; }
.ck-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ck-marquee__track { display: flex; gap: 12px; width: max-content; animation: ck-marquee 38s linear infinite; }
.ck-marquee:hover .ck-marquee__track, .ck-marquee:focus-within .ck-marquee__track { animation-play-state: paused; }
@keyframes ck-marquee { to { transform: translateX(-50%); } }
.ck-marquee__list { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ck-marquee a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.ck-marquee a:hover, .ck-marquee a:focus-visible { background: var(--ck-primary); color: var(--ck-on-primary); }

/* ---------- Stats ---------- */
.ck-stats { background: linear-gradient(135deg, #1F2937, #111827) !important; color: #fff; }
.ck-stats__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); text-align: center; }
.ck-stat { padding: 18px 8px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.ck-stat__num { display: block; font-size: 2.2rem; font-weight: 800; color: #FDBA74; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ck-stat__label { font-size: .85rem; color: #D1D5DB; }

/* ---------- Section polish ---------- */
.ck-section__head h2 { position: relative; padding-bottom: 8px; }
.ck-section__head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; border-radius: 4px; background: var(--ck-primary); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ck-section__head.is-in h2::after, .ck-js .ck-section__head:not(.ck-reveal) h2::after { width: 72px; }
.ck-car, .ck-article { transition: transform .25s ease, box-shadow .25s ease; }
.ck-car:hover, .ck-car:focus-within, .ck-article:hover, .ck-article:focus-within { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(17, 24, 39, .14); }
.ck-car .ck-card__img img, .ck-article .ck-card__img img { transition: transform .5s ease; }
.ck-car:hover .ck-card__img img, .ck-article:hover .ck-card__img img { transform: scale(1.06); }
.ck-btn--primary { position: relative; overflow: hidden; }
.ck-btn--primary::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.ck-btn--primary:hover::after { animation: ck-shine .7s ease; }
@keyframes ck-shine { to { left: 130%; } }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.ck-js .ck-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.ck-js .ck-reveal.is-in { opacity: 1; transform: none; }

@media (min-width: 700px) {
	.ck-finder__form { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
	.ck-stats__grid { grid-template-columns: repeat(4, 1fr); }
	.ck-road__car { width: 230px; }
}

/* ---------- Reduced motion: everything calm and static ---------- */
@media (prefers-reduced-motion: reduce) {
	.ck-hero::before, .ck-hero__img img, .ck-hero__kicker::before, .ck-hero__title, .ck-hero__summary, .ck-hero__cta,
	.ck-road__lane, .ck-car-svg, .ck-wheel, .ck-headbeam, .ck-finder__title::before, .ck-marquee__track { animation: none !important; }
	.ck-road__car { animation: none !important; left: auto; right: 8%; }
	.ck-js .ck-reveal { opacity: 1; transform: none; transition: none; }
	.ck-marquee { overflow-x: auto; }
	.ck-marquee__track { width: auto; flex-wrap: wrap; }
	.ck-marquee__list[aria-hidden="true"] { display: none; }
	.ck-car:hover, .ck-article:hover { transform: none; }
}