:root {
  /* Live flashlight position in viewport pixels (updated by JS). */
  --x: 50vw;
  --y: 50vh;

  /*
    Radius of the light pool. clamp() keeps it sensible on every screen:
    proportional with vmin so it comfortably covers the typography.
  */
  --radius: clamp(140px, 28vmin, 320px);
}

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

html,
body {
  height: 100%;
  width: 100%;
}

body {
  /* Pitch black backdrop */
  background-color: #030305;
  color: #fff;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  /* Prevent the page from scrolling/zooming/text-selecting while dragging on touch. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: none; /* replaced by our own flashlight glow */
}

.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* better mobile viewport handling */
  touch-action: none;
}

/* ---------- Shared headline layout ----------
   Fixed & full-viewport so the mask coordinates match cursor / flashlight
   exactly (no offset).
   Uses display: flex and white-space: nowrap to guarantee the text ALWAYS
   remains on a single line across all desktop, tablet, and mobile screens. */
.headline {
  position: fixed;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Critical single-line text container */
.headline__text {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Dynamic font scaling: prominent and legible across desktop and tablet */
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  line-height: 1.18;
  text-align: center;
}

/* Base layer: very dim text, shrouded in the darkness */
.headline--base {
  color: rgba(255, 255, 255, 0.06);
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

/* Glow layer: bright glowing text, revealed only inside the flashlight beam */
.headline--glow {
  z-index: 2;
  color: #f4f7ff;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  text-shadow:
    0 0 8px rgba(180, 210, 255, 0.9),
    0 0 22px rgba(120, 170, 255, 0.75),
    0 0 55px rgba(90, 140, 255, 0.55),
    0 0 90px rgba(70, 120, 255, 0.4);

  -webkit-mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 70%
  );
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

/* ---------- Flashlight light pool ----------
   A soft beam that lightens whatever is beneath it via screen blending. */
.flashlight {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    rgba(200, 220, 255, 0.16) 0%,
    rgba(150, 185, 255, 0.08) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  mix-blend-mode: screen;
}

/* Phase 1 Easter Egg headline: "Follow the light..." */
.headline--egg {
  z-index: 2;
  color: #eafff8;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(8px);
  text-shadow:
    0 0 10px rgba(100, 255, 218, 0.95),
    0 0 26px rgba(80, 240, 200, 0.75),
    0 0 60px rgba(40, 200, 170, 0.5),
    0 0 100px rgba(30, 180, 150, 0.35);

  -webkit-mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 70%
  );
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

/* Phase 4 Easter Egg victory headline: "You found it! 🎉" */
.headline--found {
  z-index: 4;
  color: #fffdf5;
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.95),
    0 0 30px rgba(255, 195, 50, 0.8),
    0 0 70px rgba(255, 160, 20, 0.55),
    0 0 110px rgba(255, 130, 0, 0.4);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease;
}

.headline__hint {
  display: block;
  white-space: nowrap;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(225, 240, 255, 0.7);
  margin-top: 0.6rem;
  text-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
}

/* Word "lost" trigger hook */
.word-lost {
  display: inline;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* Subtle glow charge while hovering over "lost" */
body.lost-charging .headline--glow .word-lost {
  color: #bbf7d0;
  text-shadow:
    0 0 10px rgba(134, 239, 172, 1),
    0 0 25px rgba(74, 222, 128, 0.85),
    0 0 50px rgba(34, 197, 94, 0.6);
}

/* ---------- State Transitions: Egg Active ---------- */
body.egg-active .headline--base,
body.egg-active .headline--glow {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(6px);
}

body.egg-active .headline--egg {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* ---------- State Transitions: Egg Found ---------- */
body.egg-found .headline--base,
body.egg-found .headline--glow,
body.egg-found .headline--egg {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(6px);
}

body.egg-found .headline--found {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Subtle screen shake on Easter Egg activation */
@keyframes egg-shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

body.egg-shake .scene {
  animation: egg-shake 0.4s ease;
}

/* ---------- Phase 3: Interactive Compass at Cursor ---------- */
.compass {
  position: fixed;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  scale: 0.6;
  filter: blur(4px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              scale 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.45s ease;
}

body.egg-active .compass {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

body.egg-found .compass {
  opacity: 0;
  scale: 0.6;
  filter: blur(6px);
  transition: opacity 0.3s ease, scale 0.3s ease, filter 0.3s ease;
}

.compass__dial {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(100, 255, 218, 0.5);
  box-shadow:
    0 0 14px rgba(100, 255, 218, 0.4),
    inset 0 0 10px rgba(100, 255, 218, 0.2);
  background: radial-gradient(
    circle,
    rgba(13, 27, 42, 0.65) 0%,
    rgba(10, 20, 32, 0.3) 70%,
    transparent 100%
  );
  backdrop-filter: blur(2px);
  animation: compass-pulse 2.2s infinite ease-in-out;
}

@keyframes compass-pulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(100, 255, 218, 0.35),
      inset 0 0 8px rgba(100, 255, 218, 0.15);
  }
  50% {
    box-shadow:
      0 0 20px rgba(100, 255, 218, 0.65),
      inset 0 0 14px rgba(100, 255, 218, 0.3);
  }
}

.compass__needle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  /* Keep transform instantaneous in JS to prevent 360-degree reverse spin across +/-180 deg */
  transition: none;
}

.needle-pointer {
  filter: drop-shadow(0 0 6px rgba(100, 255, 218, 0.95));
}

/* ---------- Phase 2 & 4: Secret Egg Layer ---------- */
.secret-egg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.egg-active .secret-egg-layer {
  opacity: 1;
  /* Shrouded in darkness, revealed as the light beam approaches */
  -webkit-mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.8) 45%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--radius) at var(--x) var(--y),
    #000 0%,
    rgba(0, 0, 0, 0.8) 45%,
    transparent 70%
  );
}

