/* ============================================
   Logo crash animation (assets/js/logo-crash.js)
   The car leaves the logo, knocks the menu flying and dents itself on
   Start My Search. Clicking the flashing button puts everything back.
   ============================================ */

.header__logo.is-crashing .brand-logo { display: none !important; }

.crash-logo { position: relative; display: block; z-index: 2; }
.crash-logo .p { position: absolute; display: block; }
.crash-logo .p img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.crash-logo .extra { opacity: 0; }
.crash-logo .car,
.crash-logo .body,
.crash-logo .part { position: absolute; inset: 0; display: block; }
.crash-logo .body { transform-origin: 20% 60%; }
.crash-logo .rear { clip-path: inset(-20% 32% -20% -20%); }
.crash-logo .front { clip-path: inset(-20% -20% -20% 68%); transform-origin: 68% 55%; }
.crash-logo .wheel { transform-origin: 50% 50%; }
.crash-logo .crease { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; }
.crash-logo .crease polyline {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crash-debris { position: relative; z-index: 4; will-change: transform; pointer-events: none; }
.crash-cta { position: relative; z-index: 3; }

.crash-cta.is-hazard { animation: crash-hazard 0.7s steps(1) infinite; }
@keyframes crash-hazard {
  0% { background: var(--color-accent); color: #fff; box-shadow: 0 0 0 0 transparent; }
  50% { background: #f2a900; color: #1a1d24; box-shadow: 0 0 0 8px rgba(242, 169, 0, 0.35); }
}

.crash-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 5;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-text);
  color: var(--color-surface);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.crash-tip.is-shown { opacity: 1; transform: none; }

.crash-puff {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-text-muted) 55%, transparent);
  pointer-events: none;
  z-index: 101;
}

.header__actions { position: relative; }