/*
 * theme.css — EMBERLINE design tokens.
 * Opens in dark (:root = the ignition palette). A light set sits under
 * html[data-theme="light"] for anyone who switches, though the app itself
 * is built to be read in the dark — that is the whole point of the piece.
 */

:root {
  color-scheme: dark;
  --canvas: #120e0c;
  --surface: #1d1613;
  --surface-2: #281d17;
  --border: #3a2b21;
  --border-strong: #5c4433;
  --ink: #f3e9e2;
  --muted: #a89a8e;
  --accent: #c93c08;
  --accent-hover: #b83507;
  --accent-ink: #fff8f2;
  --accent-text: #ff7a29;
  --accent-strong: #ffab6e;
  --accent-soft: #2f1c11;
  --accent-border: #6b3117;
  --success: #3f9161;
  --success-ink: #ffffff;
  --success-soft: #162a1c;
  --success-strong: #7ad19c;
  --warning: #c9891e;
  --warning-ink: #1c1006;
  --warning-soft: #2c2012;
  --warning-strong: #e7b158;
  --danger: #d1382b;
  --danger-ink: #ffffff;
  --danger-soft: #2c1613;
  --danger-strong: #f0806f;
  --chart-1: #ff7a29;
  --chart-2: #ff4d4d;
  --chart-3: #ffb347;
  --chart-4: #c9432b;
  --chart-5: #8a5a2a;
  --chart-6: #ffe08a;

  --font-display: "Bebas Neue", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --eyebrow-tracking: 0.22em;

  --radius-btn: 3px;
  --radius-card: 14px;
  --radius-input: 6px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 24px 64px -28px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 30px 90px -20px rgba(0, 0, 0, 0.8);
  --shadow-btn: 0 10px 30px -10px rgba(232, 72, 12, 0.55);
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 600;
  --measure: 62ch;

  --gradient-ember: linear-gradient(120deg, #ffdf8f 0%, #ff9a3d 42%, #e8390c 100%);
  --gradient-glow: radial-gradient(circle, rgba(255, 122, 41, 0.55) 0%, rgba(232, 72, 12, 0) 70%);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f6efe8;
  --surface: #fffaf5;
  --surface-2: #f0e3d6;
  --border: #e3d2c1;
  --border-strong: #c9ab8d;
  --ink: #241a12;
  --muted: #7a6656;
  --accent: #c93c08;
  --accent-hover: #a53106;
  --accent-ink: #fff8f2;
  --accent-text: #c73e0a;
  --accent-strong: #a5330a;
  --accent-soft: #fbe3d3;
  --accent-border: #f0b18c;
  --success: #2f8552;
  --success-ink: #ffffff;
  --success-soft: #dff0e5;
  --success-strong: #216a40;
  --warning: #a86414;
  --warning-ink: #ffffff;
  --warning-soft: #f6e7d1;
  --warning-strong: #874d0d;
  --danger: #b7301f;
  --danger-ink: #ffffff;
  --danger-soft: #f6ddd8;
  --danger-strong: #93261a;
  --chart-1: #e8480c;
  --chart-2: #c73e0a;
  --chart-3: #d98a1f;
  --chart-4: #a5330a;
  --chart-5: #7a4a26;
  --chart-6: #8f5b12;

  --gradient-ember: linear-gradient(120deg, #e88b2b 0%, #e8480c 55%, #a5330a 100%);
  --gradient-glow: radial-gradient(circle, rgba(232, 72, 12, 0.35) 0%, rgba(232, 72, 12, 0) 70%);
}

/*
 * app.css — EMBERLINE's own stylesheet. Tokens only for colour.
 * The scroll-linked ignition, the flame-to-cigarette drift and the ember
 * particles all read from CSS custom properties that public/app.js writes
 * each frame (--p on [data-hero], --fp on [data-flame]); everything else
 * here is plain layout and keyframes.
 */

@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translateY(-115vh) translateX(var(--drift, 12px)); opacity: 0; }
}
@keyframes flicker {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(var(--flame-scale, 1)); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--flame-scale, 1) * 1.08)); }
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 1.5%); }
}

