/*
  AllPlay — allplay.app

  The palette is the app's own, sampled from the shield: navy ground, the
  pitch green for anything on the pitch, the stopwatch orange for the bench,
  the stopwatch blue for anything interactive. Someone arriving here and then
  opening the app should recognise it.
*/

:root {
  --page: #091a31;
  --surface: #122b4c;
  --surface-alt: #0d2140;
  --border: #25456f;

  --text: #ffffff;
  --text-2: #a8c2e0;
  --text-3: #7b95b8;

  --brand: #4c9a3c;
  --brand-soft: #1b3d25;
  --brand-text: #c4e6b2;
  --bench: #fa9a22;
  --bench-soft: #3a2a12;
  --accent: #4fa6e0;

  --radius: 16px;
  --radius-sm: 10px;
  --max: 1080px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 16px; color: var(--text-2); }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 26, 49, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.brand span.light { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--text-2); font-size: 0.95rem; font-weight: 600; }
.nav a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 640px) { .nav a.hide-sm { display: none; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
}
.btn:hover { background: #3d7c30; text-decoration: none; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface); }

/* ---------- hero ---------- */

.hero { padding: 72px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; } }
.hero p.lead { font-size: 1.2rem; max-width: 34ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-text);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

/* ---------- sections ---------- */

section { padding: 56px 0; }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head p { font-size: 1.05rem; }

.steps { display: grid; gap: 72px; }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.step:nth-child(even) .step-copy { order: 2; }
@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 28px; }
  .step:nth-child(even) .step-copy { order: 0; }
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.step-copy ul { margin: 0; padding-left: 18px; color: var(--text-2); }
.step-copy li { margin-bottom: 6px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; font-size: 0.95rem; }

/* ---------- the phone ---------- */

.phone {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  background: #05101f;
  border: 10px solid #16233a;
  border-radius: 34px;
  padding: 14px 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.phone-screen {
  background: var(--page);
  border-radius: 20px;
  padding: 14px 12px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.ph-title { font-size: 0.95rem; font-weight: 800; }
.ph-sub { font-size: 0.72rem; color: var(--text-3); margin-top: -6px; }
.ph-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.ph-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-alt);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: none;
}
.ph-row .name { font-weight: 700; font-size: 0.85rem; }
.ph-row .state { font-size: 0.66rem; color: var(--text-3); }
.ph-row .clock {
  margin-left: auto;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.ph-row.on-bench { border-left-color: var(--bench); background: var(--bench-soft); }
.ph-row.on-bench .clock { color: var(--bench); }

.ph-btn {
  margin-top: auto;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  padding: 13px 10px;
}
.ph-btn.bench { background: var(--bench); color: #2a1a05; }
.ph-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text-2); }

/* The tap. A ring that lands, pulses, and lifts — the only cursor the
   walkthroughs have, so it has to read as a finger rather than a mouse. */
.tap {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: rgba(79, 166, 224, 0.22);
  opacity: 0;
  pointer-events: none;
}

.demo { position: relative; width: 300px; max-width: 100%; margin: 0 auto; }

/* Animations hold still until the demo is on screen, so the loop a visitor
   sees starts at the beginning rather than halfway through. */
.demo [class*='anim-'] { animation-play-state: paused; }
.demo.is-visible [class*='anim-'] { animation-play-state: running; }

/* ---------- walkthrough 1: the match clock ---------- */

@keyframes tap-jack {
  0%, 14% { opacity: 0; transform: scale(1.5); }
  18%, 26% { opacity: 1; transform: scale(1); }
  32%, 100% { opacity: 0; transform: scale(1.4); }
}
.anim-tap-1 { top: 123px; left: 200px; animation: tap-jack 9s infinite; }

/* Jack goes off at 18% and comes back on at 76%. */
@keyframes jack-state {
  0%, 17% { border-left-color: var(--brand); background: var(--surface-alt); }
  18%, 75% { border-left-color: var(--bench); background: var(--bench-soft); }
  76%, 100% { border-left-color: var(--brand); background: var(--surface-alt); }
}
.anim-jack { animation: jack-state 9s infinite; }
@keyframes jack-clock-colour {
  0%, 17% { color: var(--text-3); }
  18%, 75% { color: var(--bench); }
  76%, 100% { color: var(--text-3); }
}
.anim-jack-clock { animation: jack-clock-colour 9s infinite; }

