/* ============================================================
   FEATURE-PAGINA — de laag boven op het designsysteem, prefix `fw-`

   Hoort bij het paginatype uit BOUWGIDS §5.11b. Referentiepagina:
   /agenda-en-zalen. Dit stylesheet verandert NIETS aan de bestaande
   secties; het bevat alleen de hero, het klantverhaal en een laag die
   je óver een bestaande sectie legt (radiants, uurraster, potlood-
   achtergrond, voordelenrij). Elke kleur komt uit tokens.css.

   Laadvolgorde: tokens → chrome → base → components → ems-gedeeld →
                 ems-feature → feature.css
   ============================================================ */

/* ---------- 0. De laag ---------------------------------------------- */

/* Radiants: twee hele grote, hele zachte lichtvlekken in Avondzon en
   lavendel die traag over de band drijven. Zet `.fw-radiant` op een
   bestaande <section> en er verandert verder niets aan die sectie. */
.fw-radiant { position: relative; isolation: isolate; overflow: hidden; }
.fw-radiant > * { position: relative; z-index: 1; }
.fw-radiant::before,
.fw-radiant::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(60px);
}
.fw-radiant::before {
  width: 78vw; height: 78vw; max-width: 1100px; max-height: 1100px;
  left: -22vw; top: -30%;
  background: radial-gradient(closest-side, rgba(255,153,102,.16), rgba(255,153,102,0) 70%);
  animation: fw-drift-a 34s var(--ease) infinite alternate;
}
.fw-radiant::after {
  width: 66vw; height: 66vw; max-width: 900px; max-height: 900px;
  right: -18vw; bottom: -34%;
  background: radial-gradient(closest-side, rgba(192,199,250,.20), rgba(192,199,250,0) 70%);
  animation: fw-drift-b 46s var(--ease) infinite alternate;
}
/* Op inkt mag het sterker: daar is het een nevel in plaats van een waas. */
.section--dark.fw-radiant::before { background: radial-gradient(closest-side, rgba(255,153,102,.22), rgba(255,153,102,0) 70%); }
.section--dark.fw-radiant::after  { background: radial-gradient(closest-side, rgba(192,199,250,.24), rgba(192,199,250,0) 70%); }

@keyframes fw-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.12); } }
@keyframes fw-drift-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-5vw,-5vh,0) scale(1); } }

/* Het uurraster: de handtekening van déze pagina. Nauwelijks zichtbare
   uurkolommen en zaalbanen, gemaskeerd zodat ze aan de randen oplossen.
   Voeg hem toe als leeg <div> binnen een sectie — hij raakt niets aan. */
.fw-raster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 45%, #000 32%, transparent 82%);
          mask-image: radial-gradient(120% 92% at 50% 45%, #000 32%, transparent 82%);
}
.fw-raster::before {
  content: ""; position: absolute; inset: -1px;
  background:
    repeating-linear-gradient(90deg, rgba(244,244,245,.075) 0 1px, transparent 1px var(--fw-kolom, 76px)),
    repeating-linear-gradient(0deg,  rgba(244,244,245,.045) 0 1px, transparent 1px var(--fw-baan, 58px));
}
/* Op de hero ligt hij óver de film maar ónder de scrim. */
.fw-raster--hero { z-index: 1; }
/* De potloodagenda: het oude planbord onder het nieuwe scherm. Eén SVG
   (frame/schets.mjs) met bibberende lijnen, dagnamen, datums, ingekraste
   boekingen en één omcirkelde zaterdag. Ligt bovenop het uurraster, zodat
   je het ruitjespapier er nog doorheen ziet. */
