/* ============================================================
   The Forgetting — styles.css
   Full-viewport night sky scaffold with three-layer architecture:
     Layer 1 (#sky-background, z-index: 1)  — background image + gradient overlays
     Layer 2 (#star-canvas,   z-index: 10) — Canvas for star rendering (Phase 2)
     Layer 3 (#ui-overlay,    z-index: 20) — UI messages (Phase 3+)
   ============================================================ */


/* ----------------------------------------------------------
   1. Reset & viewport lock
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* prevent any scroll at any viewport size */
}

body {
  background: #000; /* pure black behind all layers — never visible under normal use */
}


/* ----------------------------------------------------------
   2. Scene container
   ---------------------------------------------------------- */
#sky-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: crosshair; /* hint at interactivity */
}


/* ----------------------------------------------------------
   3. Background layer — image + dark navy fallback
   ---------------------------------------------------------- */
#sky-background {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* User-provided night sky image */
  background-image: url('../assets/sky-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Fallback colour when sky-bg.jpg is not present */
  background-color: #0a0a2e;
}

/* Pseudo-element ::before — radial vignette for depth */
#sky-background::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* Pseudo-element ::after — top/bottom atmospheric haze */
#sky-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 46, 0.3)  0%,
    transparent            30%,
    transparent            70%,
    rgba(0, 0, 0, 0.5)    100%
  );
}


/* ----------------------------------------------------------
   4. Canvas layer — star rendering (Phase 2)
   ---------------------------------------------------------- */
#star-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* Phase 3 will enable click events via JS */
  display: block;       /* removes inline baseline gap */
  transition: opacity 0.3s ease;
}


/* ----------------------------------------------------------
   5. Mobile gate overlay — shown when touch/small screen detected
   ---------------------------------------------------------- */

/* Gate overlay: covers everything, matches night sky theme */
#mobile-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, #0a0a2e, #1a1a3e);
  color: #e8d5b0;
  display: none; /* JS shows it by toggling body.gate-active */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* Gate heading */
#mobile-gate h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

/* Gate explanation paragraph */
#mobile-gate p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  max-width: 500px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Gate flourish — italic tagline at bottom */
#mobile-gate .gate-flourish {
  margin-top: 2rem;
  font-style: italic;
  opacity: 0.6;
  font-size: 0.9rem;
}

/* When gate is active: show gate, hide sky scene */
body.gate-active #mobile-gate {
  display: flex;
}

body.gate-active #sky-scene {
  display: none;
}


/* ----------------------------------------------------------
   6. Subtitle hint — bottom of the sky scene
   ---------------------------------------------------------- */
#sky-subtitle {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 15; /* above canvas, below UI overlay */
  text-align: center;
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  color: rgba(200, 210, 240, 0.5);
  letter-spacing: 0.15em;
  pointer-events: none;
}


/* ----------------------------------------------------------
   7. UI overlay — puzzle messages (Phase 3+)
   ---------------------------------------------------------- */
#ui-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none; /* clicks pass through to canvas; children override as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wrong-click feedback message — fades in with upward slide */
#ui-overlay .wrong-message {
  pointer-events: none;
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: rgba(232, 213, 176, 0.9);
  text-align: center;
  max-width: 600px;
  padding: 1rem 2rem;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#ui-overlay .wrong-message.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------
   8. Cooldown state — dims canvas and signals not-allowed
   ---------------------------------------------------------- */
#sky-scene.cooldown {
  cursor: not-allowed;
}

#sky-scene.cooldown #star-canvas {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}


/* ----------------------------------------------------------
   9. Neverland transition (Phase 4)
   ---------------------------------------------------------- */

/* Full-viewport Neverland island reveal layer.
   Sits above the canvas (z-index 10) and below the subtitle (z-index 15). */
#neverland-reveal {
  position: absolute;
  inset: 0;
  z-index: 12;
  background-image: url('../assets/neverland.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in;
}

/* Triggered by JS — crossfades island over the zooming starfield */
#neverland-reveal.visible {
  opacity: 1;
}

/* When the full transition sequence is active:
   - fade out the subtitle hint
   - revert cursor to default (cancel crosshair) */
#sky-scene.transition-active {
  cursor: default;
}

#sky-scene.transition-active #sky-subtitle {
  opacity: 0;
  transition: opacity 0.5s ease;
}