/* ==========================================================================
   CarAssist landing REDESIGN — component styles
   Source of truth: Figma "Car Assistent" frame `home page - 1` (2033:200).
   Everything is scoped under `.ca-redesign` so it never leaks into the
   existing app (engineer panel, checkout, current live landing).
   Tailwind utilities carry most styling; this file holds only what
   utilities can't express cleanly (dashed road line, base font).
   ========================================================================== */

.ca-redesign {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #1c1c1c;
  background: #ffffff;
  /* Fixed Figma canvas width. JS sets `zoom = viewportWidth / 1400` so the whole
     1400px design fills any screen 1:1 with Figma — full-bleed bands reach the
     edges, content hugs the edges (no centered-1400 drift on wide screens).
     ponytail: this scales the desktop canvas to fit width; a true mobile layout
     is a separate pass — below ~768px this just renders a small desktop view. */
  width: 1400px;
}

/* Force Montserrat on EVERY descendant — the app's global `h1/h2 { font-family: Rubik }`
   (element selector, specificity 0,0,1) otherwise overrides the container's inherited
   font. `.ca-redesign *` (0,1,0) wins, so headings/inputs/buttons all get Montserrat. */
.ca-redesign,
.ca-redesign *,
.ca-m-menu,
.ca-m-menu * {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   MOBILE canvas + desktop/mobile switch.
   The mobile port is a fixed 390px canvas (Figma `home page - mobile`,
   2106:9458); JS sets `zoom = viewportWidth / 390` so it renders 1:1 on any
   phone. It carries BOTH `.ca-redesign` (base font/colour) and `.ca-redesign-m`
   (390px width override, 0,2,0 beats the base 1400px). Desktop shows ≥768px,
   mobile <768px. ========================================================== */
.ca-redesign.ca-redesign-m { width: 390px; }
.ca-redesign-m { display: none; }               /* hidden on desktop screens */
@media (max-width: 767px) {
  .ca-redesign:not(.ca-redesign-m) { display: none; }   /* hide desktop canvas */
  .ca-redesign.ca-redesign-m { display: block; }
}

/* ---- slide-in mobile menu (burger target). Fixed to the viewport, real px,
   outside the zoomed canvas so it overlays correctly. ---- */
.ca-m-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ca-m-menu.is-open { visibility: visible; opacity: 1; }
.ca-m-menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.ca-m-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 80vw;
  max-width: 320px;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  padding: 72px 30px 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ca-m-menu.is-open .ca-m-menu-panel { transform: translateX(0); }
.ca-m-menu-x {
  position: absolute; top: 15px; right: 16px;
  width: 30px; height: 30px; border-radius: 9999px;
  background: #1c1c1c; display: flex; align-items: center; justify-content: center;
}
.ca-m-menu-nav { display: flex; flex-direction: column; gap: 34px; }
.ca-m-menu-nav a,
.ca-m-menu-nav button {
  color: #1c1c1c; font-size: 16px; font-weight: 700;
  text-transform: uppercase; line-height: 1.2;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.ca-m-menu-div {
  height: 2px; margin: 28px 0;
  background: repeating-linear-gradient(to right, #1c1c1c 0, #1c1c1c 12px, transparent 12px, transparent 23px);
}
.ca-m-menu-social { display: flex; gap: 24px; margin-top: 40px; }
.ca-m-msgr {
  width: 44px; height: 44px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}
/* swipeable brand strip — native touch scroll, hidden scrollbar */
.ca-m-brands-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ca-m-brands-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .ca-m-menu { display: none; } }

/* Dashed "road" line under the header — 12px dash, 11px gap, 2px tall, #1C1C1C */
.ca-redesign .ca-road-line {
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #1c1c1c 0,
    #1c1c1c 12px,
    transparent 12px,
    transparent 23px
  );
}

/* ==========================================================================
   HERO — parts-reveal animation (ported from the designer's BMW parts reveal)
   Motion: each satellite part flies in (translateX/Y + scale 0.6→1 + fade),
   staggered; leader-lines draw in after; parts idle-float. Car stays static.
   Gated behind .armed (JS ready) + .is-played (scrolled into view).
   ========================================================================== */
@keyframes ca-partX {
  from { transform: translateX(var(--dx)); }
  to   { transform: translateX(0); }
}
@keyframes ca-partY {
  from { transform: translateY(var(--dy)) scale(0.6); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes ca-float {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}
/* Connector line "uncover": a white overlay line wipes off the gray dashed
   line, so the dash appears to draw itself from part → car. */
@keyframes uncover {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 1; }
}

/* Base (no JS / final state): white overlay gone, gray dashed line visible. */
.ca-hero .uncover-line { stroke-dashoffset: 1; }

/* Armed (JS connected): hold parts at their start offset, hidden;
   white overlay fully covers the gray line (connector hidden). */
.ca-hero.armed .reveal-x     { transform: translateX(var(--dx)); }
.ca-hero.armed .reveal-y     { transform: translateY(var(--dy)) scale(0.6); opacity: 0; }
.ca-hero.armed .uncover-line { stroke-dashoffset: 0; }

/* Played (scrolled in): run the reveal. `both` fill leaves the final state. */
.ca-hero.is-played .reveal-x     { animation: ca-partX 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both; }
.ca-hero.is-played .reveal-y     { animation: ca-partY 1.35s cubic-bezier(0.3, 1.08, 0.35, 1) var(--d) both; }
.ca-hero.is-played .reveal-float { animation: ca-float var(--fdur) ease-in-out var(--fdelay) infinite; }
.ca-hero.is-played .uncover-line { animation: uncover 0.5s ease-out var(--ld) forwards; }

@media (prefers-reduced-motion: reduce) {
  .ca-hero .reveal-x, .ca-hero .reveal-y, .ca-hero .reveal-float {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ca-hero .uncover-line { animation: none !important; stroke-dashoffset: 1; }
}

/* Success toast for the "Надіслати запит" form (fixed, real px - lives outside the
   zoom-scaled canvas). Fades in, holds, fades out over 5s. */
@keyframes ca-toast {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  8%   { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 12px); visibility: hidden; }
}
.ca-toast-anim { animation: ca-toast 5s ease forwards; }

/* Floating brand-logo tiles ("Перевірені бренди") - gentle vertical bob,
   reuses ca-float (+-3px). Per-tile phase via inline animation-delay. */
.ca-logo-tile { animation: ca-float 3s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ca-logo-tile { animation: none !important; transform: none !important; } }