.fw-schets {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  color: var(--c-ink); opacity: .085;
  -webkit-mask-image: radial-gradient(115% 90% at 50% 42%, #000 30%, transparent 84%);
          mask-image: radial-gradient(115% 90% at 50% 42%, #000 30%, transparent 84%);
}
.fw-schets img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill;   /* de hele maand moet passen, ook de dagnamen */
}
/* De doorlopende tijdlijn: één warme lijn die in 26 seconden de dag doorloopt. */
.fw-nu {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,153,102,.8) 18%, rgba(255,153,102,.8) 82%, transparent);
  box-shadow: 0 0 26px 3px rgba(255,153,102,.38);
  animation: fw-nu-loop 26s linear infinite;
}
.fw-nu::before {
  content: ""; position: absolute; top: 12%; left: 50%; width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--c-orange); box-shadow: 0 0 16px 4px rgba(255,153,102,.7);
}
@keyframes fw-nu-loop {
  from { left: 4%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { left: 96%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-radiant::before, .fw-radiant::after, .fw-nu, .fw-hero-gloed, .fw-badge i { animation: none; }
  .fw-nu { left: 38%; }
}

/* ---------- 1. De hero (het enige nieuwe blok) ----------------------- */
.fw-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-dark); color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  padding-block: clamp(5rem, 12vh, 9rem) 0;
}
.fw-hero-media { position: absolute; inset: 0; z-index: 0; }
.fw-hero-media video, .fw-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim in PIXELS vanaf links: de tekstkolom donker, de rechterkant van
   het beeld zo goed als onaangeraakt (BOUWGIDS §5.8). */
.fw-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23,23,29,.94) 0, rgba(23,23,29,.88) 420px, rgba(23,23,29,.58) 780px, rgba(23,23,29,.24) 1120px, rgba(23,23,29,.08) 100%),
    linear-gradient(180deg, rgba(23,23,29,.74) 0, rgba(23,23,29,0) 26%, rgba(23,23,29,0) 50%, rgba(23,23,29,.88) 100%);
}
.fw-hero-gloed {
  position: absolute; z-index: 1; pointer-events: none;
  left: -14vw; top: 4%; width: 62vw; height: 62vw; max-width: 860px; max-height: 860px;
  background: radial-gradient(closest-side, rgba(255,153,102,.30), rgba(255,153,102,0) 68%);
  filter: blur(40px);
  animation: fw-drift-a 30s var(--ease) infinite alternate;
}
.fw-hero > .container { position: relative; z-index: 2; }

.fw-hero-tekst { max-width: 40rem; }
.fw-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--c-on-dark);
  border: 1px solid rgba(255,153,102,.42); border-radius: var(--r-pill);
  padding: .42rem .95rem .42rem .7rem;
  background: rgba(255,153,102,.10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fw-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); flex: 0 0 auto;
  animation: fw-puls 2.6s ease-out infinite;
}
@keyframes fw-puls {
  0%        { box-shadow: 0 0 0 0 rgba(255,153,102,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255,153,102,0); }
}

.fw-hero h1 { margin: var(--sp-5) 0 0; max-width: 17ch; }
.fw-hero h1 .accent { color: var(--c-orange); }
.fw-hero .lead { margin-top: var(--sp-5); max-width: 44ch; color: rgba(244,244,245,.84); }
.fw-hero-acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* De mockup klimt over de onderrand van de hero heen. */
.fw-hero-bewijs {
  position: relative; z-index: 2;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(-10rem, -15vw, -5.5rem);
}
.fw-duo { display: grid; grid-template-columns: 1fr 15rem; gap: var(--sp-5); align-items: end; }
.fw-scherm {
  border-radius: var(--r-media); overflow: hidden;
  background: var(--c-surface); border: 1px solid rgba(244,244,245,.18);
  box-shadow: var(--shadow-pop), 0 0 90px -30px rgba(255,153,102,.4);
}
.fw-scherm img { display: block; width: 100%; height: auto; }
.fw-scherm-balk {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-soft); border-bottom: 1px solid var(--c-line);
}
.fw-scherm-balk i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-strong); opacity: .5; }
.fw-scherm-url { margin-left: var(--sp-3); font-size: .75rem; color: var(--c-ink-40); letter-spacing: .02em; }
.fw-telefoon {
  border-radius: var(--r-showcase); overflow: hidden;
  border: 6px solid var(--c-ink); background: var(--c-ink); box-shadow: var(--shadow-pop);
}
.fw-telefoon img { display: block; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: 0 0; }
@media (max-width: 860px) { .fw-duo { grid-template-columns: 1fr; } .fw-telefoon { display: none; } }
@media (max-width: 720px) {
  .fw-hero-scrim {
    background: linear-gradient(180deg, rgba(23,23,29,.90) 0, rgba(23,23,29,.78) 50%, rgba(23,23,29,.94) 100%);
  }
  /* Een 16:9-film wordt op een telefoon zo hard bijgesneden dat er alleen een
     middenstrook overblijft. Staat het onderwerp in de rechterhelft (de robot
     op /automatische-opvolging), zet dan deze modifier op .fw-hero-media zodat
     het venster meeschuift en hij in beeld blijft. */
  .fw-hero-media--rechts video,
  .fw-hero-media--rechts img { object-position: 72% center; }
}

