:root {
  --ink: #080808;
  --paper: #fffdf8;
  --pink: #ed4f83;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
}

body {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  animation: voltage-background 6s steps(1, end) infinite;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: 4;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgb(237 79 131 / .7) 3px 4px,
      transparent 4px 8px
    );
  mix-blend-mode: difference;
  opacity: 0;
  animation: voltage-lines 6s steps(1, end) infinite;
}

.hero::after {
  z-index: 3;
  background: var(--pink);
  mix-blend-mode: difference;
  opacity: 0;
  animation: voltage-flash 6s steps(1, end) infinite;
}

.brand {
  display: flex;
  width: min(88vw, 820px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-1.5vh);
  animation: voltage-shudder 6s steps(1, end) infinite;
}

.logo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1151 / 853;
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.logo-black {
  opacity: 1;
  animation: black-logo 6s steps(1, end) infinite;
}

.logo-white {
  opacity: 0;
  animation: white-logo 6s steps(1, end) infinite;
}

.domain {
  margin: clamp(-1.35rem, -2vw, -.5rem) 0 0;
  font-size: clamp(1rem, 2.15vw, 1.75rem);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
}

.domain span { color: var(--pink); }

.coming-soon {
  margin: 1rem 0 0;
  font-size: clamp(.8rem, 1.35vw, 1rem);
  font-weight: 700;
  letter-spacing: .035em;
  opacity: .72;
}

.accent {
  position: absolute;
  z-index: -1;
  width: clamp(160px, 25vw, 400px);
  aspect-ratio: 1;
  border: clamp(24px, 4vw, 64px) solid var(--pink);
  border-radius: 50%;
  opacity: .9;
}

.accent-left {
  left: 0;
  bottom: 0;
  transform: translate(-58%, 58%);
}

.accent-right {
  top: 0;
  right: 0;
  transform: translate(58%, -58%);
}

@keyframes voltage-background {
  0%, 33.2% { background: var(--paper); color: var(--ink); }
  33.3% { background: var(--ink); color: var(--paper); }
  35% { background: var(--paper); color: var(--ink); }
  36.7% { background: var(--pink); color: var(--ink); }
  38.3% { background: var(--ink); color: var(--paper); }
  40% { background: var(--paper); color: var(--ink); }
  41.7% { background: var(--ink); color: var(--paper); }
  43.3% { background: var(--pink); color: var(--ink); }
  45% { background: var(--paper); color: var(--ink); }
  46.7% { background: var(--ink); color: var(--paper); }
  48.3% { background: var(--paper); color: var(--ink); }
  49.7% { background: var(--pink); color: var(--ink); }
  50%, 83.2% { background: var(--ink); color: var(--paper); }
  83.3% { background: var(--paper); color: var(--ink); }
  85% { background: var(--ink); color: var(--paper); }
  86.7% { background: var(--pink); color: var(--ink); }
  88.3% { background: var(--paper); color: var(--ink); }
  90% { background: var(--ink); color: var(--paper); }
  91.7% { background: var(--paper); color: var(--ink); }
  93.3% { background: var(--pink); color: var(--ink); }
  95% { background: var(--ink); color: var(--paper); }
  96.7% { background: var(--paper); color: var(--ink); }
  98.3% { background: var(--ink); color: var(--paper); }
  99.7% { background: var(--pink); color: var(--ink); }
  100% { background: var(--paper); color: var(--ink); }
}

