/* SAFETY FALLBACK — toegevoegd 2026-05-17 omdat IntersectionObserver in WP
 * niet altijd correct triggert. Content moet ALTIJD zichtbaar zijn ook
 * zonder JS. .reveal blijft animatie-class voor wie wil, maar default = visible.
 */
.reveal { opacity: 1 !important; transform: none !important; }

/* ============================================================================
 * ONE Risk Advisory — motion-hero (Amsterdam-canal video) · sessie 13+
 *
 * Volledige scherm hero met video-achtergrond, frosted-glass header,
 * stats-spread, reveal-animaties. Geladen door functions.php op
 * is_front_page() (zelfde mechanisme als path-hero.css uit v1).
 *
 * Tokens komen uit tokens.css (--color-*, --space-*, --font-*).
 * Single source: preview-v2.html — bij wijziging eerst daar testen,
 * dan via scripts/extract-motion-hero-css.py opnieuw genereren.
 *
 * GENERATED — niet handmatig editen.
 * ========================================================================== */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 12vw, 160px) var(--space-2xl) clamp(64px, 10vw, 120px);
}

.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.5);
  opacity: 0.32;
}

.hero::before {
  content:""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 60% at 88% 22%, rgba(245, 183, 9, 0.12), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(245, 183, 9, 0.08), transparent 55%);
}

.hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, black 0%, transparent 80%);
}

.hero__inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5xl); align-items: center;
}

.hero__meta {
  display: flex; gap: var(--space-lg); align-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--space-3xl);
}

.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 16px var(--color-accent);
  animation: pulse 2.4s ease-in-out infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--color-text-primary);
}

.hero__title em {
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

.hero__title .punct { color: var(--color-accent); }

.hero__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: var(--space-2xl) 0 var(--space-2xl);
}

.hero__ctas { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }

.hero__stats {
  margin-top: var(--space-4xl);
  display: grid; grid-template-columns: repeat(4, auto);
  gap: var(--space-3xl);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--space-xl);
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px); line-height: 1;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  display: block;
  letter-spacing: -0.02em;
}

.hero__stat-num small { font-size: 0.5em; color: var(--color-accent); margin-left: 4px; }

.hero__stat-lbl {
  margin-top: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  display: block;
}

.hero__visual {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  min-height: 520px;
  padding-right: var(--space-3xl);
}

.reveal { opacity: 0; transform: translateY(18px); animation: rise 1100ms var(--ease-standard) forwards; }

.reveal-1 { animation-delay: 100ms; }

.reveal-2 { animation-delay: 240ms; }

.reveal-3 { animation-delay: 380ms; }

.reveal-4 { animation-delay: 520ms; }

.reveal-5 { animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .hero__dot { animation: none; }
}

.hero--motion {
  min-height: 100vh;
  display: flex; align-items: center;
  /* Geen horizontale padding op de sectie — video moet full-bleed lopen
   * tot de viewport-randen. Padding zit in .hero__inner zodat tekst-content
   * exact dezelfde inset heeft als de header (zie .site-header__inner). */
  padding: 110px 0 70px;
}

.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Tuned voor Amsterdam-canal daglight (hero-amsterdam.mp4): brighter dan
   * lobby-tuning, lichte desaturatie voor sobere boardroom-look, contrast-bump
   * voor scherpere canal-architectuur. */
  filter: brightness(0.78) saturate(0.92) contrast(1.04);
}

.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Sessie 24 (2026-05-26): max overlay-opacity teruggebracht van 78% → 25%
     * op gebruiker-mandaat. Gradient-curve behouden voor tekst-leesbaarheid
     * links zonder de canal-architectuur dicht te dekken. */
    linear-gradient(105deg, rgba(31,58,68,0.25) 0%, rgba(31,58,68,0.17) 45%, rgba(31,58,68,0.09) 70%, rgba(31,58,68,0.15) 100%),
    /* Subtiele mustard-accent vignet rechtsboven */
    radial-gradient(80% 60% at 88% 18%, rgba(245,183,9,0.10), transparent 60%);
}

