/* KEDO MOTION STYLES — shared vocabulary. Per-site CSS vars drive colors. */

/* 1. scroll progress bar */
.progress{height:2px;position:fixed;top:0;left:0;width:0;background:var(--accent,#c8f31d);z-index:220;pointer-events:none}

/* 3. reveal-on-scroll (reversible, staggered) */
.will-reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.will-reveal.in{opacity:1;transform:translateY(0)}
.will-reveal.d1{transition-delay:.1s}
.will-reveal.d2{transition-delay:.2s}
.will-reveal.d3{transition-delay:.3s}
.will-reveal.d4{transition-delay:.4s}

/* 4. step connector lines + icon pop */
.step-reveal:not(:last-child):after{transform-origin:left;transition:transform .6s ease .2s}
.step-reveal.will-reveal:not(.in):after{transform:scaleX(0)}
.step-reveal .step-icon{transform:scale(.55);transition:transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--step,0) * 65ms)}
.step-reveal.in .step-icon{transform:scale(1)}
.step-reveal.will-reveal:not(.in):after{transform:scaleX(0)}

/* 5. hero cinematic drift */
@keyframes heroDrift{from{transform:scale(1.045)}to{transform:scale(1)}}
.drift{animation:heroDrift 2.6s ease-out both;transform-origin:center 30%}
@media(max-width:700px){.drift{animation:none}}

/* 6. cycling highlight words */
[data-cycle]{display:inline-grid;justify-items:start}
[data-cycle] i{grid-area:1/1;font-style:normal;opacity:0;transition:opacity .45s ease,color .45s ease}
[data-cycle] i.on{opacity:1;color:var(--accent,#c8f31d)}

/* 8. parallax stickers */
.sticker{--parallax:0px;transform:translateY(var(--parallax)) rotate(-9deg)}

/* 9. fill bars + marquee */
.fill-bar i{display:block;height:100%;background:var(--accent,#c8f31d);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.will-reveal.in .fill-bar i,.fill-bar.in i{transform:scaleX(1)}
.marquee{overflow:hidden}
.marquee-track{display:inline-flex;gap:2em;white-space:nowrap;animation:marquee 36s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

/* 10. micro-interactions */
.btn{transition:background .2s,color .2s,border-color .2s}
.btn span,.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translate(3px,-3px)}
.img-tile img{filter:none;transition:filter .3s}
.img-tile:hover img{filter:grayscale(.3)}

/* reduced motion: kill everything, keep content visible */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .will-reveal{opacity:1!important;transform:none!important}
  .sticker{transform:rotate(-9deg)!important}
  .step-reveal.will-reveal:not(.in):after{transform:none!important}
  .fill-bar i{transform:scaleX(1)!important}
  .marquee-track{animation:none!important}
  [data-cycle] i{opacity:1!important}
  [data-cycle] i:not(:first-child){display:none}
}