/* ============================================================
   ATLAS FX — motion layer (homepage)
   Everything here is additive: no layout, spacing or copy changes.
   All rules are scoped to html.fx so the page is untouched if the
   script never runs. html.fx-reduce = prefers-reduced-motion.
   ============================================================ */

/* small grey labels: a touch lighter so they pass WCAG AA contrast (4.5:1) */
html.fx{ --ink-dim:#85878D; }

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Failsafes: if fx.js never runs, nothing stays hidden ---------- */
@keyframes fxFailShow{ to{ opacity:1; visibility:visible; } }
@keyframes fxFailHide{ to{ opacity:0; visibility:hidden; } }

/* ============================================================
   INTRO
   ============================================================ */
#fx-intro{ display:none; }
html.fx-intro #fx-intro{
  display:block; position:fixed; inset:0; z-index:400;
  pointer-events:auto; cursor:pointer;
  animation:fxFailHide .01s 5s forwards;
}
#fx-intro .fx-half{
  position:absolute; top:0; bottom:0; width:50.2%;
  background:#050506;
}
#fx-intro .fx-half.l{ left:0; }
#fx-intro .fx-half.r{ right:0; }
#fx-intro .fx-half::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 100% 50%, rgba(140,145,180,.10), transparent 70%);
}
#fx-intro .fx-half.r::after{ background:radial-gradient(60% 50% at 0% 50%, rgba(140,145,180,.10), transparent 70%); }
#fx-intro .fx-logo{
  position:absolute; left:50%; top:50%;
  width:clamp(84px, 11vw, 132px); height:auto;
  transform:translate(-50%,-50%);
  color:#fff; overflow:visible;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.35));
}
#fx-intro .fx-logo path{ stroke-dasharray:1; stroke-dashoffset:1; }
#fx-intro .fx-beam{
  position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px;
  background:linear-gradient(to top, rgba(255,255,255,0), #fff 30%, #fff 70%, rgba(255,255,255,0));
  box-shadow:0 0 24px 4px rgba(255,255,255,.55), 0 0 90px 12px rgba(170,175,220,.25);
  transform:scaleY(0); transform-origin:50% 50%;
}
#fx-intro .fx-shot{
  position:absolute; left:50%; top:50%; width:18px; height:64px; margin-left:-9px;
  opacity:0; overflow:visible;
}
#fx-intro .fx-skip{
  position:absolute; left:0; right:0; bottom:28px; text-align:center;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.28);
}

/* ============================================================
   HERO
   ============================================================ */
html.fx .hero{
  --st-h:64%; --st-x:95%; --st-y:48%;
}
html.fx .statue::before,
html.fx .statue::after{
  background-size:auto var(--st-h);
  background-position:var(--st-x) var(--st-y);
}
html.fx-assemble .statue{ opacity:.3; }
html.fx .fx-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
html.fx .fx-gcanvas{ inset:auto; }

/* Atlas returns on tablets & phones as a backdrop */
@media (max-width:1080px){
  html.fx .statue{ display:block; }
  html.fx:not(.fx-chrome) .statue::after{ background-image:none; }
  html.fx .hero{ --st-h:58%; --st-x:118%; --st-y:44%; }
  html.fx .statue::before{ opacity:.42; }
  html.fx .hero-glow{
    background:
      radial-gradient(60% 55% at 50% 34%, rgba(120,124,160,.12) 0%, transparent 62%),
      radial-gradient(70% 40% at 50% 50%, rgba(11,11,12,.55) 0%, transparent 70%);
    z-index:2;
  }
}
@media (max-width:760px){
  html.fx .hero{ --st-h:62%; --st-x:150%; --st-y:36%; }
  html.fx .statue{ display:none; }
}

