* {
  box-sizing: border-box;
}

:root {
  --bg: #000;
  --fg: #fff;
  --logo-size: 100vmin;
}

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

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--fg);
  font-family: system-ui, sans-serif;
}

.stage {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0;
  background: #000;
}

.logo-shell {
  position: relative;
  width: var(--logo-size);
  aspect-ratio: 1 / 1;
  isolation: isolate;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
}

.logo-vector {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.logo-vector svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Make the traced groups independently animatable. */
#demon-lid,
#science-lid,
#demon-word,
#science-word,
#eye-outline,
#eye-occluder,
#pupil-ring {
  transform-box: view-box;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#demon-lid,
#science-lid {
  transform-origin: 51.4% 50.5%;
}

#demon-word {
  transform-origin: 51.4% 33.8%;
}

#science-word {
  transform-origin: 51.4% 67.4%;
}

#eye-outline,
#eye-occluder,
#pupil-ring {
  transform-origin: 51.4% 50.5%;
}


#iris-group {
  transform-box: view-box;
  transform-origin: 51.4% 50.5%;
  will-change: transform;
}

#iris-aperture-shape {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

/* First paint is genuinely closed: both moving hinges meet on the eye line. */
.logo-shell.is-closed #demon-lid {
  transform: translateY(16.5%);
}

.logo-shell.is-closed #science-lid {
  transform: translateY(-16.9%);
}

.logo-shell.is-closed #demon-word {
  transform: scaleX(0.99) scaleY(0.018);
  opacity: 0;
}

.logo-shell.is-closed #science-word {
  transform: scaleX(0.99) scaleY(0.018);
  opacity: 0;
}

.logo-shell.is-closed #eye-outline {
  transform: scaleY(0.045);
  opacity: 0.98;
}

.logo-shell.is-closed #pupil-ring {
  transform: scale(0.76, 0.015);
  opacity: 0;
}

.pupil-window {
  position: absolute;
  /* Coordinates derived from the original 1254x1254 artwork. */
  left: calc(51.40% + var(--iris-x, 0px));
  top: calc(50.48% + var(--iris-y, 0px));
  width: 12.45%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(0.012);
  transform-origin: 50% 50%;
  border-radius: 50%;
  overflow: hidden;
  clip-path: ellipse(50% 2% at 50% 50%);
  z-index: 1;
  opacity: 0;
  background: #050505;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.pupil-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(0,0,0,.22) 76%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
  z-index: 3;
}

.pupil-fallback {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.42), transparent 18%),
    radial-gradient(circle at 73% 68%, rgba(255,255,255,.26), transparent 20%),
    conic-gradient(from 30deg, #020202, #272727, #060606, #3b3b3b, #000);
  filter: contrast(1.22);
  animation: fallback-drift 7s linear infinite;
  z-index: 0;
}

#gameReel {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.15) brightness(.78);
  transform: scale(1.08);
  transform-origin: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms ease;
  will-change: transform, opacity;
}

.pupil-window.has-video #gameReel {
  opacity: 1;
}

.pupil-window.has-video .pupil-fallback {
  opacity: 0;
}

@keyframes fallback-drift {
  from { transform: rotate(0deg) scale(1.05); }
  50% { transform: rotate(180deg) scale(1.18); }
  to { transform: rotate(360deg) scale(1.05); }
}

@media (max-aspect-ratio: 3/4) {
  :root {
    --logo-size: 100vmin;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pupil-fallback {
    animation: none;
  }
}

#eye-occluder { transform-box: view-box; transform-origin: 51.4% 50.5%; will-change: transform; }