/* DegitalService — motion & aesthetics layer (pairs with fx.js). Tokens only; everything degrades gracefully. */

/* Scroll progress ------------------------------------------------------------ */
#fxProgress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:2000;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));pointer-events:none;box-shadow:0 0 12px color-mix(in oklab,var(--accent) 60%,transparent)}

/* Nav reacts to scrolling ----------------------------------------------------- */
.nav{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.nav.fx-scrolled{box-shadow:0 10px 34px -16px rgba(0,0,0,.55)}

/* Aurora orbs (injected into hero-like blocks) --------------------------------- */
.fx-host{position:relative;isolation:isolate}
.fx-orbs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.fx-orbs i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.55;translate:var(--px,0) var(--py,0);will-change:translate}
.fx-orbs .o1{width:46vmin;height:46vmin;right:-8vmin;top:-14vmin;background:color-mix(in oklab,var(--accent) 55%,transparent)}
.fx-orbs .o2{width:38vmin;height:38vmin;left:-10vmin;bottom:-16vmin;background:color-mix(in oklab,var(--info) 40%,transparent)}
.fx-orbs .o3{width:24vmin;height:24vmin;left:42%;top:18%;background:color-mix(in oklab,var(--accent-2) 45%,transparent);opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .fx-orbs .o1{animation:fxDrift 16s ease-in-out infinite alternate}
  .fx-orbs .o2{animation:fxDrift 20s ease-in-out -6s infinite alternate-reverse}
  .fx-orbs .o3{animation:fxDrift 13s ease-in-out -3s infinite alternate}
}
@keyframes fxDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vmin,-2.5vmin,0) scale(1.12)}}
.mk-hero .fx-orbs{opacity:.9}
[data-parallax]{translate:var(--px,0) var(--py,0);will-change:translate}

/* Entrance of hero copy ---------------------------------------------------------- */
.fx-load>*{animation:fxUp .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@keyframes fxUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Scroll reveal --------------------------------------------------------------------- */
.fx-r{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.fx-r.fx-in{opacity:1;transform:none}

/* Pointer spotlight on cards ------------------------------------------------------- */
.fx-card{position:relative}
.fx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent) 16%,transparent),transparent 62%)}
.fx-card:hover::after{opacity:1}
.fx-card:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--border))}
.ap-stat.fx-card:hover,.ap-card.fx-card:hover{border-color:color-mix(in oklab,var(--accent) 30%,var(--border))}

/* Hero mock-up: pointer-driven tilt + floating shadow ---------------------------------- */
@media (min-width:981px){
  .mk-window{transform:perspective(1400px) rotateY(calc(-6deg + var(--ry,0deg))) rotateX(calc(2deg + var(--rx,0deg)));transition:transform .25s ease-out}
}

/* Animated gradient on highlighted words ------------------------------------------------ */
.grad,h1 .grad{background-size:220% auto;background-image:linear-gradient(100deg,var(--accent),var(--accent-2),var(--info),var(--accent));animation:fxGrad 8s linear infinite}
@keyframes fxGrad{to{background-position:220% center}}

/* Button shine ----------------------------------------------------------------------------- */
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-sm){position:relative;overflow:hidden}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-sm)::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ease)}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-sm):hover::after{left:130%}

/* Cards: refined hover lift --------------------------------------------------------------------- */
.feature-card,.mk-cat,.quote-card,.pc-store{transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.feature-card:hover,.mk-cat:hover,.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pc-card:has(.pc-thumb){overflow:hidden}
.pc-card .pc-thumb{transition:transform .8s var(--ease)}
.pc-card:hover .pc-thumb,.pc-feature:hover .pc-thumb{transform:scale(1.05)}
.pc-feature{overflow:hidden}

/* Brand marquee ------------------------------------------------------------------------------------ */
.fx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);margin:0 auto}
.fx-track{display:flex;width:max-content;animation:fxMarquee 38s linear infinite}
.fx-track:hover{animation-play-state:paused}
.fx-track .mk-brands{flex-wrap:nowrap;justify-content:flex-start;padding-inline:6px;flex:0 0 auto}
.fx-track .mk-brands li{white-space:nowrap}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* Ambient background + cursor glow (public pages) ------------------------------------------------------------ */
body:not(.is-panel)::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:70vmax;height:70vmax;left:-20vmax;top:35vh;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--info) 11%,transparent),transparent);opacity:.8;animation:fxAmbient 26s ease-in-out infinite alternate}
@keyframes fxAmbient{from{transform:translate3d(0,0,0)}to{transform:translate3d(30vw,-18vh,0) scale(1.15)}}
.fx-cursor{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 13%,transparent),transparent 70%);mix-blend-mode:screen}
html[data-theme="light"] .fx-cursor,[data-theme="light"] .fx-cursor{mix-blend-mode:multiply;background:radial-gradient(closest-side,color-mix(in oklab,var(--accent) 10%,transparent),transparent 70%)}
.fx-cursor{display:none}
@media (hover:hover) and (pointer:fine){.fx-cursor{display:block}}

/* Section dividers: soft glow line ---------------------------------------------------------------------------- */
.section-alt{position:relative}
.section-alt::before{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 55%,transparent),transparent)}

/* Panels keep it calm: only the progress bar, spotlight and small lifts ---------------------------------------- */
.is-panel .ap-stat{transition:transform .25s var(--ease),border-color .25s var(--ease)}
.is-panel .ap-stat:hover{transform:translateY(-2px)}

/* Everything off for reduced motion / data-motion="reduced" ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #fxProgress{transition:none}
  .fx-r,.fx-load>*{opacity:1!important;transform:none!important;animation:none!important}
  .fx-orbs i,.grad,.fx-track,body::after{animation:none!important}
  [data-parallax],.fx-orbs i{translate:none!important}
  .fx-cursor{display:none!important}
}
html[data-motion="reduced"] .fx-r,html[data-motion="reduced"] .fx-load>*{opacity:1!important;transform:none!important;animation:none!important}
html[data-motion="reduced"] .fx-orbs i,html[data-motion="reduced"] .grad,html[data-motion="reduced"] .fx-track{animation:none!important}
html[data-motion="reduced"] [data-parallax],html[data-motion="reduced"] .fx-orbs i{translate:none!important}
html[data-motion="reduced"] .fx-cursor{display:none!important}