/* headline lines */
html.fx .h-hero .ln{ display:block; padding:.02em .08em .14em; margin:0 -.08em -.16em; }
html.fx .h-hero .ln:last-child{ padding-bottom:.02em; margin-bottom:0; }
html.fx .h-hero .ln{ padding-top:0; }
html.fx .h-hero .ln-in{
  display:inline-block; vertical-align:top;
  background:linear-gradient(100deg,
      #F4F4F5 0%, #F4F4F5 40%, #ffffff 45.5%, #8a8b90 48.5%, #ffffff 51.5%, #F4F4F5 57%, #F4F4F5 100%);
  background-size:320% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* slot-machine stats */
html.fx .stat b{ font-variant-numeric:tabular-nums; }
html.fx .stat b{ white-space:nowrap; --lh:1.1em; }
@media (max-width:760px){ html.fx .stat b{ --lh:1em; } }
html.fx .stat b span{ margin:0 !important; font-size:inherit !important; color:inherit !important; letter-spacing:inherit; text-align:center !important; }
html.fx .stat b .fx-sd,
html.fx .stat b .fx-ch{ display:inline-block !important; height:var(--lh); line-height:var(--lh) !important; vertical-align:top; overflow:hidden; }
html.fx .stat b .fx-sr{ position:absolute !important; width:1px; height:1px; margin:-1px !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html.fx .stat b .fx-vis{ display:inline !important; }
html.fx .stat b [data-c]::before{ content:attr(data-c); }
html.fx .stat b .fx-sd-col{ display:flex !important; flex-direction:column; }
html.fx .stat b .fx-sd-col > span{ display:block !important; height:var(--lh); line-height:var(--lh) !important; }

/* ============================================================
   BUTTONS — shine sweep + magnetic (translate is set by JS)
   ============================================================ */
html.fx .btn{ position:relative; overflow:hidden; isolation:isolate; }
@media (hover:hover) and (pointer:fine){ html.fx .btn{ transition:box-shadow .25s ease, background .2s ease; } html.fx .btn:hover{ transform:none; } }
html.fx .btn::after{
  content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
  transform:translateX(-160%) skewX(-18deg);
  mix-blend-mode:soft-light; pointer-events:none; z-index:2;
}
html.fx .btn:hover::after,
html.fx .btn.fx-shine::after{ animation:fxShine .9s cubic-bezier(.3,.6,.2,1); }
@keyframes fxShine{ to{ transform:translateX(360%) skewX(-18deg); } }

/* ============================================================
   THE ARROW
   ============================================================ */
#fx-arrow{
  position:absolute; left:0; top:0; z-index:30;
  pointer-events:none; overflow:visible;
}
#fx-arrow .trail{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.2; }
#fx-arrow .comet-w{ fill:none; stroke:rgba(210,214,240,.22); stroke-width:6; stroke-linecap:round; }
#fx-arrow .comet{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.6; stroke-linecap:round; }
#fx-arrow .head{ transition:opacity .35s ease; }

/* cards get knocked by the arrow */
html.fx .fx-knock{ translate:var(--kx,0px) var(--ky,0px); }
html.fx .prob-card, html.fx #process .card{ position:relative; overflow:hidden; }
html.fx .prob-card::after, html.fx #process .card::after{
  content:''; position:absolute; inset:-2px; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-110%);
}
html.fx .fx-hit::after{ animation:fxSweep .8s cubic-bezier(.3,.6,.2,1); }
@keyframes fxSweep{ to{ transform:translateX(110%); } }
html.fx .fx-hit{ border-color:rgba(255,255,255,.28) !important; transition:border-color 1.2s ease, transform .35s cubic-bezier(.2,.7,.3,1); }

html.fx .prob-n{ transform:perspective(300px) rotateY(100deg) scale(.5); transition:transform .8s cubic-bezier(.3,1.5,.5,1) .2s, box-shadow .6s ease; }
html.fx .prob-card.in .prob-n{ transform:none; }
html.fx .prob-card.fx-hit .prob-n{ box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 0 28px rgba(255,255,255,.45); }

/* playbook — steps light up as the arrow passes */
html.fx #process .card{ transition:box-shadow .7s ease, border-color .7s ease, opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
html.fx #process .card.lit{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 70px -30px rgba(200,205,240,.35);
}
html.fx #process .step-ic{ overflow:hidden; transition:background .5s ease, color .5s ease, box-shadow .5s ease; }
html.fx #process .card.lit .step-ic{ background:#F2F2F0; color:#0B0B0C; box-shadow:0 0 26px rgba(255,255,255,.35); }
html.fx #process .card.lit:nth-child(1) .step-ic svg{ animation:fxScan 2.4s ease-in-out infinite; }
html.fx #process .card.lit:nth-child(2) .step-ic svg{ animation:fxPop 1.8s cubic-bezier(.3,1.6,.5,1) infinite; }
html.fx #process .card.lit:nth-child(3) .step-ic svg{ animation:fxLaunch 2.2s cubic-bezier(.5,0,.3,1) infinite; }
html.fx #process .card.lit:nth-child(4) .step-ic path{ stroke-dasharray:1; animation:fxDraw 2.4s ease-in-out infinite; }
@keyframes fxScan{
  0%,100%{ transform:translate(0,0); } 25%{ transform:translate(3px,-2px); }
  50%{ transform:translate(0,3px) scale(1.08); } 75%{ transform:translate(-3px,-1px); }
}
@keyframes fxPop{ 0%,55%,100%{ transform:scale(1) rotate(0); } 15%{ transform:scale(1.22) rotate(-8deg); } 30%{ transform:scale(.94) rotate(4deg); } }
@keyframes fxLaunch{
  0%{ transform:translate(0,0); opacity:1; }
  30%{ transform:translate(-1px,1px); }
  34%{ transform:translate(1px,0); }
  38%{ transform:translate(-1px,1px); }
  62%{ transform:translate(26px,-26px); opacity:0; }
  63%{ transform:translate(-26px,26px); opacity:0; }
  100%{ transform:translate(0,0); opacity:1; }
}
@keyframes fxDraw{ 0%{ stroke-dashoffset:1; } 55%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-1; } }

