/* ═══════════════════════════════════════════════════════════
   THE FLAME — style.css

   @3d / Luca:
   • Frame sequence is full-screen edge-to-edge (cover mode via canvas)
   • Text columns overlay the scene with side-gradient backing
   • .l spans animate with lineWhisper / lineRelease keyframes

   @scroll / Mira:
   • No CSS opacity transitions on .pt — animations are
     time-based, triggered by JS .entering / .leaving classes
═══════════════════════════════════════════════════════════ */

:root {
  --bg:    #0a0705;
  --text:  #ddd0ba;
  --dim:   #6a5e4e;
  --gold:  #c89440;
  --font:  'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; }
body  {
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ── Canvas layers ───────────────────────────────────────── */
#cv-scene,
#cv-parts,
#cv-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#cv-scene { z-index: 2; }   /* full-screen scene + overlays */
#cv-parts { z-index: 3; }   /* ember particles              */
#cv-grain {                  /* film grain, above UI         */
  z-index: 90;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}

/* ── UI overlay (above canvas, below grain) ──────────────── */
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
#ui.ready { opacity: 1; }

/* ── Header ──────────────────────────────────────────────── */
#hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 2rem 3.5vw;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  /* Soft dark backing so header reads over any frame */
  background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 100%);
  padding-bottom: 3rem;
}
.hdr-title {
  font-size: clamp(.54rem, .76vw, .76rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(200,190,170,.55);
  font-weight: 400;
}
.hdr-div { color: rgba(200,190,170,.25); font-size: .7rem; }
.hdr-sub {
  font-size: clamp(.48rem, .66vw, .66rem);
  font-style: italic;
  color: rgba(200,190,170,.35);
  font-weight: 300;
  letter-spacing: .1em;
}

/* ── Phase label ─────────────────────────────────────────── */
#phase-lbl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* JS sets top dynamically. Fallback: just below header. */
  top: 5.5rem;
  font-size: .52rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity .6s ease;
  white-space: nowrap;
  z-index: 12;
}
#phase-lbl.on { opacity: .75; }

/* ═══════════════════════════════════════════════════════════
   TEXT COLUMNS  — overlay position, left ⅓ + right ⅓
   JS writes explicit px values after computing viewport size.
   These CSS values are defaults / fallbacks only.
═══════════════════════════════════════════════════════════ */
.col {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.col--l {
  left:  2vw;
  width: 22vw;
  text-align: right;
}
.col--r {
  right: 2vw;
  width: 22vw;
  text-align: left;
}

/* Spacer — gives .col an intrinsic height for translateY centering */
.col::before {
  content: '';
  display: block;
  height: clamp(140px, 20vw, 280px);
  visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   PHASE TEXTS — stacked inside .col
   All start invisible. JS adds .entering / .leaving.
═══════════════════════════════════════════════════════════ */
.pt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* No opacity here — animations control it */
}

/* ── All child elements start hidden ────────────────────── */
.pt .pt-label,
.pt .l {
  opacity: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   @3d / Luca — ENTRY: "The Whisper"
   Each line arrives individually, staggered.
   cubic-bezier(0.16, 1, 0.3, 1) = fast start, slow settle.
   This creates the feeling of words drifting into existence.
═══════════════════════════════════════════════════════════ */
.pt.entering .pt-label {
  animation: lineWhisper 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0ms    both;
}
.pt.entering .l:nth-child(1) {
  animation: lineWhisper 1.6s cubic-bezier(0.16, 1, 0.3, 1) 220ms  both;
}
.pt.entering .l:nth-child(2) {
  animation: lineWhisper 1.6s cubic-bezier(0.16, 1, 0.3, 1) 460ms  both;
}
.pt.entering .l:nth-child(3) {
  animation: lineWhisper 1.6s cubic-bezier(0.16, 1, 0.3, 1) 700ms  both;
}

/* ── EXIT: "The Release" ────────────────────────────────── */
/* All lines leave together — a single, unified exhale */
.pt.leaving .pt-label,
.pt.leaving .l {
  animation: lineRelease 1s cubic-bezier(0.4, 0, 0.6, 1) 0ms both;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes lineWhisper {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes lineRelease {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(2px);
  }
}

/* ── Typography ─────────────────────────────────────────── */
.pt-label {
  font-size: clamp(.46rem, .58vw, .58rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;           /* overridden by animation */
  margin-bottom: 1.8rem;
  font-weight: 400;
  font-style: normal;
}

.pt p {
  /* No margin/padding — lines are display:block spans */
}

.pt .l {
  font-size: clamp(1rem, 1.55vw, 1.78rem);
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: .025em;
  color: var(--text);
}

.pt em {
  font-style: italic;
  font-weight: 400;
  color: #e8dac2;
}

/* ── Progress bar ────────────────────────────────────────── */
#prg-track {
  position: absolute;
  top: 9vh; bottom: 9vh;
  right: 1.5rem;
  width: 1px;
  background: rgba(255,255,255,.05);
}
#prg-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(to bottom, var(--gold), rgba(200,148,60,.15));
}

/* ── Scroll hint ─────────────────────────────────────────── */
#hint {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  transition: opacity .9s ease;
}
.hint-word {
  font-size: .54rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(200,190,170,.4);
}
.hint-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(200,190,170,.4), transparent);
  animation: hDrop 2.4s ease-in-out infinite;
}
@keyframes hDrop {
  0%  { transform:scaleY(0); opacity:0; transform-origin:top; }
  38% { transform:scaleY(1); opacity:1; transform-origin:top; }
  39% { transform-origin:bottom; }
  78% { transform:scaleY(0); opacity:0; transform-origin:bottom; }
  100%{ transform:scaleY(0); opacity:0; transform-origin:top; }
}

