@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #0b2447;      /* logo wordmark */
  --green: #2f9a0c;     /* flag green, for rules and ticks */
  --green-bright: #4cc61c; /* flag green, button fill with navy text */
  --slate: #46566b;
  --on-navy-soft: #c6d0dd;
  --line: #7a8797;
  --error-on-navy: #ffb4ab;
  --white: #ffffff;
  --gutter: clamp(16px, 4vw, 64px);
  --bar: 88px;
  --mark: 72px;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--white);
  color: var(--navy);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}

img { display: block; max-width: 100%; height: auto; }

[hidden] { display: none !important; }

a:focus-visible,
input:focus-visible,
button:focus-visible,
.confirmation:focus-visible {
  outline: 3px solid #f2b705;
  outline-offset: 2px;
}

/* Header: the white horizontal logo sits directly on the navy bar */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--bar);
  padding: 0 var(--gutter);
  background: var(--navy);
  border-bottom: 4px solid var(--green);
  color: var(--white);
}

.brand { display: block; flex: none; }
.brand img { width: auto; height: var(--mark); }

.header-cta {
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--white);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.header-cta:hover { background: var(--white); color: var(--navy); }

/* Page layout */
.page {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  padding-left: var(--gutter);
  overflow-x: clip;
}

.intro {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 2rem 0;
}

h1 {
  margin: 0 0 0.625rem;
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 2.4vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}

.lead {
  max-width: 30rem;
  margin: 0 0 1.25rem;
  color: var(--slate);
  font-size: 1.1875rem;
  line-height: 1.4;
}

/* Sign-up panel: navy, like the Team USA and Team GB newsletter blocks */
.signup,
.confirmation {
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
}

.fields {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0.875rem;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.input-wrap { position: relative; }

input {
  width: 100%;
  height: 3rem;
  padding: 0 2.5rem 0 0.875rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 500;
}

input[aria-invalid="true"] { border-color: var(--error-on-navy); }

/* A finished field: green sweep along the bottom edge, then the tick draws in */
.input-wrap::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tick {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%);
  pointer-events: none;
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tick path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 300ms ease-out 120ms;
}

.is-done .input-wrap::after { transform: scaleX(1); }
.is-done .tick path { stroke-dashoffset: 0; }

.field-error {
  margin: 0.3rem 0 0;
  color: var(--error-on-navy);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.form-error {
  margin: 0.875rem 0 0;
  color: var(--error-on-navy);
  font-size: 0.9375rem;
  font-weight: 500;
}

button {
  position: relative;
  width: 100%;
  height: 3.25rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--green-bright);
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease;
}

button:hover { background: #63d934; }
button[disabled] { background: var(--line); cursor: progress; }

/* Both fields done: one band of light crosses the button */
button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  opacity: 0;
}

.is-ready button::after { animation: shine 800ms ease-out 200ms; }

