/* Practice — waitlist page. Brand values sourced from FitForge src/design/tokens.ts. */
:root {
  --paper:#f6f6f4; --paper-2:#ecece8; --ink:#171717; --ink-dim:#6e6e74; --rule:#1717171a;
  --night:#0a0a0b; --night-3:#1c1c1f; --text:#f5f5f7; --text-dim:#a1a1aa; --rule-dark:#ffffff1a;
  --accent:#ff2d55; --accent-hover:#e11d48;
  --steel:#a8a8ae; --steel-dark:#7c7c84; --iron:#45454b;
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:max(20px,6vw);
  --max:1240px;
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2));
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img,svg { display:block; max-width:100%; }
h1,h2,h3,p,dl,dd,ol { margin:0; padding:0; }
p { text-wrap:pretty; }
.hero__lead, .join__sub, .signup__fine { text-wrap:balance; }
ol { list-style:none; }
a { color:inherit; }
button,input { font:inherit; color:inherit; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:100; padding:12px 18px; border-radius:10px; background:var(--ink); color:var(--paper); text-decoration:none; }
.skip-link:focus { top:12px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 26px; border:0; border-radius:999px; background:var(--accent); color:#fff; font-weight:600; font-size:16px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background 180ms ease, transform 160ms var(--ease); }
.btn:hover { background:var(--accent-hover); }
.btn:active { transform:scale(.97); }
.btn--small { min-height:40px; padding:0 18px; font-size:14px; }

/* ── Header ── */
.top { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px var(--edge); background:#f6f6f4e6; backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); transition:background 240ms ease, color 240ms ease; }
.top.is-dark { background:#0a0a0be6; color:var(--text); }
.top__logo { display:flex; align-items:center; gap:9px; font:600 22px var(--font-body); letter-spacing:-.05em; text-decoration:none; }
.top__logo img { border-radius:9px; }
.top__logo i, .footer__logo i { font-style:normal; color:var(--accent); }
.top__actions { display:flex; align-items:center; gap:10px; }
.lang { display:flex; padding:3px; border-radius:999px; background:#1717170d; }
.lang button { min-width:40px; min-height:34px; padding:0 10px; border:0; border-radius:999px; background:transparent; font-size:13px; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:background 160ms ease,color 160ms ease; }
.lang button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 1px 3px #0000001a; }
.top.is-dark .lang { background:#ffffff14; }
.top.is-dark .lang button { color:var(--text-dim); }
.top.is-dark .lang button[aria-pressed="true"] { background:#ffffff24; color:var(--text); box-shadow:none; }

/* ── 3D barbell canvas (js/barbell3d.js) : above the headline, below forms and copy ── */
.gl { position:fixed; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.no-gl .gl { display:none; }
.js:not(.no-gl) .barbell { display:none; }
/* Disques de la barre 3D : on peut les attraper et les faire tourner (js/barbell3d.js). */
.can-spin, .can-spin * { cursor:grab; }
.is-spinning, .is-spinning * { cursor:grabbing !important; user-select:none; }
.hero__after, .hero__cue, .set__copy, .set__meta { position:relative; z-index:3; }

/* ── Hero : the headline is split by a loaded barbell ── */
.hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(36px,6vh,64px); min-height:calc(100svh - 68px); padding:clamp(32px,6vh,72px) var(--gutter) clamp(140px,18vh,180px); text-align:center; }
/* The bar hugs the headline: plates frame the words on each side.
   3D bar span ≈ 3.21 × (half the longest line + .45em) → FR ≈7.45em, EN ≈9.5em,
   so the type size is derived from the viewport per language. */
.hero__mark { --fs:clamp(40px,calc((100vw - 32px) / 7.6),168px); --bar-h:calc(var(--fs) * 1.45); --zone:calc(var(--bar-h) * 1.06 + var(--fs) * .14); position:relative; width:max-content; margin-inline:auto; }
:lang(en) .hero__mark { --fs:clamp(36px,calc((100vw - 32px) / 9.6),156px); }
.hero__title { display:grid; justify-items:center; row-gap:calc(var(--fs) * .32); font:700 var(--fs)/.86 var(--font-display); letter-spacing:-.02em; text-transform:uppercase; }
.hero__line { display:block; overflow:hidden; padding-top:.07em; }
.hero__line > span { display:block; }

.barbell { position:absolute; top:50%; left:calc(-1 * var(--zone)); right:calc(-1 * var(--zone)); display:flex; align-items:center; height:var(--bar-h); transform:translateY(-50%); pointer-events:none; }
.barbell__side { display:flex; align-items:center; gap:max(2px,calc(var(--bar-h) * .02)); }
.barbell__sleeve { flex:none; width:calc(var(--bar-h) * .3); height:max(5px,calc(var(--bar-h) * .11)); border-radius:3px; background:linear-gradient(var(--steel),var(--steel-dark)); }
.barbell__shoulder { flex:none; width:calc(var(--bar-h) * .07); height:calc(var(--bar-h) * .22); border-radius:3px; background:var(--steel-dark); }
.barbell__shaft { flex:1; height:max(4px,calc(var(--bar-h) * .065)); border-radius:99px; background:linear-gradient(#c4c4ca,var(--steel-dark)); transform-origin:center; }
.plate { position:relative; display:grid; place-items:center; flex:none; width:calc(var(--bar-h) * var(--w)); height:calc(var(--bar-h) * var(--h)); border-radius:calc(var(--bar-h) * .05); background:var(--c); box-shadow:inset 0 0 0 1px #ffffff14, inset calc(var(--bar-h) * -.03) 0 0 #00000026; }
.plate b { font:700 calc(var(--bar-h) * .12)/1 var(--font-display); color:#ffffffd9; letter-spacing:.02em; transform:rotate(-90deg); }
.plate--25 { --w:.2; --h:1; --c:var(--accent); }
.plate--20 { --w:.17; --h:.84; --c:var(--ink); }
.plate--10 { --w:.13; --h:.6; --c:var(--iron); }
.plate--collar { --w:.09; --h:.3; --c:var(--steel); border-radius:3px; }
.plate--10 b { display:none; }
.barbell__side--r .plate { box-shadow:inset 0 0 0 1px #ffffff14, inset calc(var(--bar-h) * .03) 0 0 #00000026; }

.hero__after { display:flex; flex-direction:column; align-items:center; width:100%; }
.hero__lead { max-width:460px; font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--ink-dim); }
.hero .signup { margin-top:30px; }
.hero__cue { position:absolute; left:50%; bottom:clamp(64px,9vh,88px); display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13px; color:var(--ink-dim); text-decoration:none; transform:translateX(-50%); white-space:nowrap; animation:fade 600ms ease 1800ms both; }
.hero__cue i { width:1.5px; height:36px; background:linear-gradient(var(--ink) 50%, transparent 50%) 0 0/100% 200%; animation:cue 1.8s cubic-bezier(.6,0,.4,1) 2.2s infinite; }
@keyframes cue { from { background-position:0 100%; } to { background-position:0 -100%; } }

/* ── Signup form ── */
.signup { width:100%; max-width:500px; margin-inline:auto; text-align:left; }
.signup__row { position:relative; display:flex; align-items:center; gap:6px; padding:6px; border:1.5px solid #17171724; border-radius:999px; background:#fff; transition:border-color 160ms ease, box-shadow 160ms ease; }
.signup__row:focus-within { border-color:var(--ink); box-shadow:0 0 0 4px #1717170d; }
.signup input[type="email"] { flex:1; min-width:0; height:48px; padding:0 8px 0 18px; border:0; background:transparent; font-size:17px; outline:none; }
.signup input::placeholder { color:#9d9da3; }
.signup .btn { flex:none; min-height:48px; }
.signup__trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.signup__msg { margin-top:10px; padding-left:20px; font-size:14px; font-weight:500; color:var(--accent-hover); }
.signup__msg:empty { margin:0; }
.signup__fine { margin-top:12px; font-size:13px; color:var(--ink-dim); text-align:center; }
.signup[data-state="loading"] .btn { pointer-events:none; opacity:.75; }
.signup[data-state="error"] .signup__row { border-color:var(--accent); }
.signup[data-state="done"] .signup__row, .signup[data-state="done"] .signup__fine, .signup[data-state="done"] .signup__msg { display:none; }
.signup__done { display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border-radius:20px; background:#fff; border:1.5px solid #17171714; outline:none; animation:pop 420ms var(--ease) both; }
.signup__done b { display:block; font:700 24px/1.1 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.signup__done p { margin-top:4px; font-size:15px; color:var(--ink-dim); }
.signup__check { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; }

/* ── The set : scroll performs the reps ── */
.set { position:relative; background:var(--night); color:var(--text); }
.set__stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,6vw,96px); max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:clamp(72px,12vh,128px) var(--gutter); }
.set__copy { position:relative; padding-left:30px; }
.set__title { font:600 15px var(--font-body); color:var(--text-dim); }
.set__steps { display:flex; flex-direction:column; gap:clamp(24px,4.5vh,44px); margin-top:clamp(24px,4vh,40px); }
.set__steps li { transition:opacity 400ms ease; }
.set__k { font-size:15px; font-weight:600; color:var(--accent); }
.set__steps h3 { margin-top:4px; font:700 clamp(34px,4.2vw,60px)/.95 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
.set__steps p { max-width:380px; margin-top:12px; color:var(--text-dim); }
.set__progress { position:absolute; left:0; top:2px; bottom:4px; width:2px; border-radius:2px; background:var(--rule-dark); }
.set__progress > i { display:block; height:100%; border-radius:2px; background:var(--accent); transform-origin:top; transform:scaleY(var(--p,1)); }

.set__visual { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; }
/* Dial : a 25 kg plate that turns with the scroll, one arc per rep, then the rest ring. */
.dial { --dial:min(56vh,480px); position:relative; width:var(--dial); aspect-ratio:1; }
.dial__plate { position:absolute; left:8.333%; top:8.333%; width:83.333%; height:83.333%; filter:drop-shadow(0 30px 60px #ff2d552e); will-change:transform; }
.dial__ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
.dial__rep { fill:none; stroke:#ffffff1f; stroke-width:5; stroke-linecap:round; transition:stroke 200ms ease; }
.dial__rep.is-on { stroke:var(--accent); }
.dial__rest { fill:none; stroke:var(--text); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0; transition:opacity 300ms ease; }
.motion-ok .set:not([data-phase="2"]) .dial__rest { opacity:0; }
.dial__hub { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:27%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f6f6f8, #b4b4ba 60%, #8a8a90); box-shadow:inset 0 0 0 1px #ffffff4d, 0 3px 10px #00000066; transform:translate(-50%,-50%); }
.dial__hub b { font:700 calc(var(--dial) * .14)/1 var(--font-display); color:var(--night); font-variant-numeric:tabular-nums; }
.set__meta { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 28px; margin-top:clamp(14px,2.4vh,22px); color:var(--text-dim); font-size:14px; }
.set__meta b, .set__load { font:600 22px/1.2 var(--font-display); color:var(--text); letter-spacing:.01em; }
.set__meta > span { display:flex; align-items:baseline; gap:8px; transition:opacity 400ms ease, transform 400ms var(--ease); }

/* Scroll-driven only when motion is welcome; otherwise the section reads as a static summary. */
.motion-ok .set { height:420vh; }
.motion-ok .set__stage { position:sticky; top:0; height:100svh; padding-top:84px; padding-bottom:28px; }
.motion-ok .set__steps li:not(.is-active) { opacity:.25; }
/* One slot under the bar: load, then rest, then next time. */
.motion-ok .set__meta { display:grid; }
.motion-ok .set__meta > span { grid-area:1 / 1; justify-content:center; }
.motion-ok .set[data-phase="2"] .set__load,
.motion-ok .set:not([data-phase="2"]) .set__rest,
.motion-ok .set.is-next .set__rest,
.motion-ok .set:not(.is-next) .set__next { opacity:0; transform:translateY(8px); }

/* ── Inside : big statements that fill as you read ── */
.inside { max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:clamp(80px,14vh,150px) var(--gutter); }
.inside__title { font:600 18px var(--font-body); color:var(--ink-dim); }
.inside__list { margin-top:clamp(20px,3vh,32px); }
.inside__list > div { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end; gap:12px clamp(24px,4vw,64px); padding:clamp(20px,3.4vh,34px) 0; border-top:1.5px solid var(--ink); }
.inside__list > div:last-child { border-bottom:1.5px solid var(--ink); }
.inside__list dt { --fill:100%; font:700 clamp(44px,7vw,108px)/.9 var(--font-display); letter-spacing:-.02em; text-transform:uppercase; color:transparent; background:linear-gradient(90deg, var(--ink) var(--fill), #17171729 var(--fill)); -webkit-background-clip:text; background-clip:text; }
.inside__list dd { max-width:400px; padding-bottom:.4em; color:var(--ink-dim); }

/* ── FAQ ── */
.faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter) clamp(80px,14vh,150px); }
.faq__title { font:700 clamp(40px,4.6vw,64px)/.95 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
.faq__list details { border-top:1px solid var(--rule); }
.faq__list details:last-child { border-bottom:1px solid var(--rule); }
.faq__list summary { position:relative; display:block; padding:22px 44px 22px 0; font-size:18px; font-weight:600; cursor:pointer; list-style:none; }
.faq__list summary::-webkit-details-marker { display:none; }
.faq__list summary::after { content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px; background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat, linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat; transition:transform 240ms var(--ease); }
.faq__list details[open] summary::after { transform:rotate(45deg); }
.faq__list p { max-width:620px; padding:0 44px 24px 0; color:var(--ink-dim); }

/* ── Join ── */
.join { display:flex; flex-direction:column; align-items:center; padding:clamp(80px,14vh,150px) var(--gutter) clamp(90px,15vh,160px); background:var(--paper-2); text-align:center; }
.join__title { max-width:14ch; font:700 clamp(44px,5.6vw,80px)/.95 var(--font-display); letter-spacing:-.02em; text-transform:uppercase; }
.join__sub { max-width:460px; margin-top:22px; color:var(--ink-dim); font-size:18px; }
.signup--center { margin-top:36px; }

/* ── Footer ── */
.footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; padding:28px var(--edge) 80px; background:var(--night); color:var(--text-dim); font-size:14px; }
.footer__logo { color:var(--text); font:700 20px var(--font-display); letter-spacing:.04em; }
.footer a { text-decoration:none; }
.footer a:hover { color:var(--text); }

/* ── Reading progress : a 25 kg plate rolls along the bottom of the page ── */
.roll { --roll:38px; position:fixed; left:var(--edge); right:var(--edge); bottom:12px; z-index:40; height:var(--roll); pointer-events:none; }
.roll__track { position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; border-radius:2px; background:#1717171f; transition:background 240ms ease; }
.roll__fill { position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); }
.roll__mark { position:absolute; bottom:-3px; width:2px; height:8px; margin-left:-1px; border-radius:1px; background:#17171738; transition:background 200ms ease; }
.roll__mark.is-past { background:var(--accent); }
.roll__plate { position:absolute; left:0; bottom:2px; width:var(--roll); height:var(--roll); filter:drop-shadow(0 3px 4px #0000002e); will-change:transform; }
.roll.is-dark .roll__track { background:#ffffff26; }
.roll.is-dark .roll__mark:not(.is-past) { background:#ffffff40; }

/* ── Motion : one orchestrated load, then the scroll-driven set ── */
@keyframes lineUp { from { transform:translateY(108%); } }
@keyframes lineDown { from { transform:translateY(-108%); } }
@keyframes shaft { from { transform:scaleX(0); } }
@keyframes fade { from { opacity:0; } }
@keyframes loadL { from { transform:translateX(-75vw); } 78% { transform:translateX(4px); } to { transform:none; } }
@keyframes loadR { from { transform:translateX(75vw); } 78% { transform:translateX(-4px); } to { transform:none; } }
@keyframes clank { 0%,100% { transform:translateY(-50%); } 35% { transform:translateY(calc(-50% + 4px)); } 70% { transform:translateY(calc(-50% - 1px)); } }
@keyframes rise { from { opacity:0; transform:translateY(16px); } }
@keyframes pop { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:none; } }

.hero__line--top > span { animation:lineUp 900ms var(--ease) 60ms both; }
.hero__line--bottom > span { animation:lineDown 900ms var(--ease) 60ms both; }
.barbell { animation:clank 380ms ease-out 1420ms both; }
.barbell__shaft { animation:shaft 700ms var(--ease) both; }
.barbell__sleeve, .barbell__shoulder { animation:fade 500ms ease 300ms both; }
.barbell__side--l .plate { animation:loadL 720ms cubic-bezier(.3,.75,.25,1) both; }
.barbell__side--r .plate { animation:loadR 720ms cubic-bezier(.3,.75,.25,1) both; }
/* Heaviest plate goes on first, collar last. */
.barbell__side .plate--25 { animation-delay:320ms; }
.barbell__side .plate--20 { animation-delay:480ms; }
.barbell__side .plate--10 { animation-delay:640ms; }
.barbell__side .plate--collar { animation-delay:800ms; }
.hero__after { animation:rise 800ms var(--ease) 1000ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:1ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
}

/* ── Responsive ── */
@media (max-width:900px) {
  .set__stage { grid-template-columns:1fr; }
  .set__visual { order:-1; }
  .motion-ok .set__stage { grid-template-rows:minmax(0,1fr) auto; align-content:stretch; gap:16px; padding-top:76px; padding-bottom:64px; }
  .motion-ok .set__steps li:not(.is-active) { display:none; }
  .motion-ok .set__steps { margin-top:12px; }
  .dial { --dial:min(38svh,300px); }
  .set__copy { padding-left:22px; }
  .inside__list > div { grid-template-columns:1fr; }
  .faq { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .top { padding-top:12px; padding-bottom:12px; }
  .top__cta { display:none; }
  .hero { padding-top:24px; }
  .plate b { display:none; }
  /* 3D : sleeves may bleed off-screen, plates stay inside (outer edge ≈1.33 × (half line + .3em)). */
  .hero__mark { --fs:clamp(36px,calc((100vw - 8px) / 5.9),80px); --bar-h:calc(var(--fs) * 1.1); }
  :lang(en) .hero__mark { --fs:clamp(32px,calc((100vw - 8px) / 7.6),70px); }
  .no-gl .hero__mark { --fs:clamp(36px,calc((100vw - 28px) / 6.6),80px); }
  .no-gl:lang(en) .hero__mark { --fs:clamp(32px,calc((100vw - 28px) / 7.9),70px); }
  .signup__row { flex-direction:column; align-items:stretch; padding:0; border:0; border-radius:0; background:transparent; gap:10px; }
  .signup__row:focus-within { box-shadow:none; }
  .signup input[type="email"] { flex:none; height:54px; padding:0 18px; border:1.5px solid #17171724; border-radius:16px; background:#fff; }
  .signup input[type="email"]:focus { border-color:var(--ink); }
  .signup[data-state="error"] input[type="email"] { border-color:var(--accent); }
  .signup .btn { min-height:54px; border-radius:16px; }
  .signup__msg { padding-left:4px; }
  .set__steps h3 { font-size:clamp(30px,9vw,40px); }
  .set__meta b, .set__load { font-size:19px; }
  .footer { flex-direction:column; align-items:flex-start; }
  .roll { --roll:30px; bottom:10px; }
}