/* ================================================================
   components.css — nav, footer, cursor, scroll-progress,
   project-kaarten, sub-brand kolommen, plate, cta
   ================================================================ */

/* ============================== BOOT CURTAIN ============================== */

.boot-curtain {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2000;
  pointer-events: none;
  animation: boot-curtain-fade 320ms ease forwards;
}

/* ============================== SCROLL PROGRESS ============================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1500;
  pointer-events: none;
  background: transparent;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--cc-accent);
  transform-origin: left center;
  transform: scaleX(calc(var(--scroll-progress) * 1));
  transition: transform 60ms linear;
}

/* ============================== CURSOR ============================== */

.cc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--cc-text-primary);
  pointer-events: none;
  z-index: 1800;
  transform: translate3d(-50%, -50%, 0);
  transition:
    width 220ms var(--cc-ease),
    height 220ms var(--cc-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    opacity 200ms ease;
  mix-blend-mode: normal;
  opacity: 0;
}
.cc-cursor.is-ready { opacity: 1; }

[data-mode="inverse"] ~ * .cc-cursor,
body[data-mode="inverse"] .cc-cursor { border-color: var(--cc-inverse-primary); }

/* Cursor neemt mode-class via JS — eenvoudige toggle */
.cc-cursor[data-mode="inverse"] { border-color: var(--cc-inverse-primary); }

.cc-cursor.is-hot {
  width: 28px; height: 28px;
  background: var(--cc-accent);
  border-color: var(--cc-accent);
}

@media (hover: none), (pointer: coarse) {
  .cc-cursor { display: none; }
}

/* ============================== NAV ============================== */

.cc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--cc-nav-h);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cc-gutter);
  background: transparent;
  color: var(--cc-inverse-primary);
  transition:
    background-color var(--cc-dur-base) ease,
    color var(--cc-dur-base) ease,
    border-color var(--cc-dur-base) ease,
    backdrop-filter var(--cc-dur-base) ease;
  border-bottom: 1px solid transparent;
}

.cc-nav.is-on-default {
  background: rgba(245, 239, 224, 0.92);
  color: var(--cc-primary);
  border-bottom-color: var(--cc-border-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cc-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  color: inherit;
}
.cc-nav__brand .cc-mark {
  width: 24px; height: 24px; font-size: 14px;
}
.cc-nav.is-on-default .cc-mark {
  background: var(--cc-primary);
  color: var(--cc-surface);
}
.cc-nav__name {
  font-family: var(--cc-font-display);
  font-size: 14px;
  letter-spacing: var(--cc-tracking-wordmark);
  text-transform: uppercase;
}

.cc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--cc-space-8);
}
.cc-nav__links a {
  font-family: var(--cc-font-body);
  font-size: 14px;
  color: inherit;
  opacity: 0.7;
  position: relative;
  padding: 4px 0;
  transition: opacity var(--cc-dur-fast) ease;
}
.cc-nav__links a:hover { opacity: 1; }
.cc-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--cc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cc-dur-base) var(--cc-ease);
}
.cc-nav__links a:hover::after { transform: scaleX(1); }

.cc-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px; height: 22px;
  align-items: stretch;
  justify-content: center;
}
.cc-nav__toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--cc-dur-base) ease, opacity var(--cc-dur-fast) ease;
}
.cc-nav.is-open .cc-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cc-nav.is-open .cc-nav__toggle span:nth-child(2) { opacity: 0; }
.cc-nav.is-open .cc-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .cc-nav__links { display: none; }
  .cc-nav__toggle { display: flex; }
}

/* ---- Mobile menu overlay ---- */

.cc-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--cc-inverse-surface);
  color: var(--cc-inverse-primary);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cc-dur-base) ease;
}
.cc-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cc-mobile-menu ul {
  display: flex; flex-direction: column;
  gap: var(--cc-space-6);
  text-align: center;
}
.cc-mobile-menu a {
  font-family: var(--cc-font-display);
  font-size: 40px;
  text-transform: uppercase;
  color: var(--cc-inverse-primary);
  letter-spacing: var(--cc-tracking-wordmark);
  text-decoration: none;
}

/* ============================== HERO SCAN-LIJN ============================== */

.hero__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__scan::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--cc-accent);
  transform: translateX(-100%);
}
.hero__mark.run-scan .hero__scan::before {
  animation: scan-once 420ms linear forwards 600ms;
}

/* ============================== WERK — PROJECT-KAARTEN ============================== */

