/* ============================================================================
   overal.css (7 okt 2026). Staat op elke pagina van de conceptsite, als laatste
   stylesheet, dus bovenop site.css en de eigen css van een pagina.

   1. het menu in de kopbalk: "Wat we bouwen" klapt uit naar de vijf pagina's
   2. zachte kleurovergangen tussen de secties
   3. een zachte overgang van de ene pagina naar de andere
   4. de kop van de homepage: het raster loopt onderaan zacht weg

   Waarom (Thijs, 7 okt): de losse pagina's waren slecht te vinden, de kleuren
   sprongen hard van de ene sectie naar de volgende, en de overgang van de kop
   naar wat daarna komt mocht soepeler.
   ========================================================================== */

/* ---------- 1. het menu ---------- */
.menu { position: relative; }
.kopbalk nav .menu__knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--tekst-2);
  white-space: nowrap;
  touch-action: manipulation;
}
.menu__knop svg { transition: rotate .3s var(--veer); }
.menu:hover .menu__knop, .menu.is-open .menu__knop { color: var(--tekst); }
.menu.is-open .menu__knop svg { rotate: 180deg; }
@media (hover: hover) { .menu:hover .menu__knop svg { rotate: 180deg; } }

/* Het paneel hangt onder de knop. De bovenste rand is een onzichtbare brug,
   anders valt het dicht als de muis van de knop naar het paneel gaat. */
.menu__paneel {
  position: absolute; top: 100%; right: -18px; z-index: 60;
  width: min(380px, calc(100vw - 32px)); padding-top: 18px;
  visibility: hidden; opacity: 0; translate: 0 -6px;
  transition: opacity .22s var(--veer), translate .3s var(--veer), visibility 0s linear .22s;
}
.menu.is-open .menu__paneel {
  visibility: visible; opacity: 1; translate: 0 0;
  transition: opacity .22s var(--veer), translate .3s var(--veer), visibility 0s;
}
@media (hover: hover) {
  .menu:hover .menu__paneel, .menu:focus-within .menu__paneel {
    visibility: visible; opacity: 1; translate: 0 0;
    transition: opacity .22s var(--veer), translate .3s var(--veer), visibility 0s;
  }
}
.menu__lijst {
  display: grid; gap: 2px; padding: 8px; margin: 0; list-style: none;
  border-radius: 16px; border: 1px solid var(--lijn-2);
  background: var(--opp);
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--inkt) 70%, transparent), var(--schaduw-1);
}
.kopbalk nav .menu__lijst a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 2px 12px;
  padding: 10px 12px; border-radius: 11px; text-decoration: none; color: var(--tekst);
  transition: background .2s var(--veer);
}
.kopbalk nav .menu__lijst a::after { display: none; }
.kopbalk nav .menu__lijst a:hover, .kopbalk nav .menu__lijst a:focus-visible { background: var(--opp-3); }
.kopbalk nav .menu__lijst a[aria-current="page"] { background: color-mix(in srgb, var(--roest) 12%, var(--opp)); }
.menu__ico {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--roest-tekst);
  background: color-mix(in srgb, var(--roest) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--roest) 26%, transparent);
}
.menu__lijst b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.menu__lijst small { font-size: 12.5px; line-height: 1.35; color: var(--tekst-3); }
.menu__lijst li + li.menu__los { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--lijn); }

/* op een telefoon: het paneel over de hele breedte onder de kopbalk */
@media (max-width: 640px) {
  .menu { position: static; }
  .menu__paneel { right: 16px; left: 16px; width: auto; padding-top: 10px; }
  .kopbalk__in { position: relative; }
  .kopbalk nav { gap: 16px; }
}
@media (max-width: 420px) {
  .kopbalk nav .menu-contact { display: none; }
}
/* de kleinste telefoons: alles iets dichter op elkaar, anders valt de
   kleurknop rechts van het scherm af */
@media (max-width: 360px) {
  .kopbalk__in { gap: 10px; padding-inline: 14px; }
  .kopbalk nav { gap: 10px; }
  .kopbalk nav a.kopbalk__inlog { padding: 0 12px; }
  .kopbalk__logo { height: 20px; }
}

/* ---------- 2. zachte kleurovergangen tussen de secties ----------
   Elke sectie weet welke kleur de sectie erboven had (--van) en begint
   daarmee. Over een flinke band loopt die kleur weg in zijn eigen kleur. Het
   verloop is met de hand gemaakt uit acht stappen, zodat het zacht begint en
   zacht eindigt en je geen rand ziet waar het ophoudt.

   In de lichte stand is het verschil tussen inkt en papier groot. Daar blijft
   de band binnen de witruimte boven de kop van de sectie, anders komt donkere
   tekst op een donker verloop te staan. */
