/* MARK: fonts
*/

@font-face {
  font-family: "seraphs";
  src: url("font/SeraphsVF.woff2");
  font-weight: 100 200;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* MARK: kleuren
*/

html {
  color-scheme: dark;

  --zwart: #131310;
  --donker-paars: #28212c;
  --paars: #372a3d;
  --licht-paars: #947197;
  --wit-roze: #be9eba;
  --roze: #f06090;
  --oranje: #e09030;
  --licht-roze: #f2a7c3;
  --licht-oranje: #f4b98a;
}

/* MARK: algemeen
*/

body {
  font-family: "seraphs", serif;
  font-weight: 100;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height: 1.6;
  color: var(--wit-roze);
  background-color: var(--donker-paars);
  background-image: linear-gradient(160deg, var(--zwart), var(--donker-paars), var(--paars), var(--donker-paars), var(--zwart));
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: spacey 30s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes spacey {
  from {
    background-position: left top;
  }
  to {
    background-position: right bottom;
  }
}

/* MARK: logo naar home
*/

.logo-home {
  position: absolute;
  top: 1.35rem;
  left: clamp(0.75rem, 6vw, 6rem);
}

.logo-home img {
  display: block;
  height: 3.5rem;
}

/* MARK: titel
*/

hgroup {
  padding: 6rem 0 4rem;
  text-align: center;

  @media (width > 64em) {
    grid-column: 1 / -1;
  }
}

h1 {
  font-size: 3.5rem;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  text-shadow: 0 0 0.4em var(--licht-paars);
  animation: vervorming 10s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes vervorming {
  from {
    letter-spacing: 0.15em;
    font-variation-settings: "SRFS" 0;
  }
  to {
    letter-spacing: 0.35em;
    font-variation-settings: "SRFS" 60;
  }
}

hgroup p {
  text-transform: uppercase;
  letter-spacing: 0.6em;
  animation: kleuren 12s ease-in-out infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes kleuren {
  0%,
  100% {
    color: var(--wit-roze);
  }
  33% {
    color: var(--roze);
  }
  66% {
    color: var(--oranje);
  }
}

/* MARK: coupletten
*/

main {
  padding: 0 8vw;

  @media (width > 64em) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
}

.couplet-1,
.refrein,
.couplet-2 {
  margin-bottom: 10rem;
}

.couplet-1 {
  color: var(--wit-roze);
  font-variation-settings: "SRFS" 0;

  @media (width > 64em) {
    grid-column: 1 / 8;
  }
}

.refrein {
  text-align: right;
  color: var(--licht-roze);
  font-variation-settings: "SRFS" 20;

  @media (width > 64em) {
    grid-column: 6 / 13;
  }
}

.couplet-2 {
  color: var(--licht-oranje);
  font-variation-settings: "SRFS" 60;

  @media (width > 64em) {
    grid-column: 1 / 8;
  }
}

/* MARK: couplet 1
*/

.noise {
  display: inline-block;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  filter: blur(1.5px);
  animation: trillen 0.8s ease-in-out infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes trillen {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0.03em, -0.02em);
  }
  75% {
    transform: translate(-0.03em, 0.02em);
  }
}

i {
  animation: ademen 4s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes ademen {
  from {
    text-shadow: 0 0 0.1em var(--licht-paars);
  }
  to {
    text-shadow: 0 0 0.8em var(--licht-paars);
  }
}

.golf {
  animation: golven 6s ease-in-out infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes golven {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.5em);
  }
}

/* MARK: refrein
*/

.shadow {
  font-size: 1.5em;
  animation: verdwijnen 5s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes verdwijnen {
  from {
    color: var(--licht-roze);
  }
  to {
    color: var(--zwart);
  }
}

.heen-weer {
  animation: heen-en-weer 12s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes heen-en-weer {
  from {
    transform: translateX(-1.5em);
  }
  to {
    transform: translateX(1.5em);
  }
}

.ocean {
  font-size: 2em;
  letter-spacing: 0.15em;
  color: var(--roze);
}

.morning {
  color: var(--oranje);
}

/* MARK: couplet 2
*/

.whirlwind {
  display: inline-block;
  font-size: 1.5em;
  color: var(--oranje);
  animation: draaien 24s linear infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes draaien {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wegdrijven {
  letter-spacing: 0.2em;
  animation: wegdrijven 10s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes wegdrijven {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(4em);
    opacity: 0.6;
  }
}

.slot {
  margin-top: 2rem;
  font-size: 1.3em;
  letter-spacing: 0.2em;
  color: var(--roze);
  animation: overgang 8s ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes overgang {
  from {
    color: var(--roze);
    text-shadow: 0 0 0 var(--oranje);
  }
  to {
    color: var(--oranje);
    text-shadow: 0 0 0.6em var(--oranje);
  }
}

/* MARK: footer
*/

footer {
  padding: 2rem;
  font-size: 0.8rem;
  text-align: center;
}