/* Motion layer (Boris, 2026-10-28: "light motion in the elements, show we are good, keep it easy to use").
   Transform and opacity only, never layout. All of it is off under prefers-reduced-motion. */

/* 1 · cards in a grid rise one after another when they come into view (motion.js sets --mi and .mv-on) */
.mv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--mi,0) * 70ms)}
.mv.mv-on{opacity:1;transform:none}

/* 2 · the gradient words shimmer slowly */
.g{background-size:220% 100%;animation:gshift 9s ease-in-out infinite alternate}
@keyframes gshift{from{background-position:0% 50%}to{background-position:100% 50%}}

/* 3 · cards lean toward the pointer (motion.js writes --rx/--ry on hover devices only) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .5s var(--ease),box-shadow .4s var(--ease);will-change:transform}
.tilt.tilting{transition:transform .12s linear,box-shadow .4s var(--ease);--ty:-4px}
.tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%)}
.tilt.tilting:after{opacity:1}

/* 4 · the main dark buttons get a sweep of light, arrows nudge on hover */
.btn:not(.ghost):not(.light):not(:disabled){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.ghost):not(.light):not(:disabled):before{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:sweep 5.5s ease-in-out 1.5s infinite}
@keyframes sweep{0%,72%{left:-60%}100%{left:130%}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .i{transition:transform .3s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
[dir=rtl] .btn:hover .i{transform:scaleX(-1) translateX(3px)}

/* 5 · a warm glow drifts slowly behind the first screen */
.hero,.ck-hero,.page-hero{isolation:isolate}
.hero:after,.ck-hero:after,.page-hero:after{content:"";position:absolute;z-index:-1;width:46vw;height:46vw;max-width:680px;max-height:680px;right:4%;top:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(252,128,29,.16),rgba(254,40,87,.08) 45%,transparent 70%);filter:blur(20px);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,4vh) scale(1.12)}100%{transform:translate(-2vw,10vh) scale(.94)}}
.hero{position:relative}

/* 6 · a thin progress line under the header */
.mv-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#fc801d,#fe2857);pointer-events:none}
[dir=rtl] .mv-progress{transform-origin:100% 50%}

/* the logo dot breathes once in a while */
.mark .dot{display:inline-block;animation:dotpop 6s ease-in-out 2s infinite}
@keyframes dotpop{0%,90%,100%{transform:none}94%{transform:translateY(-3px) scale(1.25)}}

@media (prefers-reduced-motion:reduce){
  .mv{opacity:1;transform:none;transition:none}
  .g,.mark .dot,.btn:before,.hero:after,.ck-hero:after,.page-hero:after{animation:none!important}
  .tilt,.tilt.tilting{transform:none;transition:none}.tilt:after{display:none}
  .mv-progress{display:none}
}