/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: #0a0008;
  font-family: 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
  color: #fff;
  cursor: none;
  -webkit-text-size-adjust: 100%;
}

/* ── Top gradient bar ─────────────────────────────────────────────────────── */
#top-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 100;
  background: linear-gradient(90deg, #b91c1c, #ff9933, #ffd700, #ff9933, #b91c1c);
}

/* ── Bottom status bar ────────────────────────────────────────────────────── */
#bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 44px; z-index: 100;
  background: rgba(0,0,0,0.82);
  border-top: 1px solid rgba(185,28,28,0.3);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  font-size: 17px;
}
#bottom-name  { color: rgba(255,255,255,0.45); }
#bottom-url   { color: rgba(255,153,51,0.55); }
#bottom-clock2{ color: rgba(255,255,255,0.35); font-variant-numeric: tabular-nums; }

/* ── Ticker bar ───────────────────────────────────────────────────────────── */
#ticker-bar {
  position: fixed; bottom: 44px; left: 0; right: 0; height: 46px; z-index: 100;
  background: rgba(185,28,28,0.88);
  border-top: 1px solid rgba(255,153,51,0.3);
  border-bottom: 1px solid rgba(255,153,51,0.3);
  display: flex; align-items: center; overflow: hidden;
}
#ticker-label {
  flex-shrink: 0; padding: 0 18px; height: 100%;
  display: flex; align-items: center;
  background: rgba(255,153,51,0.9);
  font-size: 16px; font-weight: 900; color: #000; letter-spacing: .12em;
}
#ticker-track { overflow: hidden; flex: 1; }
#ticker-inner {
  display: flex; gap: 80px; white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  padding-left: 40px;
}
#ticker-inner span { font-size: 19px; color: rgba(255,255,255,.88); font-weight: 500; }
#ticker-inner .sep { color: rgba(255,153,51,.45); }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Slide dots ───────────────────────────────────────────────────────────── */
#slide-dots {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 9px; z-index: 100;
}
.dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.2); transition: all .4s ease;
}
.dot.active { width: 28px; background: #ff9933; }

/* ── Main stage ───────────────────────────────────────────────────────────── */
#main-stage {
  position: fixed; top: 5px; left: 0; right: 0; bottom: 90px;
}

/* ── Slides ───────────────────────────────────────────────────────────────── */
.slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .7s ease;
}
.slide.active { opacity: 1; pointer-events: auto; }

/* caption overlay */
.slide-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 36px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  font-size: 28px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

/* ── IMAGE slide ──────────────────────────────────────────────────────────── */
#slide-image img {
  width: 100%; height: 100%; object-fit: contain;
  background: #000;
  animation: kenburns 14s ease infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1)    translateX(0)   translateY(0); }
  100% { transform: scale(1.08) translateX(-1%) translateY(-1%); }
}

/* ── VIDEO slide ──────────────────────────────────────────────────────────── */
#slide-video video {
  width: 100%; height: 100%; object-fit: contain; background: #000;
}

/* ── IMAGE+AUDIO ─────────────────────────────────────────────────────────── */
#slide-image-audio img {
  width: 100%; height: 100%; object-fit: contain; background: #000;
  animation: kenburns 16s ease infinite alternate;
}