/* Ruimte voor de klimmende mockup in de sectie die erna komt. */
.fw-na-hero { padding-top: clamp(9rem, 18vw, 14rem); }

/* ---------- 2. Klantverhaal ------------------------------------------
   Eén op één overgenomen uit `paginas/gedeeld/proto.css` van de Ik wil…-
   pagina's (`.pv-getuige`), alleen hernoemd. Grote locatiefoto als
   ondergrond, het gezicht van wie het zegt, en het logo van de locatie
   groot genoeg om herkend te worden. */
.fw-getuige {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  padding-block: clamp(4rem, 12vh, 7rem);
  display: flex;
  align-items: center;
  min-height: min(80vh, 44rem);
}
.fw-getuige-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fw-getuige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 29, 0.92) 0%, rgba(23, 23, 29, 0.78) 45%, rgba(23, 23, 29, 0.42) 100%),
    linear-gradient(0deg, rgba(23, 23, 29, 0.55) 0px, rgba(23, 23, 29, 0) 320px);
}
.fw-getuige > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .fw-getuige > .container { grid-template-columns: 1fr; }
  .fw-getuige::before {
    background: linear-gradient(0deg, rgba(23, 23, 29, 0.93) 0%, rgba(23, 23, 29, 0.82) 55%, rgba(23, 23, 29, 0.6) 100%);
  }
}

.fw-getuige blockquote { margin: 0; max-width: 34rem; }
.fw-getuige-logo {
  height: clamp(3rem, 5vw, 4.5rem);
  width: auto;
  max-width: 20rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-5);
}
.fw-getuige .eyebrow { color: var(--c-orange); }
.fw-getuige q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  font-weight: 700;
  quotes: "\201E" "\201C";
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.fw-getuige blockquote p { color: rgba(244, 244, 245, 0.82); max-width: 46ch; }
.fw-getuige blockquote .btn { margin-top: var(--sp-5); }

.fw-getuige-kaart {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: grid;
  justify-items: center;
}
.fw-getuige-kaart .portret { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.fw-getuige-kaart figcaption {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  text-align: center;
  display: grid;
  gap: 2px;
}
.fw-getuige-kaart figcaption b { font-weight: 500; }
.fw-getuige-kaart figcaption span { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* ---------- 3. De bestaande strand-band krijgt de tijdlijn erbij ----- */
.fw-strand { position: relative; isolation: isolate; }
.fw-strand .em-strand-scrim { z-index: 1; }
.fw-strand > .container { position: relative; z-index: 2; }

/* ---------- De plaatshouder voor de twee films ----------------------- */
.fw-filmnoot {
  position: absolute; z-index: 3; right: var(--sp-4); top: var(--sp-4);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--c-ink); background: var(--c-orange); border-radius: var(--r-pill);
  padding: .3rem .75rem; opacity: .9;
}

/* Het kader om een productscherm zit NIET in CSS maar in de afbeelding,
   net als op /event-management. Zie frame/monteer.mjs: dat plakt een kale
   schermafdruk in visuals/feature-visual.png. De sectie gebruikt gewoon
   .em-rij-beeld, ongewijzigd. */

/* ---------- Voordelenrij op de overgang ------------------------------
   Vult het gat tussen de hero-mockup en de kop van het tab-blok. Zelfde
   tegel-taal als `.ems-quick` uit het feature-recept (wit, dunne rand,
   lijnicoon van 26px), maar horizontaal — zo overbrugt hij de sprong van
   de donkere hero naar de lichte band in plaats van hem te laten gapen. */
.fw-voordelen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  list-style: none; padding: 0;
  /* iets omhoog, zodat de rij bij de mockup hoort en niet los in de band hangt */
  margin: clamp(-2.75rem, -2.4vw, -1.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.fw-voordelen li {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
}
.fw-voordelen img { width: 26px; height: 26px; object-fit: contain; margin-bottom: var(--sp-2); }
.fw-voordelen b { font-weight: 500; font-size: var(--fs-h4); line-height: 1.2; }
.fw-voordelen span { font-size: var(--fs-small); color: var(--c-ink-soft); }
@media (max-width: 1000px) { .fw-voordelen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fw-voordelen { grid-template-columns: 1fr; } }