/* =====================================================================
   motion.css — motion layer for the light SaaS theme.
   Faster and crisper than a drafting-table pace (Stripe/Linear register:
   quick, confident, no lingering). Everything degrades to a static,
   fully visible page under prefers-reduced-motion or without JS.
   ===================================================================== */

:root {
  --m:.55s;
  --m-slow:.8s;
  --m-ease:cubic-bezier(.16,1,.3,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------------------- REVEALS */
.js [data-reveal] {
  opacity:0;
  transition:opacity var(--m) var(--m-ease), transform var(--m) var(--m-ease);
  transition-delay:var(--reveal-delay,0ms);
}
.js [data-reveal="up"],.js [data-reveal=""] { transform:translateY(26px); }
.js [data-reveal="left"]  { transform:translateX(-32px); }
.js [data-reveal="right"] { transform:translateX(32px); }
.js [data-reveal="scale"] { transform:scale(.95); }
.js [data-reveal].is-in { opacity:1; transform:none; }

.js [data-stagger] > * { opacity:0; transform:translateY(20px); }
.js [data-stagger].is-in > * { opacity:1; transform:none; transition:opacity .6s var(--m-ease), transform .6s var(--m-ease); }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay:40ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay:100ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay:160ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay:220ms; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay:280ms; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay:340ms; }
.js [data-stagger].is-in > *:nth-child(n+7) { transition-delay:380ms; }

/* ---------------------------------------------------------- TYPE */
.js .word-rise .w { display:inline-block; opacity:0; transform:translateY(.5em); }
.js .word-rise.is-in .w {
  opacity:1; transform:none;
  transition:opacity .5s var(--m-ease), transform .6s var(--m-spring);
  transition-delay:calc(var(--w-i) * 35ms);
}
.js .line-mask { overflow:hidden; }
.js .line-mask > span { display:block; transform:translateY(102%); transition:transform .75s var(--m-ease); transition-delay:calc(var(--l-i,0) * 80ms); }
.js .line-mask.is-in > span { transform:none; }

.rotator { display:inline-grid; vertical-align:bottom; overflow:hidden; }
.rotator > span { grid-area:1/1; transform:translateY(102%); transition:transform .5s var(--m-ease); }
.rotator > span.is-on { transform:none; }
.rotator > span.is-out { transform:translateY(-102%); }

/* ---------------------------------------------------------- ILLUSTRATION INK-IN */
.js .illo .dr { stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
.js .illo.is-in .dr { stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--m-ease); transition-delay:calc(var(--d-i,0) * 16ms); }
.js .illo .anno,.js .illo .fill-solid { opacity:0; transition:opacity .5s ease; }
.js .illo.is-in .anno,.js .illo.is-in .fill-solid { opacity:1; transition-delay:.6s; }
.js .illo .fill-hatch,.js .illo .fill-accent,.js .illo .fill-success { opacity:0; transition:opacity .6s ease; }
.js .illo.is-in .fill-hatch,.js .illo.is-in .fill-accent,.js .illo.is-in .fill-success { opacity:1; transition-delay:.45s; }

.illo .pulse { animation:pulseRing 2.2s var(--m-ease) infinite; transform-origin:center; }
@keyframes pulseRing { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.illo .flow { stroke-dasharray:6 8; animation:flowDash 2s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset:-28; } }
.js .illo.is-in .flow { transition:none; stroke-dashoffset:0; }

.bleed .illo { transform:scale(var(--zoom,1)); transition:transform .1s linear; will-change:transform; }

/* ---------------------------------------------------------- CARDS, LINKS */
.card--link { position:relative; }
.card--link .card__icon { transition:background var(--dur) var(--m-ease), color var(--dur) var(--m-ease); }
.card--link:hover .card__icon { background:var(--primary); color:#fff; }
.index-item__title { transition:color var(--dur) var(--m-ease); }
.link { position:relative; }
.link .arw,.btn .arw { display:inline-block; transition:transform .3s var(--m-ease); }
.link:hover .arw,.btn:hover .arw { transform:translateX(5px); }
.nav-bar .nav__link { position:relative; }

/* buttons: gentle lift, no wipe (keeps the SaaS register calm) */
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }

/* ---------------------------------------------------------- RAIL */
.rail { --rail-progress:0; }
.rail::after {
  content:""; position:absolute; left:15px; top:12px; width:2px; border-radius:2px;
  background:var(--primary); height:calc(var(--rail-progress) * 100%); max-height:calc(100% - 24px);
  transition:height .25s linear;
}
@media (min-width:900px) {
  .rail--across::after { left:16px; top:16px; height:2px; width:calc(var(--rail-progress) * 100%);
    max-width:calc(100% - 32px); transition:width .25s linear; }
}

/* ---------------------------------------------------------- MARQUEE */
.marquee__track { animation:marquee 36s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__item { transition:color .3s var(--m-ease); }
.marquee__item:hover { color:var(--primary); }

/* ---------------------------------------------------------- ACCORDION */
.acc__a,.acc-plan__body { animation:accIn .4s var(--m-ease); }
@keyframes accIn { from { opacity:0; transform:translateY(-8px); } }
.alert { animation:accIn .4s var(--m-ease); }

/* ---------------------------------------------------------- CHROME */
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:200;
  background:var(--primary); transform:scaleX(0); transform-origin:left; }
.to-top {
  position:fixed; right:var(--gutter); bottom:var(--s-6); z-index:60;
  width:46px; height:46px; border-radius:var(--r-full); display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg); color:var(--text-2); cursor:pointer;
  box-shadow:var(--sh); opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .35s var(--m-ease), transform .35s var(--m-ease), border-color .25s, color .25s;
}
.to-top.is-on { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { border-color:var(--primary); color:var(--primary); }

.js .mega:not([hidden]) { animation:megaIn .3s var(--m-ease); }
@keyframes megaIn { from { opacity:0; transform:translateY(-10px); } }
.mega__item { transition:background .3s var(--m-ease); }

.js .mnav.is-open .mnav__list > li { animation:drawerItem .5s var(--m-ease) backwards; }
.js .mnav.is-open .mnav__list > li:nth-child(1) { animation-delay:.08s; }
.js .mnav.is-open .mnav__list > li:nth-child(2) { animation-delay:.13s; }
.js .mnav.is-open .mnav__list > li:nth-child(3) { animation-delay:.18s; }
.js .mnav.is-open .mnav__list > li:nth-child(4) { animation-delay:.23s; }
.js .mnav.is-open .mnav__list > li:nth-child(5) { animation-delay:.28s; }
.js .mnav.is-open .mnav__list > li:nth-child(6) { animation-delay:.33s; }
@keyframes drawerItem { from { opacity:0; transform:translateX(24px); } }

.cookie-bar { animation:cookieIn .5s var(--m-ease); }
@keyframes cookieIn { from { opacity:0; transform:translateY(20px); } }

/* ---------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
  .js [data-reveal],.js [data-stagger] > *,.js .word-rise .w,.js .line-mask > span {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js .illo .dr { stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .js .illo .anno,.js .illo .fill-solid,.js .illo .fill-hatch,
  .js .illo .fill-accent,.js .illo .fill-success { opacity:1 !important; }
  .illo .pulse,.illo .flow,.marquee__track { animation:none !important; }
  .bleed .illo { transform:none !important; }
  .js .mnav.is-open .mnav__list > li { animation:none !important; }
  .cookie-bar { animation:none !important; }
}