/* ── AUDIO slide ──────────────────────────────────────────────────────────── */
#slide-audio {
  background: radial-gradient(ellipse at center, #1a000f 0%, #0a0008 100%);
  display: flex; align-items: center; justify-content: center;
}
#audio-vis {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.om-symbol {
  font-size: 140px; line-height: 1;
  filter: drop-shadow(0 0 50px rgba(255,153,51,.7));
  animation: pulse-om 3s ease-in-out infinite;
}
@keyframes pulse-om {
  0%,100% { transform: scale(1);    opacity: .9; }
  50%     { transform: scale(1.06); opacity: 1; }
}
.audio-title { font-size: 42px; font-weight: 700; color: #ff9933; text-align: center; }
#audio-bars {
  display: flex; gap: 6px; align-items: flex-end; height: 60px;
}
#audio-bars span {
  width: 10px; border-radius: 5px;
  background: linear-gradient(to top, #b91c1c, #ff9933);
  animation: bar-anim 1s ease-in-out infinite;
}
#audio-bars span:nth-child(1)  { animation-delay: 0s;    animation-duration: .9s;  }
#audio-bars span:nth-child(2)  { animation-delay: .1s;   animation-duration: .7s;  }
#audio-bars span:nth-child(3)  { animation-delay: .2s;   animation-duration: 1.1s; }
#audio-bars span:nth-child(4)  { animation-delay: .05s;  animation-duration: .8s;  }
#audio-bars span:nth-child(5)  { animation-delay: .3s;   animation-duration: .95s; }
#audio-bars span:nth-child(6)  { animation-delay: .15s;  animation-duration: .75s; }
#audio-bars span:nth-child(7)  { animation-delay: .25s;  animation-duration: 1.0s; }
#audio-bars span:nth-child(8)  { animation-delay: .08s;  animation-duration: .85s; }
#audio-bars span:nth-child(9)  { animation-delay: .35s;  animation-duration: .9s;  }
#audio-bars span:nth-child(10) { animation-delay: .12s;  animation-duration: .7s;  }
@keyframes bar-anim {
  0%,100% { height: 10px; } 50% { height: 55px; }
}

/* ── YOUTUBE / WEBSITE iframes ────────────────────────────────────────────── */
#slide-youtube iframe,
#slide-website iframe {
  width: 100%; height: 100%; border: none; background: #000;
}

/* ── TEMPLE FALLBACK ──────────────────────────────────────────────────────── */
#slide-temple {
  background: radial-gradient(ellipse at 50% 30%, #1a000f, #0a0008 70%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#temple-content {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 40px 80px 130px;
  text-align: center;
}
#temple-om {
  font-size: 110px; line-height: 1;
  filter: drop-shadow(0 0 50px rgba(255,153,51,.7));
  animation: pulse-om 4s ease-in-out infinite;
}
#temple-name {
  font-size: 72px; font-weight: 900; color: #fff;
  text-shadow: 0 0 60px rgba(185,28,28,.8);
  line-height: 1.1;
}
#temple-jai {
  font-size: 46px; font-weight: 700;
  background: linear-gradient(90deg, #ff9933, #ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height: 60px;
}
#temple-clock {
  font-size: 100px; font-weight: 900; letter-spacing: .04em; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(255,153,51,.35);
  line-height: 1;
}
#temple-date { font-size: 30px; color: rgba(255,255,255,.45); font-weight: 500; }

/* ── Aarti grid ───────────────────────────────────────────────────────────── */
#aarti-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 12px;
  width: 100%; margin-top: 12px;
}
.aarti-card {
  border-radius: 16px; padding: 14px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 15px; color: rgba(255,255,255,.5);
  transition: all .3s;
}
.aarti-card.now {
  background: rgba(185,28,28,.3);
  border-color: rgba(255,153,51,.5);
  color: #ff9933;
}
.aarti-card.next { border-color: rgba(255,215,0,.25); color: #ffd700; }
.aarti-icon { font-size: 26px; margin-bottom: 6px; }
.aarti-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.aarti-time { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.aarti-badge {
  margin-top: 5px; font-size: 11px; font-weight: 900;
  letter-spacing: .1em; display: inline-block;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(255,153,51,.2); color: #ff9933;
}

/* ── Fade transition ─────────────────────────────────────────────────────── */
#main-stage.fading { opacity: 0; transition: opacity .4s ease; }

/* ── Ambient particles ───────────────────────────────────────────────────── */
.particle {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 1;
  animation: float-up linear infinite;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: .7; }
  90%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-100vh); }
}