/* ==========================================================================
   ATHGORISE — Motion layer
   Shared animations: scroll reveal, progress bar, marquee, hero athlete
   stage, training chrono. Pure CSS, transform/opacity only. Every colour
   comes from the brand variables in style.css, so dark and light themes
   both work. Reduced-motion users get a static version (bottom of file).
   ========================================================================== */

/* ---------- Scroll reveal ----------
   Opt-in with data-reveal (+ optional style="--d:.1s" for a stagger).
   Hidden only when the <html> has .js, so no-JS visitors see everything.
   Uses the `translate` property, never `transform`, so it can't clash with
   hover transforms already defined on cards. */
@keyframes ath-reveal {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in {
  opacity: 1;
  animation: ath-reveal .65s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both;
}

/* ---------- Scroll progress bar (injected into .site-header by motion.js) ---------- */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ---------- Buttons: light sweep on hover ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ---------- Image hover zoom (featured product / shop cards) ---------- */
.featured-media img,
.product-media img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.featured-media:hover img,
.product-card:hover .product-media img { transform: scale(1.04); }

/* ---------- Manifesto underline draw ---------- */
.manifesto blockquote span {
  background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0% 3px no-repeat;
  padding-bottom: 3px;
  transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .5s;
}
.manifesto blockquote.is-in span { background-size: 100% 3px; }
html:not(.js) .manifesto blockquote span { background-size: 100% 3px; }

/* ---------- Values row: progress sweep 01 → 05 on reveal, hover fill ---------- */
.value-item { position: relative; }
.value-item::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.value-item:hover::before { transform: scaleX(1); }
@keyframes ath-sweep {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(1); transform-origin: 0 50%; }
  56%  { transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
.values-grid.is-in .value-item::before {
  animation: ath-sweep 1s cubic-bezier(.6, 0, .3, 1) calc(var(--i, 0) * .14s + .3s) backwards;
}

/* ---------- Marquee band ---------- */
.marquee {
  overflow: hidden;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  background: var(--near-black);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: ath-marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Each half is at least one viewport wide so the loop never shows a gap. */
.marquee-set { display: flex; flex: none; min-width: 100vw; justify-content: space-around; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-300);
}
/* upward triangle separator: "rise" */
.marquee-track span::after {
  content: "";
  margin: 0 26px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--blue);
}
@keyframes ath-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   HERO STAGE — animated athlete + GO / RISE / REPEAT
   ========================================================================== */
@keyframes ath-intro {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}
.hero-home .eyebrow,
.hero-home h1 .w,
.hero-home p.sub,
.hero-home .hero-cta,
.hero-home .tr-hero-cta,
.hero-home .tr-facts,
.hero-home .hero-sig {
  animation: ath-intro .7s cubic-bezier(.2, .9, .2, 1) var(--d, 0s) both;
}
.hero-home h1 .w { display: inline-block; }

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 340;
  container-type: inline-size;
  animation: ath-stage-in .9s ease .8s both;
}
@keyframes ath-stage-in {
  from { opacity: 0; scale: .96; }
  to   { opacity: 1; scale: 1; }
}

