/* ============================================================================
   EDEN — style.css (Phase 2: GSAP timeline)
   ----------------------------------------------------------------------------
   This file owns the layer stack (Section 12), typography (Section 6/13), and
   the Phase 2 initial states + keyframes (scroll hint, chromatic spike).
   Motion choreography itself lives in js/eden/timeline.js; CSS just provides
   the resting states and the loop animations the timeline can't do well.

   GOTCHA (Section 18 #5): html and body must stay clean of transform, filter,
   will-change, and clip-path. (#eden-content chromatic-active uses filter
   briefly on the CONTENT layer, not on a parent — that's fine, it doesn't
   create a stacking context for siblings.) Keep html/body clean.
   ========================================================================== */

/* ── 0. Color tokens (Section 6) ──────────────────────────────────────────── */
:root {
  --void:        #f0ece4;   /* warm cream — the paper surface */
  --amber:       #8B5E3C;   /* deep amber — carved shadows */
  --bio:         #4a9e7a;   /* bioluminescent green */
  --gold-edge:   #C4943A;   /* warm gold — illuminated edges */
  --ivory:       #2a2420;   /* dark warm text on white */
  --shadow:      #d8d0c4;   /* subtle shadow tone */
}

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

html {
  background: var(--void);
  /* GOTCHA #5: html/body stay clean of transform/filter/will-change/clip-path.
     No backdrop-filter, no perspective here either. */
}

body {
  background: var(--void);
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  min-height: 100vh;
  /* Scroll locked during the experience (Section 16). Phase 2 unlocks this at
     the revelation moment; for Phase 1 we lock it so the shell reads as a
     single fixed composition. */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hide the system cursor — the warm light IS the cursor (Phase 3).
   Applied at html scope so it covers every layer, present and future. */
html { cursor: none; }
@media (hover: none), (pointer: coarse) {
  /* Touch devices keep their default — there is no real cursor to replace,
     and Phase 3 will skip the cursor canvas + PointLight follow on mobile. */
  html { cursor: auto; }
}

/* ── 2. Shared fixed-layer base ──────────────────────────────────────────── */
/* Every overlay sits at the viewport. pointer-events: none on all of them so
   nothing intercepts the cursor — the only layer that ever needs events later
   is #eden-content (Section 12, GOTCHA #3). */
#bg-main,
#bg-atmosphere,
#vignette,
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#webgl-canvas,
#cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;   /* CRITICAL (Section 12) — never change without cause */
  display: block;
  contain: strict;        /* Perf: isolate paint/layout for full-screen canvases */
}

/* ── 3. Layer stack (z-index, Section 12) ────────────────────────────────── */
#webgl-canvas    { z-index: -1; }   /* paper-cut relief + particles (transparent) */
#cursor-canvas   { z-index:  0; }   /* custom cursor light */
#bg-main         { z-index:  1; display: none; }   /* handled by Three.js */
#bg-atmosphere   { z-index:  2; display: none; }   /* handled by Three.js */
#vignette        { z-index:  3; }
#grain           { z-index:  4; }
#eden-content    { z-index: 10; }
#loading-screen { z-index: 20; }

/* ── 4. Background layers ────────────────────────────────────────────────── */
/* z:1 — main painting surface. White paper-cut relief. */
#bg-main {
  background: #f0ece4;
}

/* z:2 — secondary atmosphere. Subtle warm gradient. */
#bg-atmosphere {
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(240, 236, 228, 0.3) 0%,
    rgba(220, 210, 195, 0.1) 50%,
    transparent 100%
  );
}

/* z:3 — vignette. Asymmetric radial gradients layered for organic feel.
   Subtle warm edges on white — like aged paper. */
#vignette {
  background:
    radial-gradient(
      ellipse 70% 65% at 45% 48%,
      transparent 0%,
      transparent 40%,
      rgba(200, 190, 175, 0.15) 70%,
      rgba(180, 170, 155, 0.25) 100%
    ),
    radial-gradient(
      ellipse 90% 80% at 55% 52%,
      transparent 0%,
      transparent 50%,
      rgba(200, 190, 175, 0.1) 100%
    );
}

