/* ═══════════════════════════════════════════════════════════════
   LESHGO — Base styles, type, buttons, atmosphere
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
}

h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; }
h4 { font-size: 18px; line-height: 1.2; }

p { color: var(--body); }

em { font-style: normal; color: var(--ember); }

/* ── Container ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Section frame ── */
section { padding: var(--section-pad) 0; position: relative; }

/* ── Eyebrow ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.eyebrow.ember { color: var(--ember); }
.eyebrow.ember::before { background: var(--ember); }

/* ── Section header ── */
.section-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.section-header p {
  max-width: 580px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s, color 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-lg { padding: 18px 32px; font-size: 13px; }
.btn-sm { padding: 10px 18px; font-size: 11px; }

.btn-primary {
  background: var(--ember);
  color: var(--charcoal);
  box-shadow: var(--glow-ember);
}
.btn-primary:hover {
  background: var(--amber);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 16px 48px rgba(245, 158, 11, 0.35), 0 0 100px rgba(232, 93, 4, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--ember);
  color: var(--ember);
}

.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: var(--glow-gold);
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { border-color: var(--ember); color: var(--ember); }

/* ── Atmosphere: ember radial glow utility ── */
.ember-glow {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(232, 93, 4, 0.20) 0%, rgba(232, 93, 4, 0) 70%);
  z-index: 0;
}
.ember-glow.top {
  background: radial-gradient(80% 80% at 50% 0%, rgba(232, 93, 4, 0.16) 0%, rgba(232, 93, 4, 0) 65%);
}
.ember-glow.left {
  background: radial-gradient(60% 80% at 0% 50%, rgba(232, 93, 4, 0.18) 0%, rgba(232, 93, 4, 0) 70%);
}

/* ── Spark particles ── */
.sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sparks span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--spark);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--spark), 0 0 12px rgba(255, 107, 26, 0.5);
  opacity: 0;
  animation: sparkRise 8s linear infinite;
}
.sparks span:nth-child(1) { left: 8%;  animation-delay: 0s;   animation-duration: 7s; }
.sparks span:nth-child(2) { left: 22%; animation-delay: 1.2s; animation-duration: 9s; }
.sparks span:nth-child(3) { left: 35%; animation-delay: 2.4s; animation-duration: 6s; }
.sparks span:nth-child(4) { left: 48%; animation-delay: 0.6s; animation-duration: 10s; }
.sparks span:nth-child(5) { left: 60%; animation-delay: 3s;   animation-duration: 7s; }
.sparks span:nth-child(6) { left: 72%; animation-delay: 1.8s; animation-duration: 8s; }
.sparks span:nth-child(7) { left: 85%; animation-delay: 4s;   animation-duration: 9s; }
.sparks span:nth-child(8) { left: 92%; animation-delay: 2.2s; animation-duration: 7s; }

@keyframes sparkRise {
  0%   { transform: translateY(100%) translateX(0);  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-20%) translateX(20px); opacity: 0; }
}

/* ── Grain overlay ── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Decorative thai temple frame divider ── */
.temple-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.temple-divider::before, .temple-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  max-width: 200px;
}