/* ===========================================================
   The King of Gym Equipment — EXTRA FX layer
   Scroll progress · heading reveal sheen · card spotlight
   magnetic buttons · brand marquee · glow accents
   (additive only — does not modify base kog-styles.css)
   =========================================================== */

/* ---------- scroll progress bar ---------- */
#fx-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-soft),var(--navy-glow));
  box-shadow:0 0 14px rgba(232,32,44,.6);
  will-change:transform;pointer-events:none;
}

/* ---------- heading reveal: clip-wipe + sheen ---------- */
.js .section-head h2,
.js .hero h1{position:relative;}
.js .section-head.reveal h2{
  clip-path:inset(0 100% 0 0);
  opacity:.001;
  transition:clip-path .9s cubic-bezier(.22,.61,.36,1) .05s,opacity .5s ease .05s;
}
.section-head.reveal.in h2{clip-path:inset(0 0 0 0);opacity:1;}
/* sheen sweep that runs once when the heading reveals */
.section-head h2::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:260% 100%;background-position:140% 0;
  mix-blend-mode:overlay;opacity:0;
}
.section-head.reveal.in h2::after{animation:fxSheen 1.1s ease .55s 1 both;}
@keyframes fxSheen{0%{opacity:0;background-position:140% 0;}15%{opacity:1;}100%{opacity:0;background-position:-60% 0;}}

/* ---------- emphasis word: living glow ---------- */
.red-text{animation:fxGlow 3.4s ease-in-out infinite;}
@keyframes fxGlow{
  0%,100%{text-shadow:0 0 18px rgba(232,32,44,.35);}
  50%{text-shadow:0 0 26px rgba(232,32,44,.7),0 0 46px rgba(232,32,44,.25);}
}

/* ---------- buttons: light sweep on hover ---------- */
.btn{position:relative;overflow:hidden;}
.btn::before{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;
}
.btn:hover::before{animation:fxSweep .8s ease 1;}
@keyframes fxSweep{from{left:-130%;}to{left:140%;}}

/* ---------- card cursor spotlight ---------- */
[data-spot]{position:relative;isolation:isolate;}
[data-spot]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(232,32,44,.16),rgba(40,66,168,.12) 38%,transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
[data-spot]:hover::before{opacity:1;}
.why>*,.floor-block>*,.step>*,.form-card>*{position:relative;z-index:1;}

/* ---------- why-cards: top accent line draw ---------- */
.why{position:relative;overflow:hidden;}
.why::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--navy-glow));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.why:hover::after{transform:scaleX(1);}
.why:hover .ic{transform:translateY(-3px) rotate(-4deg);box-shadow:0 14px 30px -12px rgba(40,66,168,.8);}
.why .ic{transition:transform .3s ease,box-shadow .3s ease;}

/* ---------- stat numbers: subtle gradient shimmer ---------- */
.stat b{
  background:linear-gradient(100deg,#fff,#c3cde6 45%,#fff 70%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:fxStatShine 6s linear infinite;
}
.stat b .u{-webkit-text-fill-color:var(--red-soft);}
@keyframes fxStatShine{from{background-position:200% 0;}to{background-position:-40% 0;}}

/* ---------- BRAND MARQUEE ribbon ---------- */
.fx-marquee{
  position:relative;overflow:hidden;background:var(--red);
  border-top:1px solid var(--red-deep);border-bottom:1px solid var(--red-deep);
  --speed:32s;
}
.fx-marquee::before,.fx-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.fx-marquee::before{left:0;background:linear-gradient(90deg,var(--red),transparent);}
.fx-marquee::after{right:0;background:linear-gradient(270deg,var(--red),transparent);}
.fx-track{display:flex;width:max-content;animation:fxMarquee var(--speed) linear infinite;}
.fx-marquee:hover .fx-track{animation-play-state:paused;}
.fx-track span{
  display:inline-flex;align-items:center;gap:18px;padding:16px 0;
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(15px,1.7vw,20px);color:#fff;white-space:nowrap;
}
.fx-track span i{font-style:normal;color:rgba(255,255,255,.55);padding:0 26px;}
@keyframes fxMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- back-to-top ---------- */
.fx-top{
  position:fixed;left:22px;bottom:22px;z-index:115;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(15,24,48,.85);border:1px solid var(--line);color:#fff;
  backdrop-filter:blur(8px);cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s,border-color .2s;
}
.fx-top.show{opacity:1;transform:none;pointer-events:auto;}
.fx-top:hover{background:var(--red);border-color:var(--red);}
.fx-top svg{width:22px;height:22px;}
@media (max-width:680px){.fx-top{left:16px;bottom:80px;width:42px;height:42px;}}

/* ===========================================================
   WORLD-CLASS CUSTOM CURSOR + GYM-EQUIPMENT TRAIL
   (only enabled on fine-pointer / hover devices via JS)
   =========================================================== */
body.fx-cursor{cursor:none;}
body.fx-cursor a,
body.fx-cursor button,
body.fx-cursor .btn,
body.fx-cursor input,
body.fx-cursor textarea,
body.fx-cursor select,
body.fx-cursor [role="button"],
body.fx-cursor .s3d-nav,
body.fx-cursor label{cursor:none;}

/* the soft trailing ring */
#fx-cursor{
  position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  border:1.5px solid var(--red-soft);
  box-shadow:0 0 18px rgba(232,32,44,.35),inset 0 0 10px rgba(232,32,44,.12);
  transition:width .22s ease,height .22s ease,margin .22s ease,
             background .22s ease,border-color .22s ease,opacity .25s ease;
  will-change:transform;mix-blend-mode:screen;
}
/* the precise center dot */
#fx-dot{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);
  will-change:transform;
}
/* grow + fill when hovering interactive elements */
body.fx-cursor.fx-hot #fx-cursor{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:rgba(232,32,44,.14);border-color:var(--red);
}
body.fx-cursor.fx-hot #fx-dot{opacity:0;}
/* press feedback */
body.fx-cursor.fx-down #fx-cursor{width:30px;height:30px;margin:-15px 0 0 -15px;border-color:#fff;}

/* the flung gym-equipment icons */
.fx-weight{
  position:fixed;top:0;left:0;z-index:9997;pointer-events:none;
  width:30px;height:30px;color:var(--red-soft);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  will-change:transform,opacity;opacity:0;
}
.fx-weight svg{width:100%;height:100%;display:block;}
@keyframes fxWeightPop{
  0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.2) rotate(0deg);}
  18%{opacity:1;}
  100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(1) rotate(var(--rot));}
}

@media (prefers-reduced-motion:reduce){
  .red-text,.stat b,.fx-track{animation:none;}
  .js .section-head.reveal h2{clip-path:none;opacity:1;transition:none;}
  .section-head h2::after,.btn::before{display:none;}
  .stat b{-webkit-text-fill-color:#fff;color:#fff;background:none;}
  .stat b .u{-webkit-text-fill-color:var(--red-soft);}
  body.fx-cursor,body.fx-cursor *{cursor:auto;}
  #fx-cursor,#fx-dot,.fx-weight{display:none;}
}