:root {
  color-scheme: dark;

  --blue: #1f4fff;
  --black: #000;
  --white: #fff;
  --heat: #ffd60a;
  --heat-bright: #ffe45c;

  --font-display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --font-body: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;

  --size-title: clamp(2.75rem, min(16vh, 10.5vw), 12rem);
  --size-heading: clamp(1.75rem, min(7vh, 4.4vw), 5rem);
  --size-lineup: clamp(1.5rem, min(6vh, 3.9vw), 4.5rem);
  --size-body: clamp(1.125rem, min(4.2vh, 2.7vw), 3rem);

  --gap: clamp(0.5rem, 2.4vh, 2rem);
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --pad-y: clamp(1rem, 4.5vh, 4rem);
  --button: 3.5rem;
  --bar: calc(var(--button) + 2rem);

  --seam-angle: 100deg;
  --seam: 50%;
  --lean: 10deg;
  --tilt: 4deg;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fall: cubic-bezier(0.5, 0, 1, 0.6);
}

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

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

body {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 800;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--heat);
  color: var(--black);
}

:focus-visible {
  outline: 0.25rem solid var(--heat);
  outline-offset: 0.25rem;
}

h1,
h2,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
.lineup,
.goodbye {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}

h1,
h2,
.goodbye {
  text-wrap: balance;
}

h2,
.goodbye {
  font-size: var(--size-heading);
}

p,
figcaption {
  max-inline-size: 32ch;
  text-wrap: pretty;
}

small {
  display: block;
  margin-top: 0.4em;
  font-size: max(0.875rem, 0.55em);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.deck {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.slide {
  flex: 0 0 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr);
  /* The gap is wide enough to hold the slanted seam, so each half sits on one flat field. */
  gap: max(var(--pad-x), 18vmin);
  min-width: 0;
  height: 100%;
  padding: max(var(--pad-y), env(safe-area-inset-top)) max(var(--pad-x), env(safe-area-inset-right))
    calc(var(--bar) + env(safe-area-inset-bottom)) max(var(--pad-x), env(safe-area-inset-left));
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Two flat fields, not a blend: the 1px ramp only anti-aliases the seam. */
  background: linear-gradient(
    var(--seam-angle),
    var(--blue) calc(var(--seam) - 0.5px),
    var(--black) calc(var(--seam) + 0.5px)
  );
}

.half {
  display: grid;
  justify-items: start;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}

.half--words {
  align-content: center;
}

.half--picture {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.falling-title {
  font-size: var(--size-title);
  line-height: 0.92;
  text-transform: uppercase;
}

.falling-title span {
  display: block;
  width: fit-content;
}

.falling-title span:nth-child(2) {
  margin-left: 0.5em;
}

.falling-title span:nth-child(3) {
  margin-left: 1em;
}

.falling-title span:nth-child(4) {
  margin-left: 1.5em;
}

.photo {
  --photo: 50vh;

  justify-items: center;
  align-content: center;
  text-align: center;
}

.gear {
  --photo: 42vh;

  display: grid;
  justify-items: center;
  align-content: center;
  justify-self: center;
  gap: calc(var(--gap) / 2);
}

.snap {
  display: block;
  width: auto;
  max-width: 100%;
  /* Viewport units, not percentages: Mobile Safari does not resolve a percentage height in this grid row. */
  height: var(--photo);
  border: 0.5rem solid var(--white);
  border-radius: 0.75rem;
  object-fit: cover;
  object-position: top;
  transform: rotate(var(--tilt));
}

.sticker {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.lean {
  transform: rotate(var(--lean)) scale(0.9);
  transform-origin: 200px 210px;
}

.sticker-sheet {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ink {
  fill: var(--ink, var(--black));
}

.sky {
  fill: var(--sky, var(--blue));
}

.paper {
  fill: var(--paper, var(--white));
}

.glow {
  fill: var(--glow, var(--heat));
}

.sticker-edge {
  --ink: var(--white);
  --sky: var(--white);
  --paper: var(--white);
  --glow: var(--white);

  stroke: var(--white);
  stroke-width: 22;
  stroke-linejoin: round;
}

.icon {
  width: 1.75rem;
  height: 1.75rem;
}

.icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lineup {
  font-size: var(--size-lineup);
  line-height: 1.05;
  text-transform: uppercase;
}

.timeline {
  display: grid;
  gap: calc(var(--gap) / 2);
}

.timeline li {
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75em;
}

.year {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.player {
  width: min(100%, 40rem);
  height: 352px;
  border: 0;
  border-radius: 0.75rem;
  /* Matches the embed's own scheme; a mismatch makes browsers paint an opaque box behind it. */
  color-scheme: light;
}

.round-button {
  display: grid;
  place-items: center;
  width: var(--button);
  height: var(--button);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--heat);
  color: var(--black);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}

.round-button--quiet {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 0.1875rem var(--white);
}

.round-button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.round-button:not([aria-disabled="true"]):active {
  transform: scale(0.94);
}

@media (hover: hover) {
  .round-button:not([aria-disabled="true"]):hover {
    background: var(--heat-bright);
  }

  .round-button--quiet:hover {
    background: var(--white);
    color: var(--black);
  }
}

.controls {
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}

.controls > * {
  pointer-events: auto;
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress li {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--white);
}

.progress .is-current {
  width: 2rem;
  background: var(--heat);
}

main [lang="pt-PT"],
:root[data-lang="pt"] main span[lang="en"] {
  display: none;
}

:root[data-lang="pt"] main [lang="pt-PT"] {
  display: inline;
}

.language {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.fullscreen {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1;
}

@media (max-aspect-ratio: 1 / 1) {
  :root {
    --size-title: clamp(2.75rem, min(8vh, 15vw), 11rem);
    --size-heading: clamp(1.75rem, min(4.2vh, 7.5vw), 5rem);
    --size-lineup: clamp(1.5rem, min(3.6vh, 6.4vw), 4.5rem);
    --size-body: clamp(1.125rem, min(2.8vh, 4.8vw), 2.75rem);

    --seam-angle: 190deg;
    --seam: calc(50% - (var(--bar) - var(--pad-y)) / 2);
  }

  .slide {
    grid-template: minmax(0, 1fr) minmax(0, 1fr) / minmax(0, 1fr);
    gap: 14vmin;
  }

  .photo {
    --photo: 20vh;
  }

  .gear {
    --photo: 18vh;
  }
}

@media (max-height: 56rem), (max-aspect-ratio: 1 / 1) {
  .player {
    height: 152px;
  }
}

@media (max-height: 30rem), (max-width: 40rem) {
  .player {
    height: 80px;
  }

  .photo {
    --photo: 32vh;
  }

  .gear {
    --photo: 26vh;
  }
}

@media (max-width: 40rem) and (max-aspect-ratio: 1 / 1) {
  .photo {
    --photo: 14vh;
  }

  .gear {
    --photo: 12vh;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .deck {
    scroll-behavior: smooth;
  }

  .falling-title span {
    animation: fall 450ms var(--ease-fall) backwards;
  }

  .falling-title span:nth-child(1) {
    animation-delay: 150ms;
  }

  .falling-title span:nth-child(2) {
    animation-delay: 260ms;
  }

  .falling-title span:nth-child(3) {
    animation-delay: 370ms;
  }

  .falling-title span:nth-child(4) {
    animation-delay: 480ms;
  }
}

@keyframes fall {
  from {
    transform: translateY(-120vh) rotate(-6deg);
  }
}