/* ===== Geen scrollbalk, op alle pagina's ===== */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* ===== Smooth scroll (Lenis) ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===== 3D-logo: canvas over het hele scherm ===== */
.champie-3d { position: fixed; inset: 0; z-index: 71; pointer-events: none; } /* boven menu (70) en projectvel (60) */
[data-parallax-hero] { will-change: transform; }

/* ===== Menu-balk ===== */
.cmenu { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 34px; z-index: 70; display: flex; gap: 20px; pointer-events: none; }
.cmenu_logo { display: block; width: 40px; height: 40px; border-radius: 5px; background: #FFC82E; transform: scale(.3); opacity: 0; transition: transform .35s cubic-bezier(.55,0,1,.45), opacity .25s ease; }
.cmenu_bar { box-sizing: border-box; height: 40px; padding: 0 20px; border-radius: 5px; display: flex; align-items: center; gap: 25px; background: #FFC82E; clip-path: inset(0 100% 0 0 round 5px); transition: clip-path .35s cubic-bezier(.55,0,1,.45); }
.cmenu_link { color: #0E0E10; font: 600 20px/1 Geist, Arial, sans-serif; letter-spacing: -.02em; cursor: pointer; transform: translateX(-14px); opacity: 0; transition: transform .3s ease, opacity .2s ease; }
.cmenu_link:not([href]) { cursor: default; }
.cmenu.is-on { pointer-events: auto; }
.cmenu.is-on .cmenu_logo { transform: none; opacity: 1; transition: transform .7s cubic-bezier(.34,1.56,.64,1) .45s, opacity .3s ease .45s; }
.cmenu.is-on .cmenu_bar { clip-path: inset(0 0 0 0 round 5px); transition: clip-path .8s cubic-bezier(.76,0,.24,1) .7s; }
.cmenu.is-on .cmenu_link { transform: none; opacity: 1; transition: transform .8s cubic-bezier(.22,1,.36,1) .95s, opacity .5s ease .95s; }
.cmenu a:focus-visible { outline: 2px solid #FFC82E; outline-offset: 3px; }
@media (max-width: 767px) { .cmenu { bottom: 16px; } }

/* Pagina zonder header-logo (projectpagina): menu staat er meteen, zonder animatie */
.cmenu.is-static, .cmenu.is-static * { transition: none !important; }

/* ===== Parallax-foto's: iets groter dan hun kader ===== */
[data-parallax-img] { top: -12% !important; height: 124% !important; will-change: transform; }

/* ===== Project-hover ===== */
[data-project] { cursor: pointer; }
[data-project-title] { display: block; height: 24px; overflow: hidden; }
.ptr_track { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.76,0,.24,1); }
.ptr_line { display: flex; align-items: center; gap: 10px; height: 24px; white-space: nowrap; }
.ptr_arrow { flex: none; transform: translateX(-8px); opacity: 0; transition: transform .6s cubic-bezier(.22,1,.36,1) .12s, opacity .4s ease .12s; }
[data-project]:hover .ptr_track { transform: translateY(-24px); }
[data-project]:hover .ptr_arrow { transform: none; opacity: 1; }
.project_follow { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: hidden; transform-origin: 0 0; transform: scale(0); will-change: transform; }
.project_follow img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none) { .project_follow { display: none; } }

/* ===== Sectielabel: geel vakje met "/" ervoor ===== */
[data-label] { display: inline-flex; align-items: center; gap: 10px; }
[data-label]::before { content: "/"; flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #FFC82E; color: #0E0E10; font: 600 11px/1 "Geist Mono", monospace; }

/* ===== Nav-hover: zwart vak, tekst rolt omhoog naar geel (nav-hover.js) ===== */
[data-nav-link] { position: relative; isolation: isolate; text-decoration: none; }
[data-nav-link]::before { content: ""; position: absolute; inset: -4px -8px; z-index: -1; background: #0E0E10; border-radius: 2px; opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
[data-nav-link]:hover::before { opacity: 1; transform: none; }
.nh_clip { display: block; height: 1.2em; overflow: hidden; }
.nh_track { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.76,0,.24,1); }
.nh_track > span { display: block; height: 1.2em; white-space: nowrap; }
.nh_alt { color: #FFC82E; }
[data-nav-link]:hover .nh_track { transform: translateY(-50%); }
[data-nav-link] svg { transition: color .3s ease; }
[data-nav-link]:hover svg { color: #FFC82E; }
[data-nav-dark] [data-nav-link]::before { background: #FFC82E; }
[data-nav-dark] .nh_alt { color: #0E0E10; }

/* ===== Diensten: pijl-vakje verschijnt bij hover op een rij ===== */
[data-row-icon] { opacity: 0; transform: scale(.5); transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
[data-service-row]:hover [data-row-icon] { opacity: 1; transform: none; }

/* ===== Insights: pijl schuift voor de titel, leestijd verdwijnt bij hover ===== */
[data-insight-arrow] { flex: none; width: 0; margin-right: -8px; opacity: 0; transition: width .4s cubic-bezier(.22,1,.36,1), margin .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
[data-insight]:hover [data-insight-arrow] { width: 15px; margin-right: 0; opacity: 1; }
[data-insight-time] { transition: opacity .3s ease; }
[data-insight]:hover [data-insight-time] { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .nh_track, [data-nav-link]::before, [data-row-icon], [data-insight-arrow] { transition: none; } }

/* ===== Projectpagina: vel over de wazige homepage (project-page.js) ===== */
.cpp { position: fixed; inset: 0; z-index: 60; background: rgba(14,14,16,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background 1.1s ease, backdrop-filter 1.1s ease, -webkit-backdrop-filter 1.1s ease; }
.cpp_box { position: absolute; top: var(--pp-top, 16vh); left: 0; right: 0; bottom: 0; background: rgb(14,14,16); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateY(100vh); clip-path: inset(0 12% 0 12%); transition: transform 1.1s cubic-bezier(.65,0,.35,1), clip-path 1.1s cubic-bezier(.65,0,.35,1); }
.cpp_box::-webkit-scrollbar { display: none; }
.cpp.is-in .cpp_box { transform: none; clip-path: inset(0 0 0 0); }
.cpp.is-in { background: rgba(14,14,16,.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cpp [data-project-page] { min-height: 100%; }
.cpp [data-grow] { transform-origin: 50% 0; } /* groeit vanaf het label naar beneden */
.cpp_home { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
html.project-open { overflow: hidden; }
[data-grow] { transform-origin: 50% 0; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .cpp, .cpp_box { transition: none; } }

/* ===== Klok: "Enschede" voor de tijd (clock.js) ===== */
[data-clock="enschede"]::before { content: "Enschede "; }

/* ===== Open-for-work vakje (zoals de referentie, 2s per rondje):
   vierkant met grote rimpel die vervaagt -> rustig draaien naar ruit -> even stil ->
   terugdraaien naar vierkant terwijl de rimpel weer groeit ===== */
[data-status-dot] {
  --dot-speed: 2s;     /* duur van één rondje */
  --dot-ripple: 2;     /* hoe groot de rimpel wordt */
  --dot-strength: .3;  /* hoe zichtbaar de rimpel is */
  position: relative;
  animation: cdot-turn var(--dot-speed) infinite;
}
[data-status-dot]::after {
  content: ""; position: absolute; inset: 0; background: inherit; opacity: 0;
  animation: cdot-ripple var(--dot-speed) linear infinite;
}
@keyframes cdot-turn {
  0%, 25% { transform: rotate(90deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  53%, 80% { transform: rotate(135deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { transform: rotate(180deg); }
}
@keyframes cdot-ripple {
  0% { transform: scale(var(--dot-ripple)); opacity: var(--dot-strength); }
  16% { transform: scale(var(--dot-ripple)); opacity: 0; }
  80% { transform: scale(1); opacity: 0; }
  100% { transform: scale(var(--dot-ripple)); opacity: var(--dot-strength); }
}
@media (prefers-reduced-motion: reduce) { [data-status-dot], [data-status-dot]::after { animation: none; } }