html { scroll-behavior: smooth; overflow-x: hidden; }
html.reduced-motion { scroll-behavior: auto; }
body { overflow-x: hidden; }

body { background: var(--canvas); position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain-shift 9s steps(2) infinite;
}
html.reduced-motion body::before { animation: none; }

/* ---- Top bar --------------------------------------------------------- */
.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--canvas) 68%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-bar-mark {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ink);
  text-decoration: none;
}
.site-bar-mark:hover { text-decoration: none; }
.site-bar-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
.site-bar-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms var(--ease, ease), opacity 200ms var(--ease, ease);
}

/* ---- Drawer ------------------------------------------------------------ */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: var(--canvas);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out, ease), transform 320ms var(--ease-out, ease);
}
.navopen:checked ~ .site-drawer { opacity: 1; transform: none; pointer-events: auto; }
.site-drawer a {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 4rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}
.site-drawer a:hover { color: var(--accent-text); text-decoration: none; }
.site-drawer a.site-drawer-sub {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--muted);
}
.site-drawer a.site-drawer-sub:hover { color: var(--accent-text); }
.site-drawer-close { position: absolute; top: 1.35rem; right: clamp(1.25rem, 4vw, 3rem); cursor: pointer; }
.site-drawer-close span:first-child { transform: translateY(6.5px) rotate(45deg); }
.site-drawer-close span:nth-child(2) { opacity: 0; }
.site-drawer-close span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
.navopen:checked ~ .site-bar .site-bar-burger:not(.site-drawer-close) span:first-child { transform: translateY(6.5px) rotate(45deg); }
.navopen:checked ~ .site-bar .site-bar-burger:not(.site-drawer-close) span:nth-child(2) { opacity: 0; }
.navopen:checked ~ .site-bar .site-bar-burger:not(.site-drawer-close) span:last-child { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Shared type bits ---------------------------------------------------- */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking, 0.22em);
  text-transform: uppercase;
  color: var(--accent-text);
}
.section-pad { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: var(--display-tracking);
  margin-top: 0.5rem;
  text-wrap: balance;
}
.closing-heading {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: var(--display-tracking);
  margin-top: 0.75rem;
}
.ember-text {
  background: var(--gradient-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 32rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--canvas);
  --p: 0;
  --parallax-hero: 0;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 18%;
  filter: brightness(calc(0.05 + var(--p) * 0.62)) saturate(calc(0.4 + var(--p) * 0.75)) contrast(1.05);
  transform: scale(1.03) translateY(calc(var(--parallax-hero) * -0.12px));
  transition: filter 60ms linear;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 60%, transparent 30%, var(--canvas) 92%);
}
.hero-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  background: var(--gradient-glow);
  opacity: calc(var(--p) * 0.9);
  filter: blur(10px);
  transform: scale(calc(0.85 + var(--p) * 0.5));
  transition: opacity 80ms linear;
}
.hero-embers { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-embers .ember {
  position: absolute;
  bottom: -5%;
  left: calc(var(--i) * 7.2% + 2%);
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-text);
  box-shadow: 0 0 6px 1px var(--accent);
  opacity: 0;
  --drift: calc((var(--i) * 3px) - 20px);
  animation: ember-rise calc(6s + var(--i) * 0.4s) linear calc(var(--i) * -0.55s) infinite;
}
html.reduced-motion .hero-embers { display: none; }
.hero-text {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 1.5rem;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 13vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: 0.015em;
  filter: drop-shadow(0 0 calc(8px + var(--p) * 34px) color-mix(in srgb, var(--accent) calc(30% + var(--p) * 55%), transparent));
}
.hero-sub {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: 1rem;
}
.hero-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-cue:hover { color: var(--accent-text); text-decoration: none; }
.hero-cue .icon { animation: bob 1.8s ease-in-out infinite; }
html.reduced-motion .hero-cue .icon { animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---- Flame study section -------------------------------------------------- */
.flame-section { position: relative; height: 112vh; }
.flame-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  --fp: 0;
  --parallax-flame: 0;
}
.flame-bg { position: absolute; inset: 0; }
.flame-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 20%;
}
.flame-bg-a {
  z-index: 0;
  opacity: calc(1 - var(--fp));
  transform: translateY(calc(var(--parallax-flame) * 1px)) scale(1.04);
}
.flame-bg-b {
  z-index: 1;
  opacity: var(--fp);
  transform: scale(1.04);
}
.flame-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--canvas) 45%, transparent) 0%,
    color-mix(in srgb, var(--canvas) 20%, transparent) 40%,
    color-mix(in srgb, var(--canvas) 65%, transparent) 100%
  );
}
.flame-orb {
  position: absolute;
  z-index: 3;
  left: calc(23% + var(--fp) * 34%);
  top: calc(40% - var(--fp) * 22%);
  width: calc(6rem - var(--fp) * 3.2rem);
  height: calc(6rem - var(--fp) * 3.2rem);
  --flame-scale: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-strong) 0%, var(--accent-text) 40%, var(--accent) 72%, transparent 84%);
  filter: blur(calc(6px + (1 - var(--fp)) * 6px));
  animation: flicker 1.4s ease-in-out infinite;
  mix-blend-mode: screen;
}
html.reduced-motion .flame-orb { animation: none; }
.flame-caption {
  position: absolute;
  z-index: 4;
  left: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(2.5rem, 8vw, 5rem);
  max-width: 26rem;
  color: var(--ink);
}
.flame-heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 0.98;
  margin-top: 0.5rem;
}
.flame-copy { margin-top: 1rem; color: color-mix(in srgb, var(--ink) 78%, transparent); font-size: 0.95rem; }