.project {
  position: relative;
  background: var(--cc-surface-raised);
  border: 1px solid var(--cc-border-default);
  border-radius: 0; /* radius=0 — technische kaders */
  overflow: hidden;
  transition: border-color var(--cc-dur-fast) ease,
              transform var(--cc-dur-fast) ease,
              background-color var(--cc-dur-base) ease;
  cursor: pointer;
}

.project__band {
  height: 4px;
  background: var(--cc-primary);
}
.project[data-accent="teal"]   .project__band { background: var(--cc-acc-teal); }
.project[data-accent="ink"]    .project__band { background: var(--cc-acc-ink); }
.project[data-accent="purple"] .project__band { background: var(--cc-acc-purple); }
.project[data-accent="mono"]   .project__band {
  background: repeating-linear-gradient(
    90deg,
    var(--cc-acc-mono) 0 12px,
    var(--cc-surface-raised) 12px 16px
  );
}

.project__body {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  min-height: 280px;
}

.project__meta {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
}

.mono-tag--accent {
  color: var(--cc-accent);
  position: relative;
  padding-left: 12px;
}
.mono-tag--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--cc-accent);
}

.project__name {
  font-family: var(--cc-font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--cc-primary);
  margin-top: var(--cc-space-2);
  line-height: 1;
  letter-spacing: var(--cc-tracking-wordmark);
}

.project__desc {
  font-size: 16px;
  color: var(--cc-text-muted);
  max-width: 44ch;
  flex: 1;
}

.project__result {
  font-family: var(--cc-font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--cc-primary);
  letter-spacing: var(--cc-tracking-wordmark);
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--cc-space-2);
}
.project__result .num-counter {
  letter-spacing: var(--cc-tracking-wordmark);
  font-family: var(--cc-font-display);
  font-weight: 900;
}
.project__result .num-label {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--cc-text-muted);
  letter-spacing: 0;
  margin-left: var(--cc-space-3);
  align-self: baseline;
}

.project__endorse {
  margin-top: var(--cc-space-4);
  padding-top: var(--cc-space-3);
  border-top: 1px solid var(--cc-border-subtle);
}

.project::after {
  content: "";
  position: absolute;
  top: 4px; /* onder de band */
  left: -100%;
  width: 100%;
  height: 1px;
  background: var(--cc-accent);
  transition: left var(--cc-dur-slow) var(--cc-ease);
  pointer-events: none;
}
.project:hover {
  border-color: var(--cc-border-strong);
  transform: translateY(-2px);
  background: var(--cc-surface);
}
.project:hover::after { left: 100%; }

/* ============================== STUDIO — SUB-BRANDS ============================== */

.sub-brand {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
  padding: var(--cc-space-8);
  border-left: 2px solid transparent;
  border-right: 1px solid var(--cc-border-inv-subtle);
  transition: border-color var(--cc-dur-base) ease, background-color var(--cc-dur-base) ease;
}
.studio-grid .sub-brand:last-child { border-right: 0; }
.sub-brand:hover {
  border-left-color: var(--cc-accent);
  background: rgba(245, 239, 224, 0.03);
}

.sub-brand .cc-mark {
  background: var(--cc-surface);
  color: var(--cc-primary);
  width: 48px; height: 48px;
  font-size: 28px;
}

.sub-brand__name {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  color: var(--cc-inverse-primary);
  margin-top: var(--cc-space-4);
}

.sub-brand__desc {
  font-size: 16px;
  color: var(--cc-text-on-dark-muted);
  max-width: 28ch;
  flex: 1;
}

.sub-brand__status {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  color: var(--cc-text-on-dark-subtle);
  margin-top: var(--cc-space-6);
}
.dot {
  width: 6px; height: 6px;
  background: var(--cc-text-on-dark-subtle);
  display: inline-block;
}
.dot--live { background: var(--cc-accent); animation: pulse-live 2.2s ease-in-out infinite; }
.dot--soon { background: var(--cc-text-on-dark-subtle); }

@media (max-width: 900px) {
  .sub-brand {
    border-right: 0;
    border-bottom: 1px solid var(--cc-border-inv-subtle);
    padding: var(--cc-space-8) 0;
  }
  .studio-grid .sub-brand:last-child { border-bottom: 0; }
}

/* ============================== OVER — TheMos kaart ============================== */

.over-card {
  background: var(--cc-surface-raised);
  border: 1px solid var(--cc-border-default);
  padding: var(--cc-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  position: relative;
}
.over-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 4px;
  background: var(--cc-accent);
}

