/* The Mexican wave nav: the top bar of a football club on a black page. Its background is a stand of small cards drawn
   by the script on a canvas, with the colours below. */
:root {
  --page: #000000;          /* the page */
  --gap: #04060a;           /* the dark between the cards */
  --card: #1a2232;          /* the plain face of the cards */
  --team: #f4b120;          /* the club's face of the cards */
  --card-edge: #d4dae4;     /* the edge of a card, seen as it turns */
  --text: #f2f4f8;          /* a link pointed at, the brand */
  --muted: #a3adbf;         /* the other links */
  --on-team: #10141c;       /* the words on the gold cards */
  --crest: #f4b120;         /* the crest */
  --cta: #f2f4f8;           /* the button */
  --cta-lit: #f4b120;       /* the button pointed at */
  --cta-ink: #10141c;       /* the words on the button */
  --ring: #ffffff;          /* the outline of the keyboard focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Saira Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  /* one column as wide as the window: the links that do not fit scroll inside the bar instead of widening it */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 16px;
}

/* ---------------------------------------------------------------- the bar: a stand of cards */
.ola {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(900px, 100%);
  height: 60px;
  padding: 0 10px 0 16px;
  border-radius: 16px;
  background: var(--gap);
  overflow: hidden;
  isolation: isolate;
}

.ola__stand {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* with less motion, the old stand fades away over the new one */
.ola__stand--veil {
  opacity: 0;
}

.ola__stand--veil.is-fading {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* the floodlights from above, and the rim of the bar */
.ola__lights {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.18) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus {
  outline: none;
}

/* ---------------------------------------------------------------- the brand */
.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 8px 0 4px;
  border-radius: 10px;
  text-shadow: 0 0 8px rgba(4, 6, 10, 0.8);
}

.brand__crest {
  width: 22px;
  height: 26px;
  flex: none;
  overflow: visible;
}

.brand__shield {
  fill: var(--gap);
  stroke: var(--crest);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.brand__band {
  fill: var(--crest);
}

.brand__ball {
  fill: var(--text);
}

.brand__name {
  font-size: 14px;
  font-stretch: 92%;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__light {
  font-weight: 520;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the links */
/* the links scroll sideways inside the bar when they do not fit; auto margins centre them without cutting the first */
.strip {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}

.strip::-webkit-scrollbar {
  display: none;
}

.strip.is-after {
  --fade-l: 22px;
}

.strip.is-before {
  --fade-r: 22px;
}

.list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0 4px;
  list-style: none;
}

/* registered, so the change to a link pointed at can fade */
@property --off {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* the colour of a word follows the cards under it: --on, from 0 (plain cards) to 1 (gold cards), is written by the
   script at every frame of the wave, so a word stays clear on either face, and even on a mix of both */
.link {
  --off: var(--muted);
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--off);
  color: color-mix(in srgb, var(--on-team) calc(var(--on, 0) * 100%), var(--off));
  font-size: 14px;
  font-stretch: 92%;
  font-weight: 680;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* a halo the colour of the cards under it hides the gaps between them round the letters */
  text-shadow:
    0 0 6px color-mix(in srgb, var(--gap) calc((1 - var(--on, 0)) * 85%), transparent),
    0 0 1.5px color-mix(in srgb, var(--team) calc(var(--on, 0) * 100%), transparent),
    0 0 4px color-mix(in srgb, var(--team) calc(var(--on, 0) * 100%), transparent),
    0 0 8px color-mix(in srgb, var(--team) calc(var(--on, 0) * 90%), transparent);
  transition: --off 0.22s ease;
}

.link__word {
  display: block;
  margin-right: -0.07em;
  transition: transform 0.16s ease-out;
}

.link[aria-current='page'],
.link:focus-visible {
  --off: var(--text);
}

@media (hover: hover) {
  .link:hover {
    --off: var(--text);
  }
}

.link:active .link__word {
  transform: scale(0.94);
}

/* the keys: a white ring with a dark one inside it, clear on the plain cards and on the gold ones */
.link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ring), inset 0 0 0 3.5px var(--gap);
}

/* where color-mix is missing, the current link is simply dark on its gold */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .link[aria-current='page'] {
    color: var(--on-team);
  }
}

/* ---------------------------------------------------------------- the button */
.cta {
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 13px;
  font-stretch: 92%;
  font-weight: 720;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 6px 14px -6px rgba(0, 0, 0, 0.7);
  transition: transform 0.16s ease-out, background-color 0.2s ease;
}

.cta__short {
  display: none;
}

@media (hover: hover) {
  .cta:hover {
    background: var(--cta-lit);
  }
}

.cta:active {
  transform: scale(0.96);
}

.brand:focus-visible,
.cta:focus-visible {
  box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px var(--ring);
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 760px) {
  .brand__light {
    display: none;
  }
}

@media (max-width: 560px) {
  .ola {
    gap: 4px;
    height: 56px;
    padding: 0 8px 0 10px;
    border-radius: 14px;
  }

  .brand {
    padding: 0 4px;
  }

  .brand__name,
  .cta__long {
    display: none;
  }

  .cta__short {
    display: inline;
  }

  .link {
    padding: 0 12px;
    font-size: 13px;
  }

  .list {
    gap: 0;
  }

  .cta {
    height: 38px;
    padding: 0 15px;
  }
}

/* with less motion, the presses do not shrink */
@media (prefers-reduced-motion: reduce) {
  .link:active .link__word,
  .cta:active {
    transform: none;
  }
}