.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, #ff6735, #ffb08a, #8d2bc6);
  box-shadow: 0 0 18px rgba(255, 103, 53, 0.45);
}

body::before {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * 34px),
    calc((var(--my, 0.5) - 0.5) * 26px),
    0
  );
  transition: transform 120ms ease-out;
}

.hero-product .glow {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * 90px),
    calc((var(--my, 0.5) - 0.5) * 70px),
    0
  );
  transition: transform 140ms ease-out;
}

.hero-product .phone-main {
  transform: perspective(980px)
    rotateY(calc((var(--mx, 0.5) - 0.5) * -9deg))
    rotateX(calc((var(--my, 0.5) - 0.5) * 6deg))
    translateY(calc(var(--scroll-progress, 0) * -20px));
  transition: transform 120ms ease-out;
}

.mini-card,
.diamond-badge,
.gymbro-badge {
  transition: transform 160ms ease-out;
}

.mini-week {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * 44px),
    calc((var(--my, 0.5) - 0.5) * 30px),
    0
  );
}

.mini-next {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * -36px),
    calc((var(--my, 0.5) - 0.5) * -28px),
    0
  );
}

.diamond-badge {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * -42px),
    calc((var(--my, 0.5) - 0.5) * 32px),
    0
  ) rotate(calc((var(--mx, 0.5) - 0.5) * 8deg));
}

.gymbro-badge {
  transform: translate3d(
    calc((var(--mx, 0.5) - 0.5) * 22px),
    calc((var(--my, 0.5) - 0.5) * -18px),
    0
  );
}

.feature-card,
.set-preview,
.body-map,
.partner-chip,
.split-preview,
.coach-card,
.sales-card,
.flow-step,
.proof-card,
.faq-item,
.surface-card,
.recovery-stats div,
.hero-signals div {
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
  will-change: transform;
}

.feature-card:hover,
.set-preview:hover,
.body-map:hover,
.partner-chip:hover,
.split-preview:hover,
.coach-card:hover,
.sales-card:hover,
.flow-step:hover,
.proof-card:hover,
.faq-item:hover,
.surface-card:hover,
.recovery-stats div:hover,
.hero-signals div:hover {
  transform: perspective(820px)
    translateY(-5px)
    rotateX(calc(var(--card-tilt-y, 0) * 1deg))
    rotateY(calc(var(--card-tilt-x, 0) * 1deg));
  border-color: rgba(255, 103, 53, 0.36);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 103, 53, 0.07);
}

.reveal {
  transition-delay: calc(var(--reveal-order, 0) * 42ms);
}

.split-preview {
  grid-template-columns: 94px 1fr auto;
  overflow: hidden;
  position: relative;
}

.split-preview::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -12%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 103, 53, 0.16), transparent 68%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.split-preview:hover::after {
  opacity: 1;
  transform: scale(1);
}

.split-preview .muscle-stack {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 88px;
  min-height: 62px;
}

.split-preview .muscle-stack img {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  background: radial-gradient(circle at 50% 25%, #2b2b31, #121216);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
}

.split-preview .muscle-stack img + img {
  margin-left: -28px;
  transform: translateY(10px);
}

.split-preview > div:not(.muscle-stack),
.split-preview > b {
  position: relative;
  z-index: 1;
}

.recovery-map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.recovery-map::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 103, 53, 0.16), transparent 62%);
  filter: blur(18px);
  opacity: 0.55;
  animation: recoveryAura 5.4s ease-in-out infinite alternate;
}

.recovery-map .body-base {
  position: relative;
  z-index: 1;
  filter: saturate(0.85) contrast(1.04);
}

.recovery-map .muscle-pulse {
  position: absolute;
  z-index: 2;
  width: var(--pulse-w, 42px);
  height: var(--pulse-h, 42px);
  left: var(--pulse-x, 50%);
  top: var(--pulse-y, 50%);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
  background: radial-gradient(circle, var(--pulse-color, rgba(63, 225, 99, 0.72)) 0 34%, transparent 72%);
  box-shadow:
    0 0 18px var(--pulse-glow, rgba(63, 225, 99, 0.32)),
    inset 0 0 12px rgba(255, 255, 255, 0.12);
  mix-blend-mode: screen;
  filter: blur(0.2px);
  transition: opacity 360ms ease, transform 360ms ease, background 360ms ease, box-shadow 360ms ease;
}

