:root {
  color-scheme: dark;
}

@font-face {
  font-family: "ScaryBenko";
  src: url("/static/assets/fonts/ScaryBenko.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  height: 100%;
}

body {
  background: #000;
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  text-align: center;
  gap: 0.5rem;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/static/assets/backgrounds/blackmoon%20background%20logo.png") center/60% auto no-repeat fixed;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.eyes-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.eye {
  position: absolute;
  width: 64px;
  height: auto;
  opacity: 0;
  filter: brightness(0);
  transition: opacity 0.4s ease;
  transform-origin: center;
}

.eye.is-visible {
  opacity: 1;
  filter: none;
}

.eye.is-blink {
  animation: blink 1.6s ease-in-out;
}

@keyframes blink {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }
  40% {
    opacity: 0.1;
    transform: scaleY(0.2);
  }
  60% {
    opacity: 0.1;
    transform: scaleY(0.2);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.eye.is-closing {
  animation: close-eye 0.6s ease-in-out forwards;
}

@keyframes close-eye {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.05);
  }
}

.eye.is-opening {
  animation: open-eye 0.6s ease-in-out forwards;
}

@keyframes open-eye {
  0% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.eye-1 { top: 6%; left: 8%; }
.eye-2 { top: 12%; right: 10%; }
.eye-3 { top: 38%; left: 4%; }
.eye-4 { top: 42%; right: 6%; }
.eye-5 { bottom: 18%; left: 10%; }
.eye-6 { bottom: 12%; right: 12%; }
.eye-7 { bottom: 34%; right: 24%; }


.home h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  font-family: "ScaryBenko", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #f2f2f2;
  text-shadow:
    0 0 12px rgba(255, 0, 0, 0.45),
    0 0 28px rgba(255, 0, 0, 0.35),
    0 0 54px rgba(255, 0, 0, 0.28),
    0 0 90px rgba(255, 0, 0, 0.18);
}

.tagline {
  margin-top: 0.5rem;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}