/* ============================================================
   Yakthung · base.css
   Foundation: reset, typography, keyframes, scroll-reveal,
   accessibility (focus, skip link, touch, reduced motion).
   Load order: base.css → layout.css → components.css
   ============================================================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* reserve the scrollbar gutter so the layout never shifts sideways when
     pages/menus change how much there is to scroll */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: #1c140f;
  color: #ece1cd;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #b14a30; color: #f3e8d2; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #120c08; }
::-webkit-scrollbar-thumb { background: #3a2a20; border-radius: 8px; }

/* Limbu (Sirijunga) script — hint language for screen readers / shaping */
.limbu { font-family: 'Noto Sans Limbu', serif; }

/* Editorial drop cap — opens the Origins narrative like an illuminated manuscript */
.dropcap::first-letter {
  float: left;
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 3.6em;
  line-height: .76;
  margin: 6px 14px 0 0;
  color: #c89a3e;
}

/* film grain overlay.
   No mix-blend-mode on purpose: a full-viewport fixed blend layer forces the
   whole page into one blend context and visibly janks scrolling on Windows —
   a plain low-opacity noise texture reads the same and scrolls smooth. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- keyframes ---------- */
@keyframes floatDust { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .6; } 60% { opacity: .7; } 100% { transform: translateY(-90px); opacity: 0; } }
/* Sparks curve as they rise (drift kicks in late) and shrink as they burn out. */
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate3d(calc(var(--sx, 0px) * .38), calc(var(--sy, -200px) * .55), 0) scale(.74); opacity: .92; }
  100% { transform: translate3d(var(--sx, 0px), var(--sy, -200px), 0) scale(.22); opacity: 0; }
}
@keyframes scriptIn { 0% { opacity: 0; filter: blur(14px); letter-spacing: .4em; transform: translateY(26px); } 100% { opacity: 1; filter: blur(0); letter-spacing: .02em; transform: translateY(0); } }
@keyframes scriptGlow { 0%, 100% { text-shadow: 0 0 26px rgba(232,192,105,.18); } 50% { text-shadow: 0 0 46px rgba(232,192,105,.42); } }

/* ---------- scroll-reveal ----------
   Elements start hidden; assets/js/main.js sets inline opacity:1 /
   transform:none when they enter the viewport (or the head failsafe /
   reduced-motion / noscript rules reveal them).
   Note: no blanket will-change here — promoting every reveal element to its
   own compositor layer caused memory pressure and scroll jitter; the JS adds
   the hint just-in-time and removes it when the transition ends. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.05s cubic-bezier(.16,.85,.3,1),
              transform 1.05s cubic-bezier(.16,.85,.3,1);
}
.reveal-fade { opacity: 0; transition: opacity 1.05s ease; }

/* ---------- interactive element focus (keyboard a11y) ---------- */
[data-navdot]:focus-visible,
[data-king]:focus-visible,
[data-district]:focus-visible,
[data-term]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #e8c069;
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the cream sections the gold ring is nearly invisible — use dark ink there. */
#sec-map :focus-visible,
#sec-dance :focus-visible,
#sec-tongba :focus-visible,
#sec-diaspora :focus-visible,
#sec-directory :focus-visible {
  outline-color: #241811;
}

/* the generic focus rule sets border-radius:4px — keep the larger radii of the
   card/button anchors so they don't visibly snap while focused */
.chapter-card:focus-visible { border-radius: 16px; }
.btn:focus-visible { border-radius: 12px; }

/* skip link — hidden until focused (keyboard users) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  transform: translateY(-160%);
  transition: transform .2s ease;
  background: #120c08;
  color: #f1e3c8;
  border: 1px solid rgba(200,154,62,.6);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- touch polish ---------- */
a, button, [data-navdot], [data-king], [data-term], [data-district], .district-chip {
  -webkit-tap-highlight-color: rgba(200,154,62,.22);
}
/* manipulation suppresses double-tap-zoom; the kings rail is excluded so a
   horizontal swipe still scrolls it. */
[data-term], [data-district], .district-chip {
  touch-action: manipulation;
}
[data-term]:active, [data-district]:active, .district-chip:active,
[data-navdot]:active { opacity: .65; }

@media (max-width: 600px) {
  /* the low-opacity grain isn't worth its per-scroll-frame cost on phones */
  .grain, [data-grain] { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* make sure revealed content is simply visible, never stuck */
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}