.recovery-map .muscle-pulse::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--pulse-ring, rgba(63, 225, 99, 0.34));
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.7);
}

.recovery-map .muscle-pulse.is-active {
  opacity: 0.82;
  transform: translate(-50%, -50%) scale(1);
}

.recovery-map .muscle-pulse.is-active::after {
  animation: recoveryRing 1.2s ease-out infinite;
}

.recovery-map .muscle-pulse.is-fresh {
  --pulse-color: rgba(63, 225, 99, 0.72);
  --pulse-glow: rgba(63, 225, 99, 0.34);
  --pulse-ring: rgba(63, 225, 99, 0.38);
}

.recovery-map .muscle-pulse.is-worked {
  --pulse-color: rgba(255, 165, 43, 0.72);
  --pulse-glow: rgba(255, 165, 43, 0.36);
  --pulse-ring: rgba(255, 165, 43, 0.42);
}

.recovery-map .muscle-pulse.is-tired {
  --pulse-color: rgba(255, 83, 55, 0.72);
  --pulse-glow: rgba(255, 83, 55, 0.36);
  --pulse-ring: rgba(255, 83, 55, 0.42);
}

.muscle-pulse.shoulder-left { --pulse-x: 36%; --pulse-y: 30%; --pulse-w: 34px; --pulse-h: 46px; }
.muscle-pulse.shoulder-right { --pulse-x: 64%; --pulse-y: 30%; --pulse-w: 34px; --pulse-h: 46px; }
.muscle-pulse.chest-left { --pulse-x: 43%; --pulse-y: 34%; --pulse-w: 46px; --pulse-h: 34px; }
.muscle-pulse.chest-right { --pulse-x: 57%; --pulse-y: 34%; --pulse-w: 46px; --pulse-h: 34px; }
.muscle-pulse.core { --pulse-x: 50%; --pulse-y: 47%; --pulse-w: 44px; --pulse-h: 86px; }
.muscle-pulse.quad-left { --pulse-x: 43%; --pulse-y: 68%; --pulse-w: 34px; --pulse-h: 78px; }
.muscle-pulse.quad-right { --pulse-x: 57%; --pulse-y: 68%; --pulse-w: 34px; --pulse-h: 78px; }
.muscle-pulse.trap-left { --pulse-x: 43%; --pulse-y: 26%; --pulse-w: 38px; --pulse-h: 32px; }
.muscle-pulse.trap-right { --pulse-x: 57%; --pulse-y: 26%; --pulse-w: 38px; --pulse-h: 32px; }
.muscle-pulse.lat-left { --pulse-x: 39%; --pulse-y: 40%; --pulse-w: 42px; --pulse-h: 78px; }
.muscle-pulse.lat-right { --pulse-x: 61%; --pulse-y: 40%; --pulse-w: 42px; --pulse-h: 78px; }
.muscle-pulse.glute-left { --pulse-x: 44%; --pulse-y: 57%; --pulse-w: 42px; --pulse-h: 38px; }
.muscle-pulse.glute-right { --pulse-x: 56%; --pulse-y: 57%; --pulse-w: 42px; --pulse-h: 38px; }

@keyframes recoveryRing {
  0% {
    opacity: 0.7;
    transform: scale(0.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes recoveryAura {
  from {
    transform: translate3d(-8px, 6px, 0) scale(0.92);
    opacity: 0.32;
  }

  to {
    transform: translate3d(10px, -8px, 0) scale(1.08);
    opacity: 0.72;
  }
}

@media (max-width: 720px) {
  .split-preview {
    grid-template-columns: 78px 1fr;
  }

  .split-preview .muscle-stack {
    width: 72px;
  }

  .split-preview .muscle-stack img {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .split-preview .muscle-stack img + img {
    margin-left: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  body::before,
  .hero-product .glow,
  .hero-product .phone-main,
  .mini-card,
  .diamond-badge,
  .gymbro-badge,
  .feature-card,
  .set-preview,
  .body-map,
  .partner-chip,
  .split-preview,
  .coach-card,
  .sales-card,
  .flow-step,
  .proof-card,
  .faq-item,
  .surface-card,
  .recovery-stats div,
  .hero-signals div,
  .recovery-map::before,
  .recovery-map .muscle-pulse,
  .reveal {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}