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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Fixed viewport per screen, no page level scroll or bounce. Each step is
   still its own page, see PROJECT.md, this just stops that page moving
   around once you're on it. Navigating between steps is what scrolling,
   swiping or the arrow keys now do instead, see phase-nav.js. */
body {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle 280px at 88% 12%, rgba(76, 154, 255, 0.4), transparent 70%),
    linear-gradient(165deg, #263768 0%, var(--colour-navy) 45%, #0F1533 100%);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow, the "young, alive" background treatment. Sits behind
   everything (isolation + negative z-index above). Every page picks this
   up for free from here.

   Drift is slow (32s and 38s, a ratio with no short common multiple, so
   the two never fall back into step in any time a person would actually
   sit and watch), each on an irregular multi point path rather than a
   there and back bounce, and started at a negative delay so they are
   already mid journey on first paint instead of both visibly starting
   from the same place at once. Off entirely under prefers-reduced-motion,
   see below, this is decoration, never load bearing for reading the page. */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(64px);
  z-index: -1;
  pointer-events: none;
}

body::before {
  width: 340px;
  height: 340px;
  top: -90px;
  left: -70px;
  background: radial-gradient(circle, rgba(76, 154, 255, 0.8), transparent 70%);
}

body::after {
  width: 300px;
  height: 300px;
  bottom: -70px;
  right: -50px;
  background: radial-gradient(circle, rgba(232, 206, 143, 0.65), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: yfs-blob-drift-a 32s ease-in-out -9s infinite;
  }

  body::after {
    animation: yfs-blob-drift-b 38s ease-in-out -21s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

@keyframes yfs-blob-drift-a {
  0% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(50px, 25px) scale(1.1); }
  48% { transform: translate(30px, 80px) scale(1.22); }
  70% { transform: translate(-25px, 55px) scale(1.05); }
  88% { transform: translate(-15px, 10px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes yfs-blob-drift-b {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-40px, -20px) scale(1.08); }
  45% { transform: translate(-65px, -60px) scale(1.2); }
  68% { transform: translate(-20px, -85px) scale(1.1); }
  85% { transform: translate(15px, -30px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

h1, h2 {
  font-size: var(--heading-size);
  line-height: var(--heading-line);
  font-weight: var(--heading-weight);
  margin: 0 0 1rem;
}

/* Each page's own, single heading, set from that screen's content, stays
   the plain text colour. Anything below it, a subheading, is gold, the
   accent colour, so a screen with more than one level of heading reads
   as a clear hierarchy rather than two headings competing for the same
   weight. */
h1 {
  color: var(--colour-text);
}

h2 {
  color: var(--colour-gold);
}

.display {
  font-size: var(--display-size);
  line-height: var(--display-line);
  font-weight: var(--display-weight);
  margin: 0 0 1rem;
  color: var(--colour-white);
  background: linear-gradient(100deg, var(--colour-white) 35%, var(--colour-gold) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  color: var(--colour-gold);
}

button {
  font-family: inherit;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
}

.meta {
  font-size: var(--meta-size);
  line-height: var(--meta-line);
  font-weight: var(--meta-weight);
  text-transform: none;
  letter-spacing: normal;
}

.button-primary {
  display: block;
  width: 100%;
  background: linear-gradient(120deg, var(--colour-blue-light), var(--colour-blue));
  color: var(--colour-white);
  border: none;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--button-weight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.button-primary:focus-visible {
  outline: 2px solid var(--colour-gold);
  outline-offset: 2px;
}

/* The chalk touchline, the one memorable element. See DESIGN-PLAN.md. */
.chalk-line {
  display: flex;
  gap: 4px;
  padding: 1rem 1.25rem 0;
  flex: 0 0 auto;
}

.chalk-line__segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--colour-line);
  transition: background var(--transition-duration) var(--transition-easing);
}

.chalk-line__segment.is-filled {
  background: var(--colour-gold);
  box-shadow: 0 0 6px rgba(197, 173, 112, 0.7);
}

/* Staggered entrance for content on first paint, cross document view
   transitions (transitions.css) cover navigating between pages, this
   covers the very first load of a page in a session. */
@media (prefers-reduced-motion: no-preference) {
  .phase-content > *,
  .hero > * {
    animation: yfs-rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .phase-content > *:nth-child(1), .hero > *:nth-child(1) { animation-delay: 0s; }
  .phase-content > *:nth-child(2), .hero > *:nth-child(2) { animation-delay: 0.07s; }
  .phase-content > *:nth-child(3), .hero > *:nth-child(3) { animation-delay: 0.14s; }
  .phase-content > *:nth-child(4), .hero > *:nth-child(4) { animation-delay: 0.21s; }
  .phase-content > *:nth-child(5), .hero > *:nth-child(5) { animation-delay: 0.28s; }
  .phase-content > *:nth-child(6), .hero > *:nth-child(6) { animation-delay: 0.35s; }

  @keyframes yfs-rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}