/* ============================================================
   Fuller Motion Kit (FMK) v1
   ------------------------------------------------------------
   A small, dependency free motion layer for the Fuller Fitness
   funnel. Loaded after main.css so it can lean on the Fuller
   theme variables (--blue, --navy, --gold, --rule).

   Everything here is opt in through data attributes, so the
   shared DMF kit underneath still behaves exactly as it did:

     data-fm="rise|fade|left|right|zoom|blur|lift"
                            reveal primitive, fires once on enter
     data-fm-delay="0.2"    seconds of extra delay on that reveal
     data-fm-stagger="rise" applies the primitive to every child,
                            each one a beat behind the last
     data-fm-split="words"  headline wipes up out of a mask,
                            word by word
     data-fm-scrub          publishes scroll progress through the
                            element as --p (0 to 1) for anything
                            that wants to be driven by it
     data-fm-parallax="0.2" drifts with the scroll, strength 0 to 1
     data-fm-count="219"    eased count up, with data-fm-prefix /
                            data-fm-suffix
     data-fm-draw           strokes an inline SVG on like a pen
     data-fm-magnet         pointer magnetism, fine pointers only
     .fm-spot               pointer tracked glow across a surface
     .fm-sheen              one light sweep when it reveals
     .fm-dial               conic progress ring driven by --p

   Reduced motion turns every one of them into a plain, instant,
   fully visible state. Nothing here is load bearing for layout.
   ============================================================ */

:root{
  --fm-ease:cubic-bezier(.16,1,.3,1);
  --fm-ease-soft:cubic-bezier(.22,.61,.36,1);
  --fm-dur:.9s;
  --fm-step:.075s;
  --fm-glow:rgba(91,155,213,.32);
}

/* ---------- reveal primitives ---------- */
.js [data-fm]{
  opacity:0;
  transition:opacity var(--fm-dur) var(--fm-ease),transform var(--fm-dur) var(--fm-ease),filter var(--fm-dur) var(--fm-ease);
  transition-delay:var(--fm-d,0s);
}
.js [data-fm="rise"]{transform:translate3d(0,30px,0)}
.js [data-fm="lift"]{transform:translate3d(0,44px,0) scale(.975)}
.js [data-fm="left"]{transform:translate3d(-34px,0,0)}
.js [data-fm="right"]{transform:translate3d(34px,0,0)}
.js [data-fm="zoom"]{transform:scale(.93)}
.js [data-fm="blur"]{transform:translate3d(0,16px,0);filter:blur(10px)}
.js [data-fm].fm-in{opacity:1;transform:none;filter:none}

/* ---------- split headlines ---------- */
.fm-wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.js .fm-w{display:inline-block;transform:translate3d(0,115%,0);opacity:0;transition:transform .95s var(--fm-ease),opacity .5s linear;transition-delay:var(--fm-d,0s)}
.js .fm-in .fm-w{transform:none;opacity:1}

/* ---------- pointer tracked glow ---------- */
.fm-spot{position:relative;isolation:isolate}
.fm-spot::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .45s var(--fm-ease-soft);
  background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,50%),var(--fm-spot,var(--fm-glow)),transparent 68%);
}
.fm-spot:hover::after,.fm-spot:focus-within::after{opacity:1}
.fm-spot>*{position:relative;z-index:1}

/* ---------- one light sweep on reveal ---------- */
.fm-sheen{position:relative;overflow:hidden}
.fm-sheen::before{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-14deg);opacity:0;
}
.fm-sheen.fm-in::before{animation:fm-sweep 1.5s var(--fm-ease-soft) .35s 1}
@keyframes fm-sweep{0%{left:-60%;opacity:0}12%{opacity:1}100%{left:130%;opacity:0}}

/* ---------- conic progress dial ---------- */
.fm-dial{
  position:relative;width:var(--fm-dial-size,clamp(9.5rem,17vw,13rem));aspect-ratio:1;
  margin-inline:auto;display:grid;place-items:center;
}
.fm-dial::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--blue) calc(var(--p,0) * 360deg),var(--fm-dial-track,rgba(39,75,114,.14)) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
}
.fm-dial::after{
  content:'';position:absolute;inset:9px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,var(--fm-glow),transparent 62%);
  opacity:calc(.25 + var(--p,0) * .75);
}
.fm-dial>*{position:relative;z-index:2}

