/* Ovolum — motion-home h1: het theater van de voordeur (alleen op de homepage geladen) */

/* De filmkorrel van de generieke laag wijkt hier voor de eigen .grain van de homepage */
body::after{ content:none }

@media (max-width:760px){ #ov-status-index .ov-status{ padding:16px 32px } }

/* ---------- Messing: de heroring draagt gewicht ---------- */
.gate{ will-change:transform }

/* ---------- Werk-kaarten: licht volgt de hand ---------- */
.plate{ isolation:isolate }
.plate::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,243,220,.13), transparent 62%);
  transition:opacity .7s var(--ease) }
.work:hover .plate::before{ opacity:1 }
.plate::after{ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:34%; z-index:0;
  background:linear-gradient(105deg, transparent, rgba(255,243,220,.09) 45%, rgba(255,243,220,.16) 50%, rgba(255,243,220,.09) 55%, transparent);
  transform:translateX(-160%) skewX(-12deg); pointer-events:none }
.work:hover .plate::after{ animation:ov-glans 1.15s cubic-bezier(.4,.1,.2,1) .08s forwards }
@keyframes ov-glans{ to{ transform:translateX(420%) skewX(-12deg) } }
.plate .rule{ transition:width .9s var(--ease), background .9s var(--ease) }
.work:hover .plate .rule{ width:84px; background:rgba(255,243,220,.65) }
.work .work-cat{ transition:color .5s var(--ease) }
.work:hover .work-cat{ color:var(--dim) }
.work .v3{ position:absolute; inset:0 }
.work .v3::before{ content:""; position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px;
  border:1px dashed rgba(234,227,214,.35); border-radius:50%; opacity:.5;
  transition:opacity .6s var(--ease), transform .6s var(--ease) }
.work:hover .v3::before{ opacity:1; animation:ov-vrij 14s linear infinite }
@keyframes ov-vrij{ to{ transform:rotate(360deg) } }

/* ---------- Diensten: de horizontale galerij (waar de browser het draagt) ---------- */
@supports (animation-timeline: view()){
  @media (min-width: 980px) and (prefers-reduced-motion: no-preference){
    .rail{ --railpad:max(44px, calc(50vw - 500px)); height:300vh; width:100vw;
      margin-left:calc(50% - 50vw); view-timeline:--ov-rail block; position:relative }
    .rail-stage{ position:sticky; top:0; height:100vh; overflow:clip;
      display:flex; align-items:center; padding-inline:var(--railpad) }
    .rail .services{ display:flex; gap:44px; width:max-content; margin-top:0;
      animation:ov-rail linear both; animation-timeline:--ov-rail;
      animation-range:contain 0% contain 100%; will-change:transform }
    @keyframes ov-rail{ to{ transform:translateX(calc(100vw - 100% - (2 * var(--railpad)))) } }
    .rail .card{ flex:0 0 clamp(380px, 34vw, 460px); height:min(62vh, 560px);
      display:flex; flex-direction:column; justify-content:space-between }
    .rail-stage::after{ content:""; position:absolute; left:var(--railpad); right:var(--railpad); bottom:9vh;
      height:1px; background:var(--line); transform-origin:left;
      animation:ov-railmaat linear both; animation-timeline:--ov-rail; animation-range:contain 0% contain 100% }
    @keyframes ov-railmaat{ from{ background:linear-gradient(90deg, rgba(var(--halo),.7) 0%, var(--line) 0%) }
      to{ background:linear-gradient(90deg, rgba(var(--halo),.7) 100%, var(--line) 100%) } }
  }
}

/* ---------- Atelier: de ring draait traag mee met de scroll ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .atelier-mark svg{ animation:ov-wentel linear both; animation-timeline:view(block);
      animation-range:entry 0% exit 100% }
    @keyframes ov-wentel{ from{ transform:rotate(-13deg) } to{ transform:rotate(9deg) } }
  }
}