/* Beweging en diepte voor de voorbeeldontwerpen.
   Geen bibliotheken, geen extra afbeeldingen, alles valt netjes terug:
   zonder JavaScript staat alles gewoon zichtbaar, en wie beweging uitzet
   krijgt dezelfde pagina zonder animatie. */

/* ---------- 1. Onthullen tijdens het scrollen ---------- */

/* Puur CSS, gestuurd door de scrollpositie zelf. Kent een browser dit niet,
   dan gebeurt er niets en staat alles gewoon zichtbaar. Dat is bewust: een
   pagina die op onzichtbaar wacht tot er JavaScript afgaat, kan leeg in beeld
   komen bij een bot, een linkvoorbeeld of een achtergrondtab. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main section:not(.hv-hero):not(.dd-hero):not(.in-hero):not(.sb-hero) > *,
    .hv-kaart, .hv-stap,
    .in-panel, .in-stat, .in-w-item,
    .sb-panel, .sb-stap,
    .dd-w-item, .dd-foto, .dd-ribbon-rij {
      animation: yo-onthul linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}

@keyframes yo-onthul {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Binnenkomst van de hero ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hv-hero,
  .sb-hero,
  .in-hero,
  .dd-hero {
    animation: yo-hero-in 900ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }

  .hv-hero-inner > *,
  .dd-hero .container > *,
  .in-hero .container > *,
  .sb-hero .container > * {
    animation: yo-stijg 760ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
  .hv-hero-inner > :nth-child(1),
  .dd-hero .container > :nth-child(1),
  .in-hero .container > :nth-child(1),
  .sb-hero .container > :nth-child(1) { animation-delay: 120ms; }
  .hv-hero-inner > :nth-child(2),
  .dd-hero .container > :nth-child(2),
  .in-hero .container > :nth-child(2),
  .sb-hero .container > :nth-child(2) { animation-delay: 220ms; }
  .hv-hero-inner > :nth-child(3),
  .dd-hero .container > :nth-child(3),
  .in-hero .container > :nth-child(3),
  .sb-hero .container > :nth-child(3) { animation-delay: 320ms; }
  .hv-hero-inner > :nth-child(n + 4),
  .dd-hero .container > :nth-child(n + 4),
  .in-hero .container > :nth-child(n + 4),
  .sb-hero .container > :nth-child(n + 4) { animation-delay: 420ms; }
}

/* Alleen beweging, geen opacity: zou de animatie om wat voor reden dan ook
   niet draaien, dan staat de hero gewoon leesbaar in beeld. */
@keyframes yo-hero-in {
  from { transform: scale(1.012); }
  to   { transform: none; }
}
@keyframes yo-stijg {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

/* ---------- 3. Korrel over de hero, tegen het platte vlak ---------- */

:where(.hv-hero, .sb-hero, .in-hero, .dd-hero) {
  position: relative;
  isolation: isolate;
}
:where(.hv-hero, .sb-hero, .in-hero, .dd-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 4. Kaarten reageren op de muis ---------- */

:where(
  .hv-kaart, .hv-stap,
  .in-panel, .in-stat, .in-w-item,
  .sb-panel, .sb-stap,
  .dd-w-item, .dd-foto, .dd-ribbon-rij
) {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.7, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(
    .hv-kaart, .hv-stap,
    .in-panel, .in-stat, .in-w-item,
    .sb-panel, .sb-stap,
    .dd-w-item, .dd-foto, .dd-ribbon-rij
  ):hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(8, 12, 18, 0.18);
  }

  /* beeldvlakken zoomen mee binnen hun eigen kader */
  .hv-kaart { overflow: hidden; }
  .hv-kaart-beeld { transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1); }
  .hv-kaart:hover .hv-kaart-beeld { transform: scale(1.05); }

  .sb-spread-img { transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1); }
  .sb-spread-grid:hover .sb-spread-img { transform: scale(1.03); }
}

/* ---------- 5. Glans over de knoppen ---------- */

