/* ArcForm homepage hero visual (assets/js/hero.js). A 4:5 rounded panel: the squat (3D stand-in or video),
   the tracking overlay on a 2D canvas, and the HUD (cards, knee angle, tempo, rep count) as type.
   Sizes follow the panel's own width (container units) so the 390px phone layout keeps everything in frame. */

/* reserve the panel's height before any script runs (the homepage's container is .hero-visual) */
.hero-visual,.arc-hero{aspect-ratio:4/5}
.arc-hero{
  position:relative; width:100%; aspect-ratio:4/5; container-type:inline-size;
  border-radius:28px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(90% 60% at 46% 34%, color-mix(in srgb,var(--card) 70%,#fff 30%) 0%, transparent 70%),
    linear-gradient(180deg, var(--card) 0%, var(--card) 76%, color-mix(in srgb,var(--card-tint) 70%,var(--card)) 90%, var(--card-tint) 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 40px 80px -40px rgba(35,29,22,.35), 0 12px 24px -16px rgba(35,29,22,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arc-hero{
  background:
    radial-gradient(90% 60% at 46% 34%, color-mix(in srgb,var(--card) 82%,#fff 6%) 0%, transparent 70%),
    linear-gradient(180deg, var(--card) 0%, var(--card) 76%, var(--card-tint) 90%, color-mix(in srgb,var(--card-tint) 80%,#000) 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6), 0 12px 24px -16px rgba(0,0,0,.4)}}
:root[data-theme="dark"] .arc-hero{
  background:
    radial-gradient(90% 60% at 46% 34%, color-mix(in srgb,var(--card) 82%,#fff 6%) 0%, transparent 70%),
    linear-gradient(180deg, var(--card) 0%, var(--card) 76%, var(--card-tint) 90%, color-mix(in srgb,var(--card-tint) 80%,#000) 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6), 0 12px 24px -16px rgba(0,0,0,.4)}

/* the floor line the feet stand on */
.arc-hero::before{content:"";position:absolute;left:6%;right:6%;top:90%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

.ah-stage{position:absolute;inset:0;z-index:1}
.ah-stage > .ah-poster,.ah-stage > .ah-gl,.ah-stage > .ah-media,.ah-stage > .ah-fx{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.ah-poster,.ah-media{object-fit:cover}
.ah-gl,.ah-media{transition:opacity .5s ease}
.ah-fx{pointer-events:none}

/* HUD type */
.ah-hud{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;font-family:var(--body);color:var(--ink)}
.ah-hud > *{position:absolute;opacity:0;will-change:opacity,transform}
.ah-hud small{font-size:.5em;font-family:var(--body);font-weight:700;letter-spacing:.02em;margin-left:.12em}

/* stat cards along the top */
.ah-top{left:4.5%;right:4.5%;top:4%;display:grid;gap:2cqw}
.ah-tag{justify-self:start;display:inline-flex;align-items:center;gap:1.4cqw;font:700 max(9px,2.15cqw)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);opacity:0}
.ah-tag i{width:max(6px,1.4cqw);height:max(6px,1.4cqw);border-radius:50%;border:1.5px dashed var(--faint)}
.ah-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw}
.ah-card{display:grid;gap:.9cqw;align-content:start;padding:2.4cqw 2.6cqw 2.6cqw;border-radius:clamp(10px,3cqw,16px);opacity:0;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 8px 20px -14px rgba(35,29,22,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ah-k{font:700 max(8.5px,1.95cqw)/1.15 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-v{font:400 max(17px,5.6cqw)/1 var(--display);letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ah-v small{color:var(--muted-dark)}
.ah-s{font:600 max(9px,2.15cqw)/1.2 var(--body);color:var(--muted-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-bar{display:block;height:max(9px,2.2cqw);margin-top:.2cqw}

/* knee angle: big Anton number next to the knee, positioned by the script */
.ah-angle{left:0;top:0;display:grid;justify-items:center;gap:.6cqw;--st:var(--green);padding:1.8cqw 2.6cqw 1.6cqw;border-radius:clamp(10px,3cqw,16px);
  background:var(--card);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(35,29,22,.4)}
.ah-angle-k{display:inline-flex;align-items:center;gap:1cqw;font:800 max(8.5px,1.9cqw)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.ah-angle-k::before{content:"";width:max(6px,1.3cqw);height:max(6px,1.3cqw);border-radius:50%;background:var(--st);transition:background-color .3s}
.ah-angle-v{font:400 max(30px,9.6cqw)/.92 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;
}
.ah-angle-v b{font-weight:400}
.ah-angle-v i{font-style:normal;color:var(--accent-text);margin-left:.04em}

/* tempo, down the right-hand side */
.ah-tempo{right:4.5%;top:33%;width:25%;display:grid;gap:1.3cqw;padding:2.6cqw 2.8cqw;border-radius:clamp(10px,3cqw,16px);
  background:var(--card);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(35,29,22,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ah-tempo-h{font:700 max(8.5px,1.95cqw)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:.4cqw}
.ah-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1cqw;color:var(--muted-dark)}
.ah-row span{position:relative;font:700 max(10px,2.4cqw)/1 var(--body);padding-left:max(9px,2.2cqw)}
.ah-row span::before{content:"";position:absolute;left:0;top:50%;width:max(5px,1.1cqw);height:max(5px,1.1cqw);margin-top:min(-2.5px,-.55cqw);border-radius:50%;background:var(--faint);transition:background-color .25s}
.ah-row b{font:400 max(16px,4.7cqw)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--muted-dark);transition:color .25s}
.ah-row.done span,.ah-row.on span{color:var(--ink-soft)}
.ah-row.done b{color:var(--ink)}
.ah-row.done span::before{background:var(--ink-soft)}
.ah-row.on span::before{background:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.ah-row.on b{color:var(--accent-text)}

/* rep count in its ring (the ring is drawn on the canvas around this box) */
.ah-count{right:calc(4.5% + 12.5% - clamp(32px,9.5cqw,56px));top:61%;width:clamp(64px,19cqw,112px);aspect-ratio:1;display:grid;place-items:center}
.ah-n{grid-area:1/1;font:400 max(26px,8cqw)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;margin-top:-1.4cqw}
.ah-of{grid-area:1/1;align-self:end;margin-bottom:22%;font:700 max(8.5px,1.85cqw)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}

/* slow motion marker */
.ah-speed{left:4.5%;top:4%;display:inline-flex;align-items:center;gap:1.4cqw;padding:1.3cqw 2.2cqw 1.3cqw 1.8cqw;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  font:700 max(8.5px,1.95cqw)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.ah-speed i{width:0;height:0;border-left:max(6px,1.3cqw) solid var(--accent);border-top:max(4px,.85cqw) solid transparent;border-bottom:max(4px,.85cqw) solid transparent}
.ah-speed b{font-weight:800;color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.ah-gl,.ah-media,.ah-poster{transition:none!important}}

/* pause / play (WCAG 2.2.2): outside the role=img stage, above everything */
.ah-toggle{position:absolute;left:4.5%;bottom:4%;z-index:6;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 16px -10px rgba(35,29,22,.45)}
.ah-toggle:hover{color:var(--accent-text)}
.ah-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ah-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ah-toggle .ah-i-play{display:none;fill:currentColor;stroke-width:1.6}
.ah-toggle.paused .ah-i-play{display:block}
.ah-toggle.paused .ah-i-pause{display:none}
.ah-toggle[hidden]{display:none}
.arc-hero > .stand-in{z-index:5}
@container (max-width:420px){.ah-wide{display:none}}