/* MARK: variables */
:root {
  --bg: #0f1c2b;
  --text: #f2eadb;
  --sorrow: #9fb3c8;
  --heart: #d6403f;
  --rag: #c8a18d;
  --bone: #fffaf0;
  --honey-light: #f7c948;
  --honey-mid: #e89a00;
  --honey-dark: #a85f00;
  --milk: #fffaf0;
}

/* MARK: fonts */
@font-face {
  font-family: "Seraphs";
  src: url("font/SeraphsVF.woff2") format("woff2");
  font-weight: 100 900; /* pas aan op de echte range van je font */
  font-display: swap;
}

/* MARK: base */
body {
  font-family: "Seraphs", sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  position: fixed;
  inset: 0 auto 0 0;
  box-sizing: border-box;
  padding: 2vh 1vw;
  writing-mode: sideways-lr;
  text-align: center; /* titel in het midden van de hoogte */
  white-space: nowrap;
  font-size: 8vh;
  color: var(--sorrow);
  z-index: 1;
}

header > h1 {
  margin: 0;
  font: inherit; /* de h1 ziet er hetzelfde uit als de gewone header */
}

main {
  padding-inline: 12vh;
  overflow-x: clip;
}

footer {
  padding: 8vh 12vh;
  text-align: center;
  color: var(--sorrow);
}

/* MARK: knoppen bovenaan (Take a different path en Home) */
main > nav ul {
  display: flex;
  flex-wrap: wrap; /* op een smal scherm komen ze onder elkaar */
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

main > nav a {
  display: inline-block;
  padding: 0.5em 1.2em;
  background: var(--sorrow);
  color: var(--bg);
  border-radius: 2rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

main > nav a:hover {
  background: var(--honey-light);
}

main > nav a:focus-visible {
  outline: 0.15rem solid var(--text);
  outline-offset: 0.15rem;
}

/* pijltje voor de eerste knop; het deel na de / is de tekst voor
   schermlezers (leeg). */
main > nav li:first-child a::before {
  content: "← ";
  content: "← " / "";
}

/* MARK: Sorrow (uitrekken bij scrollen) */
main > p:has(> strong) {
  display: grid;
  justify-items: center;
  text-align: center;
}

main > p > strong {
  color: var(--sorrow);
  font-size: 8vh;
  transform-origin: center top; /* de bovenkant blijft staan, het woord loopt naar beneden uit */
}

@supports (animation-timeline: view()) {
  main > p > strong {
    animation: sorrow-stretch linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 70%;
  }
}

@keyframes sorrow-stretch {
  from {
    transform: scaleY(1);
    margin-bottom: 0;
  }
  to {
    transform: scaleY(5);
    margin-bottom: 38vh; /* duwt de volgende regel mee naar beneden */
  }
}

/* MARK: Don't leave my hyper heart (wave) */
p:has(> span) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  margin: 100px 0;
  font-size: 6vh;
}

p > span {
  animation: wave-animation 3.5s ease-in-out infinite alternate;
}

p > span:nth-child(1) {
  animation-delay: 0s;
}
p > span:nth-child(2) {
  animation-delay: 0.25s;
}
p > span:nth-child(3) {
  animation-delay: 0.5s;
}
p > span:nth-child(4) {
  animation-delay: 0.75s;
}
p > span:nth-child(5) {
  animation-delay: 1s;
}
p > span:nth-child(6) {
  animation-delay: 1.25s;
}
p > span:nth-child(7) {
  animation-delay: 1.5s;
}
p > span:nth-child(8) {
  animation-delay: 1.75s;
}
p > span:nth-child(9) {
  animation-delay: 2s;
}

@keyframes wave-animation {
  from {
    translate: 0 18px;
    rotate: -2deg;
  }
  to {
    translate: 0 -18px;
    rotate: 2deg;
  }
}

/* "heart" (5e woord): meegolven én kloppen, op hetzelfde element */
p > span:nth-child(5) {
  color: var(--heart);
  animation:
    wave-animation 3.5s ease-in-out 1s infinite alternate,
    heart-beat 1s ease-in-out infinite;
}

@keyframes heart-beat {
  0% {
    scale: 1;
  }
  25% {
    scale: 1.2;
  }
  40% {
    scale: 1;
  }
  60% {
    scale: 1.15;
  }
  100% {
    scale: 1;
  }
}

/* MARK: Cover me in rag and bone sympathy */
p:has(> u) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.15em;
  margin: 100px 0;
  font-size: 3rem;
}

p > u {
  color: var(--rag);
  rotate: -8deg;
  font-style: italic;
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  margin-right: -0.15em;
}

p > b {
  color: var(--bone);
  rotate: 5deg;
  font-weight: bold;
  text-transform: uppercase;
  margin-left: -0.15em;
}

/* MARK: I don't wanna get over you */
/* basispositie = eindpositie, zodat het ook zonder scroll-animatie goed staat */
p:has(> em) {
  --from: 0; /* 0 = tegen de linkerrand, 0.5 = midden, 1 = tegen de rechterrand */
  --to: 0.5;
  position: relative;
  width: fit-content;
  font-size: 4vh;
  margin: 8vh 0;
  left: calc(var(--to) * 100%);
  translate: calc(var(--to) * -100%) 0;
}

p:has(> em) ~ p:has(> em) {
  --from: 0.25; /* midden-links */
  --to: 0.75; /* midden-rechts */
}

p:has(> em) ~ p:has(> em) ~ p:has(> em) {
  --from: 0.5; /* midden */
  --to: 1; /* helemaal rechts */
}

@keyframes slide-across {
  from {
    left: calc(var(--from) * 100%);
    translate: calc(var(--from) * -100%) 0;
  }
}

@supports (animation-timeline: view()) {
  p:has(> em) {
    animation: slide-across linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}

/* het sprongetje van "over" */
p > em {
  display: inline-block;
  font-style: normal;
  animation: over-jump 3s ease-in-out infinite;
}

@keyframes over-jump {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  30% {
    translate: 0 -0.8em;
    rotate: -6deg;
  } /* omhoog, probeert er overheen te komen */
  55% {
    translate: 0 0.15em;
    rotate: 3deg;
  } /* valt terug, iets te diep */
  75% {
    translate: 0 -0.1em;
    rotate: 0deg;
  } /* veert na */
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

/* MARK: honey and milk */
p:has(> mark) {
  text-align: center;
  font-size: 8vh;
  padding: 12vh 5vw;
}

/* honey: gele verloop-vulling die naar beneden schuift */
p > mark {
  color: transparent;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--honey-light),
    var(--honey-mid),
    var(--honey-dark)
  );
  background-size: 100% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: honey-drip 9s ease-in-out infinite alternate;
}

@keyframes honey-drip {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

/* milk: roomwitte tekst met een zachte gloed, die vervaagt */
p > i {
  font-style: normal;
  color: var(--milk);
  text-shadow: 0 0 12px var(--milk);
  animation: milk-blur 5s ease-in-out infinite alternate;
}

@keyframes milk-blur {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(3px);
  }
}

/* MARK: toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}