/**
 * polish.css — LeaseRoute site-polish (Tier A + mobiel)
 * Vanilla CSS, alleen transform/opacity animaties, alles gerespecteerd door
 * prefers-reduced-motion. Gebruikt de bestaande design tokens uit base.css
 * (var(--navy), var(--pink), var(--r-lg), ...) — geen nieuwe kleuren/radii.
 */

/* ── 0. Reduced-motion kill-switch — geldt site-breed, ook voor bestaande
   transities (car-card hover, step hover, logos-track) ── */
@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;
  }
}

/* ── M4. Anchor-landing: kop niet achter sticky header laten landen ── */
:root { --lr-header-height: 72px; }
:target, [id] { scroll-margin-top: calc(var(--lr-header-height) + 16px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ══════════════════════════════════════════════════════════════════════
   A1. Hero-reveal (homepage) — gefaseerde entrance bij eerste load
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .lr-reveal { opacity: 0; transform: translateY(24px); animation: lrReveal .7s cubic-bezier(.22,.61,.36,1) forwards; }
  .lr-reveal-1 { animation-delay: .05s; }
  .lr-reveal-2 { animation-delay: .15s; }
  .lr-reveal-3 { animation-delay: .28s; }
  .lr-reveal-4 { animation-delay: .40s; }
  .lr-reveal-5 { animation-delay: .55s; }
}
@keyframes lrReveal { to { opacity: 1; transform: none; } }

/* Hero-autofoto: langzame fade + scale-in op load, subtiele parallax bij scroll.
   Structuur: .hero-car (vaste frame, ongewijzigd) > .hero-car-bg (clip, fade/scale)
   > img.hero-car-img (parallax-drift, blijft binnen de clip). */
.hero-car-bg { position: absolute; inset: 0; overflow: hidden; }
/* Alleen verticaal overschieten (buffer voor de parallax-drift hieronder) —
   niet horizontaal, anders wordt de auto onnodig breder uitgesneden. */
.hero-car-img { position: absolute; top: -16px; bottom: -16px; left: 0; right: 0; width: 100%; height: calc(100% + 32px); object-fit: cover; object-position: center 50%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-car-bg { opacity: 0; transform: scale(1.03); animation: lrHeroImgIn 1s cubic-bezier(.22,.61,.36,1) .2s forwards; }
}
@keyframes lrHeroImgIn { to { opacity: 1; transform: scale(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-car-img { animation: lrPar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes lrPar { from { transform: translateY(-14px); } to { transform: translateY(14px); } }

/* ══════════════════════════════════════════════════════════════════════
   A2. Hero-achtergrond: gloed (dark-hero variant — .hero-dark is navy-deep)
   ══════════════════════════════════════════════════════════════════════ */
.hero-dark { position: relative; }
.hero-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 560px at 78% 8%, color-mix(in oklab, var(--pink) 22%, transparent) 0%, transparent 60%),
    radial-gradient(800px 460px at 6% 96%, color-mix(in oklab, var(--pink) 10%, transparent) 0%, transparent 55%);
}
.hero-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 60%, rgba(0,0,0,.18) 100%);
}
.hero-dark .wrap { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════
   A3. Glass stat-chips — hero-meta (home) + ph-stats (over-ons)
   ══════════════════════════════════════════════════════════════════════ */
.hero-meta > div, .ph-stats .ph-stat {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg, 22px);
  padding: 16px 18px;
}
.hero-meta { border-top: 0 !important; gap: 14px !important; }
.ph-stats { border-top: 0 !important; gap: 14px !important; }
@supports not (backdrop-filter: blur(1px)) {
  .hero-meta > div, .ph-stats .ph-stat { background: rgba(255,255,255,.1); }
}

/* ══════════════════════════════════════════════════════════════════════
   A4. Scroll-reveals (IntersectionObserver zet .is-in, zie polish.js)
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .lr-fade { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.22,.61,.36,1); }
  .lr-fade.is-in { opacity: 1; transform: none; }
  .lr-fade:nth-child(2) { transition-delay: .08s; }
  .lr-fade:nth-child(3) { transition-delay: .16s; }
}

/* ══════════════════════════════════════════════════════════════════════
   M1. Sticky bottom-bar (mobiel, alle pagina's behalve single-auto —
   die heeft al een eigen sticky prijsbalk, zie cockpit.css)
   ══════════════════════════════════════════════════════════════════════ */
.lr-sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(11,25,87,.08);
}
@media (max-width: 767px) {
  .lr-sticky-bar { display: flex; }
  body.lr-cookiebanner-open .lr-sticky-bar { display: none; }
  /* Ruimte reserveren zodat de footer niet achter de balk verdwijnt. */
  body:has(.lr-sticky-bar) { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
}
.lr-sticky-bar__item {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  min-height: 48px; font: 600 14px/1 var(--sans); text-decoration: none;
  color: var(--navy); border-right: 1px solid var(--line);
}
.lr-sticky-bar__item:last-child { border-right: 0; }
.lr-sticky-bar__item--primary { background: var(--pink); color: var(--pink-ink); }

/* ── M2. Touch targets — kleine, veilige verbetering zonder footer-layout
   te verstoren. Volledige 44px-audit op filter-pills/menu-subregels is een
   apart, groter design-punt (zie eindrapport). ── */
@media (max-width: 1024px) {
  .footer .stack-xs a { display: inline-block; padding: 8px 0; }
  .nav-icon-btn { min-width: 44px; min-height: 44px; }
}