/* VIKA motion layer. Pairs with assets/js/motion.js. Only opacity, transform and clip-path move. */
:root{
  --m-ease:var(--ease-out,cubic-bezier(.23,1,.32,1));
  --m-dur:var(--dur-slow,600ms);
  --m-fast:var(--dur-fast,160ms);
}

/* 1. Reveal. Hidden only once JS has announced itself (html.js-motion), so no-JS gets plain content. */
.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease),clip-path var(--m-dur) var(--m-ease);
  transition-delay:calc(var(--i,0) * 60ms);
}
.js-motion [data-reveal="fade"]{transform:none}
.js-motion [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.js-motion [data-reveal].is-visible{opacity:1;transform:none;clip-path:inset(0)}

/* 2. Split heading: lines slide up under a mask. Hidden until measured, with a JS timeout fallback. */
.js-motion [data-split]:not(.is-split){opacity:0}
[data-split] .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .line-in{display:block;will-change:transform}

/* 3. Hero canvas fills .hero-visual; the theme positions .hero-visual itself. */
.hero-visual{position:relative}
.hero-visual #hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 4. Magnetic buttons: translate from --mx/--my, composed with the theme's :active scale. */
.btn[data-magnetic]{
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:transform 400ms var(--m-ease),background-color var(--m-fast),color var(--m-fast),border-color var(--m-fast);
}
.btn[data-magnetic].is-magnet{transition-duration:120ms,var(--m-fast),var(--m-fast),var(--m-fast);transition-timing-function:linear}
.btn[data-magnetic]:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97);transition-duration:var(--m-fast)}

/* 5. Marquee: one duplicated track, linear loop, pause on hover. Runs only after JS cloned the items. */
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:flex;width:max-content}
.marquee-track>*{flex:none;margin-right:var(--marquee-gap,3rem)}
.marquee.is-ready .marquee-track{animation:vika-marquee var(--marquee-duration,30s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes vika-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 7. Reduced motion: everything visible and still. */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal],.js-motion [data-reveal="clip"]{opacity:1;transform:none;clip-path:none;transition:none}
  .js-motion [data-split]:not(.is-split){opacity:1}
  .marquee .marquee-track{animation:none}
  .btn[data-magnetic]{transform:none}
}