/* ============================================================
   SECTIONS
   ============================================================ */
/* split headings */
.fx-w{ display:inline-block; white-space:nowrap; }
.fx-c{ display:inline-block; transform-origin:50% 100%; }

/* About — scroll-read words */
.fx-word{ transition:none; }

/* About image */
html.fx .split-media{ overflow:hidden; border-radius:var(--r-lg); }


/* Work cards — tilt & glare */
html.fx .work-thumb{ transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
html.fx .work-thumb.fx-tilting{ transition:transform .12s linear; }
html.fx .work-thumb img{ transform:scale(1.08) translate3d(var(--px,0px), var(--py,0px), 0) !important; transition:transform .5s cubic-bezier(.2,.7,.3,1) !important; }
html.fx .fx-glare{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.28), transparent 42%);
  mix-blend-mode:soft-light; transition:opacity .4s ease;
}
html.fx .work-thumb:hover .fx-glare{ opacity:1; }

/* Built For — ticks draw themselves */
html.fx .fit-card svg path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.6,0,.2,1); }
html.fx .fit-card.in svg path{ stroke-dashoffset:0; }
html.fx .fit-card.in .fit-badge svg path{ transition-delay:.15s; }
html.fx .fit-card.in li:nth-child(1) svg path{ transition-delay:.45s; }
html.fx .fit-card.in li:nth-child(2) svg path{ transition-delay:.7s; }
html.fx .fit-card.in li:nth-child(3) svg path{ transition-delay:.95s; }
html.fx .fit-card.in .fit-ic.no svg path:nth-child(2){ transition-delay:1.1s; }
html.fx .fit-ic, html.fx .fit-badge{ transition:transform .6s cubic-bezier(.3,1.6,.5,1), box-shadow .6s ease; transform:scale(.4); }
html.fx .fit-card.in .fit-ic, html.fx .fit-card.in .fit-badge{ transform:none; }
html.fx .fit-card.in li:nth-child(1) .fit-ic{ transition-delay:.35s; }
html.fx .fit-card.in li:nth-child(2) .fit-ic{ transition-delay:.6s; }
html.fx .fit-card.in li:nth-child(3) .fit-ic{ transition-delay:.85s; }
html.fx .fit-yes.in .fit-ic.yes{ box-shadow:0 0 18px rgba(255,255,255,.3); }

/* Team — grey & blur → sharp, with a scan line */
html.fx .team-photo{ position:relative; }
html.fx .team-photo img{
  filter:grayscale(1) blur(10px) brightness(.55);
  transform:scale(1.12);
  transition:filter 1.6s cubic-bezier(.4,0,.2,1) .25s, transform 2s cubic-bezier(.2,.7,.3,1) .1s;
}
html.fx .team-card.in .team-photo img{ filter:none; transform:scale(1); }
html.fx .team-photo::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow:0 0 22px 6px rgba(255,255,255,.45), 0 0 80px 20px rgba(190,195,235,.2);
  opacity:0; transform:translateY(-10px);
}
html.fx .team-card.in .team-photo::after{ animation:fxScanLine 1.6s cubic-bezier(.5,0,.3,1) .15s both; }
@keyframes fxScanLine{
  0%{ opacity:0; top:0; } 10%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; top:100%; }
}

/* Calculator glow */
html.fx .wc-big, html.fx #wc-year{ transition:text-shadow .5s ease; }
html.fx .fx-glow{ text-shadow:0 0 28px rgba(255,255,255,.55), 0 0 70px rgba(190,195,235,.3); transition:text-shadow .08s ease; }

/* FAQ spring */
html.fx .faq-a{ transition:max-height .6s cubic-bezier(.3,1.25,.5,1); }
html.fx .faq-a > *{ opacity:0; transform:translateY(-10px); transition:opacity .45s ease, transform .6s cubic-bezier(.3,1.4,.5,1); }
html.fx .faq-item.open .faq-a > *{ opacity:1; transform:none; transition-delay:.08s; }

