/* ════════════════════════════════════════════════════════════════
   YOUSUF ALI KHAN · Biography · shared chrome styling
   Tokens, reset, the injected furniture (progress, cursor, language
   flags, year HUD, back button), buttons, wiki links and the Indic
   font switch. Each alternate world adds its own visual stylesheet
   on top of this one.
   ════════════════════════════════════════════════════════════════ */

:root {
  --leaf-deep: #14291c; --leaf: #24402a; --moss: #6b8f5f;
  --sand: #f4eedd; --sand-2: #f0e8d2; --ink: #2c2014; --clove: #1c1208;
  --turmeric: #e2a72e; --saffron: #f0b13e; --chili: #c2451e; --maroon: #6e2012;
  --clay: #b06a3b; --cream-y: #f1e6c8; --ink-warm: #3a2a14;
  --ease-out: cubic-bezier(.22,.9,.28,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body { overscroll-behavior-y: none; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; font-family: "Outfit", system-ui, sans-serif; font-weight: 300; line-height: 1.62; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }
.dev { font-family: "Tiro Devanagari Hindi", serif; }
::selection { background: var(--turmeric); color: var(--ink); }

/* ── grain · progress · cursor ── */
.grain {
  position: fixed; inset: -50%; z-index: 120; 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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-2%); }
}
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 140; background: linear-gradient(90deg, var(--chili), var(--turmeric), var(--moss)); }
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; border-radius: 50%; display: none; }
.cursor { width: 34px; height: 34px; border: 1px solid var(--chili); transition: width .25s, height .25s, opacity .25s; opacity: .6; }
.cursor-dot { width: 5px; height: 5px; background: var(--chili); }
.cursor.is-active { width: 60px; height: 60px; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor, .cursor-dot { display: block; } }

/* ── back to the story ── */
.back-btn {
  position: fixed; top: clamp(1rem, 3vw, 1.6rem); left: clamp(1rem, 3vw, 1.6rem); z-index: 130;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  background: rgba(20,16,12,.55); border: 1px solid rgba(226,167,46,.45);
  color: var(--sand); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-out), background .3s, box-shadow .3s; will-change: transform;
}
.back-btn .arr { font-size: 1.05rem; line-height: 1; transition: transform .3s var(--ease-out); }
.back-btn:hover { background: var(--chili); box-shadow: 0 12px 36px rgba(194,69,30,.35); }
.back-btn:hover .arr { transform: translateX(-4px); }

/* ── language flags ── */
.lang-bar {
  position: fixed; top: clamp(.85rem, 3vw, 1.5rem); left: 50%; transform: translateX(-50%);
  z-index: 130; display: flex; gap: .25rem;
  background: rgba(20,16,12,.5); border: 1px solid rgba(226,167,46,.35);
  border-radius: 999px; padding: .28rem; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.6);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.lang-flag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
  font-size: .74rem; letter-spacing: .02em; color: var(--sand);
  opacity: .56; transition: opacity .3s, background .3s, transform .3s var(--ease-out);
}
.lang-flag:hover { opacity: 1; transform: translateY(-1px); }
.lang-flag.is-on { opacity: 1; background: rgba(226,167,46,.25); }
.lang-flag .flag { width: 26px; height: 18px; border-radius: 4px; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); display: block; }
.lang-flag .flag svg { width: 100%; height: 100%; display: block; }
.lang-name { font-weight: 500; }
@media (max-width: 680px) {
  .lang-name { display: none; }
  .lang-flag { padding: .3rem; }
  .lang-bar { gap: .15rem; left: auto; right: clamp(.7rem, 3vw, 1.2rem); transform: none; }
  body.chrome-hidden .lang-bar { transform: translateY(-220%); opacity: 0; pointer-events: none; }
}

/* ── live year HUD ── */
.year-hud { position: fixed; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 2rem); z-index: 110; text-align: right; pointer-events: none; }
.year-hud .yh-label { font-size: .58rem; letter-spacing: .42em; text-transform: uppercase; color: var(--turmeric); opacity: .75; display: block; margin-bottom: .1rem; }
.year-hud .yh-val { font-family: "Fraunces", serif; font-weight: 350; font-size: clamp(1.8rem, 5.5vw, 3.4rem); line-height: .95; color: var(--saffron); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 640px) {
  .year-hud {
    top: auto; bottom: .85rem; right: .85rem;
    padding: .26rem .62rem .34rem; border-radius: 12px;
    background: rgba(18,14,9,.5); backdrop-filter: blur(9px);
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 18px rgba(0,0,0,.3);
  }
  .year-hud .yh-label { color: rgba(244,228,191,.8) !important; }
  #yearVal { color: #f6e7c4; font-size: 1.5rem; }
}

/* ── shared buttons ── */
.btn {
  display: inline-block; padding: .95rem 2.1rem; border-radius: 999px;
  font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .35s var(--ease-out), background .35s, color .35s, box-shadow .35s; will-change: transform;
}
.btn-spice { background: var(--chili); color: var(--sand); }
.btn-spice:hover { background: var(--maroon); box-shadow: 0 10px 40px rgba(194,69,30,.4); }
.btn-ghost { border: 1px solid currentColor; opacity: .9; }
.btn-ghost:hover { opacity: 1; }

/* ── wiki links ── */
a.wiki {
  color: inherit;
  background-image: linear-gradient(var(--chili), var(--chili));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: .04em; transition: color .25s, background-size .25s;
}
a.wiki:hover { color: var(--chili); background-size: 100% 2px; }

/* ── Indic typography when a language is chosen ── */
body[data-lang="hi"] { font-family: "Noto Serif Devanagari", "Tiro Devanagari Hindi", serif; }
body[data-lang="hi"] .serifable { font-family: "Noto Serif Devanagari", "Tiro Devanagari Hindi", serif; }
body[data-lang="bn"] { font-family: "Noto Serif Bengali", serif; }
body[data-lang="bn"] .serifable { font-family: "Noto Serif Bengali", serif; }

/* ── touch devices: drop the grain layer and chrome blur for smoother scrolling ── */
@media (pointer: coarse) {
  .grain { display: none; }
  .lang-bar, .back-btn { backdrop-filter: none; }
  .lang-bar { background: rgba(20,16,12,.85); }
}