/* z:4 — film grain. Procedural SVG noise tile (data URI) so Phase 1 ships
   without a raster asset. Subtle texture on white paper. */
#grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.03;
  /* Perf: mix-blend-mode: multiply was removed — it forced the browser to
     re-composite a full-viewport backing store every frame. At opacity 0.03
     the blend mode is imperceptible anyway. */
}

/* ── 5. Content (Section 12 / 13) ────────────────────────────────────────── */
#eden-content {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  /* This is the ONLY layer allowed pointer events — the cursor is light, and
     the visitor "touches" only the words. Kept auto here. */
  pointer-events: auto;
  text-align: center;
  padding: 1rem;
  perspective: 800px;
}

/* Wrapper for scroll-driven fade — parallax targets inner h1, scroll targets wrapper */
.eden-name-wrap {
  display: inline-block;
}

.eden-opening {
  /* "In the beginning." — Cormorant Garamond 300. A whisper, not a headline. */
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  color: var(--ivory);
  opacity: 0.7;
  line-height: 1.2;
  font-style: italic;
  text-shadow: 0 0 30px rgba(139, 94, 60, 0.06);
}

.eden-name {
  /* EDEN — Cormorant Garamond 700. Heavy, certain, final. */
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 12rem);
  letter-spacing: 0.2em;   /* animates 0.4em → 0.2em in Phase 2 revelation */
  color: var(--ivory);
  line-height: 1;
  white-space: nowrap;
  margin: 0 auto;
  /* Carved shadow — like letters pressed into paper. */
  text-shadow:
    0 0 30px rgba(139, 94, 60, 0.15),
    0 0 60px rgba(139, 94, 60, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.08);
}

.eden-secondary {
  /* "Saper vedere." — appears briefly under EDEN at resolution (§5). */
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0;
  text-shadow: 0 0 20px rgba(139, 94, 60, 0.1);
}

/* ── Phase 2 initial states (gated on .js so no-JS still shows content) ──── */
/* The timeline fades these in. Without JS the shell still reads as a static
   composition — see the comment in index.html. */
.js .eden-opening { opacity: 0; }
.js .eden-name    { opacity: 0; letter-spacing: 0.4em; }
.js .eden-secondary { opacity: 0; }

/* ── Scroll hint (§13, RESOLUTION +3.5s) ─────────────────────────────────── */
/* A single 1px amber line, falling. scaleY grows from top. */
#scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--amber) 30%,
    var(--gold-edge) 80%,
    rgba(196, 148, 58, 0.3) 100%
  );
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  z-index: 10;
  pointer-events: none;
  opacity: 0.7;
  box-shadow: 0 0 6px rgba(196, 148, 58, 0.2);
}
#scroll-hint.is-visible {
  animation: hint-fall 2.4s ease-in-out infinite;
}
@keyframes hint-fall {
  0%   { transform: translateX(-50%) scaleY(1)   translateY(0);    opacity: 0.6; }
  50%  { transform: translateX(-50%) scaleY(1)   translateY(6px);  opacity: 0.25; }
  100% { transform: translateX(-50%) scaleY(1)   translateY(0);    opacity: 0.6; }
}

/* ── Chromatic aberration spike (§13, REVELATION +2.0s) ──────────────────── */
@keyframes eden-chromatic {
  0%   { filter: none; }
  50%  { filter: drop-shadow(1px 0 0 rgba(196,148,58,0.3))
                  drop-shadow(-1px 0 0 rgba(74,158,122,0.3)); }
  100% { filter: none; }
}
#eden-content.chromatic-active {
  animation: eden-chromatic 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* Respect the visitor. Even in the static shell, do not pin motion on
     someone who asked for none. (Phase 2 will fully short-circuit.) */
  .loading-initials { animation: none; opacity: 0.7; }
  #scroll-hint { display: none; }
  #eden-content.chromatic-active { animation: none; }
}

