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

html {
  color-scheme: light dark;
}

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The joke: one wordmark, split down the seam. Left white/black, right black/white. */
.split {
  display: flex;
  width: 100%;
  height: 100dvh;
}

.half {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.half-light {
  background: #ffffff;
  color: #000000;
}

.half-dark {
  background: #000000;
  color: #ffffff;
}

.word {
  font-size: clamp(2.75rem, 18vw, 20rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

::selection {
  background: #000000;
  color: #ffffff;
}

.half-dark ::selection {
  background: #ffffff;
  color: #000000;
}

/* Load-in: each half reveals away from the seam, communicates the split.
   Breathing: the page slowly inverts itself and back, forever. */
@media (prefers-reduced-motion: no-preference) {
  .half-light {
    animation: breathe-light 14s ease-in-out 0.8s infinite;
  }

  .half-dark {
    animation: breathe-dark 14s ease-in-out 0.8s infinite;
  }

  .half-light .word {
    animation: from-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .half-dark .word {
    animation: from-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes from-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes from-right {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 14s loop: ~3.5s fade to inverted, ~7s hold, ~3.5s fade back */
@keyframes breathe-light {
  0% {
    background-color: #ffffff;
    color: #000000;
  }
  25%,
  75% {
    background-color: #000000;
    color: #ffffff;
  }
  100% {
    background-color: #ffffff;
    color: #000000;
  }
}

@keyframes breathe-dark {
  0% {
    background-color: #000000;
    color: #ffffff;
  }
  25%,
  75% {
    background-color: #ffffff;
    color: #000000;
  }
  100% {
    background-color: #000000;
    color: #ffffff;
  }
}