@property --peel {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -10%;
}

@property --reveal {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

:root {
  color-scheme: dark;
  --bg: #020403;
  --fg: #eafbe6;
  --muted: #8fa996;
  --lime: #b6ff3b;
  --mx: 50vw;
  --my: 35vh;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --peel-time: 2.2s;
}

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

html,
body {
  min-height: 100%;
  overflow-x: clip;
}

body {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.skin,
.skin-lit,
.skin-fresh,
.skin-shed,
.shade,
.flash {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.skin {
  mask-image: radial-gradient(
    circle var(--reveal) at var(--reveal-x, 50%) var(--reveal-y, 30%),
    #000 55%,
    transparent
  );
}

.skin-lit {
  opacity: 0;
  mask-image: radial-gradient(
    circle 240px at var(--mx) var(--my),
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.35) 45%,
    transparent
  );
  transition: opacity 1.2s ease;
}

.ready.lit-ready .skin-lit {
  opacity: 1;
}

.shade {
  background: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    rgba(2, 4, 3, 0.72),
    rgba(2, 4, 3, 0.35) 70%,
    rgba(2, 4, 3, 0.8)
  );
}

.skin-fresh,
.skin-shed {
  opacity: 0;
}

.skin-lit,
.skin-fresh {
  filter: brightness(2.6) saturate(1.25) hue-rotate(-10deg);
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 16px 24px;
  text-align: center;
}

.eye-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  animation:
    appear 0.8s ease both,
    float 6s ease-in-out infinite;
  transition: scale 0.4s var(--spring);
}

.eye-button {
  -webkit-touch-callout: none;
  user-select: none;
}

.eye-button:hover {
  scale: 1.06;
}

.eye-button:active {
  scale: 0.94;
}

.eye-button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 6px;
}

.eye {
  display: block;
  width: min(62vw, 280px);
  overflow: visible;
  filter: drop-shadow(0 0 36px rgba(182, 255, 59, 0.35));
  transition: filter 0.5s ease;
}

.eye stop,
.lids > path,
.pupil {
  transition:
    stop-color 0.5s ease,
    stroke 0.5s ease,
    fill 0.5s ease;
}

.title {
  font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--lime);
  user-select: none;
  animation: fade-up 1s ease both;
}

.tagline {
  font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 3.2vw, 1.6rem);
  animation: fade-up 1s ease both 0.2s;
}

.soon {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fade-up 1s ease both 0.4s;
}

.marquee {
  position: relative;
  overflow: hidden;
  margin: 8px -5vw 0;
  padding: 12px 0;
  background: var(--lime);
  color: var(--bg);
  rotate: -2deg;
  animation: rise-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.5s;
}

.track {
  display: flex;
  width: max-content;
  animation: slide var(--marquee-duration, 30s) linear infinite;
}

.group {
  display: flex;
}

.group span {
  padding-right: 24px;
  font-family: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.4vw, 1.25rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.group span::after {
  content: '•';
  margin-left: 24px;
}

footer {
  position: relative;
  padding: 28px 16px 20px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
  animation: fade-up 1s ease both 0.8s;
}

html:not(.ready) :is(.title, .tagline, .soon, .marquee, footer) {
  animation-play-state: paused;
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes fade-up {
  from {
    translate: 0 14px;
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    translate: 0 120%;
    opacity: 0;
  }
}

@keyframes float {
  50% {
    translate: 0 -10px;
  }
}

@keyframes slide {
  to {
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .skin {
    mask-image: none;
  }

  .skin-lit {
    opacity: 1;
  }
}