/* Giant outlined word, cycling every 9 s (3 s each): GO -> RISE -> REPEAT */
.stage-word {
  position: absolute;
  left: 50%; top: 44%;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  /* Ghost word: translucent blue gradient (a text outline would show
     overlapping-contour artefacts with the variable font). */
  color: transparent;
  background: linear-gradient(180deg, rgba(0, 102, 255, .28), rgba(0, 102, 255, .03) 88%);
  -webkit-background-clip: text;
          background-clip: text;
  opacity: 0;
  pointer-events: none;
  animation: ath-word-cycle 9s ease-in-out infinite both;
}
.stage-word-go     { font-size: clamp(90px, 20vw, 150px); font-size: 46cqw; animation-delay: 1.2s; }
.stage-word-rise   { font-size: clamp(60px, 13vw, 100px); font-size: 28cqw; animation-delay: 4.2s; }
.stage-word-repeat { font-size: clamp(44px, 9vw, 70px);   font-size: 19cqw; animation-delay: 7.2s; }
@keyframes ath-word-cycle {
  0%   { opacity: 0;   transform: translateY(28px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0;   transform: translateY(-28px); }
  100% { opacity: 0;   transform: translateY(-28px); }
}

/* Small wordmark under the athlete: ATH · GO · RISE */
.stage-mark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: .9em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gray-300);
}
.stage-mark span { animation: ath-intro .6s cubic-bezier(.2, .9, .2, 1) both; }
.stage-mark .m-ath  { animation-delay: .9s; }
.stage-mark .m-go   { animation-delay: 1.1s; color: var(--blue); }
.stage-mark .m-rise { animation-name: ath-rise-in; animation-duration: .8s; animation-delay: 1.3s; }
@keyframes ath-rise-in {
  0%   { opacity: 0; translate: 0 16px; }
  60%  { opacity: 1; translate: 0 -5px; }
  100% { opacity: 1; translate: 0 0; }
}

/* The SVG athlete */
.ath { position: absolute; inset: 0 0 6% 0; width: 100%; height: 94%; overflow: visible; }
.ath * { transform-box: view-box; }
.ath line, .ath polyline {
  stroke: var(--white);
  stroke-linecap: round;
  fill: none;
}
.ath .ath-ground { stroke: var(--line); stroke-width: 2; }
.ath .ath-shadow { fill: var(--blue); opacity: .28; transform-origin: 195px 292px; animation: ath-shadow .5s ease-in-out infinite; }
.ath .ath-torso { stroke-width: 32; }
.ath .ath-thigh { stroke-width: 19; }
.ath .ath-shin  { stroke-width: 14; }
.ath .ath-foot  { stroke-width: 10; }
.ath .ath-uarm  { stroke-width: 13; }
.ath .ath-farm  { stroke-width: 11; }
.ath .ath-head  { fill: var(--white); }
.ath .ath-fist  { fill: var(--white); }
.ath .ath-coil  { stroke: var(--blue-light); stroke-width: 11; stroke-dasharray: 3.2 3; stroke-linecap: butt; }
.ath .ath-weight { fill: var(--blue); }
.ath .ath-far   { opacity: .5; }

/* Body dips on every stroke (2 per cycle) */
.ath .ath-upper { transform-origin: 172px 194px; animation: ath-bob .5s ease-in-out infinite; }
@keyframes ath-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(5px) rotate(1.6deg); }
}
@keyframes ath-shadow {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.1); }
}

/* Arm chain: shoulder -> elbow -> rod -> two flexing rod segments.
   Each joint is delayed a little more than its parent so the rod whips. */
