/* ===========================================================
   Special-effects layer
   Rebuilt (technique only) from the motion on nlc.co.uk:
   - reveal-on-scroll  (Elementor "fadeInUp" entrance animation)
   - counting numbers  (jQuery Numerator)
   - parallax hero     (Jet parallax background, scroll type)
   - sticky elevation  (sticky header)
   =========================================================== */

/* --- Reveal on scroll (fadeInUp) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   0.85s cubic-bezier(0.16, 0.62, 0.23, 0.98),
    transform 0.85s cubic-bezier(0.16, 0.62, 0.23, 0.98);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Sticky header: subtle elevation once the page is scrolled --- */
#site-nav {
  transition: box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
#site-nav.is-stuck {
  box-shadow: 0 8px 30px rgba(28, 27, 24, 0.08);
}

/* --- Mobiel menu: hamburger + uitklappaneel (site had geen navigatie <860px) --- */
#nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 0 10px 0 10px; /* asymmetrisch hoekje, websitemotief */
  cursor: pointer;
}
#nav-burger span {
  display: block;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-burger.open span:nth-child(2) { opacity: 0; }
#nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
#nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
}
#nav-mobile .nav-link-m {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 300;
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
  color: var(--color-ink);
}
#nav-mobile .nav-link-m:last-child { border-bottom: none; }
@media (max-width: 860px) {
  #nav-burger { display: flex; }
  #nav-mobile.open { display: flex; }
}

/* --- Portfolio: logo-wall (hairline-raster, zelfde motief als de statband) --- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.logo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 44px 20px 36px;
  border-right: 1px solid var(--color-line);
}
.logo-cell:last-child { border-right: none; }
.logo-cell img {
  max-height: 40px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-cell img.logo-tall { max-height: 62px; }
.logo-cell:hover img { filter: grayscale(0); opacity: 1; }
.logo-cell span {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-taupe);
  text-align: center;
}
@media (max-width: 860px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { border-right: none; border-bottom: 1px solid var(--color-line); }
  .logo-cell:last-child { border-bottom: none; grid-column: span 2; }
}

/* --- Parallax hero: JS drives the background-position offset --- */
.hero-parallax {
  will-change: background-position;
}

/* --- Hero background video (autoplay / muted / loop, like the
       Elementor video background on the reference site) --- */
#hero {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* keep the video stacked behind the hero content */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  pointer-events: none;
}
/* Dark scrim so the white hero text stays readable on bright frames —
   strongest aan de linkerkant, waar de tekst staat */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(20, 26, 22, 0.62) 0%,
    rgba(20, 26, 22, 0.42) 55%,
    rgba(20, 26, 22, 0.18) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Extra contrast-hulp op de tekst zelf */
#hero h1, #hero p, #hero a {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

/* --- Respect users who prefer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-parallax {
    background-attachment: scroll !important;
  }
  .hero-video {
    display: none !important; /* fall back to the static Matterhorn image */
  }
}