/* Filmable homepage-hero (3D-camera). Alles hangt onder #filmable-hero, zodat Elementor/Blocksy er niet bij kunnen
   en deze stijlen niets anders op de site raken. Lettertypen: Raleway en Tanker laadt de pagina al. */
#filmable-hero {
  --fh-accent: #FFAB00;
  --fh-ink: #f4f1ea;
  --fh-muted: rgba(244, 241, 234, .62);
  --fh-top: 92px;                                  /* ruimte voor de doorzichtige menubalk bovenin */
  position: relative; width: 100%;
  height: 100vh; height: 100svh; min-height: 600px;
  overflow: hidden; color: var(--fh-ink); font-family: Raleway, system-ui, sans-serif;
  background:
    radial-gradient(60% 70% at 70% 45%, #221b10 0%, rgba(20,16,10,.6) 35%, transparent 70%),
    linear-gradient(180deg, #0d0c0b 0%, #080808 100%);
}
#filmable-hero *, #filmable-hero *::before, #filmable-hero *::after { box-sizing: border-box; }
#filmable-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

/* geen WebGL: de oude foto als achtergrond */
#filmable-hero.fh-no3d { background: #000 url("../wp-content/uploads/2025/07/WhatsApp-Image-2025-06-14-at-13.06.47-scaled-e1753223554120.jpeg") 50% 50% / cover; }
#filmable-hero.fh-no3d::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.2)); }
#filmable-hero.fh-no3d canvas, #filmable-hero.fh-no3d .fh-hint, #filmable-hero.fh-no3d .fh-rec { display: none; }

/* korrel, zodat het donker niet "digitaal" oogt */
#filmable-hero::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: fh-grain 1s steps(4) infinite;
}
@keyframes fh-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }

/* zoekerlijnen: jij staat in beeld */
#filmable-hero .fh-frame { position: absolute; top: var(--fh-top); right: 22px; bottom: 22px; left: 22px; pointer-events: none; }
#filmable-hero .fh-frame i { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(244,241,234,.35); }
#filmable-hero .fh-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
#filmable-hero .fh-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
#filmable-hero .fh-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
#filmable-hero .fh-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
#filmable-hero .fh-rec {
  position: absolute; top: calc(var(--fh-top) + 14px); right: 46px; font: 600 12px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .12em; color: var(--fh-muted); display: flex; gap: 10px; align-items: center; pointer-events: none;
}
#filmable-hero .fh-rec b { width: 8px; height: 8px; border-radius: 50%; background: #e3261c; box-shadow: 0 0 10px #e3261c; animation: fh-blink 1.2s steps(2) infinite; }
@keyframes fh-blink { 50% { opacity: .15; } }

#filmable-hero .fh-copy {
  position: absolute; z-index: 2; left: clamp(24px, 7vw, 120px); top: 50%; transform: translateY(-50%);
  max-width: min(560px, 44vw);
}
#filmable-hero .fh-eyebrow {
  font: 600 13px/1.4 Raleway, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fh-accent); margin: 0 0 18px; padding: 0;
}
#filmable-hero .fh-title {
  font-family: Tanker, Anton, Impact, sans-serif; font-weight: 900; margin: 0; padding: 0; color: var(--fh-ink);
  font-size: clamp(44px, 5.6vw, 92px); line-height: .96; letter-spacing: .005em; text-transform: uppercase;
}
#filmable-hero .fh-lead { font: 400 clamp(16px, 1.25vw, 19px)/1.6 Raleway, system-ui, sans-serif; color: var(--fh-muted); margin: 22px 0 32px; max-width: 34ch; }
#filmable-hero .fh-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
#filmable-hero .fh-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 999px;
  font: 700 15px/1.2 Raleway, system-ui, sans-serif; text-decoration: none; transition: transform .2s, background .2s;
}
#filmable-hero .fh-btn:hover { transform: translateY(-2px); }
#filmable-hero .fh-btn.fh-primary, #filmable-hero .fh-btn.fh-primary:hover { background: var(--fh-accent); color: #111; }
#filmable-hero .fh-btn.fh-ghost, #filmable-hero .fh-btn.fh-ghost:hover { color: var(--fh-ink); box-shadow: inset 0 0 0 1.5px rgba(244,241,234,.3); }
#filmable-hero .fh-btn.fh-ghost:hover { background: rgba(244,241,234,.08); }
#filmable-hero .fh-btn .fh-short { display: none; }

#filmable-hero .fh-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%); margin: 0;
  font: 400 12px/1 Raleway, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--fh-muted);
  transition: opacity .6s; pointer-events: none; white-space: nowrap;
}

/* tekst boven de camera: telefoon en hoge, smalle vensters (klasse wordt in hero.js gezet) */
#filmable-hero.fh-stacked .fh-copy { left: clamp(22px, 6vw, 64px); right: clamp(22px, 6vw, 64px); top: calc(var(--fh-top) + clamp(44px, 6vh, 64px) + env(safe-area-inset-top));   /* onder de REC-regel */ transform: none; max-width: 640px; }
@media (max-width: 767px) {
  #filmable-hero { --fh-top: 72px; }
  #filmable-hero .fh-title { font-size: clamp(38px, 11vw, 54px); }
  #filmable-hero .fh-lead { margin: 14px 0 20px; font-size: 15px; }
  #filmable-hero .fh-ctas { flex-wrap: nowrap; gap: 10px; }
  #filmable-hero .fh-btn { padding: 13px 18px; font-size: 14px; white-space: nowrap; }
  #filmable-hero .fh-btn .fh-long { display: none; }
  #filmable-hero .fh-btn .fh-short { display: inline; }
  #filmable-hero .fh-rec { right: 28px; }
  #filmable-hero .fh-frame { right: 12px; bottom: 12px; left: 12px; }
  #filmable-hero .fh-hint { bottom: calc(30px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #filmable-hero::after, #filmable-hero .fh-rec b { animation: none; }
}

/* introtekst direct onder de hero (Elementor-blok 45e3494): de kopjes-kolom is weg (staat nu in de hero),
   dus de tekst krijgt ademruimte en een leesbare breedte */
.elementor-1579 .elementor-element.elementor-element-45e3494 { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(24px, 4vw, 56px); }
.elementor-1579 .elementor-element.elementor-element-c098970 { max-width: 860px; padding-left: clamp(24px, 7vw, 120px); padding-right: 24px; }