/* ---------- count up ---------- */
[data-fm-count]{font-variant-numeric:tabular-nums}
.fm-pop{animation:fm-pop .6s var(--fm-ease) 1}
@keyframes fm-pop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- pen stroke SVG ---------- */
.js [data-fm-draw] path,.js [data-fm-draw] circle,.js [data-fm-draw] rect,.js [data-fm-draw] line{
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset 1.1s var(--fm-ease-soft);transition-delay:var(--fm-d,.1s);
}
.js [data-fm-draw].fm-in path,.js [data-fm-draw].fm-in circle,.js [data-fm-draw].fm-in rect,.js [data-fm-draw].fm-in line{stroke-dashoffset:0}

/* ---------- magnetic buttons ---------- */
[data-fm-magnet]{transition:transform .35s var(--fm-ease-soft)}
[data-fm-magnet].fm-pull{transition:transform .12s linear}

/* ============================================================
   Section: what's in the 30 Day Kickstart
   ============================================================ */
.kit{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:680px){.kit{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.kit{grid-template-columns:repeat(3,1fr);gap:1.2rem}}

.kit-item{
  position:relative;padding:1.7rem 1.5rem 1.6rem;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.14);
  transition:transform .45s var(--fm-ease),border-color .45s,box-shadow .45s;
  --fm-spot:rgba(91,155,213,.3);
}
.kit-item::before{
  content:'';position:absolute;left:1.5rem;right:1.5rem;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--blue),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--fm-ease) .15s;
}
.js .kit-item.fm-in::before{transform:scaleX(1)}
.kit-item:hover{transform:translateY(-6px);border-color:rgba(91,155,213,.55);box-shadow:0 26px 50px -30px rgba(0,0,0,.85)}
.kit-item h3{
  font-family:var(--font-head);text-transform:uppercase;font-size:1.12rem;font-weight:800;
  letter-spacing:.04em;color:#fff;margin:0 0 .5rem;
}
.kit-item p{color:#CBDCEC;margin:0;font-size:.95rem}
.kit-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.kit-icon{
  flex:0 0 auto;width:3rem;height:3rem;border-radius:12px;display:grid;place-items:center;
  background:rgba(91,155,213,.22);border:1px solid rgba(91,155,213,.55);color:#CBE4FA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .4s,color .4s,transform .4s var(--fm-ease);
}
.kit-icon svg{width:1.45rem;height:1.45rem}
.kit-item:hover .kit-icon{background:var(--blue);color:#fff;transform:rotate(-6deg) scale(1.06)}
.kit-n{
  margin-left:auto;font-family:var(--font-head);font-weight:800;font-size:.76rem;letter-spacing:.18em;
  color:rgba(157,199,238,.6);
}

/* the price panel */
.pricebox{
  margin-top:2.6rem;display:grid;gap:1.6rem;grid-template-columns:1fr;align-items:center;
  padding:clamp(1.5rem,3.2vw,2.4rem);border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(140deg,rgba(91,155,213,.2),rgba(255,255,255,.04) 55%);
  border:1px solid rgba(91,155,213,.4);
  --fm-spot:rgba(245,183,51,.22);
}
@media(min-width:900px){.pricebox{grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,3.4rem)}}
.price-plate{text-align:left}
.price-lab{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold);margin:0 0 .3rem}
.price-fig{
  font-family:var(--font-head);font-weight:800;line-height:.9;color:#fff;
  font-size:clamp(3.4rem,9vw,5.6rem);letter-spacing:-.01em;display:flex;align-items:flex-start;gap:.06em;
}
.price-fig .cur{font-size:.44em;margin-top:.18em}
.price-sub{margin:.5rem 0 0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#BFD4E8}
.price-day{
  display:inline-flex;align-items:baseline;gap:.5rem;margin-top:1rem;padding:.45rem .85rem;border-radius:var(--pill);
  background:rgba(245,183,51,.16);border:1px solid rgba(245,183,51,.45);color:var(--gold);
  font-weight:800;font-size:.82rem;letter-spacing:.06em;
}
.price-day b{font-size:1.05rem}
.bars{display:grid;gap:1rem}
.bar-row{display:grid;gap:.35rem}
.bar-lab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#BFD4E8}
.bar-lab b{font-family:var(--font-head);font-size:1.1rem;color:#fff;letter-spacing:.02em}
.bar-track{height:.7rem;border-radius:var(--pill);background:rgba(255,255,255,.12);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:var(--pill);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--fm-ease);transition-delay:var(--fm-d,.2s)}
.js .fm-in .bar-fill,.js .bar-fill.fm-in{transform:scaleX(var(--w,1))}
.bar-row.is-ours .bar-fill{background:linear-gradient(90deg,var(--gold),#FFD684)}
.bar-row.is-theirs .bar-fill{background:rgba(255,255,255,.3)}
.bars-note{margin:.2rem 0 0;font-size:.8rem;color:#A9C1D8}

/* ============================================================
   Section: what happens, week by week
   ============================================================ */
.ks{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:1fr;margin-top:2.2rem}
@media(min-width:960px){.ks{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}

.ks-rail{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;margin:0 0 2rem}
.ks-rail i{
  display:block;aspect-ratio:1;border-radius:3px;background:var(--rule);
  transform:scaleY(.55);transform-origin:bottom;
  transition:background .35s var(--fm-ease-soft),transform .45s var(--fm-ease),box-shadow .35s;
}
.ks-rail i.on{background:var(--blue);transform:scaleY(1)}
.ks-rail i.key{background:#E7EDF3;box-shadow:inset 0 0 0 2px var(--gold)}
.ks-rail i.key.on{background:var(--gold);box-shadow:0 4px 14px -4px rgba(245,183,51,.9)}

.ks-steps{list-style:none;margin:0;padding:0;position:relative}
.ks-step{position:relative;padding:0 0 1.9rem 3.2rem}
.ks-step:last-child{padding-bottom:0}
/* the rail is one segment per gap, so it stops dead on the last node */
.ks-step:not(:last-child)::before{
  content:'';position:absolute;left:1.02rem;top:2.4rem;bottom:.1rem;width:2px;border-radius:2px;
  background:var(--rule);
}
.ks-step.lit:not(:last-child)::before{background:linear-gradient(180deg,var(--blue),var(--blue))}
.ks-step.lit:nth-last-child(2)::before{background:linear-gradient(180deg,var(--blue),var(--gold))}
.ks-node{
  position:absolute;left:0;top:.15rem;width:2.15rem;height:2.15rem;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);border:2px solid var(--rule);
  transition:border-color .45s var(--fm-ease),box-shadow .45s var(--fm-ease),transform .45s var(--fm-ease);
  z-index:1;
}
.ks-node i{
  width:.6rem;height:.6rem;border-radius:50%;background:var(--rule);display:block;
  transition:background .45s var(--fm-ease),transform .45s var(--fm-ease);
}
.ks-step.on .ks-node{border-color:var(--blue);box-shadow:0 0 0 6px rgba(91,155,213,.16)}
.ks-step.on .ks-node i{background:var(--blue);transform:scale(1.18)}
.ks-step.on:last-child .ks-node{border-color:var(--gold);box-shadow:0 0 0 6px rgba(245,183,51,.2)}
.ks-step.on:last-child .ks-node i{background:var(--gold)}
.js .ks-step.just-on .ks-node{animation:fm-ping .7s var(--fm-ease) 1}
@keyframes fm-ping{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.ks-day{
  display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--muted);transition:color .4s;
}
.ks-step.on .ks-day{color:var(--blue-deep)}
.ks-step b{
  font-family:var(--font-head);text-transform:uppercase;font-size:clamp(1.05rem,2vw,1.3rem);
  font-weight:800;letter-spacing:.03em;display:block;line-height:1.1;margin:.15rem 0 .35rem;color:var(--navy);
}
.ks-step p{margin:0;font-size:.95rem;color:var(--body);max-width:44ch}
.js .ks-step{opacity:.45;transform:translateY(6px);transition:opacity .55s var(--fm-ease),transform .55s var(--fm-ease)}
.js .ks-step.on{opacity:1;transform:none}

.ks-aside{text-align:center}
@media(min-width:960px){.ks-aside{position:sticky;top:6.5rem}}
.ks-count{
  font-family:var(--font-head);font-weight:800;line-height:1;color:var(--navy);
  font-size:clamp(3rem,7vw,4.4rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ks-of{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:.35rem}
.ks-photo{margin:1.4rem 0 0;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--navy-deep)}
.ks-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.2s var(--fm-ease)}
.ks-photo:hover img{transform:scale(1.05)}
.ks-photo figcaption{
  position:absolute;left:.9rem;bottom:.9rem;right:.9rem;color:#fff;text-align:left;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.ks-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(27,54,82,.75))}

/* ---------- reduced motion: everything lands, nothing moves ---------- */
@media(prefers-reduced-motion:reduce){
  .js [data-fm],.js .fm-w,.js .ks-step{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .fm-sheen::before{display:none}
  .js [data-fm-draw] path,.js [data-fm-draw] circle,.js [data-fm-draw] rect,.js [data-fm-draw] line{stroke-dashoffset:0;transition:none}
  .kit-item::before{transform:scaleX(1)}
  .bar-fill{transform:scaleX(var(--w,1));transition:none}
  .ks-rail i{transform:none;transition:none}
  .fm-pop{animation:none}
}