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

:root {
  --mouse-x: -9999px;
  --mouse-y: -9999px;
  --light-radius: 250px;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #060a14;
  color: #e8e8e8;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------
   Shared layout for both content layers
   ------------------------------------------------ */
main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  user-select: none;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

main h1 {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

main p {
  font-size: 1.15rem;
  font-weight: 300;
  margin-top: 0.5rem;
}

main nav {
  display: flex;
  gap: 5.5rem;
  margin-top: 8rem;
}

.link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.link-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 300;
  opacity: 0.7;
  white-space: nowrap;
}

.hidden-text {
  visibility: hidden;
}

.invisible-label {
  visibility: hidden;
  pointer-events: none;
}

.copied-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1.75rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(200, 215, 255, 0.7);
  white-space: nowrap;
  animation: copied-fade 1.5s ease-out forwards;
}

@keyframes copied-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------------------------
   Warm glow (follows cursor, lowest layer)
   ------------------------------------------------ */
#glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    rgba(140, 170, 255, 0.10) 0%,
    transparent 100%
  );
}

/* ------------------------------------------------
   Revealed layer (bright, under the fog)
   ------------------------------------------------ */
#revealed {
  z-index: 10;
  color: #e8eeff;
}

#revealed p {
  color: rgba(200, 215, 255, 0.75);
}

#revealed .link-item {
  color: rgba(200, 215, 255, 0.85);
  transition: color 0.2s;
}

#revealed .link-item:hover {
  color: #e8eeff;
}

/* ------------------------------------------------
   Ghost
   ------------------------------------------------ */
#ghost {
  position: fixed;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  animation: ghost-float 3s ease-in-out infinite;
  transition: opacity 0.3s;
}

#ghost.poofed {
  pointer-events: none;
  opacity: 0;
}

.face-scared {
  display: none;
}

#ghost.scared .face-calm {
  display: none;
}

#ghost.scared .face-scared {
  display: block;
}

@keyframes ghost-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Poof particles */
.poof-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(180, 200, 255, 0.8);
  pointer-events: none;
  z-index: 10;
  animation: poof-fly 0.6s ease-out forwards;
}

@keyframes poof-fly {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(var(--poof-x), var(--poof-y));
  }
}

/* ------------------------------------------------
   Fog overlay
   ------------------------------------------------ */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent 50%,
    rgba(6, 10, 20, 0.7) 75%,
    #060a14 100%
  );
}

/* ------------------------------------------------
   CRT retro TV effect
   ------------------------------------------------ */
#fog-texture {
  position: fixed;
  inset: 0;
  z-index: 51;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent 40%,
    black 80%,
    black 100%
  );
  mask-image: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent 40%,
    black 80%,
    black 100%
  );
}

/* Scanlines */
#fog-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(6, 10, 30, 0.3) 2px,
    rgba(6, 10, 30, 0.3) 4px
  );
  animation: crt-flicker 0.15s infinite;
  z-index: 1;
}

/* Static noise */
#fog-texture::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  filter: url(#noise);
  opacity: 0.06;
  animation: static-drift 0.4s steps(4) infinite;
  z-index: 2;
}

/* Scanlines (always visible, over everything) */
#crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(6, 10, 30, 0.15) 2px,
    rgba(6, 10, 30, 0.15) 4px
  );
  animation: crt-flicker 0.15s infinite;
}

/* CRT vignette */
#crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 60%,
    rgba(6, 8, 18, 0.7) 100%
  );
}

@keyframes crt-flicker {
  0% { opacity: 0.85; }
  50% { opacity: 0.92; }
  100% { opacity: 0.85; }
}

@keyframes static-drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, -1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------
   Surface layer (faint, above the fog)
   Masked to disappear where the light shines
   ------------------------------------------------ */
#surface {
  z-index: 60;
  pointer-events: none;
  color: rgba(180, 200, 255, 0.45);
  -webkit-mask-image: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent 30%,
    black 70%,
    black 100%
  );
  mask-image: radial-gradient(
    circle var(--light-radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent 30%,
    black 70%,
    black 100%
  );
}

#surface p {
  color: rgba(160, 180, 240, 0.35);
}

#surface .link-item {
  color: rgba(160, 180, 240, 0.35);
}

/* ------------------------------------------------
   Mobile fallback
   ------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  #overlay,
  #glow,
  #fog-texture,
  #crt-scanlines,
  #crt-vignette,
  #revealed {
    display: none;
  }

  #surface {
    pointer-events: auto;
    color: rgba(200, 215, 255, 0.85);
    -webkit-mask-image: none;
    mask-image: none;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 35vh;
  }

  #surface .content {
    align-items: flex-start;
    padding-left: 2rem;
  }

  #surface p {
    color: rgba(180, 200, 255, 0.5);
    padding-left: 0 !important;
  }

  #surface-nav {
    padding-left: 0 !important;
    gap: 1.5rem;
    margin-top: 3rem;
  }

  #surface .link-item {
    color: rgba(180, 200, 255, 0.7);
  }

  #surface .hidden-text {
    display: none;
  }

  #surface .invisible-label {
    display: none;
  }

  #surface h1 {
    font-size: 3rem;
  }

  #ghost {
    opacity: 0.4;
    z-index: 70;
  }
}