/* Ovolum — motionlaag m1: beweging met een idee erachter (de bouwtekening komt tot leven) */

/* ---------- 1. View transitions: door de site glijden als door een gebouw ---------- */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:ov-vt-uit .32s ease both }
::view-transition-new(root){ animation:ov-vt-in .5s cubic-bezier(.22,1,.36,1) both }
@keyframes ov-vt-uit{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes ov-vt-in{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ---------- 2. Rijkere reveals + stagger op groepen ---------- */
[data-reveal]{ transition-duration:1.05s,1.05s }
.rel-links.is-inview a{ opacity:0; transform:translateY(14px); animation:ov-op .8s cubic-bezier(.22,1,.36,1) forwards }
.rel-links.is-inview a:nth-child(1){ animation-delay:.05s } .rel-links.is-inview a:nth-child(2){ animation-delay:.12s }
.rel-links.is-inview a:nth-child(3){ animation-delay:.19s } .rel-links.is-inview a:nth-child(4){ animation-delay:.26s }
.rel-links.is-inview a:nth-child(5){ animation-delay:.33s } .rel-links.is-inview a:nth-child(6){ animation-delay:.40s }
.rel-links.is-inview a:nth-child(7){ animation-delay:.47s } .rel-links.is-inview a:nth-child(8){ animation-delay:.54s }
.rel-links.is-inview a:nth-child(n+9){ animation-delay:.6s }
@keyframes ov-op{ to{ opacity:1; transform:none } }

/* ---------- 3. Blauwdruk: sectienummers + lijnen die zich tekenen ---------- */
main{ counter-reset:ov-sectie }
.prose .blok{ counter-increment:ov-sectie; position:relative; padding-left:0 }
.prose .blok h2{ position:relative; padding-bottom:.55em }
.prose .blok h2::before{
  content:"0" counter(ov-sectie); position:absolute; top:-1.9em; left:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--faint);
  opacity:0; transform:translateY(6px); transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s }
.prose .blok.is-inview h2::before{ opacity:1; transform:none }
.prose .blok h2::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg, rgba(var(--halo),.45), var(--line) 55%, transparent);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .1s }
.prose .blok.is-inview h2::after{ transform:scaleX(1) }
.faq-item{ position:relative }
.faq-item::before{
  content:""; position:absolute; left:-20px; top:.4em; bottom:.4em; width:1px;
  background:var(--line-strong); transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease) .1s }
.faq-item.is-inview::before{ transform:scaleY(1) }
@media (max-width:760px){ .faq-item::before{ left:-12px } }

/* ---------- 4. Hero: woorden rijzen uit hun masker ---------- */
h1.ov-hero-split[data-reveal]{ opacity:1; transform:none; transition-delay:0s }
h1[data-reveal]{ transition-delay:.18s }
.ov-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
.ov-w>span{ display:inline-block; transform:translateY(118%);
  transition:transform 1.05s cubic-bezier(.22,1,.36,1); transition-delay:var(--wd,0s) }
h1.is-inview .ov-w>span{ transform:translateY(0) }

/* ---------- 5. Cursor: een ring met trekkracht ---------- */
#ov-cursor{ position:fixed; left:0; top:0; width:30px; height:30px; border:1px solid rgba(234,227,214,.65);
  border-radius:50%; pointer-events:none; z-index:9999; mix-blend-mode:difference;
  transform:translate(-100px,-100px); transition:width .35s var(--ease), height .35s var(--ease),
  border-color .35s, opacity .3s; opacity:0 }
#ov-cursor.ov-aan{ opacity:1 }
#ov-cursor.ov-groei{ width:52px; height:52px; border-color:rgba(255,243,220,.9) }
@media (pointer:coarse){ #ov-cursor{ display:none } }

/* ---------- 6. Filmkorrel over het donkere vlak ---------- */
body::after{ content:""; position:fixed; inset:-60%; z-index:9998; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  animation:ov-korrel 1.1s steps(5) infinite }
@keyframes ov-korrel{
  0%{ transform:translate(0,0) } 20%{ transform:translate(-3%,2%) } 40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) } 80%{ transform:translate(3%,3%) } 100%{ transform:translate(0,0) } }

/* ---------- 7. Preloader: de ring tekent zichzelf ---------- */
#ov-intro{ position:fixed; inset:0; z-index:10000; background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform .65s cubic-bezier(.7,0,.2,1); animation:ov-failsafe .1s linear 2.9s forwards }
#ov-intro svg{ width:84px; height:84px }
#ov-intro .ov-ring{ stroke-dasharray:308; stroke-dashoffset:308; animation:ov-teken 1.25s cubic-bezier(.55,.08,.35,.95) .15s forwards }
#ov-intro .ov-punt{ opacity:0; animation:ov-punt .4s ease 1.3s forwards }
@keyframes ov-teken{ to{ stroke-dashoffset:52 } }
@keyframes ov-punt{ to{ opacity:1 } }
.ov-intro-tel{ font-family:var(--mono); font-size:11px; letter-spacing:.42em; text-indent:.42em; color:var(--dim);
  font-variant-numeric:tabular-nums }
#ov-intro.ov-klaar{ transform:translateY(-101%) }
#ov-intro.ov-weg{ display:none; animation:none }
@keyframes ov-failsafe{ to{ visibility:hidden; pointer-events:none; opacity:0 } }

/* ---------- 8. Atelier-status in de footer ---------- */
.ov-status{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; color:var(--faint); margin-bottom:14px }
.ov-status [data-klok]{ color:var(--dim); font-variant-numeric:tabular-nums }
.ov-dot{ width:5px; height:5px; border-radius:50%; background:var(--lumen); flex:0 0 auto;
  animation:ov-adem 3.2s ease-in-out infinite }
@keyframes ov-adem{ 0%,100%{ opacity:.35; transform:scale(.85) } 50%{ opacity:1; transform:scale(1) } }
#ov-status-index{ border-top:1px solid var(--line); }
#ov-status-index .ov-status{ max-width:1000px; margin:0 auto; padding:18px 44px }
@media (max-width:760px){ #ov-status-index .ov-status{ padding:16px 24px } }

/* ---------- 9. Magnetische knoppen ---------- */
.btn,.nav-cta,.tool-knop{ transition-property:transform,background,color,border-color,opacity;
  transition-duration:.45s; transition-timing-function:var(--ease); will-change:transform }

/* ---------- 10. Antwoordkaart: trage drift op scroll (waar de browser het kan) ---------- */
@supports (animation-timeline: view()){
  .antwoord{ animation:ov-drift linear both; animation-timeline:view(); animation-range:entry 0% cover 55% }
  @keyframes ov-drift{ from{ transform:translateY(34px) } to{ transform:translateY(0) } }
}

/* ---------- Rust voor wie daarom vraagt ---------- */
@media (prefers-reduced-motion: reduce){
  #ov-intro{ display:none }
  body::after{ animation:none }
  .ov-dot{ animation:none; opacity:.6 }
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .ov-w>span{ transform:none; transition:none }
  .rel-links.is-inview a{ animation:none; opacity:1; transform:none }
  [data-reveal]{ transition:none; opacity:1; transform:none }
}