/* Anvyl waitlist — multi-step form with barbell intro.
   Standalone page: does not load styles.css/home.css. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/fraunces-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/space-mono-latin.woff2") format("woff2"); }

:root {
  --paper: #FAF7F2; --card: #FFFFFF; --chip: #F1EBE1; --well: #F7F2EA;
  --ink: #2E2A24; --on-ink: #FAF7F2; --mute: #9A9287; --line: #EDE8DF;
  --clay: #C97B4E; --clay-text: #A85F33; --danger: #C0503F;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --frauk: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
.hdr { display: flex; align-items: center; gap: .55rem; padding: 1rem clamp(1.4rem, 5vw, 3rem); border-bottom: 1px solid var(--line); }
.hdr img { width: 30px; height: 30px; }
.hdr .name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.hdr .name b { color: var(--clay); }
.hdr a.back { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.hdr a.back:hover { color: var(--clay-text); }

.wrap { flex: 1; width: 100%; max-width: 33rem; margin: 0 auto; padding: clamp(1.8rem, 5vw, 3rem) 1.4rem 3rem; display: flex; flex-direction: column; }
.progress { display: flex; align-items: center; gap: .9rem; }
.ptrack { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pfill { height: 100%; border-radius: 99px; background: var(--clay); width: 0%; transition: width .4s var(--ease); }
.pcount { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--mute); }

.step { display: none; margin-top: clamp(1.8rem, 5vw, 2.8rem); animation: rise .45s var(--ease); }
.step.on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-text); }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 5.4vw, 2.3rem); line-height: 1.12; margin-top: .7rem; }
h2 em { font-family: var(--frauk); font-style: italic; color: var(--clay); }
.hint { color: var(--mute); font-size: .92rem; margin-top: .5rem; }
input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%; margin-top: 1.3rem;
  font-family: var(--sans); font-size: 1.15rem; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 1.05rem 1.2rem; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(201,123,78,.15); }
input::placeholder { color: #C4BCB0; }
input.bad { border-color: var(--danger); }
.names { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.names input { margin-top: 1.3rem; }
.names + input { margin-top: .8rem; }
@media (max-width: 480px) { .names { grid-template-columns: 1fr; } .names input + input { margin-top: 0; } }
.err { display: none; color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: .55rem; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.chips button {
  cursor: pointer; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .75rem 1.25rem; transition: all .18s var(--ease);
}
.chips button:hover { border-color: var(--clay); }
.chips button.sel { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.next {
  cursor: pointer; border: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 700;
  background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: .95rem 2.2rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.next:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(46,42,36,.16); }
.next:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.prev { cursor: pointer; border: 0; background: none; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.prev:hover { color: var(--ink); }
.prev.ghost { visibility: hidden; }
.noscript-note { text-align: center; padding: 1rem 1.4rem; }
.enter-hint { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }

.submit-err { display: none; color: var(--danger); font-size: .9rem; font-weight: 600; margin-top: 1rem; }

.legal { margin-top: auto; padding-top: 2.2rem; font-size: .78rem; color: var(--mute); text-align: center; line-height: 1.6; }
.legal a { color: var(--clay-text); text-decoration: underline; text-underline-offset: 3px; }

.done { display: none; text-align: center; margin-top: 3rem; animation: rise .5s var(--ease); }
.done img { width: 44px; height: 44px; }
.done h2 { margin-top: 1rem; }
.done p { color: var(--mute); margin-top: .7rem; }

/* Honeypot: parked off-screen, never display:none so naive bots still fill it */
.hp-field { position: absolute; left: -6000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---- intro: bar drops in, plates load left and right, then the form rises ---- */
.intro { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: flex; align-items: center; justify-content: center; animation: introOut .5s var(--ease) 3.9s forwards; }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
.idrop { animation: idrop .85s var(--ease) both; }
@keyframes idrop {
  0% { transform: translateY(-70vh); }
  62% { transform: translateY(0); }
  74% { transform: translateY(-16px); }  /* one small rebound */
  86% { transform: translateY(0); }
  93% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
.rig { position: relative; width: 560px; height: 120px; }
.rig .bar { position: absolute; top: 56px; left: 0; right: 0; height: 9px; border-radius: 99px; background: var(--ink); }
.rig .collar { position: absolute; top: 49px; width: 9px; height: 23px; border-radius: 3px; background: #6B6258; }
.rig .c1 { left: 118px; } .rig .c2 { right: 118px; }
.rig .plate { position: absolute; border-radius: 8px; opacity: 0; }
.rig .p1L { left: 100px; top: 14px; width: 20px; height: 94px; background: var(--clay); animation: plateL .45s var(--ease) 1.1s both; }
.rig .p1R { right: 100px; top: 14px; width: 20px; height: 94px; background: var(--clay); animation: plateR .45s var(--ease) 1.1s both; }
.rig .p2L { left: 76px; top: 26px; width: 18px; height: 70px; background: #8A5A3B; animation: plateL .45s var(--ease) 2s both; }
.rig .p2R { right: 76px; top: 26px; width: 18px; height: 70px; background: #8A5A3B; animation: plateR .45s var(--ease) 2s both; }
.rig .p3L { left: 56px; top: 36px; width: 15px; height: 50px; background: var(--clay-text); animation: plateL .45s var(--ease) 2.9s both; }
.rig .p3R { right: 56px; top: 36px; width: 15px; height: 50px; background: var(--clay-text); animation: plateR .45s var(--ease) 2.9s both; }
@keyframes plateL { 0% { opacity: 0; transform: translateX(-60vw); } 70% { opacity: 1; transform: translateX(6px); } 100% { opacity: 1; transform: none; } }
@keyframes plateR { 0% { opacity: 0; transform: translateX(60vw); } 70% { opacity: 1; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }
@media (max-width: 620px) { .rig { transform: scale(.62); } }
.wrap, .hdr { animation: rise .55s var(--ease) 4.05s both; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .wrap, .hdr { animation: none; }
}

/* Cloudflare Turnstile slot on the final step. Invisible mode renders nothing,
   so the slot reserves no space (no empty gap above Submit). */
.turnstile-slot { min-height: 0; }