.over-card__name {
  font-family: var(--cc-font-display);
  font-size: 28px;
  color: var(--cc-primary);
  margin-top: var(--cc-space-4);
  letter-spacing: var(--cc-tracking-wordmark);
}
.over-card__legal {
  font-family: var(--cc-font-body);
  color: var(--cc-text-muted);
  font-size: 14px;
}
.over-card__role {
  font-size: 16px;
  color: var(--cc-text-primary);
  margin-top: var(--cc-space-4);
}
.over-card__bio {
  font-size: 15px;
  color: var(--cc-text-muted);
  margin-top: var(--cc-space-3);
}
.over-card__links {
  margin-top: var(--cc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  border-top: 1px solid var(--cc-border-subtle);
  padding-top: var(--cc-space-4);
}
.over-card__links a {
  font-family: var(--cc-font-mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--cc-accent);
}
.over-card__links a:hover { text-decoration: underline; }

/* ============================== PLATE (Mode A) ============================== */

.plate__svg text {
  font-family: var(--cc-font-mono);
  fill: var(--cc-primary);
}
.plate__label {
  font-family: var(--cc-font-display);
  font-size: 14px;
  letter-spacing: var(--cc-tracking-caps);
  fill: var(--cc-primary);
}
.plate__label--sm { font-size: 11px; }
.plate__label--accent { fill: var(--cc-accent); }

.plate__sub {
  font-size: 9px;
  fill: var(--cc-text-muted);
  letter-spacing: var(--cc-tracking-caps);
  text-transform: uppercase;
}
.plate__sub--accent { fill: var(--cc-accent); }

.plate__measure {
  font-size: 9px;
  letter-spacing: var(--cc-tracking-caps);
  fill: var(--cc-text-subtle);
  text-transform: uppercase;
}
.plate__measure--accent { fill: var(--cc-accent); }

.plate__feedback-label {
  font-size: 9px;
  fill: var(--cc-accent);
  letter-spacing: var(--cc-tracking-caps);
  text-transform: uppercase;
}

.plate__tb-key {
  font-size: 8px;
  fill: var(--cc-text-muted);
  letter-spacing: var(--cc-tracking-caps);
}
.plate__tb-val {
  font-size: 9px;
  fill: var(--cc-primary);
}

/* R.05 misregistratie: 1px Forest schaduw onder Vermillion lijn */
.plate__shadow {
  opacity: 0;
  transition: opacity var(--cc-dur-base) ease 1400ms;
}

/* Plate — statisch zichtbaar (geen opacity-assemble: blijft leesbaar in elke omgeving)
   De plate als geheel krijgt nog wel een translateY-reveal via .animate-on-scroll. */
.plate__shadow {
  transform: translate(1px, 1px);
  opacity: 1;
}

/* ============================== CTA ============================== */

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  background: var(--cc-accent);
  color: var(--cc-surface);
  font-family: var(--cc-font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-caps);
  padding: 16px 28px;
  border-radius: var(--cc-radius-sm);
  width: max-content;
  transition: transform var(--cc-dur-fast) ease, filter var(--cc-dur-fast) ease;
}
.cta:hover {
  filter: brightness(0.92);
  transform: scale(1.01);
  color: var(--cc-surface);
}
.cta__arrow {
  display: inline-block;
  transition: transform var(--cc-dur-base) var(--cc-ease);
}
.cta:hover .cta__arrow { transform: translateX(4px); }
.cta--pulse-once { animation: pulse-cta 600ms ease 1200ms 1 both; }

/* ============================== FOOTER ============================== */

.cc-footer {
  padding: var(--cc-space-16) 0 var(--cc-space-8);
  border-top: 1px solid var(--cc-border-subtle);
  background: var(--cc-surface);
}
.cc-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--cc-space-8);
  align-items: start;
}
.cc-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
}
.cc-footer__brand .cc-wordmark { color: var(--cc-primary); }

.cc-footer__nav {
  display: flex;
  gap: var(--cc-space-6);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--cc-font-body);
  font-size: 14px;
  color: var(--cc-text-muted);
}
.cc-footer__nav a:hover { color: var(--cc-primary); }

.cc-footer__coords {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  align-items: flex-end;
}
.cc-footer__url {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  color: var(--cc-accent);
  text-decoration: none;
  letter-spacing: var(--cc-tracking-caps);
  text-transform: uppercase;
}
.cc-footer__url:hover { text-decoration: underline; }

.cc-footer__base {
  border-top: 1px solid var(--cc-border-subtle);
  margin-top: var(--cc-space-12);
  padding-top: var(--cc-space-4);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .cc-footer__grid { grid-template-columns: 1fr; gap: var(--cc-space-6); text-align: left; }
  .cc-footer__nav { justify-content: flex-start; }
  .cc-footer__coords { text-align: left; align-items: flex-start; }
}