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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
}

button,
[type=button],
[type=submit],
[type=reset] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Anchored elements clear any sticky header instead of hiding beneath it. */
:target {
  scroll-margin-block: 5ex;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Layout
   ========================================================================== */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  background-color: #222222;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  min-height: 100vh;
  min-height: 100dvh;
  padding-inline: clamp(2rem, 8vw, 6rem);
  padding-block: clamp(2rem, 8vh, 6rem);
}

/* ==========================================================================
   Knop
   ========================================================================== */
.replay {
  padding: 0.7rem 1.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 2rem;
  transition: background-color 0.2s, border-color 0.2s;
}

.replay:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

.replay:focus-visible {
  outline: 2px solid #ff5d5d;
  outline-offset: 3px;
}

/* ==========================================================================
   Logo
   ========================================================================== */
/* De T en de R zijn 74px breed en de rest 75px. Uitlijnen op de onderkant
   houdt de letters op een gemeenschappelijke basislijn zonder dat de
   standaard stretch ze verticaal oprekt. */
.logo {
  display: flex;
  align-items: flex-end;
  /* Een percentage rekent tegen de breedte van het logo zelf, waardoor de
     tussenruimte samen met de letters meeschaalt. */
  gap: 1.3333333333%;
  width: 100%;
  max-width: 1200px;
  --logo-animation-start-delay: 1s;
}

/* De letters zijn op een vierkant grid getekend, dus ze verdelen de
   beschikbare breedte in gelijke delen. flex-basis 0 laat de tussenruimte
   buiten die verdeling vallen, waardoor het totaal nooit breder wordt
   dan de container. */
.logo__letter {
  flex: 1 1 0;
  min-width: 0;
}

/* ==========================================================================
   Animatie
   ========================================================================== */
/* Zonder JavaScript staat het logo stil in de eindpositie. Het script zet de
   startposities en de klassen hieronder, dus de animatie is een toevoeging
   op een pagina die ook zonder werkt. */
@keyframes logo-letter-in {
  from {
    transform: var(--logo-letter-start);
  }
  to {
    transform: none;
  }
}
/* Houdt de letters in hun startpositie in de momenten dat er geen animatie
   loopt: tussen het laden en de openingspauze, en tussen twee herstarts. */
.logo--scrambled .logo__letter {
  transform: var(--logo-letter-start);
}

/* De index komt uit het script, zodat de trap in de vertraging niet afhangt
   van het aantal letters. */
.logo--animating .logo__letter {
  animation: logo-letter-in 1s both;
  animation-delay: calc(var(--logo-animation-start-delay) + var(--logo-letter-index) * 0.25s);
}

/* Zonder animatie mag het logo niet in zijn startpositie blijven staan. */
@media (prefers-reduced-motion: reduce) {
  .logo--scrambled .logo__letter,
  .logo--animating .logo__letter {
    transform: none;
    animation: none;
  }
}

/*# sourceMappingURL=layout.css.map */