/* Schulten Media - bewegingslaag v2. Gedeeld door alle artboards via <link> in de head.
   Scroll-animaties staan in een media query op schermhoogte: op het canvas (artboard op volle lengte)
   zie je de eindstand, in Play en op de echte site bewegen ze mee met scrollen. */
@keyframes smMaskUp{from{clip-path:inset(-10% -10% 100% -10%);translate:0 .45em}to{clip-path:inset(-10% -10% -25% -10%);translate:0 0}}
@keyframes smWordUp{from{transform:translateY(110%) rotate(6deg)}to{transform:none}}
@keyframes smLift{from{translate:0 56px}to{translate:0 0}}
@keyframes smTextIn{from{opacity:0;translate:0 24px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes smCardIn{from{opacity:0;translate:0 80px;scale:.92;filter:blur(8px)}to{opacity:1;translate:0 0;scale:1;filter:none}}
@keyframes smWipe{from{clip-path:inset(0 100% 0 0);scale:1.18}to{clip-path:inset(0 0 0 0);scale:1}}
@keyframes smHeroImg{from{clip-path:inset(100% 0 0 0 round 18px);scale:1.2}to{clip-path:inset(0 0 0 0 round 18px);scale:1}}
@keyframes smShift{from{translate:8% 0}to{translate:-8% 0}}
@keyframes smPar{from{translate:0 90px}to{translate:0 -60px}}
@keyframes smDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes smFill{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes smProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes smHead{to{background-color:rgba(5,14,48,.97);box-shadow:0 12px 40px rgba(0,0,20,.45)}}
@keyframes smStep{from{opacity:.15;translate:0 36px}to{opacity:1;translate:0 0}}

/* Woorden in de hero-kop (markup: <span class="sm-w"><span style="--i: 0">woord</span></span>) */
.sm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.sm-w>span{display:inline-block}

/* Outline-tekst die zich vult tijdens het scrollen */
.sm-fill{background:linear-gradient(90deg,#4CC4FF,#A3E635) 0 0/100% 100% no-repeat;-webkit-background-clip:text;background-clip:text}

/* Werkwijze: lijn die zich tekent terwijl de stappen in beeld komen */
.sm-werk{timeline-scope:--werk}
.sm-werk .sm-steps{view-timeline:--werk block}
.sm-draw{position:absolute;inset:0;background:linear-gradient(90deg,#4CC4FF,#A3E635);transform-origin:0 50%;pointer-events:none}

/* Kaarten: kantelen en een lichtvlek die de muis volgt */
.sm .cardlink>.card,.sm .cardlink.case{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s}
.sm .cardlink>.card{position:relative}
.sm .cardlink>.card::after,.sm .cardlink.case::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(76,196,255,.18),transparent 55%);opacity:0;transition:opacity .35s}
.sm .cardlink:hover>.card::after,.sm .cardlink.case:hover::after{opacity:1}



/* Lichtgloed die de muis volgt in elke sectie */
.sm section{position:relative}
.sm section::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--gx,-2000px) var(--gy,-2000px),rgba(76,196,255,.1),transparent 60%);mix-blend-mode:screen}

/* Diepte in de hero: volgt de muis (style="--d: 12px") */
.sm .sm-depth{translate:calc(var(--hx,0) * var(--d,0px)) calc(var(--hy,0) * var(--d,0px));transition:translate .7s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion: no-preference){
  .sm h1:not(.sm-split){animation:smMaskUp 1s cubic-bezier(.2,.8,.2,1) .1s both}
  .sm-w>span{animation:smWordUp .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 80ms + 100ms)}
  .sm-heroimg{animation:smHeroImg 1.3s cubic-bezier(.7,0,.2,1) .25s both}
}

@media (prefers-reduced-motion: no-preference) and (max-height: 1600px){
  @supports (animation-timeline: view()){
    .sm::before{content:"";position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,#4CC4FF,#A3E635);transform-origin:0 50%;pointer-events:none;animation:smProgress linear both;animation-timeline:scroll(root)}

    .reveal{animation:smLift linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .reveal h2,.reveal h3:not(.card h3):not(.cardlink h3){animation:smMaskUp linear both;animation-timeline:view();animation-range:entry 15% cover 32%}
    .reveal p:not(.card p):not(.cardlink p){animation:smTextIn linear both;animation-timeline:view();animation-range:entry 25% cover 38%}
    .reveal .cardlink,.reveal .card:not(.cardlink .card){animation:smCardIn linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    .reveal .cardlink:nth-child(3n+2),.reveal .card:not(.cardlink .card):nth-child(3n+2){animation-range:entry 12% cover 36%}
    .reveal .cardlink:nth-child(3n+3),.reveal .card:not(.cardlink .card):nth-child(3n+3){animation-range:entry 24% cover 44%}
    .reveal img:not([alt=""]){animation:smWipe linear both;animation-timeline:view();animation-range:entry 0% cover 40%}

    .sm .sm-marquee{animation:smMarquee 45s linear infinite,smShift linear both;animation-timeline:auto,view()}
    .sm-fill{animation:smFill linear both;animation-timeline:view();animation-range:entry 0% entry 100%}

    .sm .sm-stagger>:nth-child(odd){animation:smCardIn linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    .sm .sm-stagger>:nth-child(even){animation:smCardIn linear both,smPar linear both;animation-timeline:view(),view();animation-range:entry 12% cover 36%,cover 0% cover 100%}

    .sm-draw{animation:smDraw linear both;animation-timeline:--werk;animation-range:cover 5% cover 45%}
    .sm-steps>li{animation:smStep linear both;animation-timeline:--werk}
    .sm-steps>li:nth-child(1){animation-range:cover 5% cover 14%}
    .sm-steps>li:nth-child(2){animation-range:cover 11% cover 20%}
    .sm-steps>li:nth-child(3){animation-range:cover 17% cover 26%}
    .sm-steps>li:nth-child(4){animation-range:cover 23% cover 32%}
    .sm-steps>li:nth-child(5){animation-range:cover 29% cover 38%}
    .sm-steps>li:nth-child(6){animation-range:cover 35% cover 44%}
  }
}
@media (prefers-reduced-motion: reduce){
  .sm .cardlink>.card,.sm .cardlink.case,.sm .sm-depth{transform:none!important;translate:none!important}
  .sm section::after,.sm .cardlink>.card::after,.sm .cardlink.case::after{display:none}
}