/* ============================================================
   FINISIT — LIQUID GLASS SYSTEM
   Applies backdrop-filter frosted glass to key surfaces.
   Works in both dark (smoky) and light (frosted ivory) modes.
   ============================================================ */

/* ---------- Body: light-mode texture override ---------- */
[data-theme="light"] body {
  background-image:
    radial-gradient(1200px 700px at 80% -10%, rgba(212,184,135,0.14), transparent 70%),
    radial-gradient(900px 500px at -5% 40%, rgba(31,73,89,0.05), transparent 70%);
}
[data-theme="light"] body::before {
  opacity: 0.018;
  mix-blend-mode: multiply;
}

/* ---------- Nav glass ---------- */
.nav {
  backdrop-filter: blur(28px) saturate(180%) brightness(0.95);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(0.95);
}
[data-theme="light"] .nav {
  background: rgba(249, 245, 238, 0.72);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.02);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.02);
  border-bottom: 1px solid rgba(139, 111, 63, 0.14);
}
[data-theme="light"] .nav.is-scrolled {
  background: rgba(249, 245, 238, 0.94);
  border-bottom-color: rgba(139, 111, 63, 0.24);
}
[data-theme="light"] .nav__brand   { color: #1A1610; }
[data-theme="light"] .nav__brand svg { color: var(--gold-deep); }
[data-theme="light"] .nav__menu a  { color: var(--ivory-muted); }
[data-theme="light"] .nav__menu a:hover { color: var(--text); }
[data-theme="light"] .nav.is-open .nav__menu {
  background: rgba(249, 245, 238, 0.98);
}

/* ---------- Nav controls (theme + lang toggles) ---------- */
.nav__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-3);
}
.nav__ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: var(--r-sm);
  color: var(--ivory-muted);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-luxe);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.nav__ctrl-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212, 184, 135, 0.08);
}
[data-theme="light"] .nav__ctrl-btn {
  color: var(--ivory-muted);
  border-color: rgba(139, 111, 63, 0.35);
}
[data-theme="light"] .nav__ctrl-btn:hover {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
  background: rgba(139, 111, 63, 0.06);
}

/* ---------- Brand cards — liquid glass ---------- */
.brand-card {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    var(--shadow-md);
}
.brand-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    var(--shadow-lg),
    var(--shadow-gold);
}
[data-theme="light"] .brand-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.03);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.03);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(139, 111, 63, 0.07),
    0 8px 32px rgba(60, 40, 10, 0.09);
}
[data-theme="light"] .brand-card:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(212, 184, 135, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(139, 111, 63, 0.1),
    0 16px 48px rgba(60, 40, 10, 0.13),
    0 0 40px rgba(139, 111, 63, 0.10);
}
[data-theme="light"] .brand-card p { color: var(--ivory-muted); }

/* ---------- Token flow nodes — liquid glass ---------- */
.token__node {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--shadow-sm);
}
.token__node:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    var(--shadow-md);
}
[data-theme="light"] .token__node {
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 16px rgba(60, 40, 10, 0.08);
}
[data-theme="light"] .token__node:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(212, 184, 135, 0.42);
  transform: translateY(-3px);
}
[data-theme="light"] .token__node p { color: var(--ivory-muted); }

/* ---------- NFT teaser cards ---------- */
.nft-teaser__card {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--shadow-md);
}
[data-theme="light"] .nft-teaser__card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 24px rgba(60, 40, 10, 0.09);
}

/* ---------- CTA card ---------- */
[data-theme="light"] .cta__card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(249,245,238,0.5)),
    radial-gradient(circle at 85% 15%, rgba(212,184,135,0.22), transparent 50%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(212, 184, 135, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 20px 60px rgba(60, 40, 10, 0.11);
}
[data-theme="light"] .cta__form input {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(139, 111, 63, 0.24);
  color: var(--text);
}
[data-theme="light"] .cta__form input::placeholder { color: var(--ivory-dim); }
[data-theme="light"] .cta__form input:focus {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--gold-deep);
}

/* ---------- Hero ticker light mode ---------- */
[data-theme="light"] .hero__ticker {
  background: rgba(249, 245, 238, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top-color: rgba(139, 111, 63, 0.16);
  border-bottom-color: rgba(139, 111, 63, 0.16);
}

/* ---------- Manifesto light mode ---------- */
[data-theme="light"] .manifesto__quote { color: var(--text); }

/* ---------- Roadmap phases light mode ---------- */
[data-theme="light"] .phase {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-md);
}
[data-theme="light"] .phase__dot { background: var(--bg); }

/* ---------- Footer light mode ---------- */
[data-theme="light"] .footer {
  background: #F2ECE0;
  border-top-color: rgba(139, 111, 63, 0.18);
}

/* ---------- Section hero stats light mode ---------- */
[data-theme="light"] .hero__stats {
  border-top-color: rgba(139, 111, 63, 0.20);
}

/* ---------- Btn ghost light mode ---------- */
[data-theme="light"] .btn-ghost {
  color: var(--text);
  border-color: rgba(139, 111, 63, 0.42);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(139, 111, 63, 0.06);
  border-color: var(--gold-deep);
  color: var(--text);
}

/* ---------- Section heads light mode ---------- */
[data-theme="light"] .section-head p { color: var(--ivory-muted); }

/* ---------- Nav logo image ---------- */
/* Logo PNG/WEBP ships with a real alpha channel (regenerated 2026-05).
 * The previous version was a dark-bg paletted PNG that needed mix-blend-mode:
 * lighten to hide its background — but .nav has backdrop-filter which
 * creates a stacking-context isolation, so the blend-mode resolved against
 * the nav itself instead of the page underneath, making the logo render as
 * a black rectangle. With proper alpha we just drop in normally.
 *
 * Layer promotion (translateZ + will-change): without these, Chromium
 * occasionally renders the logo fully transparent on first paint when
 * filter:drop-shadow on this img races with the parent .nav's backdrop-
 * filter compositing. Lang toggle (loads Thai fonts → reflow → re-paint)
 * was a workaround. Forcing this img into its own GPU layer makes the
 * paint deterministic. Reported by ไวท์ 2026-05. */
.nav__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(212,175,39,0.35));
  transition: filter var(--dur-base, 0.24s);
  /* Layer promotion — see header comment. translateZ + will-change
   * promote the element to its own composited layer; backface-visibility
   * is belt-and-braces for older Chromium / Safari. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: filter;
}
.nav__logo:hover {
  filter: drop-shadow(0 0 14px rgba(212,175,39,0.6));
}
[data-theme="light"] .nav__logo {
  filter: drop-shadow(0 0 4px rgba(139,111,63,0.20));
}