/* ── Loader ──────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}
.ld-wrap  { display:flex; flex-direction:column; align-items:center; gap:1.8rem; }
.ld-flame { width:18px; height:30px; display:flex; align-items:flex-end; justify-content:center; }
.ld-core  {
  width:100%; height:100%;
  background: radial-gradient(ellipse at 50% 80%, #f0a040, #b83810);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  transform-origin: bottom center;
  box-shadow: 0 0 14px 5px rgba(190,70,15,.45);
  animation: ldFl 1.8s ease-in-out infinite;
}
@keyframes ldFl {
  0%  { transform:scaleX(1)    scaleY(1)    rotate(-2deg); opacity:.85; }
  33% { transform:scaleX(.88)  scaleY(1.12) rotate(2deg);  opacity:1;   }
  66% { transform:scaleX(1.06) scaleY(.94)  rotate(-1deg); opacity:.9;  }
  100%{ transform:scaleX(1)    scaleY(1)    rotate(-2deg); opacity:.85; }
}
.ld-txt { font-size:.67rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }

/* ── Scroll driver ───────────────────────────────────────── */
#driver { height: 500vh; }

/* ═══════════════════════════════════════════════════════════
   MOBILE/TABLET ≤ 900 px
   Scene still fills screen edge-to-edge.
   Text columns overlay at bottom, side by side.
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .col {
    width: 42vw;
    transform: none;
    top: auto;
    bottom: 4vh;
  }
  .col--l {
    left:  3vw;
    text-align: left;
  }
  .col--r {
    right: 3vw;
    left:  auto;
    text-align: right;
  }

  .col::before { display: none; }

  .pt {
    position: relative;
    inset: auto;
    display: none;
  }
  .pt.entering { display: flex; }
  .pt.leaving  { display: flex; }

  .pt .l  { font-size: clamp(.82rem, 3.5vw, .98rem); line-height: 1.85; }
  .pt-label { margin-bottom: 1rem; }

  #prg-track { display: none; }
  .hdr-div   { display: none; }

  /* Bottom gradient for text readability on mobile */
  #ui::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35vh;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ld-core, .hint-line { animation: none; }
  #ui { transition: none; }
  .pt.entering .pt-label,
  .pt.entering .l,
  .pt.leaving .pt-label,
  .pt.leaving .l {
    animation-duration: .01ms !important;
  }
}