/* Direction: cinematic museum at night — deep indigo, antique gold, saffron, emerald, sandstone */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #07061a;
  --surface: #120f2e;
  --surface-2: #1b1745;
  --border: #5c4a22;
  --border-strong: #51515f;
  --ink: #f3ead8;
  --muted: #b9afcf;
  --accent: #e8892b;
  --accent-hover: #eb9b4b;
  --accent-ink: #07061a;
  --accent-text: #f0c46a;
  --accent-strong: #e8892b;
  --accent-soft: #39231e;
  --accent-border: #6c4122;
  --success: #2fb386;
  --success-ink: #ffffff;
  --success-soft: #102c32;
  --success-strong: #2fb386;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2d1716;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2e0b1a;
  --danger-strong: #d16969;
  --chart-1: #e8892b;
  --chart-2: #b2cb4e;
  --chart-3: #1ea18d;
  --chart-4: #6bc4fe;
  --chart-5: #9770d6;
  --chart-6: #fb9cba;

  --x-gold: #d9aa4f;
  --x-saffron: #f08a24;
  --x-emerald: #2fb386;
  --x-sandstone: #c9a77c;
  --x-indigo: #0d0b26;
  --x-mood: #d9aa4f;
  --font-display: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, serif;
  --font-body: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: 0.01em;
  --radius-card: 16px;
  --radius-btn: 999px;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dcdcdf;
  --border-strong: #b5b4ba;
  --ink: #07061a;
  --muted: #6a6a76;
  --accent: #e8892b;
  --accent-hover: #c57425;
  --accent-ink: #07061a;
  --accent-text: #995a1d;
  --accent-strong: #995a1d;
  --accent-soft: #fceee1;
  --accent-border: #f5caa0;
  --success: #2fb386;
  --success-ink: #07061a;
  --success-soft: #e6f6f0;
  --success-strong: #1f7758;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #da7c16;
  --chart-2: #83981f;
  --chart-3: #1f9281;
  --chart-4: #219bdf;
  --chart-5: #8a63c9;
  --chart-6: #e16b95;
}

/* Kaal Yatra — cinematic museum styling. Tokens only; colours live in theme.css. */

html { scroll-behavior: smooth; background: var(--canvas); }
html.reduced-motion { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.flying { overflow: hidden; }

/* Language: both spans are in the DOM, one is hidden */
html[data-lang="hi"] [data-l="en"] { display: none; }
html:not([data-lang="hi"]) [data-l="hi"] { display: none; }
html[data-lang="hi"] [data-lang-opt="hi"], html:not([data-lang="hi"]) [data-lang-opt="en"] { color: var(--accent-text); font-weight: 600; }

body { overflow-x: hidden; }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor [role="menuitem"] { cursor: none; }

/* The one canvas behind everything */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: pan-y; }
.overlay { position: relative; z-index: 10; pointer-events: none; }
.pe, .glass { pointer-events: auto; }

/* Glass cards with a thin gold border */
.glass {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--x-gold) 55%, transparent);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px -20px color-mix(in srgb, black 80%, transparent), inset 0 0 40px -22px var(--x-mood);
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center;
  background: var(--canvas); color: var(--x-gold); --p: 0;
  transition: opacity .9s ease, transform .9s ease, visibility .9s;
}
.loader.done { opacity: 0; visibility: hidden; transform: scale(1.06); pointer-events: none; }
.loader-inner { color: var(--ink); display: flex; flex-direction: column; align-items: center; padding: 1rem; }
.loader .mandala { width: min(62vw, 260px); height: auto; color: var(--x-gold); filter: drop-shadow(0 0 10px var(--x-saffron)); }
.mandala * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--p) * 1.6 - var(--d, 0), 1)); }
.brand-mark .mandala * { stroke-dashoffset: 0; }
.brand-mark { width: 1.9rem; height: 1.9rem; display: inline-block; color: var(--x-gold); }
.brand-mark .mandala { width: 100%; height: 100%; animation: spin 40s linear infinite; }

/* ---------- Veil, cursor ---------- */
.veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle at center, var(--x-saffron), var(--x-indigo) 70%); }
.veil.on { opacity: 1; }
.cursor { position: fixed; left: 0; top: 0; z-index: 110; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px;
  border: 1px solid var(--x-gold); pointer-events: none; opacity: 0; transition: opacity .3s, width .25s, height .25s, margin .25s, background .25s, border-color .25s;
  box-shadow: 0 0 18px color-mix(in srgb, var(--x-gold) 60%, transparent); }
