/* Digital Kranti – public site + Smart Message Player */

:root {
  --bg-a: #070816; --bg-b: #1b0b3a; --bg-c: #0b1e4a; --bg-d: #2a0a4f;
  --text: #f4f6ff;
  --accent: #7c5cff;
  --accent-2: #22d3ee;
  --glow: rgba(124, 92, 255, .55);
  --panel: rgba(10, 12, 30, .62);
  --line: rgba(255, 255, 255, .14);
  --font: 'Poppins', 'Noto Sans Devanagari', 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --enter: 900ms;
  --leave: 450ms;
  --fs: 36px;
  --pad-t: 76px;
  --pad-b: 140px;
}

html[data-theme="aurora"] { --bg-a:#03130f; --bg-b:#053b33; --bg-c:#0a2a4a; --bg-d:#0b4a3a; --text:#eafff8; --accent:#34f5c5; --accent-2:#7cf0ff; --glow:rgba(52,245,197,.5); }
html[data-theme="sunset"] { --bg-a:#14040f; --bg-b:#4a0a35; --bg-c:#5a1a12; --bg-d:#2b0830; --text:#fff3f0; --accent:#ff6b9a; --accent-2:#ffb86b; --glow:rgba(255,107,154,.5); }
html[data-theme="ocean"]  { --bg-a:#020a1a; --bg-b:#04265a; --bg-c:#053b6b; --bg-d:#031a3f; --text:#ecf7ff; --accent:#38bdf8; --accent-2:#6ee7f9; --glow:rgba(56,189,248,.5); }
html[data-theme="gold"]   { --bg-a:#0a0805; --bg-b:#261a05; --bg-c:#1a1208; --bg-d:#33240a; --text:#fff8e6; --accent:#f5c451; --accent-2:#ff9f43; --glow:rgba(245,196,81,.45); }
html[data-theme="mono"]   { --bg-a:#000; --bg-b:#0b0b0b; --bg-c:#141414; --bg-d:#050505; --text:#fff; --accent:#fff; --accent-2:#a3a3a3; --glow:rgba(255,255,255,.35); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--bg-a);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.sprite { position: absolute; width: 0; height: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.ic { width: 22px; height: 22px; display: block; }

/* ---------- Animated background ---------- */
.bg {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(125deg, var(--bg-a), var(--bg-b), var(--bg-c), var(--bg-d), var(--bg-a));
  background-size: 320% 320%;
  animation: bgshift 22s ease-in-out infinite;
}
.bg::before, .bg::after {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(60px); opacity: .45; will-change: transform;
}
.bg::before { background: radial-gradient(circle, var(--accent) 0%, transparent 65%); top: -25vmax; left: -20vmax; animation: orb1 26s ease-in-out infinite; }
.bg::after  { background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%); bottom: -30vmax; right: -25vmax; animation: orb2 32s ease-in-out infinite; opacity: .32; }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

@keyframes bgshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes orb1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes orb2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16vmax, -12vmax) scale(1.2); } }

/* ---------- Brand ---------- */
.brand {
  position: fixed; z-index: 5; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px; transition: opacity .5s;
}
.brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.brand-name { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.brand-tag { margin: 0; font-size: .72rem; opacity: .75; }

/* ---------- Stage ---------- */
.stage { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; }
.frame { position: relative; width: 100%; height: 100%; }
html[data-frame="16:9"] .frame {
  width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16));
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}
html[data-frame="9:16"] .frame {
  width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}
html[data-frame]:not([data-frame="auto"]) body:not(.cinematic) .frame { outline: 1px dashed rgba(255, 255, 255, .25); }

.msg-box {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--pad-t) 7% var(--pad-b);
  transition: opacity var(--leave) ease, transform var(--leave) ease, filter var(--leave) ease;
}
.msg-box.leaving { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(6px); }
.msg-cat {
  margin: 0 0 1.1em; font-size: clamp(.7rem, 1.3vw, .95rem); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent-2); opacity: .9; min-height: 1.2em;
}
.msg-cat:empty { display: none; }
.msg {
  margin: 0; width: 100%; max-width: 100%;
  font-family: var(--font), 'Noto Sans Devanagari', 'Hind', 'Mukta', system-ui, sans-serif;
  font-size: var(--fs); line-height: 1.32; font-weight: 700; letter-spacing: -.005em;
  color: var(--text);
  text-shadow: 0 0 .35em var(--glow), 0 0 1.2em var(--glow);
  text-wrap: balance; overflow-wrap: break-word;
}

/* typewriter */
.t-rest { visibility: hidden; }
.t-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: text-bottom; }
.t-caret::after {
  content: ""; position: absolute; left: 2px; top: .08em; width: .07em; height: 1em; min-width: 3px;
  background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* word by word */
.w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity calc(var(--enter) * .7) ease, transform calc(var(--enter) * .7) ease, filter calc(var(--enter) * .7) ease; }
.w.on { opacity: 1; transform: none; filter: none; }

/* whole-message entrances */
.msg.a-fade  { animation: a-fade var(--enter) ease backwards; }
.msg.a-slide { animation: a-slide var(--enter) cubic-bezier(.2, .8, .2, 1) backwards; }
.msg.a-zoom  { animation: a-zoom var(--enter) cubic-bezier(.2, .8, .2, 1) backwards; }
.msg.a-blur  { animation: a-blur calc(var(--enter) * 1.3) ease backwards; }
.msg.a-glow  { animation: a-glow calc(var(--enter) * 1.4) ease backwards, pulse 3.2s ease-in-out calc(var(--enter) * 1.4) infinite; }
@keyframes a-fade  { from { opacity: 0; } }
@keyframes a-slide { from { opacity: 0; transform: translateY(48px); } }
@keyframes a-zoom  { from { opacity: 0; transform: scale(.82); } }
@keyframes a-blur  { from { opacity: 0; filter: blur(22px); } }
@keyframes a-glow  { from { opacity: 0; text-shadow: 0 0 0 transparent; } }
@keyframes pulse   { 50% { text-shadow: 0 0 .5em var(--glow), 0 0 1.8em var(--glow), 0 0 3em var(--glow); } }

