/* PREMIUM MOTION (js/motion.js adds .has-motion) */
:root { --m-ease: cubic-bezier(0.22, 0.8, 0.2, 1); }

/* ---------- headlines: each word rises out of its own mask ---------- */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.07em 0.14em 0; margin: 0 -0.07em -0.14em 0; }
.mw__in { display: inline-block; translate: 0 110%; transition: translate 0.95s var(--m-ease); transition-delay: calc(0.1s + var(--i) * 55ms); }
.is-shown .mw__in { translate: none; }
/* once a headline is split, its own text gradient goes: the browser paints that gradient into the
   words' final places, which showed as a pale ghost copy while the words were still rising */
.m-words, .m-words .grad, .m-words em, .m-words span:not(.mw):not(.mw__in) { background: none !important; }
/* the silver headline colour and the blue accent ride on each word */
.h2 .mw__in { background: linear-gradient(180deg, #ffffff 30%, #a9bfdc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2 .grad .mw__in { background-image: linear-gradient(var(--ink-quiet), var(--ink-quiet)); }
[data-theme="light"] .h2 .mw__in { background-image: linear-gradient(180deg, #071a33 30%, #3d5577 100%); }
[data-theme="light"] .h2 .grad .mw__in { background-image: linear-gradient(var(--ink-quiet), var(--ink-quiet)); }

/* ---------- service cards: tilt up into place, one after another ---------- */
.has-motion .svc.reveal { transform: perspective(1400px) rotateX(14deg) translateY(60px); transform-origin: 50% 100%; transition: opacity 0.9s var(--ease), transform 1.2s var(--m-ease); transition-delay: var(--d, 0s); }
.has-motion .svc.reveal.is-in { transform: none; }

/* ---------- review cards: rise and settle ---------- */
/* uses transform, so the card's own hover lift (translate) still works */
.has-motion .review.m-rise { opacity: 0; transform: translateY(50px) scale(0.96); transition: opacity 0.8s var(--ease) var(--d, 0s), transform 1.1s var(--m-ease) var(--d, 0s), translate 0.5s var(--ease-out), box-shadow 0.4s var(--ease); }
.has-motion .review.m-rise.is-shown { opacity: 1; transform: none; }

/* ---------- CTA card: opens like a curtain, the video settles, the copy follows ---------- */
.has-motion .cta__card.reveal { opacity: 1; transform: none; clip-path: inset(9% 7% round 40px); transition: clip-path 1.3s var(--m-ease); }
.has-motion .cta__card.reveal.is-in { clip-path: inset(0 round 20px); }
.has-motion .cta__card .cta__media video { scale: 1.14; transition: scale 1.8s var(--m-ease); }
.has-motion .cta__card.is-in .cta__media video { scale: 1; }
.has-motion .cta__copy > :not(h2) { opacity: 0; translate: 0 24px; transition: opacity 0.7s var(--ease), translate 0.9s var(--m-ease); }
.has-motion .cta__card.is-in .cta__copy > :not(h2) { opacity: 1; translate: none; }
.has-motion .cta__card.is-in .cta__copy > p { transition-delay: 0.55s; }
.has-motion .cta__card.is-in .cta__copy > .sq-btn { transition-delay: 0.7s; }
.has-motion .cta__card.is-in .cta__copy > .cta__trust { transition-delay: 0.85s; }

/* ---------- footer wordmark: letters rise one by one ---------- */
.footer__mark.m-letters { background: none; }
.footer__mark .mw { padding-bottom: 0; margin-bottom: 0; }
.footer__mark .mw__in {
  background: linear-gradient(180deg, rgba(24, 120, 220, 0.16) 0%, rgba(0, 18, 36, 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  translate: 0 70%;
  opacity: 0;
  transition: translate 1.1s var(--m-ease), opacity 0.9s var(--ease);
  transition-delay: calc(var(--i) * 40ms);
}
.footer__mark.is-shown .mw__in { translate: none; opacity: 1; }
[data-theme="light"] .footer__mark .mw__in { background-image: linear-gradient(180deg, rgba(10, 110, 230, 0.16) 0%, rgba(243, 247, 252, 0) 85%); }