.cursor i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 999px; background: var(--x-saffron); box-shadow: 0 0 10px var(--x-saffron); }
body.has-cursor .cursor { opacity: 1; }
.cursor.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: color-mix(in srgb, var(--x-gold) 14%, transparent); }
.cursor.is-hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--x-saffron);
  background: color-mix(in srgb, var(--x-saffron) 22%, transparent); box-shadow: 0 0 30px var(--x-saffron); animation: pulse 1s ease-in-out infinite; }
.cursor.is-down { transform: scale(.8); }

/* ---------- Top bar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; pointer-events: none; }
@media (min-width: 768px) { .topbar { padding: 1rem 2rem; } }
.brand { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .8rem .35rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--canvas) 55%, transparent); border: 1px solid color-mix(in srgb, var(--x-gold) 30%, transparent); backdrop-filter: blur(10px); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .8rem; border-radius: 999px; font-size: .8rem;
  color: var(--ink); background: color-mix(in srgb, var(--canvas) 55%, transparent); border: 1px solid color-mix(in srgb, var(--x-gold) 40%, transparent);
  backdrop-filter: blur(10px); transition: border-color .2s, background .2s, transform .2s; }
.pill[hidden] { display: none; }
.pill .icon { width: 1rem; height: 1rem; }
.pill:hover { border-color: var(--x-gold); background: color-mix(in srgb, var(--x-gold) 14%, transparent); }
.pill:active { transform: scale(.95); }
.pill:focus-visible, .tl-btn:focus-visible, .compass-link:focus-visible, .hot-chip:focus-visible, .brand:focus-visible, .scroll-hint:focus-visible, .hot-close:focus-visible {
  outline: 2px solid var(--x-saffron); outline-offset: 3px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 2px; height: 3px; background: var(--x-gold); border-radius: 1px; }
.music-btn[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite alternate; }
.music-btn[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .25s; }
.music-btn[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .5s; }
.compass-btn .needle-mini { transform-origin: center; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.compass-open .compass-btn .needle-mini { transform: rotate(135deg); }
.compass-panel { position: absolute; right: 0; top: calc(100% + .6rem); width: 17rem; padding: 1rem; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
  transform-origin: top right; transition: opacity .25s, transform .25s, visibility .25s; }
.compass-open .compass-panel { opacity: 1; visibility: visible; transform: none; }
.compass-rose .needle { transform-origin: center; transition: transform 1s cubic-bezier(.3,1.5,.5,1); }
.compass-open .compass-rose .needle { transform: rotate(45deg); }
.compass-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 10px; font-size: .9rem; transition: background .2s; }
a.compass-link:hover { background: color-mix(in srgb, var(--x-gold) 16%, transparent); }
.compass-link b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--x-gold) 60%, transparent); color: var(--accent-text); }
.compass-link em { margin-left: auto; font-style: normal; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.compass-link.is-soon { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center; padding: 0 1rem 4.5rem; }
.hero-copy { display: flex; flex-direction: column; align-items: center; transition: opacity .8s ease, transform 1.4s ease; }
html.flying .hero-copy { opacity: 0; transform: scale(1.25); }
.eyebrow { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-text); }
.hero-title { margin-top: .6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.2rem, 14vw, 8.5rem); line-height: .95;
  letter-spacing: .08em; color: var(--ink); text-shadow: 0 0 40px color-mix(in srgb, var(--x-saffron) 55%, transparent); }
.letter { display: inline-block; }
.letter-gap { display: inline-block; width: .4em; }
body.ready .letter { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: var(--d); }
.hero-hi { margin-top: .3rem; font-size: clamp(1.1rem, 3vw, 1.7rem); color: var(--x-gold); letter-spacing: .2em; }
.hero-tag { margin-top: 1rem; max-width: 34rem; font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--ink); text-wrap: balance; }
.no3d { margin-top: 1rem; max-width: 28rem; font-size: .85rem; color: var(--muted); }
.scroll-hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); animation: bob 2.4s ease-in-out infinite; }
html.flying .scroll-hint { opacity: 0; }

/* ---------- Journey ---------- */
.era-section { height: 150vh; }
.era-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: flex-end; padding: 5rem .75rem .9rem; }
@media (min-width: 768px) { .era-pin { align-items: center; padding: 5rem 4.5rem 2rem 3rem; } }
.era-card { width: 100%; max-width: 26rem; max-height: min(78vh, 46rem); overflow-y: auto; padding: 1.25rem 1.35rem;
  border-color: color-mix(in srgb, var(--x-gold) 50%, var(--x-mood)); transition: opacity .4s, transform .4s; }