:root { --band: 260px; }
:root[data-thema="licht"] { --band: 120px; }
@media (max-width: 640px) { :root { --band: 120px; } }

:is(.hero, .pa-kop, .zone, .pa-zone, .overgang) + :is(.zone, .pa-zone) {
  --van: var(--vlak);
  background-image: linear-gradient(to bottom,
    var(--van) 0,
    color-mix(in oklab, var(--van) 96%, transparent) 10%,
    color-mix(in oklab, var(--van) 86%, transparent) 22%,
    color-mix(in oklab, var(--van) 68%, transparent) 36%,
    color-mix(in oklab, var(--van) 46%, transparent) 52%,
    color-mix(in oklab, var(--van) 24%, transparent) 70%,
    color-mix(in oklab, var(--van) 8%, transparent) 86%,
    transparent 100%);
  background-size: 100% var(--band);
  background-repeat: no-repeat;
}
:is(.zone--inkt, .pa-zone--inkt) + :is(.zone, .pa-zone) { --van: var(--inkt); }
.zone--papier + :is(.zone, .pa-zone) { --van: var(--opp); }
.pa-zone--zacht + :is(.zone, .pa-zone) { --van: var(--opp-2); }

/* de glans bovenin een zachte of inkt-sectie lag als harde rand op de grens */
.pa-zone--zacht::before, .pa-zone--inkt::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--band));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--band));
}

/* De overgang van de kop naar de eerste sectie op de homepage. Eerst een band
   van 82 pixels; nu een lange, zachte afloop. Het kleurverschil zit in de
   sectie eronder (zie hierboven), dus deze strook is alleen nog lucht. */
.overgang { height: clamp(24px, 4vw, 56px); background: var(--vlak); }

/* de voet: geen streep meer, de laatste sectie loopt erin over */
.voet { border-top: 0; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--inkt) 40%, var(--vlak)) 100%); }

/* ---------- 3. van pagina naar pagina ----------
   De browser laat de oude pagina vervagen in de nieuwe, in plaats van een
   harde wissel met een flits. De kopbalk blijft staan. Doet een browser dit
   nog niet, dan gaat het gewoon zoals altijd. */
@view-transition { navigation: auto; }
.kopbalk { view-transition-name: kopbalk; }
::view-transition-old(root) { animation: pagina-uit .22s ease both; }
::view-transition-new(root) { animation: pagina-in .38s var(--veer) both; }
@keyframes pagina-uit { to { opacity: 0; } }
@keyframes pagina-in { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- 4. de kop van de homepage ----------
   Het raster stopte met een rechte onderrand, met daaronder een lege band.
   Nu loopt het onderaan weg, zodat de kop zonder rand overgaat in de pagina. */
.hero--midden .doek {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}
.hero--midden { padding-bottom: 0; }
.hero--midden .vast { min-height: clamp(600px, 86dvh, 860px); }

/* ---------- 5. Websites: een klein venster op de voorbeeldsite ----------
   Thijs, 8 okt: het voorbeeld moet duidelijker. De oranje knop gaat nu naar
   het voorbeeld, het gesprek staat ernaast; daaronder een klein browservenster
   waarin de villa van Steenvlijt zich opbouwt. Het hele venster is een link.
   Bij "minder beweging" staat er de afgebouwde villa als foto. */
.mini-site {
  display: grid; gap: 12px; justify-items: center;
  width: min(100%, 380px); margin: clamp(28px, 4vw, 44px) auto 0;
  color: var(--tekst-2); text-decoration: none;
}
.mini-site__raam {
  width: 100%; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--lijn-2); background: var(--opp);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55), 0 0 0 6px color-mix(in oklab, var(--opp) 55%, transparent);
  transform: perspective(900px) rotateX(5deg);
  transition: transform .5s var(--veer), box-shadow .5s var(--veer);
}
.mini-site:hover .mini-site__raam, .mini-site:focus-visible .mini-site__raam {
  transform: perspective(900px) rotateX(0deg) translateY(-4px);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .65), 0 0 0 6px color-mix(in oklab, var(--opp) 55%, transparent);
}
.mini-site__balk { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
.mini-site__balk i { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn-2); }
.mini-site__balk span {
  flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: var(--opp-2);
  font-size: 11px; letter-spacing: .02em; color: var(--tekst-3); text-align: left;
}
.mini-site video, .mini-site img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mini-site img { display: none; }
.mini-site__onder { font-size: 14px; }
.mini-site__onder b { color: var(--tekst); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .mini-site video { display: none; }
  .mini-site img { display: block; }
  .mini-site__raam, .mini-site:hover .mini-site__raam { transform: none; transition: none; }
}