/* =============================================================================
   HOOFDDOMEIN (www) — pagina-styling
   Concept "Het Atelier", creatieve overhaul 2026-07-06 (docs/VISIE-OVERHAUL.md):
   DE TEKENTAFEL, GEFILMD VAN BOVEN. De hele pagina is één werkblad
   (--color-bg-desk + korrel); alle content ligt er als vellen en artefacten
   op (materiaal-tokens, DS v2.9.0). Scrollen = over het werkblad bewegen:
   objecten met [data-drift] schuiven op hun eigen diepte mee (www.js zet
   --dy). De titel wordt bij binnenkomst als stempel op het vel gedrukt.
   Uitsluitend semantische design-system-tokens (regel README §8.1).
   Domein-specifiek — verhuist pas naar het design system zodra een tweede
   domein hetzelfde nodig heeft (promotieregel; .sheet is de eerste kandidaat).
   ============================================================================= */

/* ── HET WERKBLAD ─────────────────────────────────────────────────────────
   De paginakleur is de tafel; de korrel ligt over de hele scène (kamera-
   beeld van boven). De header kijkt doorschijnend op de tafel neer. */
body {
  position: relative;
  background: var(--color-bg-desk);
}
body::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  opacity: var(--texture-grain-opacity);
  pointer-events: none;
}
.site-header {
  background: color-mix(in srgb, var(--color-bg-desk) 88%, transparent);
}

/* Drift-lagen: www.js zet --dy (px) per element op basis van de afstand tot
   het viewport-midden × de data-drift-factor. Zonder JS of met
   reduced-motion wordt --dy nooit gezet → alles ligt stil. */
[data-drift] { translate: 0 var(--dy, 0px); }
@media (prefers-reduced-motion: reduce) {
  [data-drift] { translate: 0 0; }
}

/* ── HET VEL — papier op de tafel (main-specifiek; promotiekandidaat) ───── */
.sheet {
  position: relative;
  background-color: var(--color-bg);
  background-image: linear-gradient(155deg, transparent 55%, var(--tint-paper));
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-artefact);
  rotate: var(--tilt, 0deg);
}

/* ── HERO — het hoofdvel op de tekentafel ───────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--space-s) + var(--size-control-s)); /* ruimte spec-ticker */
}
/* Tekentafel-raster — fijne lijnen op de tafel, radiaal uitgemaskeerd,
   trage drift (de tafel "ademt"). */
.hero::before {
  content: '';
  position: absolute;
  inset: -48px;                        /* drift-marge: randen blijven onzichtbaar */
  background-image:
    linear-gradient(to right,  color-mix(in srgb, var(--color-line-strong) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-line-strong) 30%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 95% 90% at 60% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 60% 40%, black 30%, transparent 80%);
  animation: hero-grid-drift 60s linear infinite;
  pointer-events: none;
}
@keyframes hero-grid-drift {
  to { transform: translate(48px, 48px); }
}
.hero-board {
  position: relative;
  padding-block: var(--space-m);
}
.sheet--hero {
  --tilt: var(--tilt-c);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-xl);
  /* het vel laat rechts tafel vrij; de specimens hangen half over de rand */
  margin-right: var(--space-2xl);
}
/* Registratiekruisjes in de hoeken van het vel */
.sheet__cross { position: absolute; }
.sheet__cross--tl { top: var(--space-xs); left: var(--space-xs); }
.sheet__cross--br { bottom: var(--space-xs); right: var(--space-xs); }
.sheet__meta { letter-spacing: 0.04em; }

.hero-title { position: relative; z-index: 2; }
.hero-title em {
  font-style: italic;
  color: var(--color-text-accent);
  position: relative;
}
/* Marker-highlight die zich ná het stempelen onder "gereedschap" zet */
.hero-title em::after {
  content: '';
  position: absolute;
  inset-inline: -0.06em;
  bottom: 0.04em;
  height: 0.32em;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg-accent) 22%, transparent);
  border-radius: var(--radius-s);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out) 900ms;
}
.is-loaded .hero-title em::after { transform: scaleX(1); }
html:not(.js) .hero-title em::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-title em::after { transform: scaleX(1); }
}