@media (max-width: 767px) { .era-card { max-height: 52vh; padding: 1rem 1.1rem; } body.hot-open .era-card { opacity: 0; pointer-events: none; transform: translateY(20px); } }
.facts { counter-reset: f; list-style: none; padding: 0; }
.facts li { counter-increment: f; position: relative; padding-left: 1.7rem; }
.facts li::before { content: counter(f); position: absolute; left: 0; top: .1rem; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; font-size: .65rem;
  color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--x-gold) 60%, transparent); transform: rotate(45deg); }
.facts li::before { text-indent: 0; }
.hot-chip { display: inline-flex; align-items: center; gap: .45rem; transition: border-color .2s, background .2s, transform .2s; }
.hot-chip:hover { border-color: var(--x-saffron); background: color-mix(in srgb, var(--x-saffron) 16%, transparent); }
.hot-chip:active { transform: scale(.96); }
.hot-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--x-saffron); box-shadow: 0 0 8px var(--x-saffron); animation: pulse 1.6s ease-in-out infinite; }

/* Hotspot detail card */
.hotcard { position: fixed; z-index: 35; padding: 1.25rem 1.35rem 1.35rem; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s, transform .35s, visibility .35s;
  left: .75rem; right: .75rem; bottom: .9rem; }
@media (min-width: 768px) { .hotcard { left: auto; right: 4.6rem; bottom: auto; top: 50%; width: 22rem; transform: translateY(-46%); } }
.hotcard.open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 768px) { .hotcard.open { transform: translateY(-50%); } }
.hot-close { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--x-gold) 35%, transparent); transition: color .2s, border-color .2s; }
.hot-close:hover { color: var(--ink); border-color: var(--x-gold); }

/* Timeline */
#timeline { position: fixed; right: .55rem; top: 50%; transform: translateY(-50%); z-index: 30; transition: opacity .5s, transform .5s; }
body:not(.in-journey) #timeline { opacity: 0; pointer-events: none; transform: translate(16px, -50%); }
#timeline ol { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; list-style: none; margin: 0; padding: 0; }
#timeline .track { position: absolute; top: 14px; bottom: 14px; right: 11px; width: 1px; background: color-mix(in srgb, var(--x-gold) 30%, transparent); pointer-events: none; }
#timeline .track-fill { display: block; width: 100%; height: calc(var(--prog, 0) * 100%); background: var(--x-saffron); box-shadow: 0 0 8px var(--x-saffron); transition: height .4s; }
.tl-btn { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; }
.tl-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--canvas); border: 1px solid var(--x-gold); transition: transform .25s, background .25s, box-shadow .25s; }
.tl-btn:hover .tl-dot, .tl-btn:focus-visible .tl-dot { transform: scale(1.5); }
.tl-btn.active .tl-dot { background: var(--x-saffron); border-color: var(--x-saffron); transform: scale(1.6); box-shadow: 0 0 12px var(--x-saffron); }
.tl-btn.passed .tl-dot { background: var(--x-gold); }
.tl-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .72rem; color: var(--ink); opacity: 0; padding: .15rem 0; border-radius: 6px;
  background: color-mix(in srgb, var(--canvas) 75%, transparent); transition: max-width .3s, opacity .3s, padding .3s; }
.tl-btn:hover .tl-label, .tl-btn:focus-visible .tl-label { max-width: 14rem; opacity: 1; padding: .15rem .55rem; }
@media (min-width: 1024px) { .tl-btn.active .tl-label { max-width: 14rem; opacity: 1; padding: .15rem .55rem; color: var(--accent-text); } }

/* ---------- Closing ---------- */
.closing { position: relative; background: var(--canvas); pointer-events: auto; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--x-gold) 40%, transparent); }
.jaali { position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 0, transparent 14px, var(--x-gold) 15px, transparent 16px),
    radial-gradient(circle at 0 50%, transparent 14px, var(--x-gold) 15px, transparent 16px);
  background-size: 40px 40px; mask-image: linear-gradient(to bottom, black, transparent 80%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%); }

/* ---------- Motion ---------- */
@keyframes rise { from { transform: translateY(46px) scale(.96); filter: blur(10px); } to { transform: none; filter: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.25); } }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }