/* ============================================================================
   MOTION, the static half. Loads last.

   motion.js adds html.mo only when it is going to animate (GSAP present,
   reduced motion off), and every hidden start state below sits under .mo, so
   with JavaScript off, a CDN down or reduced motion on, nothing here hides
   anything. One curve for the whole page: a long expo-out.
   ============================================================================ */
:root{--mo-ease:cubic-bezier(.16,1,.3,1);--mo-ink:cubic-bezier(.65,.05,.36,1)}

/* ---- the wheel glides (Lenis) ---- */
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}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---- hero: a light that follows the cursor, and the grid lit up under it ----
   The grid layer is fixed to the viewport like the background's own grid, so
   its lines sit exactly on top of the ones beneath; only the mask moves. */
.hero-plain .hero{position:relative;z-index:1}
.h-glow,.h-grid{position:absolute;pointer-events:none;z-index:0;opacity:0;transition:opacity .9s ease}
.h-glow{left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;
  background:radial-gradient(closest-side,rgb(4 87 245 / .14),rgb(4 87 245 / .05) 55%,transparent);will-change:transform}
.h-grid{inset:0;background-image:linear-gradient(rgb(1 69 200 / .42) 1px,transparent 1px),linear-gradient(90deg,rgb(1 69 200 / .42) 1px,transparent 1px);
  background-size:74px 74px;background-attachment:fixed;
  -webkit-mask-image:radial-gradient(240px circle at var(--gx,50%) var(--gy,40%),#000,transparent 72%);
          mask-image:radial-gradient(240px circle at var(--gx,50%) var(--gy,40%),#000,transparent 72%)}
.h-glow.on,.h-grid.on{opacity:1}

/* ---- the main button catches the light every few seconds ---- */
.mo .hero .cta::before,.mo .dock .section-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .38) 50%,transparent 65%);
  transform:translateX(-130%);animation:cta-glint 6.5s 2.2s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cta-glint{ 0%{transform:translateX(-130%)} 16%,100%{transform:translateX(130%)} }

/* ---- section buttons pop up with their section ---- */
.mo .cta-pop{opacity:0;scale:.9;
  transition:transform .16s,background-color .35s,opacity .7s var(--mo-ease),scale .9s cubic-bezier(.2,1.5,.35,1)}
.mo .cta-pop.in{opacity:1;scale:1}

/* ---- section tiles ring once as they land ---- */
.sec-ic{position:relative}
.sec-ic::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--cta);opacity:0;pointer-events:none}
.mo .sec-ic.ping::after{animation:ic-ping .9s ease-out}
@keyframes ic-ping{ from{opacity:.6;transform:scale(1)} to{opacity:0;transform:scale(1.7)} }

/* ---- highlighted phrases are marked in like a highlighter pen ---- */
.mo .hl{background-image:linear-gradient(rgb(201 162 39 / .34),rgb(201 162 39 / .34));background-color:transparent;
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  transition:background-size 1.2s var(--mo-ink) .15s}
.mo .hl.lit{background-size:100% 100%}

/* ---- handwritten names write themselves on, left to right ---- */
@keyframes write-on{ from{clip-path:inset(-30% 100% -40% -8%)} to{clip-path:inset(-30% -8% -40% -8%)} }
.mo .tst.js .tslide .t-nm{align-self:flex-start}
.mo .tst.js .tslide.on .t-nm{animation:write-on 1.2s .18s var(--mo-ink) both}
.mo .ring.js:not(.spinning) .bq.front .bq-by b{animation:write-on 1s .2s var(--mo-ink) both}
.mo .sig .nm,.mo .ftm-box .ft-logo{clip-path:inset(-30% 100% -40% -8%);transition:clip-path 1.3s var(--mo-ink) .35s}
.mo .sig.in .nm,.mo .ftm-box.in .ft-logo{clip-path:inset(-30% -8% -40% -8%)}

/* ---- the reviewer portraits fan out from behind the card ---- */
.mo .tst.js:not(.tst-in) .tp{translate:0 0;scale:.5;opacity:0;pointer-events:none}