/* When GPU post-processing is active, hide CSS grain + vignette (the shader
   handles both). Keeps them as fallback when post-processing fails to load. */
.gpu-postfx #grain,
.gpu-postfx #vignette { opacity: 0; }

/* ── 6. Scroll content sections ──────────────────────────────────────────── */
/* ScrollSmoother wrapper: viewport-height container with overflow hidden.
   The content inside scrolls via GSAP transforms, not native scroll. */
#smooth-wrapper {
  position: relative;
  z-index: 5;          /* below #eden-content (z:10) — scroll content sits behind the fixed EDEN text */
  pointer-events: auto;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#smooth-content {
  position: relative;
  width: 100%;
  padding-top: 100vh; /* push below the fixed EDEN reveal */
}

/* SplitText char styles — each character is a div.char for letter-by-letter animation */
.char {
  display: inline-block;
  opacity: 0;
}

.word {
  display: inline-block;
}

.scroll-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 6rem 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  --line-h: 0px;
  --line-o: 0;
  position: relative;
}

/* Subtle radial glow behind each section — atmospheric depth */
.scroll-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(196, 148, 58, 0.04) 0%,
    rgba(139, 94, 60, 0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

.scroll-section + .scroll-section::before {
  content: '';
  display: block;
  width: 1px;
  height: var(--line-h, 0px);
  background: linear-gradient(to bottom, transparent, var(--amber), transparent);
  margin-bottom: 3rem;
  opacity: var(--line-o, 0);
  box-shadow: 0 0 8px rgba(196, 148, 58, 0.15);
}

.scroll-quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 4.5vw, 3.5rem);
  color: var(--ivory);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 40px rgba(139, 94, 60, 0.08),
    0 0 80px rgba(139, 94, 60, 0.04);
  max-width: 18ch;
  position: relative;
}

/* Decorative em-dash before the quote */
.scroll-quote::before {
  content: '\2014';
  display: block;
  font-size: 0.4em;
  color: var(--amber);
  opacity: 0.4;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5em;
}

.scroll-attribution {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  color: var(--amber);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 0.5rem;
}

.scroll-philosophy {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  color: var(--ivory);
  line-height: 2;
  letter-spacing: 0.08em;
  opacity: 0.85;
  text-shadow:
    0 0 30px rgba(74, 158, 122, 0.06),
    0 0 60px rgba(74, 158, 122, 0.03);
  max-width: 22ch;
}

.scroll-philosophy em {
  color: #4a9e7a;
  font-style: italic;
  text-shadow: 0 0 20px rgba(74, 158, 122, 0.1);
}

.scroll-coda {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  color: var(--ivory);
  line-height: 2;
  letter-spacing: 0.1em;
  opacity: 0.7;
  text-shadow: 0 0 30px rgba(139, 94, 60, 0.04);
  max-width: 24ch;
}

.scroll-section--end {
  min-height: 50vh;
}

.scroll-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scroll-credit__label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.3em;
  color: var(--ivory);
  text-shadow: 0 0 30px rgba(139, 94, 60, 0.06);
}

.scroll-credit__by {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.5;
}

/* ── 7. EDEN text hover glow ──────────────────────────────────────────────── */
.eden-name {
  transition: text-shadow 0.6s ease;
}

.eden-name:hover {
  text-shadow:
    0 0 40px rgba(139, 94, 60, 0.2),
    0 0 80px rgba(139, 94, 60, 0.12),
    0 0 160px rgba(139, 94, 60, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ── 8. Accessibility / fallback hooks ───────────────────────────────────── */
/* No-WebGL fallback (Section 16) loads fallback.css, which can override these
   to swap the procedural layers for a pure-CSS atmosphere. Nothing to do in
   Phase 1 — the hook exists in index.html via JS, and fallback.css is shipped. */

/* Visually-hidden helper (kept for any future sr-only content). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Paper-cut relief styles ────────────────────────────────────────────── */
/* The paper-cut relief is rendered via Three.js — no CSS needed for it.
   The bg-main/atmosphere provide the base white/cream background. */