/* ── STEMPEL-CHOREOGRAFIE ────────────────────────────────────────────────
   Elke titelregel wordt als een stempel op het vel gedrukt: hij komt
   "van boven" (groot, licht gedraaid, zacht) en slaat neer op zijn plek —
   drie afdrukken na elkaar. inline-block: de regel is precies zo breed als
   zijn tekst, zodat de maatlijn (en de stempel-origin) op de tekst zelf
   ligt. Zonder JS of met reduced-motion staat alles direct. */
.stamp-line { display: block; }
.stamp-line > span {
  display: inline-block;
  opacity: 0;
  transform-origin: left center;
}
.is-loaded .stamp-line > span {
  animation: stamp-press var(--duration-slow) var(--ease-out) forwards;
}
.is-loaded .stamp-line:nth-child(2) > span { animation-delay: 170ms; }
.is-loaded .stamp-line:nth-child(3) > span { animation-delay: 340ms; }
@keyframes stamp-press {
  0%   { opacity: 0; transform: scale(1.28) rotate(-1.2deg); filter: blur(4px); }
  55%  { opacity: 1; transform: scale(0.99) rotate(0.15deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
html:not(.js) .stamp-line > span { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .stamp-line > span { opacity: 1; animation: none; }
}

/* Live maatlijn onder de kop: www.js meet de breedste titelregel op en zet
   --measure-w + het label ("… px · Fraunces 620") — de tekentafel meet
   zichzelf. Zonder JS: volle breedte met het statische label. */
.hero-measure {
  width: var(--measure-w, 100%);
  max-width: 100%;
  color: var(--color-text-accent);
  border-color: var(--color-line-accent);
}
.hero-measure::before,
.hero-measure::after { background: var(--color-line-accent); opacity: 0.6; }

.hero-under {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;
  max-width: var(--container-text);   /* leesbreedte — de kop mag breed, proza niet */
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Zachte binnenkomst van de overige vel-inhoud (na de stempel) */
.hero-reveal {
  opacity: 0;
  transform: translateY(var(--space-xs));
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.is-loaded .hero-reveal { opacity: 1; transform: none; }
.is-loaded .sheet__meta                  { transition-delay: 80ms; }
.is-loaded .hero-measure                 { transition-delay: 620ms; }
.is-loaded .hero-under p.hero-reveal     { transition-delay: 700ms; }
.is-loaded .hero-under .hero-actions     { transition-delay: 800ms; }
html:not(.js) .hero-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-reveal { opacity: 1; transform: none; }
}

/* ── WERKBLAD & SPECIMENS — artefacten half óp het vel ───────────────────
   Materiaal i.p.v. lijntjes: papierverloop, dubbele schaduw, strooihoek.
   Ze driften bij scrollen op hun eigen diepte (data-drift). */
.workbench {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-width: 0;
}
@media (max-width: 1023.98px) {
  /* Mobiel/tablet: compacte horizontale rij onder het vel — anders duwt de
     stapel de hero voorbij de viewport (harde eis: hero past in 100svh). */
  .workbench--strewn {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-s);
    padding-block: var(--space-3xs) var(--space-2xs);
    max-width: 100%;
    scrollbar-width: thin;
  }
  .workbench--strewn .specimen {
    flex: none;
    min-width: 200px;
    padding: var(--space-2xs) var(--space-s);
  }
  /* De hero MOET passen: maatlijn en meta offeren we mobiel voor de vouw,
     de lead zakt één tekstmaat en alles wordt krapper. */
  .hero { padding-top: var(--space-s); }
  .hero-measure, .sheet__meta { display: none; }
  .hero-board { padding-block: var(--space-2xs); }
  .sheet--hero { padding: var(--space-xs) var(--space-m); margin-right: 0; gap: var(--space-xs); }
  .hero-under { gap: var(--space-xs); }
  .hero-under .text-lead {
    font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--text-body-family);
  }
}
@media (min-width: 1024px) {
  .workbench--strewn {
    position: absolute;
    top: calc(var(--space-3xl) + var(--space-xl));
    right: var(--container-gutter);
    bottom: var(--space-2xl);
    width: min(420px, 33%);
    justify-content: center;
    z-index: 2;                       /* de artefacten liggen óp het vel */
  }
  .workbench--strewn .specimen--1     { margin-right: var(--space-2xl); }
  .workbench--strewn .specimen--2     { margin-left: var(--space-xl); }
  .workbench--strewn .specimen--3     { margin-right: var(--space-xl); margin-left: var(--space-l); }
}
.specimen {
  --tilt: 0deg;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  background-color: var(--color-bg-raised);
  background-image: linear-gradient(155deg, transparent 55%, var(--tint-paper));
  border-radius: var(--radius-s);
  padding: var(--space-s) var(--space-m);
  box-shadow: var(--shadow-artefact);
  rotate: var(--tilt);
  transition: transform var(--duration-base) var(--ease-out),
              rotate var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}
.specimen--1 { --tilt: var(--tilt-c); }
.specimen--2 { --tilt: var(--tilt-b); }
.specimen--3 { --tilt: var(--tilt-a); }
a.specimen:hover {
  rotate: 0deg;                        /* oppakken: rechttrekken en optillen */
  transform: translateY(-6px);
  box-shadow: var(--shadow-artefact-lift);
}
@media (prefers-reduced-motion: reduce) {
  a.specimen:hover { rotate: var(--tilt); transform: none; }
}
.specimen__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

/* Specimens "landen" op het werkblad na de stempel */
.hero .specimen { opacity: 0; }
.is-loaded .specimen { opacity: 1; }
.is-loaded .specimen--1 { transition-delay: 500ms; }
.is-loaded .specimen--2 { transition-delay: 620ms; }
.is-loaded .specimen--3 { transition-delay: 740ms; }
html:not(.js) .hero .specimen { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero .specimen { opacity: 1; }
}

/* .specimen__visual (visuele stempel) is gepromoveerd naar
   design-system/components.css §ATELIER-MATERIAAL (tweede gebruiker:
   component. — promotieregel). */

/* Artefact-kaarten in het atelier-grid — recht (geen strooihoek: verzoek
   Ruud), wel het volle materiaal. Het grid krijgt boven wat extra lucht
   zodat de geplakte labels niet tegen de sectiekop plakken. */
.specimen-card .specimen__visual { margin-bottom: var(--space-2xs); }
.card-grid--atelier { padding-top: var(--space-s); }

/* ── SPEC-TICKER — doorlopende strook atelier-feiten in het mono-handschrift.
   Twee identieke groepen in de track; -50% translatie = naadloze loop.
   Reduced-motion: base.css zet alle animaties stil → statische strook. ─── */
.hero-ticker {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-top: var(--border-thin) solid var(--color-line);
  overflow: hidden;
  padding-block: var(--space-xs);
  background: color-mix(in srgb, var(--color-bg-desk) 65%, transparent);
}
.hero-ticker__track {
  display: flex;
  width: max-content;
  animation: hero-ticker 40s linear infinite;
}
.hero-ticker:hover .hero-ticker__track { animation-play-state: paused; }
@keyframes hero-ticker {
  to { transform: translateX(-50%); }
}
.hero-ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}
.hero-ticker__group > span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* separator als pseudo-element: markup blijft schone tekst */
.hero-ticker__group > span::after {
  content: '·';
  color: var(--color-text-accent);
  padding-inline: var(--space-m);
}

/* ── LOSSE MARGINALIA op het werkblad — puur decor, drift op eigen diepte ── */
.desk-scene { position: relative; }
.stray { position: absolute; display: none; }
@media (min-width: 1024px) {
  .stray { display: inline-block; }
  .stray--1 { top: 4%;  right: 2%; }
  .stray--2 { top: 30%; left: 1%;  writing-mode: vertical-rl; }
  .stray--3 { top: 58%; right: 4%; }
  .stray--4 { top: 82%; left: 3%; }
}

/* ── DISCIPLINES — twee overlappende vellen: het getekende (serif, papier)
   en het gebouwde (mono, inverse) liggen óver elkaar op de tafel ────────── */
.duality {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
.duality__vel {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-2xl);
}
@media (min-width: 900px) {
  .duality { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
  .duality__vel--design {
    grid-column: 1 / 8;
    grid-row: 1;
    --tilt: var(--tilt-c);
    /* lege papierruimte rechtsonder: daar komt het code-vel overheen —
       de tekst moet vóór de linkerrand van het code-vel stoppen */
    padding-bottom: var(--space-4xl);
    padding-right: calc(var(--space-4xl) + var(--space-2xl));
  }
  .duality__vel--code {
    grid-column: 7 / 13;
    grid-row: 1;
    --tilt: var(--tilt-b);
    align-self: start;
    margin-top: var(--space-4xl);
    z-index: 2;
  }
}
.duality__vel--code {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.duality__vel--code .text-muted { color: var(--color-text-inverse); opacity: 0.75; }
.duality__vel--code .text-spec  { color: var(--color-text-inverse); opacity: 0.6; }
.duality__title--serif {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
  font-style: italic;
}
.duality__title--mono {
  font-family: var(--font-mono);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: 500;
}
.duality__title--mono::before { content: '// '; color: var(--color-text-accent); }

/* ── HET DUO — potloodnotitie rechtstreeks óp de tafel + notitievel ─────── */
.duo__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  justify-content: center;
}
.duo__quote {
  color: var(--color-text-accent);
  font-style: italic;
}
.duo__vel {
  --tilt: var(--tilt-b);
  padding: var(--space-l);
}

/* ── BINNENPAGINA'S: dualiteitspaneel ────────────────────────────────────
   Gebruikt door over.php (disciplines). Het oude .cta-panel (full-bleed
   accentbalk) is vervangen door het gedeelde CTA-briefje (includes/cta.php,
   verzoek Ruud 2026-07-07: één CTA-component per domein, binnen het grid). */
.disciplines-scene {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .disciplines-scene { grid-template-columns: 1fr 1fr; }
}
.discipline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-3xl) var(--container-gutter);
  min-height: min(60svh, 560px);
}
@media (min-width: 900px) {
  .discipline--design { padding-inline: var(--bleed-pad) var(--space-2xl); }
  .discipline--code   { padding-inline: var(--space-2xl) var(--bleed-pad); }
}
.discipline--design {
  background: var(--color-bg);
}
.discipline--code {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.discipline--code .text-muted { color: var(--color-text-inverse); opacity: 0.75; }
.discipline--code .text-spec  { color: var(--color-text-inverse); opacity: 0.6; }
.discipline__title--serif {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
  font-style: italic;
}
.discipline__title--mono {
  font-family: var(--font-mono);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: 500;
}
.discipline__title--mono::before { content: '// '; color: var(--color-text-accent); }

/* ── CONTACTPAGINA — het formulier als vel op de tafel ──────────────────── */
.contact-sheet {
  --tilt: var(--tilt-c);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-xl) var(--space-xl);
}
.contact-form { max-width: none; }          /* het vel bepaalt de breedte */
.contact-form__send {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.contact-note { justify-content: center; }
.contact-note .measure { max-width: 320px; }
.contact-note__list { list-style: none; margin: 0; padding: 0; }
@media (max-width: 899.98px) {
  .contact-sheet { padding: var(--space-m); }
}

/* ── CONTACT — memo-briefje op de tafel als slotakkoord ───────────────────
   (.cta-scene is gepromoveerd naar het design system — tweede gebruiker:
   de subdomein-CTA's. Hier alleen nog het main-eigen briefje zelf.) */
.cta-note {
  --tilt: var(--tilt-b);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--container-text);
  padding: var(--space-2xl);
}