/* ============================================================
   HORIZON MOTORS — shared design system
   Sleek "showroom" identity. Distinct from Meridian AND the
   roofer demo: geometric Space Grotesk display type, near-black
   blue base, electric blue→cyan gradients, glassmorphism,
   animated mesh, immersive vehicle cards (tilt + shine sweep).
   Layout uses Tailwind (CDN); this file owns identity + motion.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand:#3b82f6; --brand2:#22d3ee; --grad:linear-gradient(120deg,#3b82f6,#22d3ee);
  --bg:#0a0b10; --panel:#11131c; --panel2:#161a27; --line:#242838; --line2:#323750;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,sans-serif; }
.font-display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-.02em; }
.u-track{ letter-spacing:.16em; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- Animated gradient mesh (hero) ---- */
.mesh{
  background-color:var(--bg);
  background-image:
    radial-gradient(42% 55% at 18% 18%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(40% 50% at 82% 28%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(55% 65% at 60% 95%, rgba(99,102,241,.16), transparent 60%);
  background-size:200% 200%;
  animation:meshpan 18s ease-in-out infinite;
}
@keyframes meshpan{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } }
.dotgrid{ background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:30px 30px; }

/* ---- Glass surfaces ---- */
.glass{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

/* ---- Eyebrow ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; }
.eyebrow .grad-text{ font-weight:700; }
.eyebrow .bar{ width:30px; height:2px; background:var(--grad); display:inline-block; border-radius:2px; }

/* ---- Buttons (pill, gradient / glass) ---- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:999px;
  transition:transform .18s ease, box-shadow .2s, background .2s; cursor:pointer; border:0; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--grad); color:#06121f; box-shadow:0 12px 30px -10px rgba(34,211,238,.55); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(34,211,238,.7); }
.btn--glass{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px); }
.btn--glass:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--dark{ background:#0a0b10; color:#fff; border:1px solid var(--line2); }
.btn--dark:hover{ transform:translateY(-2px); border-color:var(--brand); }

/* ---- Immersive tilt + glare ---- */
.tilt-wrap{ perspective:1100px; }
.tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; will-change:transform; position:relative; }
.tilt .glare{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(56,189,248,.22), transparent 60%); }
.tilt:hover .glare{ opacity:1; }

/* ---- Vehicle cards (glass + image zoom + shine sweep) ---- */
.veh{ position:relative; overflow:hidden; border-radius:1rem; background:var(--panel); border:1px solid var(--line); }
.veh:hover{ border-color:var(--line2); box-shadow:0 30px 60px -24px rgba(0,0,0,.7); }
.veh .ph{ position:relative; overflow:hidden; }
.veh .ph .art{ transition:transform .6s cubic-bezier(.22,1,.36,1); }
.veh:hover .ph .art{ transform:scale(1.08); }
.veh .shine{ position:absolute; top:0; left:-60%; width:55%; height:100%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.veh:hover .shine{ animation:shine .9s ease; }
@keyframes shine{ to{ left:130%; } }
.chip{ font-size:.72rem; font-weight:600; padding:.32rem .7rem; border-radius:999px; border:1px solid var(--line2); color:#cbd5e1; background:rgba(255,255,255,.03); }
.chip--grad{ border:0; color:#06121f; background:var(--grad); }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.from-l{ transform:translateX(-32px); } .reveal.from-l.in{ transform:none; }
.reveal.from-r{ transform:translateX(32px); } .reveal.from-r.in{ transform:none; }

/* ---- Marquee ---- */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:3rem; align-items:center; animation:marquee 28s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee__item{ font-family:'Space Grotesk',sans-serif; letter-spacing:.1em; color:#475069; font-weight:600; display:inline-flex; align-items:center; gap:3rem; }

.count{ font-variant-numeric:tabular-nums; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.floaty{ animation:floaty 7s ease-in-out infinite; }

/* ============================================================
   Chatbot widget (markup injected by showcase-dealership.js)
   ============================================================ */
.cw{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:60; display:flex; flex-direction:column; align-items:flex-end; }
.cw-fab{ width:3.5rem; height:3.5rem; border-radius:999px; background:var(--grad); color:#06121f; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 14px 30px -8px rgba(34,211,238,.55);
  transition:transform .2s; position:relative; }
.cw-fab:hover{ transform:scale(1.06); }
.cw-fab .dot{ position:absolute; top:-5px; right:-5px; width:1.15rem; height:1.15rem; border-radius:999px; background:#22d3ee; color:#06121f;
  font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }
.cw-panel{ margin-bottom:.75rem; width:92vw; max-width:23rem; height:520px; max-height:78vh; background:var(--panel2);
  border:1px solid var(--line2); border-radius:1.1rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right; animation:cwpop .22s ease; color:#e8edf6; }
@keyframes cwpop{ from{ opacity:0; transform:translateY(12px) scale(.97);} to{ opacity:1; transform:none;} }
.cw-head{ background:linear-gradient(120deg,rgba(59,130,246,.18),rgba(34,211,238,.12)); padding:.85rem 1rem; display:flex; align-items:center; gap:.75rem; border-bottom:1px solid var(--line2); }
.cw-head .av{ width:2.25rem; height:2.25rem; border-radius:999px; background:var(--grad); color:#06121f; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.cw-log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--panel); }
.cw-row{ display:flex; } .cw-row.me{ justify-content:flex-end; }
.cw-msg{ max-width:82%; padding:.6rem .85rem; border-radius:14px; font-size:.875rem; line-height:1.5; }
.cw-msg.bot{ background:#1b2030; border:1px solid var(--line2); border-bottom-left-radius:4px; }
.cw-msg.me{ background:var(--grad); color:#06121f; font-weight:500; border-bottom-right-radius:4px; }
.cw-quick{ padding:0 1rem .5rem; display:flex; flex-wrap:wrap; gap:.4rem; background:var(--panel); }
.cw-chip{ font-size:.72rem; font-weight:600; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.03); color:#cbd5e1; cursor:pointer; transition:.2s; }
.cw-chip:hover{ border-color:var(--brand); color:#fff; }
.cw-foot{ padding:.7rem; border-top:1px solid var(--line2); display:flex; gap:.5rem; background:var(--panel2); }
.cw-input{ flex:1; padding:.55rem .8rem; border-radius:999px; border:1px solid var(--line2); background:var(--bg); color:#e8edf6; font-size:.875rem; outline:none; }
.cw-input:focus{ border-color:var(--brand); }
.cw-send{ width:2.5rem; height:2.5rem; border-radius:999px; background:var(--grad); color:#06121f; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cw-typing span{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#475069; animation:cwbounce 1s infinite; }
.cw-typing span:nth-child(2){ animation-delay:.15s; } .cw-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes cwbounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5;} 40%{ transform:translateY(-5px); opacity:1;} }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track, .floaty, .mesh, .cw-typing span, .veh:hover .shine{ animation:none !important; }
  html{ scroll-behavior:auto; }
}