/* ============================================================
   EasyAutoVerkoop — 05-patterns.css — hero, zekerheden, stappen, USP,
   sectiekoppen, CTA + trage runtime-effecten (prop-for-that)
   Versie 1.1.1 · 2026-09-14
   ============================================================ */

/* === Hero === */

.Eav-hero {
  position: relative;
  isolation: isolate;
  min-block-size: min(88dvh, 60rem);
  display: grid;
  align-items: center;
  padding-block: var(--eav-space-2xl);
  overflow: clip;
}
/* LCP-beeld als echt <img>: absoluut achter de inhoud */
.Eav-hero .Eav-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
}
.Eav-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--eav-grad-glow), var(--eav-grad-hero);
}
.Eav-hero-copy { max-inline-size: 42rem; }

/* === Zekerheden-strip === */

.Eav-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--eav-space-s);
}
.Eav-trust-item {
  display: flex;
  align-items: center;
  gap: var(--eav-space-xs);
  padding: var(--eav-space-s) var(--eav-space-m);
  border-radius: var(--eav-radius-lg);
  background-color: var(--eav-clr-surface);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  font-weight: 600;
}
.Eav-trust-item::before {
  content: "";
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: var(--eav-radius-pill);
  background-image: var(--eav-grad-accent);
}

/* === Stappen === */

.Eav-card.Eav-step {
  display: grid;
  gap: var(--eav-space-s);
  align-content: start;
  padding: 0;
  overflow: clip;
}
/* Foto edge-to-edge: geen padding, geen eigen radius, geen max-width van GB/GP.
   Twee classes op elke selector zodat 04-components én theme.css verliezen. */
.Eav-card.Eav-step > .Eav-image-cover,
.Eav-card.Eav-step > img {
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0 0 var(--eav-space-2xs);
}
.Eav-card.Eav-step > :not(img) { margin-inline: var(--eav-space-l); }
.Eav-card.Eav-step > :last-child { margin-block-end: var(--eav-space-l); }
.Eav-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eav-space-s);
}
@media (prefers-reduced-motion: no-preference) {
  .Eav-step { transition: translate var(--eav-transition-base), box-shadow var(--eav-transition-base), border-color var(--eav-transition-base); }
  .Eav-step:hover { translate: 0 -4px; box-shadow: var(--eav-shadow-lg); border-color: transparent; }
}

/* === USP in brand-band === */

.Eav-usp {
  display: grid;
  gap: var(--eav-space-xs);
  padding: var(--eav-space-m);
  border-radius: var(--eav-radius-xl);
  background-color: color-mix(in oklch, var(--eav-raw-paper) 8%, transparent);
  border: 1px solid var(--eav-clr-border);
}

/* === Sectiekop === */

.Eav-section-head {
  display: grid;
  gap: var(--eav-space-s);
  max-inline-size: 46rem;
}
.Eav-section-head-center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* === CTA-band: kop + knoprij, gecentreerd === */

.Eav-cta .Eav-section-head { margin-inline: auto; }

/* === Trage runtime-effecten (prop-for-that) ==========================
   Alle effecten zijn opt-in via prefers-reduced-motion en werken zonder
   de library (fallback-waarden in var()). Bewust traag: 1–1.6s.
   Attribuut op het block: data-props-for="visibility" en/of "pointer-local". */

@media (prefers-reduced-motion: no-preference) {

  /* Reveal: latcht zodra het element volledig in beeld is geweest.
     Alleen op elementen kleiner dan een viewport (koppen, cards), nooit op secties. */
  .Eav-reveal {
    opacity: calc(0.12 + var(--const-has-entered, 1) * 0.88);
    translate: 0 calc((1 - var(--const-has-entered, 1)) * 2rem);
    transition:
      opacity 1.2s var(--eav-ease),
      translate 1.2s var(--eav-ease);
  }
  .Eav-reveal-2 { transition-delay: 150ms; }
  .Eav-reveal-3 { transition-delay: 300ms; }
  .Eav-reveal-4 { transition-delay: 450ms; }
  /* Lage viewports (landscape-telefoon, kleine laptop): een hoge kaart past
     nooit volledig in beeld en zou nooit latchen. Dan geen reveal. */
  @media (max-height: 44em) {
    .Eav-reveal { opacity: 1; translate: none; }
  }

  /* Tilt: kaart kantelt 4° mee met de muis, met 1s naijling */
  .Eav-tilt {
    transform:
      perspective(1400px)
      rotateX(calc((0.5 - var(--live-local-pointer-y-ratio)) * 4deg))
      rotateY(calc((var(--live-local-pointer-x-ratio) - 0.5) * 4deg));
    transition: --live-local-pointer-x-ratio 1s var(--eav-ease), --live-local-pointer-y-ratio 1s var(--eav-ease);
    will-change: transform;
  }

  /* Spotlight: accent-glow volgt de muis over de band, 1.6s naijling */
  .Eav-spotlight::after {
    background-image:
      radial-gradient(
        44rem circle at calc(var(--live-local-pointer-x-ratio) * 100%) calc(var(--live-local-pointer-y-ratio) * 100%),
        color-mix(in oklch, var(--eav-raw-accent) 22%, transparent) 0%,
        transparent 65%
      ),
      var(--eav-grad-hero);
    transition: --live-local-pointer-x-ratio 1.6s var(--eav-ease), --live-local-pointer-y-ratio 1.6s var(--eav-ease);
  }
  .Eav-band-glow.Eav-spotlight::before {
    background-image:
      radial-gradient(
        50% 50% at calc(var(--live-local-pointer-x-ratio) * 100%) calc(var(--live-local-pointer-y-ratio) * 100%),
        color-mix(in oklch, var(--eav-raw-accent) 26%, transparent) 0%,
        transparent 70%
      );
    transition: --live-local-pointer-x-ratio 1.6s var(--eav-ease), --live-local-pointer-y-ratio 1.6s var(--eav-ease);
  }
}