/* Stacked rather than absolutely placed, so the row keeps its own height. */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }

@keyframes show-on-pitch {
  0%, 17% { opacity: 1; }
  18%, 75% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@keyframes show-on-bench {
  0%, 17% { opacity: 0; }
  18%, 75% { opacity: 1; }
  76%, 100% { opacity: 0; }
}
.anim-when-on { animation: show-on-pitch 9s steps(1, end) infinite; }
.anim-when-off { animation: show-on-bench 9s steps(1, end) infinite; }

/* The button offers the change that is available: send them off, bring them
   back on. It carries the colour of the state it moves to, as in the app. */
@keyframes button-state {
  0%, 17% { background: var(--bench); color: #2a1a05; }
  18%, 75% { background: var(--brand); color: #fff; }
  76%, 100% { background: var(--bench); color: #2a1a05; }
}
.anim-toggle-btn { animation: button-state 9s steps(1, end) infinite; }

/* A strip of times moved one line at a time: a clock that actually counts,
   without a script to run it. */
.ticker { height: 1.2em; overflow: hidden; margin-left: auto; }
.ticker span {
  display: block;
  height: 1.2em;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@keyframes tick-8 {
  0%, 17% { transform: translateY(0); }
  18%, 25% { transform: translateY(-1.2em); }
  26%, 33% { transform: translateY(-2.4em); }
  34%, 41% { transform: translateY(-3.6em); }
  42%, 49% { transform: translateY(-4.8em); }
  50%, 57% { transform: translateY(-6em); }
  58%, 65% { transform: translateY(-7.2em); }
  66%, 100% { transform: translateY(-8.4em); }
}
.anim-ticker { animation: tick-8 9s steps(1, end) infinite; }

/* ---------- walkthrough 2: the team sheet ---------- */

@keyframes tap-sheet-1 {
  0%, 8% { opacity: 0; transform: scale(1.5); }
  12%, 20% { opacity: 1; transform: scale(1); }
  26%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes tap-sheet-2 {
  0%, 38% { opacity: 0; transform: scale(1.5); }
  42%, 50% { opacity: 1; transform: scale(1); }
  56%, 100% { opacity: 0; transform: scale(1.4); }
}
.anim-tap-sheet-1 { top: 168px; left: 150px; animation: tap-sheet-1 8s infinite; }
.anim-tap-sheet-2 { top: 239px; left: 150px; animation: tap-sheet-2 8s infinite; }

@keyframes picked-1 {
  0%, 11% { border-color: var(--border); background: transparent; }
  12%, 100% { border-color: var(--bench); background: var(--bench-soft); }
}
@keyframes picked-2 {
  0%, 41% { border-color: var(--border); background: transparent; }
  42%, 100% { border-color: var(--bench); background: var(--bench-soft); }
}
.anim-picked-1 { animation: picked-1 8s infinite; }
.anim-picked-2 { animation: picked-2 8s infinite; }
@keyframes picked-text-1 { 0%, 11% { color: var(--accent); } 12%, 100% { color: var(--bench); } }
@keyframes picked-text-2 { 0%, 41% { color: var(--accent); } 42%, 100% { color: var(--bench); } }
.anim-picked-text-1 { animation: picked-text-1 8s infinite; }
.anim-picked-text-2 { animation: picked-text-2 8s infinite; }

.ph-pick {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ph-pick .name { font-weight: 700; font-size: 0.85rem; }
.ph-pick .state { font-size: 0.66rem; color: var(--accent); }

/* ---------- walkthrough 3: goals ---------- */

@keyframes tap-goal {
  0%, 20% { opacity: 0; transform: scale(1.5); }
  24%, 32% { opacity: 1; transform: scale(1); }
  38%, 68% { opacity: 0; transform: scale(1.4); }
  72%, 80% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(1.4); }
}
.anim-tap-goal { top: 416px; left: 150px; animation: tap-goal 8s infinite; }

/* The count steps up on each tap and holds, so the number always matches the
   ring that just landed on the button. */
@keyframes goal-count {
  0%, 23% { transform: translateY(0); }
  24%, 71% { transform: translateY(-1.1em); }
  72%, 100% { transform: translateY(-2.2em); }
}
.goal-num { height: 1.1em; overflow: hidden; }
.goal-num span { display: block; height: 1.1em; font-size: 2.4rem; font-weight: 800; line-height: 1.1em; }
.anim-goal-count { animation: goal-count 8s steps(1, end) infinite; }

@keyframes goal-press {
  0%, 23% { transform: scale(1); }
  24%, 27% { transform: scale(0.96); }
  28%, 71% { transform: scale(1); }
  72%, 75% { transform: scale(0.96); }
  76%, 100% { transform: scale(1); }
}
.anim-goal-press { animation: goal-press 8s infinite; }

/* ---------- walkthrough 4: the season ---------- */

@keyframes grow-71 { 0% { width: 0; } 45%, 100% { width: 71%; } }
@keyframes grow-64 { 0% { width: 0; } 50%, 100% { width: 64%; } }
@keyframes grow-38 { 0% { width: 0; } 55%, 100% { width: 38%; } }
.anim-bar-1 { animation: grow-71 7s ease-out infinite; }
.anim-bar-2 { animation: grow-64 7s ease-out infinite; }
.anim-bar-3 { animation: grow-38 7s ease-out infinite; }

.ph-bar-row { display: flex; align-items: center; gap: 8px; }
.ph-bar-row .who { width: 40px; font-size: 0.72rem; font-weight: 700; }
.ph-track { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-alt); overflow: hidden; }
.ph-fill { height: 10px; border-radius: 5px; background: var(--brand); }
.ph-bar-row .pct { width: 38px; text-align: right; font-size: 0.72rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- walkthrough 5: training ---------- */

@keyframes tap-train-1 { 0%, 10% { opacity: 0; } 14%, 22% { opacity: 1; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes tap-train-2 { 0%, 40% { opacity: 0; } 44%, 52% { opacity: 1; transform: scale(1); } 58%, 100% { opacity: 0; transform: scale(1.4); } }
.anim-tap-train-1 { top: 143px; left: 242px; animation: tap-train-1 8s infinite; }
.anim-tap-train-2 { top: 197px; left: 242px; animation: tap-train-2 8s infinite; }
@keyframes ticked-1 { 0%, 13% { background: transparent; border-color: var(--border); color: transparent; } 14%, 100% { background: var(--brand); border-color: var(--brand); color: #fff; } }
@keyframes ticked-2 { 0%, 43% { background: transparent; border-color: var(--border); color: transparent; } 44%, 100% { background: var(--brand); border-color: var(--brand); color: #fff; } }
.anim-ticked-1 { animation: ticked-1 8s infinite; }
.anim-ticked-2 { animation: ticked-2 8s infinite; }
.ph-check {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
}

/* ---------- legal pages ---------- */

.legal { padding: 48px 0 72px; }
.legal .wrap { max-width: 760px; }
.legal h2 { margin-top: 40px; font-size: 1.35rem; }
.legal h3 { margin-top: 24px; }
.legal ul { color: var(--text-2); padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--text-3); font-size: 0.9rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.legal th, .legal td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-2);
  vertical-align: top;
}
.legal th { color: var(--text); font-weight: 700; }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--border); padding: 36px 0; margin-top: 48px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.site-foot a { color: var(--text-2); font-size: 0.9rem; }
.site-foot .links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot small { color: var(--text-3); }

/* Anyone who has asked their system for less movement gets the end state of
   every walkthrough rather than the loop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo [class*='anim-'] { animation: none !important; }
  .anim-ticker { transform: translateY(-8.4em); }
  .anim-goal-count { transform: translateY(-2.2em); }
  .anim-bar-1 { width: 71%; }
  .anim-bar-2 { width: 64%; }
  .anim-bar-3 { width: 38%; }
  .anim-jack { border-left-color: var(--bench); background: var(--bench-soft); }
  .anim-picked-1, .anim-picked-2 { border-color: var(--bench); background: var(--bench-soft); }
  .anim-ticked-1, .anim-ticked-2 { background: var(--brand); border-color: var(--brand); color: #fff; }
  .tap { opacity: 0; }
}