/* Nano Web — effectlaag geinspireerd op landonorris.com (OFF+BRAND / Syntax-breakdown).
   Regels: alleen transform/opacity animeren, geen shadows/blurs/filters, sharp edges. */

/* ── page-entry: content schuift subtiel in bij elke paginalaad ── */
@media (prefers-reduced-motion: no-preference) {
  /* alleen opacity: een transform op body maakt van fixed-elementen
     (navbar, mobiel menu, curtain) document-gebonden elementen */
  body { animation: nw-page-in .4s ease-out both; }
  @keyframes nw-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ── curtain voor page-transitions ── */
.nw-curtain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--bg, #0a0c10);
  display: grid; place-items: center;
  transform: translateY(101%);
}
.nw-curtain.is-active { transform: translateY(0); transition: transform .34s cubic-bezier(.65,0,.35,1); pointer-events: all; }
.nw-curtain .nw-curtain-brand {
  font-family: var(--mono, monospace); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent, #34d399);
  opacity: 0; transition: opacity .18s ease .12s;
}
.nw-curtain.is-active .nw-curtain-brand { opacity: 1; }

/* ── per-letter hover (navigatie en knoppen) ── */
.nw-letters { overflow: hidden; display: inline-block; }
.nw-letters .nw-l {
  display: inline-block; position: relative; overflow: hidden;
  vertical-align: top; white-space: pre;
}
.nw-letters .nw-l > span { display: block; transition: transform .34s cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--nw-i) * 16ms); }
.nw-letters .nw-l .nw-b { position: absolute; inset: 0; transform: translateY(105%); }
.nw-letters:hover .nw-l .nw-a, .nw-letters:focus-visible .nw-l .nw-a { transform: translateY(-105%); }
.nw-letters:hover .nw-l .nw-b, .nw-letters:focus-visible .nw-l .nw-b { transform: translateY(0); }

@media (max-width: 820px) {
  /* op smalle schermen letters weer normaal laten wikkelen */
  .nw-letters .nw-l { display: inline; position: static; overflow: visible; white-space: normal; }
  .nw-letters .nw-l > span { display: inline; }
  .nw-letters .nw-l .nw-b { display: none; }
}

/* ── niet-standaard vormen: hoek-snede op case/portfolio-tegels ──
   beide states 5 hoekpunten, dus de clip-path interpoleert vloeiend */
@media (prefers-reduced-motion: no-preference) {
  .case .case-vis, .project {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%);
    transition: clip-path .32s cubic-bezier(.65,0,.35,1);
  }
  .case:hover .case-vis, .project:hover {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  }
}

/* beeld-onthulling bij scroll-reveal: clip schuift open (sluit aan op bestaande data-r/.in) */
@media (prefers-reduced-motion: no-preference) {
  .case-vis img, .project > img { clip-path: inset(0 0 0 0); }
  [data-r-stagger]:not(.in) .case-vis img, [data-r-stagger]:not(.in) .project > img { clip-path: inset(0 0 100% 0); }
  .case-vis img, .project > img { transition: clip-path .7s cubic-bezier(.22,1,.36,1); }
}

/* ── hero-parallax lagen (alleen fijne pointer, JS zet transforms) ── */
.hero-stack .shot { will-change: transform; }

/* ── getekende accentlijn onder het hero-highlight ── */
.hero-nova h1 .hl { position: relative; display: inline-block; }
.nw-underline {
  position: absolute; left: 0; right: 0; bottom: -.08em; width: 100%; height: .22em;
  pointer-events: none; overflow: visible;
}
.nw-underline path {
  fill: none; stroke: var(--accent, #34d399); stroke-width: 3.2; stroke-linecap: round;
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .nw-underline path { stroke-dasharray: var(--nw-len, 300); stroke-dashoffset: var(--nw-len, 300); animation: nw-draw 1.1s cubic-bezier(.65,0,.35,1) .5s forwards; }
  @keyframes nw-draw { to { stroke-dashoffset: 0; } }
}

/* lenis aanbevolen basis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }