/* 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 · (removed 2026-10-29: no animated gradient words, Boris "too colourful") */

/* 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 · arrows nudge on hover (the light sweep was removed 2026-10-29) */
.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)}

/* 5 · (the warm glow behind the first screen was removed 2026-10-29) */
.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:var(--ink);pointer-events:none}

/* 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}
  .mark .dot{animation:none!important}
  .tilt,.tilt.tilting{transform:none;transition:none}.tilt:after{display:none}
  .mv-progress{display:none}
}