@keyframes black-logo {
  0%, 33.2% { opacity: 1; }
  33.3%, 35% { opacity: 0; }
  35%, 38.3% { opacity: 1; }
  38.3%, 40% { opacity: 0; }
  40%, 41.7% { opacity: 1; }
  41.7%, 45% { opacity: 0; }
  45%, 46.7% { opacity: 1; }
  46.7%, 48.3% { opacity: 0; }
  48.3%, 49.7% { opacity: 1; }
  49.7%, 83.2% { opacity: 0; }
  83.3%, 85% { opacity: 1; }
  85%, 88.3% { opacity: 0; }
  88.3%, 90% { opacity: 1; }
  90%, 91.7% { opacity: 0; }
  91.7%, 95% { opacity: 1; }
  95%, 96.7% { opacity: 0; }
  96.7%, 98.3% { opacity: 1; }
  98.3%, 99.7% { opacity: 0; }
  99.7%, 100% { opacity: 1; }
}

@keyframes white-logo {
  0%, 33.2% { opacity: 0; }
  33.3%, 35% { opacity: 1; }
  35%, 38.3% { opacity: 0; }
  38.3%, 40% { opacity: 1; }
  40%, 41.7% { opacity: 0; }
  41.7%, 45% { opacity: 1; }
  45%, 46.7% { opacity: 0; }
  46.7%, 48.3% { opacity: 1; }
  48.3%, 49.7% { opacity: 0; }
  49.7%, 83.2% { opacity: 1; }
  83.3%, 85% { opacity: 0; }
  85%, 88.3% { opacity: 1; }
  88.3%, 90% { opacity: 0; }
  90%, 91.7% { opacity: 1; }
  91.7%, 95% { opacity: 0; }
  95%, 96.7% { opacity: 1; }
  96.7%, 98.3% { opacity: 0; }
  98.3%, 99.7% { opacity: 1; }
  99.7%, 100% { opacity: 0; }
}

@keyframes voltage-lines {
  0%, 33.2%, 50%, 83.2%, 100% { opacity: 0; transform: translateY(0); }
  33.3%, 38.3%, 41.7%, 46.7%, 49.7% { opacity: .86; transform: translateY(-7px); }
  35%, 36.7%, 40%, 43.3%, 45%, 48.3% { opacity: .34; transform: translateY(8px); }
  83.3%, 88.3%, 91.7%, 96.7%, 99.7% { opacity: .86; transform: translateY(-7px); }
  85%, 86.7%, 90%, 93.3%, 95%, 98.3% { opacity: .34; transform: translateY(8px); }
}

@keyframes voltage-flash {
  0%, 33.2%, 50%, 83.2%, 100% { opacity: 0; }
  36.7%, 43.3%, 49.7%, 86.7%, 93.3%, 99.7% { opacity: .32; }
}

@keyframes voltage-shudder {
  0%, 33.2%, 50%, 83.2%, 100% { transform: translateY(-1.5vh); filter: none; }
  33.3%, 83.3% { transform: translate(-9px, -1.2vh) skewX(-2deg); }
  35%, 85% { transform: translate(11px, -1.8vh) skewX(3deg); }
  36.7%, 86.7% { transform: translate(-5px, -1.5vh) scaleY(1.025); filter: blur(.4px); }
  38.3%, 88.3% { transform: translate(8px, -1.7vh) skewX(-3deg); }
  40%, 90% { transform: translate(-10px, -1.3vh) skewX(2deg); }
  41.7%, 91.7% { transform: translate(5px, -1.8vh) scaleX(1.018); }
  43.3%, 93.3% { transform: translate(-4px, -1.5vh) skewX(-2deg); filter: blur(.7px); }
  45%, 95% { transform: translate(9px, -1.4vh) skewX(2deg); }
  46.7%, 96.7% { transform: translate(-7px, -1.7vh); }
  48.3%, 98.3% { transform: translate(3px, -1.5vh) scaleY(.99); }
  49.7%, 99.7% { transform: translate(-2px, -1.5vh); filter: blur(.3px); }
}

@media (max-width: 640px) {
  .brand { width: 94vw; }
  .domain { margin-top: -.2rem; letter-spacing: .09em; }
  .coming-soon { margin-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .brand,
  .logo,
  .hero::before,
  .hero::after {
    animation: none;
  }

  .logo-white { display: none; }
}