/* ---- what you walk away with: each tick pops and draws ---- */
.mo .summary .tick{scale:0;transition:scale .6s cubic-bezier(.2,1.6,.4,1) calc(.35s + var(--k,0) * .12s)}
.mo .summary .tick svg{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s ease-out calc(.55s + var(--k,0) * .12s)}
.mo .summary.in .tick{scale:1}
.mo .summary.in .tick svg{stroke-dashoffset:0}

/* ---- the recap list: icons pop after their line arrives ---- */
.mo .recap-list li > svg,.mo .recap-list li > .live{scale:0;transition:scale .6s cubic-bezier(.2,1.6,.4,1) calc(.3s + var(--k,0) * .09s)}
.mo .recap-list li.in > svg,.mo .recap-list li.in > .live{scale:1}

/* ---- the price card: rows deal in, the total is struck through, and a
   light runs round its edge ---- */
.mo .section-price .pr-card:not(.seen){transform:perspective(1400px) translateY(60px) rotateX(-12deg)}
.mo .section-price .pr-card{transform-origin:50% 0;transition:opacity .9s var(--mo-ease) .12s,transform 1.3s var(--mo-ease) .12s}
.mo .section-price .pr-card > *{opacity:0;translate:0 16px;transition:opacity .6s ease calc(.3s + var(--k,0) * .06s),translate .9s var(--mo-ease) calc(.3s + var(--k,0) * .06s)}
.mo .section-price .pr-card.seen > *{opacity:1;translate:none}
.pr-was s{position:relative;text-decoration:none}
.pr-was s::after{content:"";position:absolute;left:-6%;right:-6%;top:54%;height:2px;border-radius:2px;background:currentColor;transform-origin:0 50%}
.mo .pr-card .pr-was s::after{transform:scaleX(0);transition:transform .55s var(--mo-ink) 1.15s}
.mo .pr-card.seen .pr-was s::after{transform:scaleX(1)}
.section-price .pr-card{position:relative;isolation:isolate;overflow:hidden}
.section-price .pr-card::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;margin:-95% 0 0 -95%;z-index:-2;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,rgb(4 87 245 / .0) 60%,#0457F5 72%,#C9A227 82%,transparent 90%);
  animation:pr-orbit 7s linear infinite}
.section-price .pr-card::after{content:"";position:absolute;inset:2px;border-radius:20px;background:#fff;z-index:-1;pointer-events:none}
@keyframes pr-orbit{ to{transform:rotate(360deg)} }
@media (max-width:760px){ .section-price .pr-card::after{border-radius:16px} }

/* ---- the rest of the CSS-revealed blocks, given the same depth ---- */
.mo .section-price .pr-copy:not(.seen){transform:translateY(34px)}
.mo .section-price .pr-copy{transition:opacity .9s var(--mo-ease),transform 1.2s var(--mo-ease)}
.mo .fq-item:not(.seen){transform:perspective(1100px) translateY(36px) rotateX(-16deg)}
.mo .fq-item{transform-origin:50% 0;transition:opacity .9s var(--mo-ease),transform 1.2s var(--mo-ease),border-color .38s ease,box-shadow .38s ease}
.mo .tl-row:not(.seen) .tl-card{transform:translateY(34px)}
.mo .tl-row:not(.seen) .tl-when{transform:translateY(22px)}
.mo .tl-row .tl-when,.mo .tl-row .tl-card{transition:opacity .8s var(--mo-ease),transform 1.1s var(--mo-ease),translate .35s var(--mo-ease),box-shadow .35s ease}
.mo .tl-row .tl-card{transition-delay:.08s}

/* ---- the guarantee seal lands with a thud ---- */
.vowring .mid::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--navy);opacity:0;pointer-events:none}
.mo .vowring.thud .mid::after{animation:seal-ring .9s ease-out}
@keyframes seal-ring{ from{opacity:.55;transform:scale(1)} to{opacity:0;transform:scale(1.9)} }

/* ---- "this is for you": a short burst of colour ---- */
.burst{position:absolute;left:0;width:100%;height:760px;overflow:hidden;z-index:60;pointer-events:none}
.burst i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .section-price .pr-card::before{animation:none}
  .h-glow,.h-grid{display:none}
}