/* ---------- Dock ---------- */
.dock {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(96vw, 760px); padding: 10px 12px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  transition: opacity .5s ease, transform .5s ease;
}
.segs { display: flex; gap: 4px; margin-bottom: 10px; }
.seg {
  flex: 1 1 0; min-width: 3px; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; position: relative;
}
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.seg i { position: absolute; left: 0; top: 5px; height: 4px; border-radius: 4px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.seg.past i { width: 100%; }
.seg:focus-visible { outline-offset: 0; }

.dock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grp { display: flex; align-items: center; gap: 6px; }
.g-left, .g-right { flex: 1 1 0; }
.g-right { justify-content: flex-end; }
.count { font-size: .8rem; opacity: .75; padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.btn {
  min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .09); color: #fff; font: inherit; font-size: .85rem; font-weight: 600;
  transition: background .2s, transform .15s;
}
.btn:hover { background: rgba(255, 255, 255, .18); }
.btn:active { transform: scale(.94); }
.btn.main { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #05060f; box-shadow: 0 0 24px var(--glow); }
.btn.main .ic { width: 26px; height: 26px; }
.btn.toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn.accent { background: color-mix(in srgb, var(--accent-2) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.btn.pill { border-radius: 999px; height: 40px; padding: 0 16px; }

/* auto-hide UI after inactivity (clean screen) */
body.idle .dock { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
body.idle .brand { opacity: 0; }
body.idle { cursor: none; }

/* ---------- Drawer ---------- */
.drawer {
  position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(380px, 100vw);
  display: flex; flex-direction: column;
  background: rgba(8, 10, 26, .94); border-left: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform: translateX(102%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 1.05rem; }
.drawer-body { padding: 14px 18px 28px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.field { display: grid; gap: 7px; font-size: .85rem; }
.field > span { display: flex; justify-content: space-between; font-weight: 600; opacity: .92; }
.field output { font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
select {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .07); color: #fff; font: inherit;
}
select option { color: #111; }
input[type="range"] { width: 100%; height: 28px; accent-color: var(--accent-2); }
.hint { margin: -8px 0 0; font-size: .75rem; opacity: .6; }
.switches { display: grid; gap: 8px; }
.switch { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: .88rem; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--accent-2); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .82rem; }
.shortcuts dt { font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.shortcuts dd { margin: 0; opacity: .85; }

/* ---------- Overlay, countdown, toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .72); }
.overlay[hidden] { display: none; }
.overlay-btn {
  padding: 18px 30px; font: inherit; font-size: 1.1rem; font-weight: 700; color: #05060f; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 40px var(--glow);
}
.countdown { font-size: min(34vw, 34vh); font-weight: 800; color: var(--text); text-shadow: 0 0 40px var(--glow); }
.countdown:not(:empty) { animation: pop .9s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; } to { opacity: .0; transform: scale(.8); } }
.overlay.counting .overlay-btn { display: none; }

.exit-btn {
  position: fixed; z-index: 60; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .55); color: #fff; display: none; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .3s;
}
body.cinematic .exit-btn { display: grid; }
body.cinematic .exit-btn.show { opacity: 1; }

.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); transform: translate(-50%, 10px);
  padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .8); border: 1px solid var(--line); font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Cinematic presentation mode ---------- */
body.cinematic { cursor: none; }
body.cinematic .brand, body.cinematic .dock, body.cinematic .drawer, body.cinematic .toast, body.cinematic .msg-cat { display: none !important; }
body.cinematic .msg-box { padding: 8% 9%; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  :root { --pad-t: 64px; --pad-b: 150px; }
  .dock { padding: 10px; }
  .dock-row { flex-wrap: wrap; justify-content: center; }
  .g-center { order: 0; flex: 1 0 100%; justify-content: center; gap: 18px; }
  .g-left, .g-right { order: 1; flex: 0 0 auto; }
  .dock-row { row-gap: 10px; }
  .g-left { margin-right: auto; }
  .g-right { margin-left: auto; }
  .count { display: none; }
  .btn { min-width: 42px; }
  .btn-label { display: none; }
  .toast { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 170px); }
  .drawer { top: auto; left: 0; width: 100%; max-height: 82dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; transform: translateY(102%); }
}
@media (max-height: 480px) and (orientation: landscape) {
  :root { --pad-t: 40px; --pad-b: 84px; }
  .dock { width: min(92vw, 620px); padding: 6px 10px 8px; }
  .segs { margin-bottom: 4px; }
  .brand-tag { display: none; }
  .btn { height: 38px; } .btn.main { width: 46px; height: 46px; }
}

/* ---------- Reduced motion ---------- */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition-duration: .01ms !important; }
html.reduce-motion .bg { background-size: 100% 100%; }
html.reduce-motion .fx { display: none; }
html.reduce-motion .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .fx { display: none; }
  .w { opacity: 1; transform: none; filter: none; }
}
@media (forced-colors: active) {
  .btn, select, .dock { border: 1px solid CanvasText; }
}