.ath .arm-far { --o: -.5s; }
.ath .j-shoulder { animation: ath-sh   1s ease-in-out infinite; animation-delay: var(--o, 0s); }
.ath .j-elbow    { animation: ath-el   1s ease-in-out infinite; animation-delay: calc(var(--o, 0s) + .05s); }
.ath .j-rod      { animation: ath-rod  1s ease-in-out infinite; animation-delay: calc(var(--o, 0s) + .10s); }
.ath .j-f1       { animation: ath-fx1  1s ease-in-out infinite; animation-delay: calc(var(--o, 0s) - .65s); }
.ath .j-f2       { animation: ath-fx2  1s ease-in-out infinite; animation-delay: calc(var(--o, 0s) - .60s); }
@keyframes ath-sh  { 0%, 100% { transform: rotate(-9deg); }  50% { transform: rotate(9deg); } }
@keyframes ath-el  { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes ath-rod { 0%, 100% { transform: rotate(-38deg); } 50% { transform: rotate(22deg); } }
@keyframes ath-fx1 { 0%, 100% { transform: rotate(-6deg); }  50% { transform: rotate(6deg); } }
@keyframes ath-fx2 { 0%, 100% { transform: rotate(-9deg); }  50% { transform: rotate(9deg); } }

/* Pivot points (SVG user units) */
.ath .arm-near .j-shoulder { transform-origin: 215px 112px; }
.ath .arm-near .j-elbow    { transform-origin: 250px 152px; }
.ath .arm-near .j-rod      { transform-origin: 300px 150px; }
.ath .arm-near .j-f1       { transform-origin: 338px 150px; }
.ath .arm-near .j-f2       { transform-origin: 372px 150px; }
.ath .arm-far  .j-shoulder { transform-origin: 207px 110px; }
.ath .arm-far  .j-elbow    { transform-origin: 240px 148px; }
.ath .arm-far  .j-rod      { transform-origin: 288px 142px; }
.ath .arm-far  .j-f1       { transform-origin: 326px 142px; }
.ath .arm-far  .j-f2       { transform-origin: 360px 142px; }

/* Paused when scrolled out of view (class toggled by motion.js) */
.stage.is-paused *,
.stage.is-paused { animation-play-state: paused !important; }

/* ==========================================================================
   TRAINING CHRONO (exercises page): 3-2-1-GO, then WORK / REST rounds
   ========================================================================== */
.chrono {
  margin: 34px auto 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.chrono-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.chrono-wave {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 60px; margin-top: -30px;
  overflow: hidden;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  pointer-events: none;
}
.chrono-wave svg { display: block; width: 200%; height: 100%; animation: ath-wave 6s linear infinite; }
.chrono-wave path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}
@keyframes ath-wave { to { transform: translateX(-50%); } }

.chrono-ring {
  position: relative; z-index: 1;
  width: 128px; height: 128px;
  flex: none;
  border-radius: 50%;
  background: var(--black);
}
.chrono-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.chrono-ring circle { fill: none; stroke-width: 5; }
.chrono-ring .track { stroke: var(--line); }
.chrono-ring .prog {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.chrono[data-phase="rest"] .prog { stroke: var(--gray-500); }

.chrono-read {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
}
.chrono-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.chrono[data-mode="count"] .chrono-big { font-size: 54px; }
.chrono-big.pop { animation: ath-pop .5s cubic-bezier(.2, .9, .2, 1); }
@keyframes ath-pop {
  0%   { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.chrono-small {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-300);
}
.chrono-tag {
  position: relative; z-index: 1;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
  transition: color .3s ease, border-color .3s ease;
}
.chrono-tag b { color: inherit; font-weight: 800; }
.chrono[data-phase="work"] .chrono-tag[data-for="work"],
.chrono[data-phase="rest"] .chrono-tag[data-for="rest"] { color: var(--white); border-color: var(--blue); }
.chrono-round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-500);
}
@media (max-width: 480px) {
  .chrono-row { gap: 10px; }
  .chrono-tag { padding: 5px 9px; font-size: 10.5px; letter-spacing: .08em; }
  .chrono-ring { width: 112px; height: 112px; }
  .chrono-big { font-size: 24px; }
  .chrono[data-mode="count"] .chrono-big { font-size: 46px; }
}

/* Decorative logos drift slowly (exercises page) */
@keyframes ath-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.slash-1 { animation: ath-drift 18s ease-in-out infinite; }
.slash-2 { animation: ath-drift 18s ease-in-out -9s infinite; }

/* ==========================================================================
   Reduced motion: everything static, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; animation: none; }
  .hero-home *, .stage, .stage *, .marquee-track, .chrono-wave svg,
  .slash-1, .slash-2, .values-grid .value-item::before {
    animation: none !important;
  }
  .btn-primary::after, .featured-media img, .product-media img { transition: none; }
  .manifesto blockquote span { background-size: 100% 3px; transition: none; }
  .stage-word-rise { opacity: 1; }
  .marquee-track { width: 100%; justify-content: center; }
  .marquee-set { min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .marquee-set + .marquee-set { display: none; }
  .chrono-ring .prog { transition: none; }
}