.note {
  margin: 0.625rem 0 0;
  color: var(--on-navy-soft);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: center;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confirmation {
  position: relative;
  padding-left: 5rem;
}

.success-mark {
  position: absolute;
  top: 1.5rem;
  left: 1.375rem;
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--green-bright);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmation h2 {
  margin: 0 0 0.125rem;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.confirmation p { margin: 0; overflow-wrap: anywhere; }

/* Scene. The logo is centred over the players and fills the height left over.
   The three athletes come from artwork drawn at one scale, so their widths keep
   the source ratio 632 : 831 : 906 and they share a ground line. */
.scene {
  position: relative;
  container-type: inline-size;
  --athletes: min(84cqw, 72svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 30rem;
}

.scene > img { position: absolute; max-width: none; }

.track {
  left: -24%;
  bottom: 0;
  width: 132%;
}

.wave {
  right: -42%;
  bottom: 0;
  width: 118%;
}

/* 70% of the players' width keeps it clear of the raised basketball */
.emblem {
  position: relative;
  flex: 1 1 0;
  width: calc(var(--athletes) * 0.7);
  min-height: 0;
  margin: 1.5rem 0 -5svh;
}

.emblem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A blurred copy of the logo, so its colours melt down into the graphic */
.emblem-haze {
  transform: translateY(26%) scale(1.15);
  filter: blur(30px) saturate(1.3);
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
}

.athletes {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: space-between;
  width: var(--athletes);
  margin-bottom: clamp(20px, 6svh, 60px);
}

.basketball { width: 25.2%; }
.football   { width: 33.2%; }
.sprinter   { width: 36.2%; }

@keyframes shine {
  0%   { left: -40%; opacity: 1; }
  100% { left: 110%; opacity: 1; }
}

/* Motion: the athletes arrive once on load, and everything that answers the
   form plays only for people who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .athlete { animation: arrive 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .football { animation-delay: 90ms; }
  .sprinter { animation-delay: 180ms; }

  .is-done .tick { animation: pop 340ms cubic-bezier(0.3, 1.6, 0.5, 1) 120ms both; }

  .success-mark circle {
    stroke-dasharray: 145;
    animation: draw-ring 520ms ease-out both;
  }

  .success-mark path {
    stroke-dasharray: 36;
    animation: draw-tick 320ms ease-out 420ms both;
  }

  .confirmation { animation: settle 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .signed-up .athlete { animation: sprint 1000ms cubic-bezier(0.3, 0.8, 0.3, 1) both; }
  .signed-up .football { animation-delay: 90ms; }
  .signed-up .sprinter { animation-delay: 180ms; }

  @keyframes arrive {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes pop {
    from { transform: translateY(-50%) scale(0.5); }
    to   { transform: translateY(-50%) scale(1); }
  }

  @keyframes draw-ring {
    from { stroke-dashoffset: 145; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes draw-tick {
    from { stroke-dashoffset: 36; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes settle {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes sprint {
    0%   { transform: none; }
    35%  { transform: translateX(20px); }
    100% { transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-ready button::after { animation: none; }
  .input-wrap::after, .tick path { transition: none; }
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 2;
  padding: 1.25rem var(--gutter) 1rem;
  background: var(--navy);
  border-top: 4px solid var(--green);
  color: var(--white);
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.footer-name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-link {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.footer-legal {
  margin: 0.75rem 0 0;
  color: var(--on-navy-soft);
  font-size: 0.875rem;
}

/* Phones and tablets: one screen. Logo and players on top, with the sign-up
   panel laid over the players' feet and the track behind it. */
@media (max-width: 1100px) {
  :root { --bar: 64px; --mark: 50px; }

  .site-header { justify-content: center; }
  .header-cta { display: none; }

  .page {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
  }

  .scene {
    --athletes: min(84cqw, 34svh);
    order: -1;
    flex: 1 1 0;
    min-height: 11rem;
    margin-bottom: -2.25rem;
  }

  .emblem { margin: 0.75rem 0 -1.5svh; }
  .athletes { margin-bottom: 0; }

  .track { left: -16%; }

  .intro {
    align-self: center;
    width: min(100% - 2rem, 34rem);
    margin-bottom: 0.75rem;
    padding: 1.125rem 1.125rem 1rem;
    border-radius: 14px;
    background: var(--navy);
    color: var(--white);
    text-align: center;
  }

  h1 { font-size: clamp(1.875rem, 8.2vw, 2.75rem); margin-bottom: 0.375rem; }

  .lead {
    max-width: none;
    margin-bottom: 0.75rem;
    color: var(--on-navy-soft);
    font-size: 1rem;
    line-height: 1.3;
  }

  .signup, .confirmation {
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: left;
  }

  .confirmation { padding: 0.25rem 0 0.25rem 3.75rem; }
  .success-mark { top: 0.25rem; left: 0; }

  button { margin-top: 0.75rem; }

  .site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem var(--gutter);
    border-top-width: 3px;
  }

  .footer-main { padding: 0; border: 0; }
  .footer-name { font-size: 1rem; }
  .footer-link { display: none; }
  .footer-legal { margin: 0; font-size: 0.75rem; }
}

@media (max-width: 480px) {
  .fields { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  input { height: 2.75rem; }
  button { height: 3rem; }
}

/* Short phones: drop the supporting sentence so it all still fits */
@media (max-width: 1100px) and (max-height: 740px) {
  .scene { min-height: 9.5rem; }
  .lead { display: none; }
  h1 { margin-bottom: 0.625rem; }
  .note { display: none; }
}

/* Tablets have the height for larger players and logo */
@media (min-width: 600px) and (max-width: 1100px) {
  .scene { --athletes: min(84cqw, 46svh); }
}

/* Short laptops: tighten so the page still fits without scrolling */
@media (min-width: 1101px) and (max-height: 760px) {
  .intro { padding: 1rem 0; }
  .lead { margin-bottom: 0.875rem; }
  .signup, .confirmation { padding: 1.125rem 1.25rem; }
  .confirmation { padding-left: 4.5rem; }
  .site-footer { padding: 0.625rem var(--gutter); }
  .footer-main { padding-bottom: 0.5rem; }
  .footer-legal { margin-top: 0.375rem; }
}