:root{
  --ink:#1c130d;
  --paper:#fbf6ee;
  --paper-warm:#f4ead9;
  --flame:#d9601a;
  --flame-light:#f0891f;
  --ember:#9a3410;
  --gold:#c68a35;
  --line: rgba(28,19,13,0.12);
}
*{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}
.serif{ font-family:'Fraunces', serif; }
.flame-text{
  background: linear-gradient(120deg, var(--flame-light), var(--flame) 55%, var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grain{
  position:relative;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.035) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events:none;
  mix-blend-mode: multiply;
}
.btn-flame{
  background: linear-gradient(100deg, var(--flame-light), var(--ember));
  color:#fff;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 8px 24px -8px rgba(154,52,16,0.55);
}
.btn-flame:hover{ transform: translateY(-2px); filter:brightness(1.06); box-shadow: 0 14px 30px -8px rgba(154,52,16,0.6); }
.btn-outline{
  border:1.5px solid var(--ink);
  color:var(--ink);
  transition: all .25s ease;
}
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline-light{
  border:1.5px solid rgba(251,246,238,0.55);
  color:var(--paper);
  transition: all .25s ease;
}
.btn-outline-light:hover{ background: var(--paper); color:var(--ink); border-color:var(--paper);}
.card{
  background:#fff;
  border:1px solid var(--line);
}
.divider-flame{
  height:3px; width:56px;
  background: linear-gradient(90deg, var(--flame-light), var(--ember));
  border-radius:2px;
}
.mandate-line{
  background: linear-gradient(180deg, var(--flame-light), var(--ember));
}
.flicker{ animation: flicker 4.5s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes flicker{
  0%,100%{ transform: scale(1) skewX(0deg); }
  30%{ transform: scale(1.015,1.03) skewX(-0.6deg); }
  55%{ transform: scale(0.99,1.01) skewX(0.5deg); }
  80%{ transform: scale(1.01,1.02) skewX(-0.3deg); }
}
.nav-shadow{ box-shadow: 0 1px 0 rgba(28,19,13,0.08); }
/* Plain rgba text/bg helpers (Tailwind can't apply /NN opacity to var() colors) */
.text-ink-60{ color: rgba(28,19,13,0.6); }
.text-ink-70{ color: rgba(28,19,13,0.7); }
.text-ink-80{ color: rgba(28,19,13,0.8); }
.text-paper-30{ color: rgba(251,246,238,0.3); }
.text-paper-40{ color: rgba(251,246,238,0.4); }
.text-paper-60{ color: rgba(251,246,238,0.6); }
.text-paper-70{ color: rgba(251,246,238,0.7); }
.text-paper-75{ color: rgba(251,246,238,0.75); }
.text-paper-80{ color: rgba(251,246,238,0.8); }
.bg-paper-95{ background-color: rgba(251,246,238,0.95); }
::selection{ background: var(--flame-light); color:#fff; }
.step-num{
  font-family:'Fraunces', serif;
  font-variant-numeric: oldstyle-nums;
}
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--ember); outline-offset:3px;
}

/* ---------- Animation system ---------- */

/* Scroll reveal: applied via JS to headings/paragraphs/cards as they enter view */
.reveal-el{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-el.is-in{ opacity:1; transform:none; }

/* Card lift on hover/focus */
.card{ transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(28,19,13,0.25); border-color: rgba(217,96,26,0.35); }

/* Nav underline sweep */
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background: linear-gradient(90deg, var(--flame-light), var(--ember));
  transition: right .3s ease;
}
.nav-link:hover::after{ right:0; }

/* Mandate timeline: draws left-to-right when section enters view */
.mandate-line{ transform: scaleX(0); transform-origin: left center; transition: transform 1.5s cubic-bezier(.16,.7,.2,1); }
.mandate-line.is-in{ transform: scaleX(1); }
#mandate .step-num{ transition: color .3s ease; }

/* Rising embers in hero */
.ember-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ember{
  position:absolute; bottom:-10%;
  width:5px; height:5px; border-radius:50%;
  background: radial-gradient(circle, #ffb066 0%, #e8650a 60%, transparent 100%);
  opacity:0;
  animation: rise linear infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0) scale(0.6); opacity:0; }
  8%{ opacity:.9; }
  50%{ transform: translateY(-160px) translateX(var(--drift, 12px)) scale(1); }
  92%{ opacity:.35; }
  100%{ transform: translateY(-320px) translateX(calc(var(--drift, 12px) * 2)) scale(0.4); opacity:0; }
}

/* Hero entrance (runs once on load, staggered) */
@keyframes hero-rise{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
.hero-in{ opacity:0; animation: hero-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }

/* Gentle background drift behind hero */
.ember-glow{ animation: glow-shift 10s ease-in-out infinite alternate; }
@keyframes glow-shift{
  0%{ background-position: 20% 20%, 85% 10%; }
  100%{ background-position: 24% 26%, 80% 16%; }
}

@media (prefers-reduced-motion: reduce){
  .flicker{ animation:none; }
  .ember{ animation:none; opacity:0; }
  .ember-glow{ animation:none; }
  .reveal-el{ opacity:1; transform:none; transition:none; }
  .mandate-line{ transform: scaleX(1); transition:none; }
  .card:hover{ transform:none; }
}

/* ---------- Loading screen ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 45%, #e8791e 0%, #b8460f 45%, #3a1608 100%);
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform:scale(.6);
  animation: loader-zoom 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.loader-mark svg, .loader-mark img{ width:78px; height:78px; object-fit:contain; }
.loader-ring{
  width:120px; height:120px; border-radius:50%;
  border:1.5px solid rgba(251,246,238,0.35);
  position:absolute;
  animation: loader-ring-pulse 1.8s ease-out infinite;
}
@keyframes loader-zoom{
  0%{ opacity:0; transform:scale(.6); }
  60%{ opacity:1; transform:scale(1.08); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes loader-ring-pulse{
  0%{ transform:scale(.85); opacity:.6; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .loader-mark{ animation:none; opacity:1; transform:none; }
  .loader-ring{ animation:none; display:none; }
  #loader{ transition: opacity .25s linear; }
}