/* Marquee — speed-reactive, skews with velocity */


/* ============================================================
   FINAL CTA — bullseye, impact
   ============================================================ */
html.fx #book{ position:relative; overflow:hidden; }
.fx-target{
  position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; z-index:0;
}
.fx-target i{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  transform:translate(-50%,-50%) scale(var(--s,1));
}
.fx-target i:nth-child(1){ width:180px; height:180px; }
.fx-target i:nth-child(2){ width:360px; height:360px; border-color:rgba(255,255,255,.09); }
.fx-target i:nth-child(3){ width:560px; height:560px; border-color:rgba(255,255,255,.06); }
.fx-target i:nth-child(4){ width:800px; height:800px; border-color:rgba(255,255,255,.04); }
html.fx #book .wrap{ position:relative; z-index:1; }
.fx-shock{
  position:absolute; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 30px rgba(255,255,255,.5), inset 0 0 20px rgba(255,255,255,.3);
  pointer-events:none; z-index:3;
}
.fx-spark{
  position:absolute; left:0; top:0; width:3px; height:3px; border-radius:2px;
  background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.7);
  pointer-events:none; z-index:3;
}
html.fx #book h2.fx-struck{
  text-shadow:0 0 24px rgba(255,255,255,.55), 0 0 80px rgba(190,195,235,.35);
  animation:fxStruckText 2.4s ease-in-out infinite;
}
@keyframes fxStruckText{
  0%,100%{ text-shadow:0 0 24px rgba(255,255,255,.45), 0 0 80px rgba(190,195,235,.25); }
  50%{ text-shadow:0 0 36px rgba(255,255,255,.7), 0 0 120px rgba(190,195,235,.4); }
}
@keyframes fxStruck{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 0 40px 4px rgba(255,255,255,.3), 0 0 120px 20px rgba(190,195,235,.15); }
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 60px 8px rgba(255,255,255,.45), 0 0 160px 30px rgba(190,195,235,.25); }
}

/* ============================================================
   CURSOR (fine pointers only)
   ============================================================ */
#fx-cursor{ position:fixed; left:0; top:0; z-index:500; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .3s ease; }
#fx-cursor.on{ opacity:1; }
#fx-cursor .dot, #fx-cursor .ring{ position:absolute; left:0; top:0; border-radius:50%; will-change:transform; }
#fx-cursor .dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; transition:opacity .2s ease; }
#fx-cursor .ring{
  width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.7);
  display:grid; place-items:center;
  transition:width .35s cubic-bezier(.2,.7,.3,1), height .35s cubic-bezier(.2,.7,.3,1), margin .35s cubic-bezier(.2,.7,.3,1), background .3s ease, border-color .3s ease;
}
#fx-cursor .ring span{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#000; opacity:0; transition:opacity .2s ease; }
#fx-cursor.link .ring{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,255,255,.12); }
#fx-cursor.link .dot{ opacity:0; }
#fx-cursor.view .ring{ width:92px; height:92px; margin:-46px 0 0 -46px; background:#fff; border-color:#fff; }
#fx-cursor.view .ring span{ opacity:1; }
#fx-cursor.view .dot{ opacity:0; }
#fx-cursor.down .ring{ width:28px; height:28px; margin:-14px 0 0 -14px; }
html.fx-cursor-on, html.fx-cursor-on body, html.fx-cursor-on a, html.fx-cursor-on button, html.fx-cursor-on .faq-q{ cursor:none; }
html.fx-cursor-on input, html.fx-cursor-on select, html.fx-cursor-on textarea, html.fx-cursor-on iframe{ cursor:auto; }

/* ============================================================
   REDUCED MOTION — calm version
   ============================================================ */
html.fx-reduce .statue{ opacity:1; }
html.fx-reduce .team-photo img{ filter:none; transform:none; transition:none; }
html.fx-reduce .team-photo::after{ display:none; }
html.fx-reduce .prob-n, html.fx-reduce .fit-ic, html.fx-reduce .fit-badge{ transform:none; transition:none; }
html.fx-reduce .fit-card svg path{ stroke-dashoffset:0; transition:none; }
html.fx-reduce .faq-a > *{ opacity:1; transform:none; }

/* v117 — "Book a call" is the destination: the rings and the glow that the
   final CTA used to carry now sit behind the booking heading */
html.fx #book{
  background:
    radial-gradient(52% 60% at 50% 22%, rgba(120,125,160,.10), transparent 70%),
    var(--bg);
}
html.fx #book .fx-target{ z-index:0; }