/* ---- Process --------------------------------------------------------------- */
.process-step { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.process-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}

/* ---- Contact ----------------------------------------------------------------- */
.contact-section { padding-block: clamp(5rem, 12vw, 9rem); }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- Reveal on scroll (sections other than hero/flame, which are scroll-value driven) ----
   Rests VISIBLE always — a visitor whose script never runs, or whose capture
   lands before the IntersectionObserver fires, still sees the section. The
   entrance is an animation played once when .is-inview is added, not a
   persistent opacity:0 base state. */
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
[data-inview] { opacity: 1; transform: none; }
[data-inview].is-inview { animation: section-reveal 700ms var(--ease-out, ease) both; }
html.reduced-motion [data-inview].is-inview { animation: none; }

@media (max-width: 640px) {
  .flame-section { height: 120vh; }
  .flame-caption { max-width: 90vw; }
}

/* ---- Sign-in ---------------------------------------------------------------- */
.login-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 3rem);
}
.login-card { width: min(26rem, 100%); }
.login-back {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}
.login-back:hover { color: var(--accent-text); text-decoration: none; }

/* ---- Inbox -------------------------------------------------------------------- */
.inbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
}
.inbox-main { max-width: 52rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem) 6rem; }
.inbox-list { display: flex; flex-direction: column; gap: 1rem; }
.inbox-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: border-color 200ms var(--ease, ease);
}
.inbox-row.is-handled { opacity: 0.6; }
.inbox-row-main { min-width: 0; flex: 1 1 auto; }
.inbox-row-head { display: flex; align-items: center; gap: 0.75rem; }
.inbox-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.01em; }
.inbox-email { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--accent-text); text-decoration: none; }
.inbox-email:hover { text-decoration: underline; }
.inbox-body { margin-top: 0.75rem; color: var(--ink); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; }
.inbox-date { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.inbox-row-actions { flex: 0 0 auto; }