body.egg-found .secret-egg-layer {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.secret-egg {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.9);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.secret-egg__emoji {
  font-size: 3rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 230, 100, 0.4));
  transition: filter 0.4s ease, transform 0.4s ease;
}

body.egg-found .secret-egg {
  transform: translate(-50%, -50%) scale(1.2);
  pointer-events: auto;
  cursor: pointer;
}

body.egg-found .secret-egg__emoji {
  filter:
    drop-shadow(0 0 18px rgba(255, 215, 0, 0.95))
    drop-shadow(0 0 45px rgba(255, 180, 50, 0.8));
  animation: egg-bounce 1.6s infinite ease-in-out;
}

@keyframes egg-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.1);
  }
}

/* Celebratory sparkles around the egg */
.secret-egg__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkle-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 20%, #ffd700 80%);
  box-shadow: 0 0 8px #ffd700;
  pointer-events: none;
  animation: sparkle-burst 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sparkle-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dest-x), var(--dest-y)) scale(var(--scale));
    opacity: 0;
  }
}

/* ---------- Mobile & Tablet screens (<= 768px) ---------- */
@media (max-width: 768px) {
  :root {
    /* Spotlight radius dynamically scaled proportionally with enlarged mobile text */
    --radius: clamp(135px, 38vmin, 220px);
  }

  .headline {
    padding: 1rem 0.6rem;
  }

  /* Dynamic mobile typography scaling: prominent, bold, strictly single-line */
  .headline__text {
    font-size: clamp(1.8rem, 7vw, 3rem);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }

  .headline__hint {
    font-size: clamp(0.85rem, 3.2vw, 1.05rem);
    margin-top: 0.8rem;
  }
}

/* Extra narrow mobile viewports (e.g. 320px screens) */
@media (max-width: 360px) {
  .headline {
    padding: 0.8rem 0.35rem;
  }

  .headline__text {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
}

/* Coarse pointers (touchscreens) get a generous, forgiving spotlight radius */
@media (pointer: coarse) {
  :root {
    --radius: clamp(140px, 40vmin, 240px);
  }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .headline--base,
  .headline--glow,
  .headline--egg,
  .headline--found,
  .compass,
  .secret-egg,
  .secret-egg-layer {
    transition: none !important;
    animation: none !important;
  }

  body.egg-shake .scene {
    animation: none !important;
  }
}