/* ============================================
   FRESH FENDERS — Design-system craft layer
   Shared by the standalone landing pages so they
   match the main site: interactive before/after
   sliders, tactile button presses, reduced motion.
   Tokens fall back gracefully to each page's own vars.
   ============================================ */

:root {
  --ds-gold: var(--gold, var(--accent, #c9a84c));
  --ds-navy: var(--bg-navy, var(--navy, #0a1628));
  --ds-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Interactive Before / After Slider ──
   Two full-size stacked images; the "before" is revealed by clip-path.
   A visually-hidden range input drives it (drag + touch + keyboard). */
.ba-slider {
  position: relative;
  width: 100%;
  height: clamp(260px, 32vw, 380px);
  overflow: hidden;
  border-radius: 10px;
  touch-action: none;
  user-select: none;
  background: var(--ds-navy);
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-before { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba-slider .ba-tag {
  position: absolute;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10,22,40,0.78);
  padding: 3px 9px;
  border-radius: 3px;
}
.ba-slider .ba-tag.before { left: 12px; }
.ba-slider .ba-tag.after  { right: 12px; }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--ds-gold);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(10,22,40,0.55);
  z-index: 3;
}
.ba-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ds-gold);
  color: var(--ds-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  box-shadow: 0 2px 12px rgba(10,22,40,0.35);
  transition: transform 160ms var(--ds-ease-out);
}
.ba-slider:hover .ba-grip { transform: translate(-50%, -50%) scale(1.06); }
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 4;
}
.ba-range:focus-visible ~ .ba-grip {
  box-shadow: 0 0 0 4px rgba(201,168,76,0.45), 0 2px 12px rgba(10,22,40,0.35);
}

/* ── Button press feedback — confirms the tap on every button ── */
.btn:active, .btn-gold:active, .btn-outline:active, .btn-ghost:active,
.btn-lg:active, .btn-block:active, .phone-btn:active, .size-btn:active,
.btn-cta:active, .btn-cta-phone:active, .btn-next:active, .btn-back:active,
.btn-call:active, .play-btn:active {
  transform: scale(0.97);
}

/* ── Reduced motion: drop movement, keep content visible ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}