/* =========================================================
   Matrix Design — motion system
   Preloader · custom cursor · hero entrance · marquees ·
   scroll reveals · reduced-motion handling
   ========================================================= */

/* ---------- Keyframes ---------- */
@keyframes preSpin{
  0%{transform:scale(.3) rotate(-180deg);opacity:0}
  60%{transform:scale(1.05) rotate(0);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes preBar{to{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes blurbUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{to{transform:translateY(0);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
/* Blobs animate the individual translate/scale properties so the JS
   parallax (which writes `transform`) composes with the float instead of fighting it */
@keyframes float1{0%,100%{translate:0 0;scale:1}50%{translate:-50px 50px;scale:1.1}}
@keyframes float2{0%,100%{translate:0 0;scale:1}50%{translate:60px -40px;scale:1.05}}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollUpKw{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes kwPop{0%{opacity:0;transform:scale(.7) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes scrollBar{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes scrollL{to{transform:translateX(-100%)}}
@keyframes scrollHalfL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollLogosL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollLogosR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes pulseWA{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:1000;background:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.no-js #preloader{display:none}
.pre-logo{
  width:160px;height:160px;
  background:url(../images/logo-circle-yellow.png) center/contain no-repeat;
  animation:preSpin 1.6s var(--ease-out) forwards;
}
.pre-text{
  margin-top:30px;color:#fff;font-weight:500;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;opacity:0;text-align:center;padding:0 20px;
  animation:fadeUp .8s var(--ease-out) .6s forwards;
}
.pre-bar{
  position:absolute;bottom:0;left:0;height:3px;background:var(--yellow);
  width:0;animation:preBar 1.6s var(--ease-out) forwards;
}

/* ---------- Custom cursor (hidden on touch-only devices, like the reference) ---------- */
.cursor,.cursor-ring{display:none}
html.has-cursor .cursor,html.has-cursor .cursor-ring{display:block}
@media (hover:none){.cursor,.cursor-ring{display:none !important}}
.cursor{
  position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--blue);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s;
}
.cursor.hov{width:54px;height:54px;background:rgba(0,158,221,.25)}
.cursor.yellow{background:var(--yellow)}
.cursor.yellow.hov{background:rgba(255,188,55,.35)}
.cursor.white{background:#fff}
.cursor-ring{
  position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid var(--blue);
  border-radius:50%;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);transition:transform .6s var(--ease), opacity .25s, border-color .25s;
  opacity:.4;
}
.cursor-ring.hov{opacity:0}
.cursor-ring.yellow{border-color:var(--yellow)}
.cursor-ring.white{border-color:#fff}
.cursor.is-hidden,.cursor-ring.is-hidden{opacity:0}

/* ---------- Hero entrance ---------- */
.hero-bg-blob-1{animation:float1 20s ease-in-out infinite}
.hero-bg-blob-2{animation:float2 22s ease-in-out infinite}

/* Line-mask headline reveal: each line slides up from behind its overflow mask */
.hero-headline .line > span{display:inline-block;transform:translateY(110%);opacity:0}
.hero-headline.in .line > span{animation:reveal 1.1s var(--ease-out) forwards}
.hero-headline.in .line:nth-child(1) > span{animation-delay:.1s}
.hero-headline.in .line:nth-child(2) > span{animation-delay:.22s}
.hero-headline.in .line:nth-child(3) > span{animation-delay:.34s}

/* Blurb, CTAs and scroll cue follow the headline (chained to the preloader) */
.js .hero-blurb,.js .hero-cta-row,.js .hero-scroll{opacity:0}
.hero.in .hero-blurb{animation:blurbUp 1s var(--ease-out) .8s forwards}
.hero.in .hero-cta-row{animation:fadeUp 1s var(--ease-out) 1s forwards}
.hero.in .hero-scroll{animation:fadeUp 1s var(--ease-out) 1.1s forwards}
.hero-scroll .line-v{animation:scrollBar 1.8s var(--ease) infinite}

/* Vertical keyword column */
.hero-keywords-track{animation:scrollUpKw 24s linear infinite}
.kw{animation:kwPop .9s var(--ease-out) backwards}
.kw:nth-child(odd){animation-delay:.1s}
.kw:nth-child(even){animation-delay:.25s}

/* ---------- Marquees ---------- */
.marquee-inner{animation:scrollL 32s linear infinite}
.marquee:hover .marquee-inner{animation-play-state:paused}
.marquee-item .star{animation:spin 8s linear infinite}
.ind-marquee{animation:scrollHalfL 28s linear infinite}
.logo-row.l{animation:scrollLogosL 60s linear infinite}
.logo-row.r{animation:scrollLogosR 70s linear infinite}
.logo-row.l-slow{animation:scrollLogosL 80s linear infinite}
.logo-row.r-slow{animation:scrollLogosR 65s linear infinite}
.logo-rows:hover .logo-row{animation-play-state:paused}
/* Pause off-screen loops to save CPU (class toggled by animations.js) */
.is-offscreen .marquee-inner,.is-offscreen.ind-marquee,.is-offscreen .ind-marquee,.is-offscreen .logo-row,.is-offscreen .hero-keywords-track{animation-play-state:paused}

/* ---------- Hover motion ---------- */
.ceo-portrait{transform:translateY(0);transition:transform .8s var(--ease-out), opacity 1s var(--ease-out)}
.js .ceo-portrait.reveal.in:hover,.no-js .ceo-portrait:hover{transform:translateY(-6px)}
.test{transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease-out)}
.test:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 30px 60px -30px rgba(0,158,221,.3)}
.cta-btn,.cta-big,.form-submit,.footer-cta,.start-btn{will-change:transform}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:pulseWA 2s ease-out infinite;pointer-events:none}

/* ---------- Scroll reveal system ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:translateY(0)}
.js .reveal-stagger>*{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.js .reveal-stagger.in>*{opacity:1;transform:translateY(0)}
.js .reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.js .reveal-stagger.in>*:nth-child(2){transition-delay:.15s}
.js .reveal-stagger.in>*:nth-child(3){transition-delay:.25s}
.js .reveal-stagger.in>*:nth-child(4){transition-delay:.35s}
.js .reveal-stagger.in>*:nth-child(5){transition-delay:.45s}
.js .reveal-stagger.in>*:nth-child(6){transition-delay:.55s}
/* Once revealed, stagger children drop their delay so hover transitions are instant */
.js .reveal-stagger.done>*,.js .reveal-stagger.done>*:nth-child(n){transition-delay:0s}
/* Testimonial cards keep their own hover lift after revealing */
.js .test-grid.in>.test{transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease-out)}
.js .test-grid.in>.test:hover{transform:translateY(-6px)}

/* ---------- No-JS fallback: everything visible ---------- */
.no-js .hero-headline .line > span{transform:none;opacity:1}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,::before,::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js .reveal,.js .reveal-stagger>*{opacity:1;transform:none}
  .hero-headline .line > span{transform:none;opacity:1}
  .js .hero-blurb,.js .hero-cta-row,.js .hero-scroll{opacity:1}
  #preloader{display:none}
  /* keep marquees readable but static */
  .marquee-inner,.ind-marquee,.logo-row,.hero-keywords-track{animation:none !important}
  .marquee,.industries{overflow-x:auto}
  .parallax{transform:none !important}
}