/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0a0a0a; color: #e7e7e7; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; }
/* Custom cursor */
body {
  cursor: url('Main Select.cur'), auto;
}

/* Make sure it also stays the same when hovering clickable elements */
.mouth, 
.mouth:hover {
  cursor: url('Main Select.cur'), auto;
}
/* Fixed, full-width Grayson header */
.grayson-fixed {
  position: fixed;
  top: -65px;
  left: 0px;
  width: 100.5vw;
  height: auto;
  pointer-events: none;
  z-index: 10;
  transform: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Layout */
.page {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 2.25rem;
  padding: clamp(6rem, 12vw, 10rem) 1rem 3rem; /* push content below header */
}

/* GIF container maintains aspect ratio */
.stage {
  position: relative;
  width: min(92vw, 720px);
  aspect-ratio: 480 / 348;
}
.stage .tv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Green tint — tweak with CSS variables if desired */
.green-tint {
  /* Rotate hue and boost green channel feel */
  filter: hue-rotate(95deg) saturate(120%) contrast(112%) brightness(95%);
}

/* Below area */
.below { width: 100%; display: grid; place-items: center; }
.soon-below {
  width: clamp(180px, 18vw, 260px);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 6px rgba(0,0,0,.35));
  pointer-events: none;
   /* MOVE IT UP */
  margin-top: -2.5rem;
}

/* Blink animation */
@keyframes blink {
  0%, 35% { opacity: 1; }
  50% { opacity: 0.25; }
  65%, 100% { opacity: 1; }
}
.blink {
  animation: blink 1.6s step-end infinite;
}

/* Reference overlay */
.reference {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  mix-blend-mode: difference;
  z-index: 99;
}
.show-reference .reference { opacity: .85; }

.mouth {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 100px;
  cursor: pointer;
  z-index: 300;
  transition: transform 0.15s ease;
}

.mouth.shake {
  animation: shake .4s ease;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}