.hero--motion .hero__grid { z-index: 1; }

.hero--motion .continuum-bols { z-index: 1; }

.hero--motion .hero__inner {
  /* EXACT zelfde recipe als .site-header__inner — display:block ipv grid,
   * margin:0 auto voor centering, padding-left = var(--space-2xl) zodat
   * content-start exact onder het logo zit. !important om base-rule
   * `display: grid; grid-template-columns: 1.1fr 1fr; align-items: center`
   * volledig te neutraliseren. */
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-2xl) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: initial !important;
}

.hero--motion .hero__inner > div {
  margin: 0; padding: 0;
}

.hero--motion .hero__meta { margin-bottom: var(--space-lg); color: rgba(255,255,255,0.78); }

.hero--motion .hero__title {
  /* Groter font per Hans-review: van clamp(44/6.4vw/96) → clamp(56/8vw/132).
   * Behoud line-height 1.02 voor compacte stelling. */
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1.00;
  font-weight: var(--weight-semibold);
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.32);
  color: #FFFFFF;
}

.hero--motion .hero__title em { color: var(--color-yellow-500); }

.hero--motion .hero__title .punct { color: var(--color-yellow-500); }

.hero--motion .hero__lead {
  color: rgba(255,255,255,0.90);
  /* Breder per Hans-review: van 56ch → 88ch zodat de lead over ~3 regels loopt
   * ipv 5. Tekst-grootte iets opgehoogd voor balans met de grotere titel. */
  max-width: 88ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  margin: var(--space-lg) 0 var(--space-lg);
  text-shadow: 0 1px 12px rgba(0,0,0,0.30);
}

.hero--motion .hero__stats {
  margin-top: var(--space-lg);
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  /* Verwijder max-width zodat de 4 stats over de volle hero-breedte
   * verdeeld worden ipv geclusterd-links. Voorkomt ook overlap met
   * de centrale scroll-cue (Europa-stat schuift nu naar de rechter
   * rand, ver van de center-positioned SCROLL). */
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--space-md);
}

/* Elke stat is een flex-kolom over de volle (uitgerekte) celhoogte,
   zodat het label met margin-top:auto naar onderen kan worden geduwd. */
.hero--motion .hero__stats > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hero--motion .hero__stat-num {
  /* Iets groter (was clamp 32/3.4vw/44 → clamp 36/4vw/56) voor balans
   * met de grotere hero-titel. */
  font-size: clamp(36px, 4vw, 56px);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 12px rgba(0,0,0,0.32);
}

.hero--motion .hero__stat-num small {
  color: var(--color-yellow-500);
  font-weight: var(--weight-semibold);
  margin-left: 2px;
  vertical-align: top;
  font-size: 0.55em;
}

.hero--motion .hero__stat-lbl {
  color: rgba(255,255,255,0.72);
  /* Iets groter (was 10px → 12px) voor readability. */
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.4;
  /* Bottom-align: duw het label naar de onderkant van de uitgerekte cel,
     zodat alle labels op dezelfde lijn als "Regio" staan. padding-top
     bewaart een vaste tussenruimte boven het label, ook bij de
     3-regelige Regio-stat. */
  margin-top: auto;
  padding-top: var(--space-sm);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(255,255,255,0));
  position: relative; overflow: hidden;
}

.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 1px; height: 50%;
  background: var(--color-yellow-500);
  animation: scrollDrop 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
  .hero__video { opacity: 0.45; }
}

@media (max-width: 900px) {
  .hero--motion .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); max-width: none; }
  .hero--motion .hero__stat-num { font-size: clamp(28px, 7vw, 36px); }
}

@media (max-width: 960px) {
  .hero { padding: 80px 24px 60px; }
  .hero__inner { grid-template-columns: 1fr; gap: 60px; }
  .hero__visual { min-height: 360px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}