/********/
/* FONT */
/********/

@font-face {
  font-family: "Seraphs";
  src: url("../type/SeraphsVF.woff2") format("woff2");
}

/*********/
/* BASIS */
/*********/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2em 5%;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2em;

  color: black;

  font-family: "Seraphs", sans-serif;
}

p {
  margin: 0;
}

body {
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -10;

  background-image: url("../image/discovloer.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

/****************/
/* GROTE TITEL */
/****************/

header h1 {
  margin: 0;
  font-size: clamp(6em, 10vw, 8em);
  line-height: 1;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
  text-align: center;
}
/* De Y is de basis voor het lampje */
header h1 > span {
  position: relative;
  display: inline-block;
}

/****************/
/* Lampjes*/
/****************/

/* Het witte lampje */
header h1 > span > span {
  position: absolute;

  width: 0.05em;
  height: 0.05em;
  border: 0.01em solid black;
  border-radius: 50%;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: lampjes-knipperen 6s step-end infinite;
}

/* Y */
header h1 > span:nth-of-type(1) {
  color: #ab2121;
}

/* Eerste lampje */
header h1 > span > span:nth-of-type(1) {
  top: 47%;
}

/* Tweede lampje */
header h1 > span > span:nth-of-type(2) {
  top: 59%;
}

/* Derde lampje */
header h1 > span > span:nth-of-type(3) {
  top: 70%;
}

/* Linkerarm: bovenste lampje */
header h1 > span:first-of-type > span:nth-of-type(4) {
  top: 20%;
  left: 20%;
}

/* Linkerarm: richting het midden */
header h1 > span:first-of-type > span:nth-of-type(5) {
  top: 35%;
  left: 35%;
}

/* Rechterarm: bovenste lampje */
header h1 > span:first-of-type > span:nth-of-type(6) {
  top: 20%;
  left: 80%;
}

/* Rechterarm: richting het midden */
header h1 > span:first-of-type > span:nth-of-type(7) {
  top: 35%;
  left: 65%;
}

/* M */
header h1 > span:nth-of-type(2) {
  color: rgb(5, 5, 158);
}
/* M: linker steel */
header h1 > span:nth-of-type(2) > span:nth-of-type(1) {
  top: 20%;
  left: 23%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(2) {
  top: 45%;
  left: 16%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(3) {
  top: 70%;
  left: 15%;
}

/* M: schuine lijnen in het midden */
header h1 > span:nth-of-type(2) > span:nth-of-type(4) {
  top: 35%;
  left: 33%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(5) {
  top: 62%;
  left: 47%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(6) {
  top: 35%;
  left: 63%;
}

/* M: rechter steel */
header h1 > span:nth-of-type(2) > span:nth-of-type(7) {
  top: 20%;
  left: 75%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(8) {
  top: 45%;
  left: 79%;
}

header h1 > span:nth-of-type(2) > span:nth-of-type(9) {
  top: 70%;
  left: 81%;
}

/* C*/
header h1 > span:nth-of-type(3) {
  color: rgb(5, 158, 110);
}

/* C: onderste rij */
header h1 > span:nth-of-type(3) > span:nth-of-type(1) {
  top: 70%;
  left: 50%;
}

header h1 > span:nth-of-type(3) > span:nth-of-type(2) {
  top: 70%;
  left: 75%;
}

/* C: tweede rij van onder */
header h1 > span:nth-of-type(3) > span:nth-of-type(3) {
  top: 60%;
  left: 25%;
}

/* C: middelste rij */
header h1 > span:nth-of-type(3) > span:nth-of-type(4) {
  top: 45%;
  left: 18%;
}

/* C: tweede rij van boven */
header h1 > span:nth-of-type(3) > span:nth-of-type(5) {
  top: 30%;
  left: 25%;
}

header h1 > span:nth-of-type(3) > {
  top: 30%;
  left: 80%;
}

/* C: bovenste rij */
header h1 > span:nth-of-type(3) > span:nth-of-type(7) {
  top: 20%;
  left: 40%;
}

header h1 > span:nth-of-type(3) > span:nth-of-type(8) {
  top: 18%;
  left: 60%;
}

header h1 > span:nth-of-type(3) > span:nth-of-type(9) {
  top: 20%;
  left: 80%;
}

/* Zesde lampje van de C verbergen */
header h1 > span:nth-of-type(3) > span:nth-of-type(6) {
  display: none;
}

/* A */
header h1 > span:nth-of-type(4) {
  color: rgb(158, 5, 140);
}

/* A: bovenste lampje */
header h1 > span:nth-of-type(4) > span:nth-of-type(1) {
  top: 25%;
  left: 47%;
}

/* A: tweede rij */
header h1 > span:nth-of-type(4) > span:nth-of-type(2) {
  top: 36%;
  left: 33%;
}

header h1 > span:nth-of-type(4) > span:nth-of-type(3) {
  top: 36%;
  left: 60%;
}

/* A: derde rij, inclusief de dwarsbalk */
header h1 > span:nth-of-type(4) > span:nth-of-type(4) {
  top: 48%;
  left: 27%;
}

header h1 > span:nth-of-type(4) > span:nth-of-type(5) {
  top: 58%;
  left: 47%;
}

header h1 > span:nth-of-type(4) > span:nth-of-type(6) {
  top: 48%;
  left: 70%;
}

/* A: vierde rij */
header h1 > span:nth-of-type(4) > span:nth-of-type(7) {
  top: 58%;
  left: 20%;
}

header h1 > span:nth-of-type(4) > span:nth-of-type(8) {
  top: 58%;
  left: 75%;
}

/* A: onderste rij */
header h1 > span:nth-of-type(4) > span:nth-of-type(9) {
  top: 70%;
  left: 14%;
}

header h1 > span:nth-of-type(4) > span:nth-of-type(10) {
  top: 70%;
  left: 80%;
}

/* alle lampjes Y-M-C-A */
header h1 > span:nth-of-type(1) > span {
  animation-name: lampjes-y;
  animation-delay: 0s;
}

header h1 > span:nth-of-type(2) > span {
  animation-name: lampjes-m;
  animation-delay: 0s;
}

header h1 > span:nth-of-type(3) > span {
  animation-name: lampjes-c;
  animation-delay: 0s;
}

header h1 > span:nth-of-type(4) > span {
  animation-name: lampjes-a;
  animation-delay: 0s;
}

@keyframes lampjes-y {
  0%,
  70%,
  80% {
    background-color: #ffd54a;
    box-shadow:
      0 0 0.03em #ffd54a,
      0 0 0.08em #ffd54a;
  }

  16.67%,
  75%,
  85%,
  100% {
    background-color: white;
    box-shadow: none;
  }
}

@keyframes lampjes-m {
  0%,
  33.33%,
  75%,
  85%,
  100% {
    background-color: white;
    box-shadow: none;
  }

  16.67%,
  70%,
  80% {
    background-color: #ffd54a;
    box-shadow:
      0 0 0.03em #ffd54a,
      0 0 0.08em #ffd54a;
  }
}

@keyframes lampjes-c {
  0%,
  50%,
  75%,
  85%,
  100% {
    background-color: white;
    box-shadow: none;
  }

  33.33%,
  70%,
  80% {
    background-color: #ffd54a;
    box-shadow:
      0 0 0.03em #ffd54a,
      0 0 0.08em #ffd54a;
  }
}

@keyframes lampjes-a {
  0%,
  66.67%,
  75%,
  85%,
  100% {
    background-color: white;
    box-shadow: none;
  }

  50%,
  70%,
  80% {
    background-color: #ffd54a;
    box-shadow:
      0 0 0.03em #ffd54a,
      0 0 0.08em #ffd54a;
  }
}

/**************/
/* Muzieknootjes tittel */
/**************/

header h1 > i {
  display: inline-block;
  font-style: normal;
  animation: nootje-dansen 2s ease-in-out infinite;
}

header h1 > i:nth-of-type(1) {
  animation-duration: 2s;
  animation-delay: 0s;
  font-size: 0.2em;
}

header h1 > i:nth-of-type(2) {
  animation-duration: 2.3s;
  animation-delay: -0.7s;
  font-size: 0.2em;
}

header h1 > i:nth-of-type(3) {
  animation-duration: 1.8s;
  animation-delay: -1.3s;
  font-size: 0.2em;
}

header h1 > i:nth-of-type(4) {
  animation-duration: 2.6s;
  animation-delay: -0.4s;
  font-size: 0.3em;
}

@keyframes nootje-dansen {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-0.2em) rotate(-15deg);
  }

  50% {
    transform: translateY(0) rotate(15deg);
  }

  75% {
    transform: translateY(-0.1em) rotate(-10deg);
  }
}

/**************/
/* SONGTEKST */
/**************/

main {
  min-width: 0;

  display: grid;
  gap: 2em;
}

main article p {
  font-size: 1.1em;
  line-height: 1.6;
}

/* Voor het later vormgeven van losse woorden */
main article span {
  display: inline-block;
}

/**************/
/* SPOTLIGHTS */
/**************/

/* Iedere letter is het uitgangspunt voor de eigen lichtbundel */
header h1 > span {
  position: relative;
  display: inline-block;
}

/* De lichtbundels schalen mee met de lettergrootte */
header h1 > span > img {
  position: absolute;

  left: 50%;
  top: -0.65em;
  transform: translateX(-50%);

  width: 1.8em;
  height: 2.2em;
  max-width: none;
  object-fit: fill;

  pointer-events: none;
  opacity: 0;

  animation-duration: 6s;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
}

header h1 > span:nth-of-type(1) > img {
  animation-name: spotlight-y;
}

header h1 > span:nth-of-type(2) > img {
  animation-name: spotlight-m;
}

header h1 > span:nth-of-type(3) > img {
  animation-name: spotlight-c;
}

header h1 > span:nth-of-type(4) > img {
  animation-name: spotlight-a;
}
/**********************/
/* SPOTLIGHTANIMATIES */
/**********************/

@keyframes spotlight-y {
  0%,
  70%,
  80% {
    opacity: 1;
  }

  16.67%,
  75%,
  85%,
  100% {
    opacity: 0;
  }
}

@keyframes spotlight-m {
  0%,
  33.33%,
  75%,
  85%,
  100% {
    opacity: 0;
  }

  16.67%,
  70%,
  80% {
    opacity: 1;
  }
}

@keyframes spotlight-c {
  0%,
  50%,
  75%,
  85%,
  100% {
    opacity: 0;
  }

  33.33%,
  70%,
  80% {
    opacity: 1;
  }
}

@keyframes spotlight-a {
  0%,
  66.67%,
  75%,
  85%,
  100% {
    opacity: 0;
  }

  50%,
  70%,
  80% {
    opacity: 1;
  }
}

/********************/
/* DRAAIENDE LETTERS */
/********************/

aside {
  font-size: clamp(0.75em, 1.5vw, 1em);
  width: 18em;
  height: 18em;

  display: grid;
  place-items: center;
  justify-self: end;
}

aside > p {
  margin: 0;
  display: grid;
  place-items: center;
}

aside > p > span {
  grid-area: 1 / 1;
  font-size: 2em;

  animation: rondje 15s infinite linear;

  /* Verdeel de letters gelijk over de cirkel */
  animation-delay: calc((sibling-index() - 1) * -15s / sibling-count());
}

@keyframes rondje {
  0% {
    transform: rotate(0deg) translateY(-3.5em);
    color: #9cadcc;
  }

  20% {
    color: #a99371;
  }

  40% {
    color: #0f0e0f;
  }

  60% {
    color: #d93030;
  }

  80% {
    color: #602111;
  }

  100% {
    transform: rotate(360deg) translateY(-3.5em);
    color: #9cadcc;
  }
}

aside > p > span:nth-of-type(1),
aside > p > span:nth-of-type(3),
aside > p > span:nth-of-type(5),
aside > p > span:nth-of-type(7) {
  font-variation-settings:
    "wght" 200,
    "SRFS" 28;
}

/********************/
/* Muziek nootjes */
/********************/

aside > p > span:nth-of-type(10),
aside > p > span:nth-of-type(27) {
  animation:
    rondje 15s linear infinite,
    --muzieknootjes 3s ease-in-out infinite;

  animation-delay: calc((sibling-index() - 1) * -15s / 28), 0s;
}

@keyframes --muzieknootjes {
  0%,
  100% {
    scale: 0.9;
  }

  50% {
    scale: 1.2;
  }
}

/**********/
/* Couplet 1 */
/**********/

/* Alle tekst van het eerste couplet centreren */
main article:first-of-type p {
  text-align: center;
  font-size: 2em;
}

main article:first-of-type p > span:nth-of-type(1) {
  display: block;
  width: auto;

  margin-block: 1em;
  text-align: center;
  line-height: 2.5;
  transform-origin: center;
  animation: aandacht 10s ease-in-out infinite;
}

@keyframes aandacht {
  0%,
  100% {
    transform: scale(1.3);
    opacity: 0;
    color: #d93030;
  }

  4% {
    transform: scale(2);
    opacity: 1;
    color: #d93030;
  }

  90% {
    transform: scale(2);
    opacity: 1;
    color: black;
  }
}

/* Alleen DOWN van het eerste couplet */
main article:first-of-type p > span:nth-of-type(2) {
  display: block;
  width: fit-content;
  margin: -0.5em auto 5em;
  color: #d93030;

  font-size: 2em;

  animation: wegzakken linear both;
  animation-timeline: view();
  animation-range: entry 100% exit 100%;
}

@keyframes wegzakken {
  0%,
  40% {
    translate: 0 0;
    opacity: 1;
    color: #d930c8;
    font-variation-settings:
      "wght" 100,
      "SRFS" 0;
  }

  80% {
    opacity: 1;
    color: #d930c8;
    font-variation-settings:
      "wght" 100,
      "SRFS" 0;
  }

  100% {
    translate: 0 5em;
    opacity: 0;
    color: black;
    font-variation-settings:
      "wght" 200,
      "SRFS" 0;
  }
}

main article:first-of-type p > span:nth-of-type(2):hover {
  animation:
    wegzakken auto linear both,
    sprongetje 0.6s ease-out;

  animation-timeline: view(), auto;
  animation-range:
    entry 100% exit 0%,
    normal;
}

@keyframes sprongetje {
  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(0.8em);
  }

  70% {
    transform: translateY(-0.1em);
  }
}

/* Tweede Young man: alsof iemand je roept */
main article:first-of-type p > span:nth-of-type(3) {
  display: inline-block;
  transform-origin: center;
  margin-bottom: -1em;

  margin-inline: 0.5em;
  animation: roepen 5s ease-in-out infinite;
}

@keyframes roepen {
  0%,
  35%,
  100% {
    transform: scale(2) rotate(0deg);
  }

  10% {
    transform: scale(1.15) rotate(-3deg);
    color: #a99371;
  }

  20% {
    transform: scale(1.08) rotate(2deg);
    color: #ab2121;
  }
}

/* Het gifje in het eerste couplet */
article[aria-label="Verse 1"] > p > img {
  display: block;
  width: 16em;
  max-width: 100%;
  height: auto;
  margin: -8em auto;
  margin-bottom: -3em;
}

/* Derde Young man: alsof iemand je roept */
main article:first-of-type p > span:nth-of-type(4) {
  display: inline-block;
  transform-origin: center;

  margin-inline: 0.5em;
  animation: roepen 5s ease-in-out infinite;
  margin-top: 1em;
  margin-bottom: 1em;
}

@keyframes roepen {
  0%,
  35%,
  100% {
    transform: scale(2) rotate(0deg);
  }

  10% {
    transform: scale(1.15) rotate(-3deg);
    color: #a99371;
  }

  20% {
    transform: scale(1.08) rotate(2deg);
    color: #ab2121;
  }
}

/* Alleen de afbeelding van town */
main article:first-of-type p > span:has(> img) {
  display: block;
  margin: 0em auto 1em;
  max-width: 100%;
}

main article:first-of-type p > span > img {
  display: block;
  width: 20em;
  max-width: 100%;
  height: auto;
  margin-inline: auto;

  animation: dorp-verschijnt linear both;
  animation-timeline: view();
  animation-range: entry 50% cover 50%;
}

@keyframes dorp-verschijnt {
  from {
    opacity: 0;
    transform: translateY(3em) scale(0.5);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* There is no need to beunhappy */
/* De losse woorden */
main article:first-of-type p > span > strong {
  display: inline-block;
  font-weight: inherit;

  animation: woord-nadruk 4s ease-in-out infinite;
}

/* Elk woord begint iets later */
main article:first-of-type p > span > strong:nth-of-type(1) {
  animation-delay: 0s;
}

main article:first-of-type p > span > strong:nth-of-type(2) {
  animation-delay: 0.4s;
}

main article:first-of-type p > span > strong:nth-of-type(3) {
  animation-delay: 0.8s;
}

main article:first-of-type p > span > strong:nth-of-type(4) {
  animation-delay: 1.2s;
}

main article:first-of-type p > span > strong:nth-of-type(5) {
  animation-delay: 1.6s;
}

@keyframes woord-nadruk {
  0%,
  20%,
  100% {
    transform: translateY(0);
    color: inherit;
  }

  10% {
    transform: translateY(-0.2em);
    color: #ab2121;
  }
}

/* Een collega van mijn werk heeft mij hier mee geholpen. */
/* Het hele woord */
main article:first-of-type p > span > strong:last-of-type {
  display: inline-block;
  view-timeline-name: --unhappy;
}

/* Letters naast elkaar */
main article:first-of-type p > span > strong:last-of-type > span {
  display: inline-flex;
}

/* Letters buigen mee tijdens het scrollen */
main article:first-of-type p > span > strong:last-of-type > span > span {
  display: inline-block;

  animation: sippe-boog linear both;
  animation-timeline: --unhappy;
  animation-range: cover 40% cover 70%;
  font-variation-settings:
    "wght" 100,
    "SRFS" 0;

  &:nth-child(1) {
    --zakken: 0.6em;
    --draai: -35deg;
  }

  &:nth-child(2) {
    --zakken: 0.3em;
    --draai: -25deg;
  }

  &:nth-child(3) {
    --zakken: 0.08em;
    --draai: -12deg;
  }

  &:nth-child(4) {
    --zakken: 0em;
    --draai: 0deg;
  }

  &:nth-child(5) {
    --zakken: 0.08em;
    --draai: 12deg;
  }

  &:nth-child(6) {
    --zakken: 0.3em;
    --draai: 25deg;
  }

  &:nth-child(7) {
    --zakken: 0.6em;
    --draai: 35deg;
  }
}

@keyframes sippe-boog {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(var(--zakken)) rotate(var(--draai));
  }
}

main article:first-of-type > img {
  display: block;
  width: 30em;
  max-width: 100%;
  height: auto;
  margin: -2em auto;
}

/***********/
/* Refrein */
/***********/

article[aria-label="ymca, part 1"] {
  text-align: left;
}

/* Its fun to stay at the */
article[aria-label="ymca, part 1"] p > span:nth-of-type(1),
article[aria-label="ymca, part 1"] p > span:nth-of-type(3) {
  display: block;
  position: relative;
  isolation: isolate;

  width: fit-content;
  margin-block: 2em;
  font-size: 1em;
  font-variation-settings:
    "wght" 110,
    "SRFS" 20;
}

/* Het extra woord FUN achter de tekst */
article[aria-label="ymca, part 1"] p > span > strong {
  position: absolute;
  z-index: -1;

  left: 0;
  top: -0.35em;

  font-size: 5em;
  line-height: 1;
  color: #9e058c24;
  opacity: 50%;

  rotate: -8deg;
  pointer-events: none;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

/* Het hele woord */
article[aria-label="ymca, part 1"] span[aria-label="Y.M.C.A."] {
  display: flex;
  justify-content: center;
  gap: 0.04em;

  font-size: 14vw;
  line-height: 1.2;
  margin-block: 0.3em;
}

/* Alle letters en punten */
article[aria-label="ymca, part 1"] span[aria-label="Y.M.C.A."] > span {
  display: inline-block;
}

/* odd = oneven: alleen de letters op plek 1, 3, 5 en 7 */
article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(odd) {
  font-variation-settings:
    "wght" 180,
    "SRFS" 0;

  text-shadow:
    0.025em 0.025em 0 #fff,
    0.06em 0.06em 0 currentColor;

  animation: refrein-bounce 2s infinite;
  transition: scale 0.2s ease;
}

/* Y */
article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(1) {
  color: #d93030;
  animation-delay: 0s;
}

/* M */
article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(3) {
  color: #05059e;
  animation-delay: 0.5s;
}

/* C */
article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(5) {
  color: #059e6e;
  animation-delay: 1s;
}

/* A */
article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(7) {
  color: #9e058c;
  animation-delay: 1.5s;
}

/* Tweede Y.M.C.A. */

/* Y begint als laatste */
article[aria-label="ymca, part 1"]
  p
  > span:nth-of-type(4)
  > span:nth-of-type(1) {
  animation-delay: 1.5s;
}

/* M begint als derde */
article[aria-label="ymca, part 1"]
  p
  > span:nth-of-type(4)
  > span:nth-of-type(3) {
  animation-delay: 1s;
}

/* C begint als tweede */
article[aria-label="ymca, part 1"]
  p
  > span:nth-of-type(4)
  > span:nth-of-type(5) {
  animation-delay: 0.5s;
}

/* A begint als eerste */
article[aria-label="ymca, part 1"]
  p
  > span:nth-of-type(4)
  > span:nth-of-type(7) {
  animation-delay: 0s;
}

article[aria-label="ymca, part 1"]
  span[aria-label="Y.M.C.A."]
  > span:nth-of-type(odd):hover {
  scale: 2;
}

/* De springbeweging */
@keyframes refrein-bounce {
  0%,
  25%,
  100% {
    translate: 0 0;
    rotate: 0deg;

    text-shadow:
      0.025em 0.025em 0 #fff,
      0.06em 0.06em 0 currentColor;

    animation-timing-function: ease-out;
  }

  12.5% {
    translate: 0 -0.3em;
    rotate: -10deg;

    text-shadow:
      0.025em 0.025em 0 #fff,
      0.12em 0.18em 0 currentColor;

    animation-timing-function: ease-in;
  }
}

/* They have everthing for young men to enjoy */
/* Beide nadrukwoorden */
article[aria-label="ymca, part 1"] p > em {
  display: inline-block;
  font-style: normal;
  font-size: 2.5em;
  transition:
    letter-spacing 0.3s ease,
    text-shadow 0.3s ease;
}

/* Everything wordt breder */
article[aria-label="ymca, part 1"] p > em:nth-of-type(1) {
  color: #05059e;
  transform-origin: left center;
  margin-right: 0.8em;

  animation: everything-breed 3s ease-in-out infinite;
}

/* Enjoy wiebelt iets later */
article[aria-label="ymca, part 1"] p > em:nth-of-type(2) {
  color: #9e058c;

  animation: enjoy-dansen 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes everything-breed {
  0%,
  60%,
  100% {
    scale: 1 1;
    font-variation-settings:
      "wght" 100,
      "SRFS" 0;
  }

  30% {
    scale: 1.15 1;
    font-variation-settings:
      "wght" 180,
      "SRFS" 0;
  }
}

@keyframes enjoy-dansen {
  0%,
  60%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    font-variation-settings:
      "wght" 200,
      "SRFS" 0;
  }

  20% {
    translate: 0 -0.15em;
    rotate: -10deg;
    font-variation-settings:
      "wght" 100,
      "SRFS" 0;
  }

  40% {
    translate: 0 -0.5em;
    rotate: 10deg;
    font-variation-settings:
      "wght" 150,
      "SRFS" 0;
  }
}
/* Everything krijgt meer ruimte */
article[aria-label="ymca, part 1"] p > em:nth-of-type(1):hover {
  letter-spacing: 0.1em;
  color: #059e6e;
}

/* Enjoy krijgt een gekleurde schaduw */
article[aria-label="ymca, part 1"] p > em:nth-of-type(2):hover {
  text-shadow:
    0.04em 0.1em white,
    0.08em 0.2em #581b47;
}

/* All the */
article[aria-label="ymca, part 1"] p > strong {
  display: inline-block;
  font-size: 1.8em;
  font-variation-settings:
    "wght" 120,
    "SRFS" 5;
}

/* BOYS */
article[aria-label="ymca, part 1"] p > strong > em {
  display: inline-block;
  font-style: normal;
  font-size: 2.5em;

  color: #d93030;
  font-variation-settings:
    "wght" 150,
    "SRFS" 0;

  text-shadow:
    0.025em 0.03em white,
    0.06em 0.1em #05059e;

  transition:
    scale 0.3s ease,
    rotate 0.3s ease;
}

article[aria-label="ymca, part 1"] p > strong > em:hover {
  scale: 1.15;
  rotate: -5deg;
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
}

/* BOYS loopt tijdens het scrollen een trapje af */
article[aria-label="ymca, part 1"] p > strong > em {
  display: inline-block;

  animation: boys-trap linear both;
  animation-timeline: view();
  animation-range: entry 100% cover 50%;
}

@keyframes boys-trap {
  0% {
    translate: 0 0;
    opacity: 1;
  }

  /* Hupje 1 */
  8% {
    translate: 0.1em -0.15em;
    opacity: 1;
  }
  16% {
    translate: 0.2em 0.4em;
    opacity: 1;
  }

  /* Hupje 2 */
  25% {
    translate: 0.3em 0.25em;
    opacity: 0.8;
  }
  33% {
    translate: 0.4em 0.8em;
    opacity: 0.8;
  }

  /* Hupje 3 */
  41% {
    translate: 0.5em 0.65em;
    opacity: 0.6;
  }
  50% {
    translate: 0.6em 1.2em;
    opacity: 0.6;
  }

  /* Hupje 4 */
  58% {
    translate: 0.7em 1.05em;
    opacity: 0.4;
  }
  66% {
    translate: 0.8em 1.6em;
    opacity: 0.4;
  }

  /* Hupje 5 */
  75% {
    translate: 0.9em 1.45em;
    opacity: 0.2;
  }
  83% {
    translate: 1em 2em;
    opacity: 0.2;
  }

  /* Hupje 6 */
  91% {
    translate: 1.1em 1.85em;
    opacity: 0;
  }
  100% {
    translate: 1.2em 2.4em;
    opacity: 0;
  }
}

/**********/
/* FOOTER */
/**********/
footer {
  font-size: 0.85em;
}

/*******************/
/* BREDE SCHERMEN */
/*******************/

@media (width > 50em) {
  body {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 4em;
    align-items: start;
  }

  /* Titel horizontaal bovenaan */
  header {
    grid-column: 1 / -1;
    grid-row: 1;

    writing-mode: horizontal-tb;
    position: static;
  }

  header h1 {
    font-size: clamp(3em, 15vw, 12em);
  }

  /* Songtekst onder de titel */
  main {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Rondje onder de songtekst */
  aside {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
  }

  /* Footer onderaan */
  footer {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/********************/
/* MINDER BEWEGING */
/********************/

@media (prefers-reduced-motion: reduce) {
  aside > p {
    animation: none;
    transform: translateY(-2.5em);
  }
}

/********************/
/* Grote Y.M.C.A */
/********************/

/* Een eigen laag voor de songtekst en achtergrondletters */
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  isolation: isolate;
}

/* Het eerste couplet en de letters op dezelfde plek */
main > article[aria-label="Verse 1"],
main > article[aria-hidden="true"] {
  grid-column: 1;
  grid-row: 1;
}

/* Achtergrondartikel */
main > article[aria-hidden="true"] {
  z-index: -1;
  min-width: 0;

  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(4, 1fr);
  justify-content: center;
  align-items: center;

  transform: rotate(-15deg);
  pointer-events: none;
  user-select: none;
}

/* Grote achtergrondletters */
main > article[aria-hidden="true"] > span {
  display: block;

  font-size: clamp(8em, 35vw, 28em);
  font-variation-settings:
    "wght" 200,
    "SRFS" 0;
  line-height: 1;

  color: rgba(172, 49, 127, 0.34);
}