:where(
  .hv-btn, .hv-hero-cta,
  .in-btn,
  .dd-btn, .dd-btn-groot,
  .sb-cta-link, .sb-link-cta
) {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
:where(
  .hv-btn, .hv-hero-cta,
  .in-btn,
  .dd-btn, .dd-btn-groot
)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-130%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.hv-btn, .hv-hero-cta, .in-btn, .dd-btn, .dd-btn-groot):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(8, 12, 18, 0.22);
  }
  :where(.hv-btn, .hv-hero-cta, .in-btn, .dd-btn, .dd-btn-groot):hover::before {
    transform: translateX(130%);
    transition: transform 0.75s cubic-bezier(0.3, 0.6, 0.2, 1);
  }
}

/* ---------- 6. Zichtbare focus, ook zonder muis ---------- */

.concept-pagina :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 7. Wie beweging uitzet, krijgt rust ---------- */

@media (prefers-reduced-motion: reduce) {
  .hv-hero, .sb-hero, .in-hero, .dd-hero,
  .hv-hero-inner > *, .dd-hero .container > *,
  .in-hero .container > *, .sb-hero .container > * {
    animation: none;
  }
}

/* ---------- 8. Beeldvlakken met een eigen textuur per vakgebied ----------
   Er zijn nog geen echte foto's, en een egaal vlak met "voorbeeldfoto" erin
   leest als onaf werk. Deze patronen zijn opzettelijke vormgeving: ze maken
   het vlak af en wijzen tegelijk naar het vak. Alles is CSS, dus er komt
   geen enkel extra bestand bij. */

:where(.hv-kaart-beeld, .hv-masonry div, .sb-spread-img, .dd-foto .vlak, .hv-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:where(.hv-kaart-beeld, .hv-masonry div, .sb-spread-img, .dd-foto .vlak)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Hovenier: bladvormen, los over het vlak verdeeld. */
:where(.hv-kaart-beeld, .hv-masonry div)::after {
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M30 150c0-40 25-70 65-80-5 45-30 72-65 80z'/%3E%3Cpath d='M30 150c20-18 38-33 65-80'/%3E%3Cpath d='M150 60c0 28-18 49-46 56 4-32 21-50 46-56z'/%3E%3Cpath d='M150 60c-14 13-27 23-46 56'/%3E%3Cpath d='M120 170c18-6 30-20 33-38-19 3-30 17-33 38z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Schilder: brede streken, zoals een kwast over een paneel. */
.sb-spread-img::after {
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23ffffff' stroke-linecap='round' fill='none'%3E%3Cpath d='M-10 40 L170 10' stroke-width='14' opacity='0.5'/%3E%3Cpath d='M-10 85 L170 55' stroke-width='9' opacity='0.35'/%3E%3Cpath d='M-10 125 L170 95' stroke-width='16' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dakdekker: dakpannen in rijen. */
.dd-foto .vlak::after {
  opacity: 0.26;
  mix-blend-mode: soft-light;
  background-size: 72px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M0 36c0-14 8-22 18-22s18 8 18 22'/%3E%3Cpath d='M36 36c0-14 8-22 18-22s18 8 18 22'/%3E%3Cpath d='M-18 12c0-14 8-22 18-22S18-2 18 12'/%3E%3Cpath d='M18 12c0-14 8-22 18-22s18 8 18 22'/%3E%3Cpath d='M54 12c0-14 8-22 18-22s18 8 18 22'/%3E%3C/g%3E%3C/svg%3E");
}

/* Installateur: technisch raster met leidingbochten. */
:where(.in-panel, .in-stats)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-size: 120px 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0 30h120M0 90h120M30 0v120M90 0v120' opacity='0.35'/%3E%3Cpath d='M30 30h30a30 30 0 0 1 30 30v30' stroke-width='3' opacity='0.8'/%3E%3Ccircle cx='30' cy='30' r='4' stroke-width='3'/%3E%3Ccircle cx='90' cy='90' r='4' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}
:where(.in-panel, .in-stats) { position: relative; isolation: isolate; }

/* De bijschriften blijven leesbaar boven het patroon. */
:where(.hv-masonry div, .sb-spread-img) { z-index: 0; }