/* ═══════════════════════════════════════════════════════════════════════════
   ANHAD — Majestic Sky Background System v3.0 (PERFORMANCE OPTIMIZED)
   Pure CSS + SVG. Zero images. 120fps. Pixel-sharp. Ultra-premium.
   Optimized for ultra-smooth scrolling with GPU acceleration.

   Sections:
     1. Text Contrast System (auto-mode variables)
     2. Sky Canvas + 4-time gradients
     3. Horizon Glow + Morning Ray Burst
     4. Sun (3 variants: morning, day, evening)
     5. Moon (3 phases: crescent, half, full)
     6. Stars + Shooting Stars
     7. Clouds (foreground + background, 4 color sets)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   §1  TEXT CONTRAST SYSTEM
   These CSS custom properties are consumed by app elements so text stays
   100% readable regardless of the sky background color.
   ─────────────────────────────────────────────────────────────────────────── */

/* MORNING — warm dark espresso/mahogany on a peach-orange sky */
[data-theme-mode="auto"][data-time-of-day="morning"] {
  --sky-txt-primary:   #1A0402;
  --sky-txt-secondary: #3A0F05;
  --sky-txt-label:     #5C1E0A;
  --sky-txt-accent:    #822508;
  --sky-txt-gold:      #A83800;
  --sky-text-shadow-dark: none;
  --sky-text-shadow-light: none;
  --sky-greeting-bg:   transparent;
  --sky-bg-glass:      rgba(255, 230, 200, 0.52);
  --sky-bg-glass-border: rgba(220, 110, 50, 0.22);
}

/* DAY — deep midnight navy on a bright azure sky */
[data-theme-mode="auto"][data-time-of-day="day"] {
  --sky-txt-primary:   #000814;
  --sky-txt-secondary: #02162E;
  --sky-txt-label:     #05284D;
  --sky-txt-accent:    #0A4078;
  --sky-txt-gold:      #0C5096;
  --sky-text-shadow-dark: none;
  --sky-text-shadow-light: none;
  --sky-greeting-bg:   transparent;
  --sky-bg-glass:      rgba(220, 244, 255, 0.52);
  --sky-bg-glass-border: rgba(80, 160, 230, 0.22);
}

/* EVENING — deep burgundy-wine on a crimson-gold sunset sky */
[data-theme-mode="auto"][data-time-of-day="evening"] {
  --sky-txt-primary:   #140205;
  --sky-txt-secondary: #38050C;
  --sky-txt-label:     #5C0A15;
  --sky-txt-accent:    #821415;
  --sky-txt-gold:      #A82205;
  --sky-text-shadow-dark: none;
  --sky-text-shadow-light: none;
  --sky-greeting-bg:   transparent;
  --sky-bg-glass:      rgba(255, 228, 198, 0.50);
  --sky-bg-glass-border: rgba(190, 80, 20, 0.22);
}

/* NIGHT — glowing warm ivory / antique gold on deep dark */
[data-theme-mode="auto"][data-time-of-day="night"] {
  --sky-txt-primary:   #FFFFFF;
  --sky-txt-secondary: #FFF2D1;
  --sky-txt-label:     #FFE399;
  --sky-txt-accent:    #FFD566;
  --sky-txt-gold:      #FFC429;
  --sky-text-shadow-dark: 0 1px 4px rgba(0, 0, 0, 0.8);
  --sky-text-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.8);
  --sky-greeting-bg:   transparent;
  --sky-bg-glass:      rgba(28, 28, 30, 0.62);
  --sky-bg-glass-border: rgba(170, 140, 60, 0.22);
}

/* ── Apply contrast to key page elements ── */
[data-theme-mode="auto"] .header__title,
[data-theme-mode="auto"] .header-title {
  color: #FFCC29 !important; /* Premium glowing gold */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}
[data-theme-mode="auto"] .header__title-gurmukhi,
[data-theme-mode="auto"] .gurmukhi-title {
  color: #FFFFFF !important; /* Crisp glowing white */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
[data-theme-mode="auto"] .english-title {
  color: var(--sky-txt-gold, #D4943A) !important;
  text-shadow: var(--sky-text-shadow-light, 0 1px 8px rgba(0,0,0,0.18)) !important;
}
[data-theme-mode="auto"] .header-subtitle {
  color: var(--sky-txt-secondary, #4A1508) !important;
  text-shadow: var(--sky-text-shadow-dark, 0 1px 4px rgba(0,0,0,0.12)) !important;
}
[data-theme-mode="auto"] #greetingSalutation,
[data-theme-mode="auto"] .greeting__salutation {
  color: var(--sky-txt-accent, #9C3610) !important;
  text-shadow: var(--sky-text-shadow-dark, 0 1px 6px rgba(0,0,0,0.16)) !important;
  font-weight: 700 !important;
}
[data-theme-mode="auto"] #greetingGurbani,
[data-theme-mode="auto"] .greeting__gurbani {
  color: var(--sky-txt-primary, #260804) !important;
  text-shadow: var(--sky-text-shadow-dark, 0 1px 8px rgba(0,0,0,0.12)) !important;
  font-weight: 600 !important;
}
[data-theme-mode="auto"] #greetingTranslation,
[data-theme-mode="auto"] .greeting__translation {
  color: var(--sky-txt-secondary, #4A1508) !important;
  text-shadow: var(--sky-text-shadow-dark, none) !important;
  font-weight: 600 !important;
}
[data-theme-mode="auto"] .progress-inline__label {
  color: var(--sky-txt-label, #6B2810) !important;
  text-shadow: var(--sky-text-shadow-dark, none) !important;
}
[data-theme-mode="auto"] .progress-inline__text {
  color: var(--sky-txt-secondary, #4A1508) !important;
  text-shadow: var(--sky-text-shadow-dark, none) !important;
}
[data-theme-mode="auto"] .greeting__text {
  background: var(--sky-greeting-bg, transparent);
  border-radius: 50%;
  padding: 15px 0 !important;
  margin-top: -10px;
}

/* ── Nitnem Tracker specific text visibility ── */
[data-theme-mode="auto"] .card-title,
[data-theme-mode="auto"] .card-subtitle {
  color: var(--sky-txt-primary, #1A0402) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}
[data-theme-mode="auto"] .app-header {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
[data-theme-mode="auto"] .header-blur-bg {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* ── Auto Mode: Hide greeting text, enlarge Guru portraits ── */
[data-theme-mode="auto"] .greeting__text {
  display: none !important;
}
[data-theme-mode="auto"] .greeting__portrait-slider {
  height: 200px !important;
}
[data-theme-mode="auto"] .greeting__guru-portrait {
  width: 180px !important;
  height: 180px !important;
  min-width: 180px !important;
  min-height: 180px !important;
}
[data-theme-mode="auto"] .greeting__slide {
  width: 180px !important;
  height: 180px !important;
}
[data-theme-mode="auto"] .greeting {
  margin-bottom: 4px !important;
  padding: 0 !important;
}
[data-theme-mode="auto"] .progress-inline {
  margin-top: 8px !important;
}

/* ── ULTRA SMOOTH SCROLLING OPTIMIZATIONS ── */
/* Disable heavy animations during scroll for 120fps performance */
body.is-scrolling #anhad-sun,
body.is-scrolling #anhad-moon,
body.is-scrolling .anhad-cloud,
body.is-scrolling .anhad-star {
  animation-play-state: paused !important;
  opacity: 0.8 !important;
}

/* Force GPU layers on all animated elements */
.anhad-star,
.anhad-cloud,
.anhad-shooting-star {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint;
}

/* Optimize main content scrolling */
[data-theme-mode="auto"] .main-content {
  will-change: scroll-position;
  contain: layout style paint;
  -webkit-overflow-scrolling: touch;
}

/* Reduce composite layers on background during scroll */
body.is-scrolling #anhad-sky-canvas {
  will-change: transform;
  opacity: 0.95;
}

/* Optimize background image transitions for instant switching */
#anhad-sky-canvas {
  transition: none !important;
}


/* ────────────────────────────────────────────────────────────────────────────
   §2  SKY CANVAS + 4-TIME-OF-DAY GRADIENTS
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-sky-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  display: none;
  transition: none;
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
}

[data-theme-mode="auto"] #anhad-sky-canvas {
  display: block;
}

/* ── MORNING (5–7am): Volcanic orange dawn rising into warm cream ── */
[data-theme-mode="auto"][data-time-of-day="morning"] #anhad-sky-canvas {
  background: url('assets/darbar-sahib-morning-bg.webp') no-repeat center center;
  background-size: cover;
}

/* ── DAYTIME (9am–4pm): Deep sapphire sky → bright azure → near-white ── */
[data-theme-mode="auto"][data-time-of-day="day"] #anhad-sky-canvas {
  background: url('assets/darbar-sahib-day-bg.webp') no-repeat center center;
  background-size: cover;
}

/* ── EVENING (4–8pm): Midnight violet → deep crimson → fiery gold ── */
[data-theme-mode="auto"][data-time-of-day="evening"] #anhad-sky-canvas {
  background: url('assets/darbar-sahib-evening-bg.webp') no-repeat center center;
  background-size: cover;
}

/* ── NIGHT (8pm–5am): Deep cosmic black-navy-indigo ── */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-sky-canvas {
  background: url('assets/HERO CARD IMAGES/new-night-bg.webp') no-repeat center center;
  background-size: cover;
}

/* Soft gradient overlay blending sky into page content */
#anhad-sky-canvas::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--bg-primary, rgba(255, 247, 238, 0.96)) 100%
  );
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────────────────────
   §3  HORIZON GLOW + MORNING RAY BURST
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-horizon-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 220%;
  height: 48%;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 2s ease;
  will-change: opacity, transform;
  contain: strict;
}

[data-theme-mode="auto"][data-time-of-day="morning"] #anhad-horizon-glow {
  display: block;
  opacity: 1;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 110, 20, 0.65) 0%,
    rgba(255, 150, 45, 0.38) 28%,
    rgba(255, 185, 70, 0.18) 52%,
    rgba(255, 200, 80, 0.06) 70%,
    transparent 82%
  );
}

[data-theme-mode="auto"][data-time-of-day="evening"] #anhad-horizon-glow {
  display: block;
  opacity: 1;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 70, 10, 0.80) 0%,
    rgba(255, 110, 20, 0.52) 22%,
    rgba(240, 150, 30, 0.28) 44%,
    rgba(200, 100, 5, 0.10) 65%,
    transparent 80%
  );
}

/* Morning sun-rays burst from horizon */
#anhad-morning-rays {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 250%;
  height: 65%;
  pointer-events: none;
  display: none;
  opacity: 0;
  will-change: opacity, transform;
  contain: strict;
}

[data-theme-mode="auto"][data-time-of-day="morning"] #anhad-morning-rays {
  display: block;
  opacity: 1;
  background: conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg,
    rgba(255, 200, 80, 0.05) 4deg,
    transparent 7deg,
    rgba(255, 200, 80, 0.07) 11deg,
    transparent 14deg,
    rgba(255, 220, 100, 0.05) 18deg,
    transparent 21deg,
    rgba(255, 200, 80, 0.06) 25deg,
    transparent 28deg,
    rgba(255, 200, 80, 0.08) 32deg,
    transparent 35deg,
    rgba(255, 210, 90, 0.05) 39deg,
    transparent 42deg,
    transparent 318deg,
    rgba(255, 210, 90, 0.06) 321deg,
    transparent 325deg,
    rgba(255, 200, 80, 0.07) 328deg,
    transparent 332deg,
    rgba(255, 200, 80, 0.05) 336deg,
    transparent 339deg,
    rgba(255, 220, 100, 0.08) 343deg,
    transparent 347deg,
    rgba(255, 200, 80, 0.05) 351deg,
    transparent 355deg,
    rgba(255, 200, 80, 0.04) 358deg,
    transparent 360deg
  );
  animation: morning-rays-breathe 8s ease-in-out infinite;
}

@keyframes morning-rays-breathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1.0; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §4  SUN — 3 Variants (morning / day / evening)
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-sun {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  transition: left 60s linear, top 60s linear;
  display: none !important;
  will-change: transform, opacity;
  contain: strict;
  /* Glow/rays via ::before (outer halo) and ::after (rotating rays) */
}

/* ── MORNING SUN ── Rising orange-red orb, warm volumetric halo */
#anhad-sun.sun-morning {
  display: none !important;
  width: 56px;
  height: 56px;
  background: radial-gradient(circle at 37% 34%,
    #FFF8E8 0%,
    #FFE090 18%,
    #FFB858 36%,
    #FF8030 55%,
    #E84810 74%,
    #C02000 90%,
    #880800 100%
  );
  box-shadow:
    0 0 0  6px rgba(255, 110, 30, 0.16),
    0 0 0 16px rgba(255,  90, 20, 0.08),
    0 0 40px rgba(255,  80, 20, 0.62),
    0 0 80px rgba(230,  60, 10, 0.36),
    0 0 140px rgba(210, 50,  5, 0.18);
  animation: sun-morning-pulse 4.5s ease-in-out infinite;
}

/* Atmospheric halo */
#anhad-sun.sun-morning::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 100, 25, 0.52) 0%,
    rgba(255, 80, 15, 0.28) 32%,
    rgba(255, 60,  8, 0.10) 60%,
    transparent 78%
  );
  animation: sun-morning-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* No visible rays for morning */
#anhad-sun.sun-morning::after { display: none; }

@keyframes sun-morning-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.84; box-shadow: 0 0 0 8px rgba(255,110,30,0.22),0 0 0 22px rgba(255,90,20,0.11),0 0 55px rgba(255,80,20,0.78),0 0 110px rgba(230,60,10,0.48),0 0 180px rgba(210,50,5,0.24); }
}

/* ── DAY SUN ── Brilliant white-gold orb, rotating sunrays */
#anhad-sun.sun-day {
  display: none !important;
  width: 68px;
  height: 68px;
  background: radial-gradient(circle at 40% 37%,
    #FFFFFF  0%,
    #FFFDE0 14%,
    #FFF0A0 32%,
    #FFD040 54%,
    #FFB000 74%,
    #F08000 90%,
    #D06000 100%
  );
  box-shadow:
    0 0 0  8px rgba(255, 230, 80, 0.22),
    0 0 0 22px rgba(255, 200, 40, 0.10),
    0 0 45px rgba(255, 215, 60, 0.68),
    0 0 90px rgba(255, 185, 30, 0.38),
    0 0 160px rgba(255, 165, 15, 0.18);
  animation: sun-day-pulse 5s ease-in-out infinite;
}

/* Day sun: large atmospheric halo */
#anhad-sun.sun-day::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 210px;
  height: 210px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 225, 80, 0.40) 0%,
    rgba(255, 200, 50, 0.18) 38%,
    rgba(255, 175, 20, 0.06) 66%,
    transparent 82%
  );
  pointer-events: none;
}

/* Day sun: rotating conic rays */
#anhad-sun.sun-day::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(255, 250, 150, 0.14) 8deg,
    transparent 14deg,  rgba(255, 250, 150, 0.10) 22deg,
    transparent 28deg,  rgba(255, 250, 150, 0.14) 36deg,
    transparent 42deg,  rgba(255, 250, 150, 0.10) 50deg,
    transparent 56deg,  rgba(255, 250, 150, 0.14) 64deg,
    transparent 70deg,  rgba(255, 250, 150, 0.10) 78deg,
    transparent 84deg,  rgba(255, 250, 150, 0.14) 92deg,
    transparent 98deg,  rgba(255, 250, 150, 0.10) 106deg,
    transparent 112deg, rgba(255, 250, 150, 0.14) 120deg,
    transparent 126deg, rgba(255, 250, 150, 0.10) 134deg,
    transparent 140deg, rgba(255, 250, 150, 0.14) 148deg,
    transparent 154deg, rgba(255, 250, 150, 0.10) 162deg,
    transparent 168deg, rgba(255, 250, 150, 0.14) 176deg,
    transparent 182deg, rgba(255, 250, 150, 0.10) 190deg,
    transparent 196deg, rgba(255, 250, 150, 0.14) 204deg,
    transparent 210deg, rgba(255, 250, 150, 0.10) 218deg,
    transparent 224deg, rgba(255, 250, 150, 0.14) 232deg,
    transparent 238deg, rgba(255, 250, 150, 0.10) 246deg,
    transparent 252deg, rgba(255, 250, 150, 0.14) 260deg,
    transparent 266deg, rgba(255, 250, 150, 0.10) 274deg,
    transparent 280deg, rgba(255, 250, 150, 0.14) 288deg,
    transparent 294deg, rgba(255, 250, 150, 0.10) 302deg,
    transparent 308deg, rgba(255, 250, 150, 0.14) 316deg,
    transparent 322deg, rgba(255, 250, 150, 0.10) 330deg,
    transparent 336deg, rgba(255, 250, 150, 0.14) 344deg,
    transparent 350deg, rgba(255, 250, 150, 0.10) 358deg,
    transparent 360deg
  );
  animation: sun-rays-spin 28s linear infinite;
}

@keyframes sun-day-pulse {
  0%, 100% { box-shadow:0 0 0 8px rgba(255,230,80,0.22),0 0 0 22px rgba(255,200,40,0.10),0 0 45px rgba(255,215,60,0.68),0 0 90px rgba(255,185,30,0.38),0 0 160px rgba(255,165,15,0.18); }
  50%       { box-shadow:0 0 0 12px rgba(255,230,80,0.30),0 0 0 30px rgba(255,200,40,0.14),0 0 65px rgba(255,215,60,0.84),0 0 125px rgba(255,185,30,0.52),0 0 210px rgba(255,165,15,0.25); }
}
@keyframes sun-rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── EVENING SUN ── Large deep crimson-gold setting orb */
#anhad-sun.sun-evening {
  display: none !important;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 43% 40%,
    #FFF5C0  0%,
    #FFD060 15%,
    #FF9030 34%,
    #FF4A10 55%,
    #CC1400 72%,
    #880000 88%,
    #520000 100%
  );
  box-shadow:
    0 0 0 12px rgba(220, 60, 8, 0.20),
    0 0 0 32px rgba(200, 40, 5, 0.10),
    0 0 60px rgba(200, 50, 8, 0.72),
    0 0 120px rgba(180, 28, 4, 0.42),
    0 0 220px rgba(200, 60, 0, 0.22);
  animation: sun-evening-pulse 5s ease-in-out infinite;
}

/* Evening sun: massive warm atmospheric glow */
#anhad-sun.sun-evening::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 90, 12, 0.60) 0%,
    rgba(240, 55,  5, 0.32) 30%,
    rgba(200, 35,  0, 0.12) 58%,
    rgba(180, 20,  0, 0.04) 76%,
    transparent 86%
  );
  animation: sun-evening-halo 5s ease-in-out infinite;
  pointer-events: none;
}

/* No rays in evening */
#anhad-sun.sun-evening::after { display: none; }

@keyframes sun-evening-pulse {
  0%, 100% { box-shadow:0 0 0 12px rgba(220,60,8,0.20),0 0 0 32px rgba(200,40,5,0.10),0 0 60px rgba(200,50,8,0.72),0 0 120px rgba(180,28,4,0.42),0 0 220px rgba(200,60,0,0.22); }
  50%       { box-shadow:0 0 0 18px rgba(220,60,8,0.28),0 0 0 44px rgba(200,40,5,0.14),0 0 85px rgba(200,50,8,0.88),0 0 168px rgba(180,28,4,0.56),0 0 290px rgba(200,60,0,0.30); }
}
@keyframes sun-evening-halo {
  0%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.82; transform: translate(-50%,-50%) scale(1.12); }
}


/* ────────────────────────────────────────────────────────────────────────────
   §5  MOON — 3 Phase Variants (crescent / half / full)
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-moon {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(0);
  transition: left 60s linear, top 60s linear;
  display: none;
  will-change: transform, opacity;
  contain: strict;
}

[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon {
  display: block;
}

/* ── FULL MOON ── Luminous silver-white orb with crater texture ── */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-full {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 33%,
    #FFFFFF  0%,
    #F8F8EC 18%,
    #ECEAC8 42%,
    #D4CBA8 66%,
    #B8B090 86%,
    #9A9278 100%
  );
  box-shadow:
    0 0 0  3px rgba(248, 242, 200, 0.30),
    0 0 22px rgba(232, 222, 168, 0.60),
    0 0 55px rgba(212, 202, 148, 0.34),
    0 0 110px rgba(192, 182, 128, 0.16);
  animation: moon-full-breathe 7s ease-in-out infinite;
}

/* Realistic crater overlay */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-full::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 60%, rgba(148,138,102,0.44) 0%, transparent 13%),
    radial-gradient(circle at 58% 26%, rgba(148,138,102,0.30) 0%, transparent  9%),
    radial-gradient(circle at 48% 68%, rgba(148,138,102,0.24) 0%, transparent  8%),
    radial-gradient(circle at 70% 52%, rgba(148,138,102,0.20) 0%, transparent  7%),
    radial-gradient(circle at 38% 40%, rgba(168,158,118,0.16) 0%, transparent 18%),
    radial-gradient(circle at 80% 78%, rgba(148,138,102,0.18) 0%, transparent  8%);
}

/* Subtle earthshine: faint blue ring for atmospheric depth */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-full::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 18px 6px rgba(140, 160, 230, 0.10);
  pointer-events: none;
}

@keyframes moon-full-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(248,242,200,0.30), 0 0 22px rgba(232,222,168,0.60), 0 0 55px rgba(212,202,148,0.34), 0 0 110px rgba(192,182,128,0.16); }
  50%       { box-shadow: 0 0 0 4px rgba(248,242,200,0.42), 0 0 32px rgba(232,222,168,0.78), 0 0 78px rgba(212,202,148,0.48), 0 0 145px rgba(192,182,128,0.26); }
}

/* ── HALF MOON ── Left half lit, right half in shadow ── */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-half {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(90deg,
    /* Lit half */    #EEEACB 0%, #E2D8B0 44%,
    /* Terminator */  #9A9280 50%,
    /* Shadow half */ #141228 51%, #0A0820 100%
  );
  box-shadow:
    0 0 0  1px rgba(210, 202, 158, 0.22),
    0 0 18px rgba(200, 192, 148, 0.44),
    0 0 44px rgba(180, 172, 128, 0.22);
  animation: moon-half-breathe 7s ease-in-out infinite;
}

[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-half::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 62%, rgba(152,142,106,0.38) 0%, transparent 12%),
    radial-gradient(circle at 38% 32%, rgba(152,142,106,0.22) 0%, transparent  9%);
}

[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-half::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 14px 4px rgba(130,150,220,0.08);
  pointer-events: none;
}

@keyframes moon-half-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(210,202,158,0.22), 0 0 18px rgba(200,192,148,0.44), 0 0 44px rgba(180,172,128,0.22); }
  50%       { box-shadow: 0 0 0 2px rgba(210,202,158,0.32), 0 0 28px rgba(200,192,148,0.60), 0 0 62px rgba(180,172,128,0.34); }
}

/* ── CRESCENT MOON ── Thin glowing crescent via offset box-shadow ── */
[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-crescent {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: transparent;
  /* The crescent is the offset box-shadow — no fill on the element itself */
  box-shadow:
    14px  5px  0  0 rgba(238, 232, 192, 0.96),
    14px  5px 14px   rgba(222, 214, 168, 0.55),
    14px  5px 32px   rgba(200, 192, 145, 0.28);
  animation: moon-crescent-glow 7s ease-in-out infinite;
}

[data-theme-mode="auto"][data-time-of-day="night"] #anhad-moon.moon-crescent::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 14px 5px 40px rgba(130, 150, 220, 0.08);
  pointer-events: none;
}

@keyframes moon-crescent-glow {
  0%, 100% { box-shadow: 14px 5px 0 0 rgba(238,232,192,0.96), 14px 5px 14px rgba(222,214,168,0.55), 14px 5px 32px rgba(200,192,145,0.28); }
  50%       { box-shadow: 14px 5px 0 0 rgba(248,244,208,1.00), 14px 5px 22px rgba(232,224,178,0.72), 14px 5px 48px rgba(210,202,158,0.42); }
}


/* ────────────────────────────────────────────────────────────────────────────
   §6  STARS + SHOOTING STARS
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-stars {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
}

/* Stars: visible at night, faint in evening (early star appearance) */
[data-theme-mode="auto"][data-time-of-day="night"]   #anhad-stars { display: block; }
[data-theme-mode="auto"][data-time-of-day="evening"] #anhad-stars { display: block; opacity: 0.35; }

.anhad-star {
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  animation: star-twinkle var(--td, 3.5s) ease-in-out infinite var(--dl, 0s);
}

/* Bright featured stars with cross-halo glow */
.anhad-star--bright {
  background: radial-gradient(circle at 38% 34%,
    #FFFFFF 0%,
    #FFF8E8 45%,
    rgba(255, 248, 220, 0) 75%
  );
  box-shadow:
    0 0 4px 2px rgba(255, 245, 210, 0.55),
    0 0 10px 3px rgba(255, 235, 180, 0.22);
  filter: url(#anhad-star-filter);
  animation: star-twinkle var(--td, 4s) ease-in-out infinite var(--dl, 0s),
             star-bright-pulse 8s ease-in-out infinite var(--dl, 0s);
}

@keyframes star-twinkle {
  0%, 100% { opacity: var(--star-opacity, 0.72); transform: scale(1); }
  40%       { opacity: 0.06; transform: scale(0.40); }
  55%       { opacity: var(--star-opacity, 0.72); transform: scale(1.18); }
}

@keyframes star-bright-pulse {
  0%, 100% { box-shadow: 0 0 4px 2px rgba(255,245,210,0.55), 0 0 10px 3px rgba(255,235,180,0.22); }
  50%       { box-shadow: 0 0 6px 3px rgba(255,245,210,0.80), 0 0 16px 5px rgba(255,235,180,0.40); }
}

/* Shooting Stars */
.anhad-shooting-star {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.95);
  display: none;
  animation: shoot-across linear infinite;
}

[data-theme-mode="auto"][data-time-of-day="night"] .anhad-shooting-star {
  display: block;
}

/* The glowing tail */
.anhad-shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1.5px;
  width: 100px;
  transform: translateY(-50%);
  background: linear-gradient(to left,
    rgba(255, 252, 235, 0.90),
    rgba(255, 245, 200, 0.48),
    rgba(255, 235, 165, 0.18),
    transparent
  );
  border-radius: 2px;
}

@keyframes shoot-across {
  0%   { transform: translate(0, 0) rotate(-22deg); opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 0.88; }
  100% { transform: translate(320px, 128px) rotate(-22deg); opacity: 0; }
}


/* ────────────────────────────────────────────────────────────────────────────
   §7  CLOUDS — Organic, 4 Time-Variants, Foreground + Background Parallax
   ─────────────────────────────────────────────────────────────────────────── */

#anhad-clouds-fg,
#anhad-clouds-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
}

/* ── Cloud base shape ── */
.anhad-cloud {
  position: absolute;
  border-radius: 60px 100px 90px 55px;
  opacity: 0;
  animation: none;
  /* Organic edge via SVG turbulence filter */
  filter: url(#cloud-turbulence);
}

/* Background layer clouds: slightly smaller, more transparent, blurred */
.anhad-cloud--bg {
  filter: url(#cloud-turbulence) blur(2px);
  opacity: 0;
}

/* Puffy bumps via pseudo-elements */
.anhad-cloud::before,
.anhad-cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.anhad-cloud::before {
  width: 60%;
  height: 155%;
  top: -55%;
  left: 14%;
}
.anhad-cloud::after {
  width: 44%;
  height: 130%;
  top: -40%;
  right: 16%;
}

/* ── MORNING: Soft rose-peach clouds, lit from below with orange ── */
[data-theme-mode="auto"][data-time-of-day="morning"] .anhad-cloud--fg {
  background: linear-gradient(152deg,
    rgba(255, 225, 200, 0.80) 0%,
    rgba(255, 200, 168, 0.62) 45%,
    rgba(255, 170, 118, 0.42) 80%,
    rgba(255, 140,  80, 0.25) 100%
  );
  box-shadow:
    inset 0  -5px 16px rgba(255, 130, 50, 0.24),
    inset 0   4px 10px rgba(255, 240, 210, 0.30),
    0 5px 24px rgba(255, 155, 70, 0.14);
}
[data-theme-mode="auto"][data-time-of-day="morning"] .anhad-cloud--bg {
  background: linear-gradient(152deg,
    rgba(255, 238, 218, 0.55) 0%,
    rgba(255, 210, 178, 0.38) 60%,
    rgba(255, 180, 130, 0.22) 100%
  );
}

/* ── DAY: Pure white cumulus clouds, blue-grey underside ── */
[data-theme-mode="auto"][data-time-of-day="day"] .anhad-cloud--fg {
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 254, 255, 0.86) 30%,
    rgba(225, 244, 255, 0.70) 60%,
    rgba(188, 226, 248, 0.52) 85%,
    rgba(155, 205, 240, 0.35) 100%
  );
  box-shadow:
    inset 0  -8px 22px rgba(90, 160, 225, 0.30),
    inset 0   6px 14px rgba(255, 255, 255, 0.75),
    0 7px 28px rgba(130, 195, 242, 0.14);
}
[data-theme-mode="auto"][data-time-of-day="day"] .anhad-cloud--bg {
  background: linear-gradient(158deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(225, 244, 255, 0.50) 55%,
    rgba(180, 220, 248, 0.32) 100%
  );
}

/* ── EVENING: Dramatic fire-lit clouds, crimson-orange-purple ── */
[data-theme-mode="auto"][data-time-of-day="evening"] .anhad-cloud--fg {
  background: linear-gradient(152deg,
    rgba(255, 196,  88, 0.82) 0%,
    rgba(248, 115,  40, 0.65) 38%,
    rgba(195,  42,  58, 0.48) 68%,
    rgba(110,  14,  42, 0.32) 88%,
    rgba( 55,   6,  26, 0.18) 100%
  );
  box-shadow:
    inset 0  -5px 16px rgba(210, 24, 18, 0.35),
    inset 0   5px 12px rgba(255, 210, 80, 0.28),
    0 5px 24px rgba(228, 75, 10, 0.22);
}
[data-theme-mode="auto"][data-time-of-day="evening"] .anhad-cloud--bg {
  background: linear-gradient(152deg,
    rgba(255, 180, 70, 0.55) 0%,
    rgba(210, 75, 36, 0.38) 50%,
    rgba(140, 28, 46, 0.22) 100%
  );
}

/* ── NIGHT: Translucent deep blue-slate clouds drifting by moon ── */
[data-theme-mode="auto"][data-time-of-day="night"] .anhad-cloud--fg {
  background: linear-gradient(152deg,
    rgba(58,  70, 130, 0.48) 0%,
    rgba(40,  50,  98, 0.34) 50%,
    rgba(22,  28,  65, 0.20) 100%
  );
  box-shadow: none;
}
[data-theme-mode="auto"][data-time-of-day="night"] .anhad-cloud--bg {
  background: linear-gradient(152deg,
    rgba(42, 52, 105, 0.32) 0%,
    rgba(28, 35,  72, 0.20) 60%,
    rgba(15, 18,  42, 0.12) 100%
  );
}

/* Cloud drift animation */
@keyframes cloud-drift {
  from { transform: translateX(-130%); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  to   { transform: translateX(125vw); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8  AUTO-MODE OVERRIDES: 3D Cushion Clay — Time-Tinted Shadows
   Applied when background images are active. Uses --sky-card-shadow for
   the ambient tinted shadow that matches the current time-of-day palette.
   Claymorphism shape (inset highlights) is KEPT. White outer shadows REMOVED.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Universal 3D cushion clay in auto mode ── */
[data-theme-mode="auto"] .clay-card,
[data-theme-mode="auto"] .clay {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 4px 12px var(--sky-card-shadow, rgba(0, 0, 0, 0.18)),
    0 14px 36px rgba(0, 0, 0, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
  border-color: var(--sky-card-border, rgba(255, 255, 255, 0.45)) !important;
}

/* ── Colored clay variants — time-tinted ambient, keep color identity ── */
[data-theme-mode="auto"] .clay-gold {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-gold), 0.30),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-orange {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-orange), 0.26),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-blue {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-blue), 0.22),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-green {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-green), 0.22),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-purple {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-purple), 0.22),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-rose {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-rose), 0.20),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.12)),
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme-mode="auto"] .clay-red {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(var(--clay-red), 0.20),
    0 14px 32px var(--sky-card-shadow, rgba(0, 0, 0, 0.12)),
    inset 0 2px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* ── Buttons: subtle time-tinted depth ── */
[data-theme-mode="auto"] .clay-btn {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 6px 16px var(--sky-card-shadow, rgba(0, 0, 0, 0.18)),
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 1px rgba(0, 0, 0, 0.06) !important;
}

/* ── Section headers: mild lift ── */
[data-theme-mode="auto"] .clay-section {
  box-shadow:
    0 2px 8px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* ── Bottom nav: upward lift shadow ── */
[data-theme-mode="auto"] .clay-nav {
  box-shadow:
    0 -2px 8px rgba(0, 0, 0, 0.18),
    0 -6px 24px var(--sky-card-shadow, rgba(0, 0, 0, 0.22)),
    inset 0 2px 0 rgba(255, 255, 255, 0.55) !important;
}

/* ── Small clay: scaled cushion ── */
[data-theme-mode="auto"] .clay--sm {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 3px 8px var(--sky-card-shadow, rgba(0, 0, 0, 0.16)),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
}

/* ── Avatar/Circle ── */
[data-theme-mode="auto"] .clay-avatar {
  box-shadow:
    0 3px 10px var(--sky-card-shadow, rgba(0, 0, 0, 0.18)),
    0 0 0 2px rgba(255, 255, 255, 0.65),
    inset 0 2px 0 rgba(255, 255, 255, 0.60) !important;
}

/* ── Icon wrapper ── */
[data-theme-mode="auto"] .clay-icon {
  box-shadow:
    0 2px 6px var(--sky-card-shadow, rgba(0, 0, 0, 0.16)),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* ── Badge/Pill ── */
[data-theme-mode="auto"] .clay-badge {
  box-shadow:
    0 2px 6px var(--sky-card-shadow, rgba(0, 0, 0, 0.16)),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* ── Player ── */
[data-theme-mode="auto"] .clay-player {
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.22),
    0 12px 36px var(--sky-card-shadow, rgba(0, 0, 0, 0.28)),
    inset 0 2px 0 rgba(255, 255, 255, 0.60) !important;
}

/* ── Sheet options ── */
[data-theme-mode="auto"] .clay-sheet__option {
  box-shadow:
    0 2px 8px var(--sky-card-shadow, rgba(0, 0, 0, 0.14)),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}


/* ────────────────────────────────────────────────────────────────────────────
   TEXT VISIBILITY BOOST — All key text elements get maximum readability
   against the real background images.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Section titles like "Your Practice", "Quick Access" ── */
[data-theme-mode="auto"] .section__title,
[data-theme-mode="auto"] .home-section__title,
[data-theme-mode="auto"] h2,
[data-theme-mode="auto"] h3 {
  color: var(--sky-txt-primary, #1A0402) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Night: section titles glow white */
[data-theme-mode="auto"][data-time-of-day="night"] .section__title,
[data-theme-mode="auto"][data-time-of-day="night"] .home-section__title,
[data-theme-mode="auto"][data-time-of-day="night"] h2,
[data-theme-mode="auto"][data-time-of-day="night"] h3 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}

/* ── Card titles and labels inside cards ── */
[data-theme-mode="auto"] .clay-card .card__title,
[data-theme-mode="auto"] .clay-card .item__title,
[data-theme-mode="auto"] .clay-card .feature__title,
[data-theme-mode="auto"] .quick-access-item__title,
[data-theme-mode="auto"] .practice-item__title {
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ── Card subtitles / meta text inside cards ── */
[data-theme-mode="auto"] .clay-card .card__subtitle,
[data-theme-mode="auto"] .clay-card .item__subtitle,
[data-theme-mode="auto"] .quick-access-item__subtitle,
[data-theme-mode="auto"] .practice-item__subtitle {
  font-weight: 500 !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
}

/* ── Greeting section: strong text, no shadow clutter ── */
[data-theme-mode="auto"] #greetingSalutation,
[data-theme-mode="auto"] .greeting__salutation {
  color: var(--sky-txt-gold, #A83800) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
}

[data-theme-mode="auto"] #greetingGurbani,
[data-theme-mode="auto"] .greeting__gurbani {
  color: var(--sky-txt-primary, #1A0402) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

[data-theme-mode="auto"] #greetingTranslation,
[data-theme-mode="auto"] .greeting__translation {
  color: var(--sky-txt-secondary, #3A0F05) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-shadow: none !important;
}

/* Night mode greeting text: white with subtle dark shadow for legibility */
[data-theme-mode="auto"][data-time-of-day="night"] #greetingSalutation,
[data-theme-mode="auto"][data-time-of-day="night"] .greeting__salutation {
  color: #FFCC29 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.90) !important;
}
[data-theme-mode="auto"][data-time-of-day="night"] #greetingGurbani,
[data-theme-mode="auto"][data-time-of-day="night"] .greeting__gurbani {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.92) !important;
}
[data-theme-mode="auto"][data-time-of-day="night"] #greetingTranslation,
[data-theme-mode="auto"][data-time-of-day="night"] .greeting__translation {
  color: #FFF2D1 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.88) !important;
}

/* ── Remove greeting white blob background entirely ── */
[data-theme-mode="auto"] .greeting__text {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* ── Ensure header ANHAD title looks crisp ── */
[data-theme-mode="auto"] .header__title {
  color: #FFCC29 !important; /* Premium glowing gold */
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}
[data-theme-mode="auto"] .header__title-gurmukhi {
  color: #FFFFFF !important; /* Crisp glowing white */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

[data-theme-mode="auto"][data-time-of-day="night"] .header__title {
  color: #FFCC29 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 1px 5px rgba(0, 0, 0, 0.95) !important;
}
[data-theme-mode="auto"][data-time-of-day="night"] .header__title-gurmukhi {
  color: #FFE399 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* ── Progress bar label ── */
[data-theme-mode="auto"] .progress-inline__label,
[data-theme-mode="auto"] .progress-inline__text {
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* ── Hide CSS celestial elements as we now have high-quality background images ── */
#anhad-stars,
#anhad-moon,
#anhad-sun,
#anhad-horizon-glow,
#anhad-morning-rays,
#anhad-clouds-fg,
#anhad-clouds-bg {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §9  TIME-ADAPTIVE CARD SYSTEM
   CSS custom properties set by JS (applyTimeAdaptiveCardColors) drive
   ALL card backgrounds, text, shadows in auto mode.
   Explicit light/dark modes are COMPLETELY UNAFFECTED.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fallback defaults (day palette) so cards never flash unstyled ── */
:root {
  --sky-card-bg:       rgba(210, 238, 255, 0.84);
  --sky-card-bg-glass: rgba(240, 250, 255, 0.72);
  --sky-card-text:     #000814;
  --sky-card-text2:    #02162E;
  --sky-card-shadow:   rgba(0, 80, 180, 0.30);
  --sky-card-border:   rgba(60, 140, 220, 0.28);
  --sky-card-icon-bg:  rgba(180, 220, 255, 0.70);
  --sky-card-accent:   #0A4078;
}

/* ══════════════════════════════════════════════════════════════════
   PRACTICE CARDS — Time-tinted soft clay cushion
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .practice-card {
  background: var(--sky-card-bg) !important;
  border-color: var(--sky-card-border) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 14px var(--sky-card-shadow),
    0 14px 36px rgba(0, 0, 0, 0.14),
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}

[data-theme-mode="auto"] .practice-card__title {
  color: var(--sky-card-text) !important;
  font-weight: 700 !important;
}

[data-theme-mode="auto"] .practice-card__status {
  color: var(--sky-card-text2) !important;
}

[data-theme-mode="auto"] .practice-card__ring-icon {
  background: var(--sky-card-icon-bg) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(0, 0, 0, 0.10) !important;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK ACCESS CARDS — Time-tinted glassmorphism clay
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .quick-card {
  background: var(--sky-card-bg) !important;
  border-color: var(--sky-card-border) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 4px 14px var(--sky-card-shadow),
    0 14px 36px rgba(0, 0, 0, 0.14),
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}

[data-theme-mode="auto"] .quick-card__title {
  color: var(--sky-card-text) !important;
  font-weight: 700 !important;
}

[data-theme-mode="auto"] .quick-card__subtitle {
  color: var(--sky-card-text2) !important;
}

[data-theme-mode="auto"] .quick-card__icon {
  background: var(--sky-card-icon-bg) !important;
  box-shadow:
    0 2px 8px var(--sky-card-shadow),
    inset 0 1px 2px rgba(255, 255, 255, 0.55) !important;
}

[data-theme-mode="auto"] .quick-card__meta-value,
[data-theme-mode="auto"] .quick-card__progress {
  color: var(--sky-card-accent) !important;
  font-weight: 700 !important;
}

[data-theme-mode="auto"] .quick-card__chevron {
  color: var(--sky-card-text2) !important;
  opacity: 0.65;
}

/* ══════════════════════════════════════════════════════════════════
   EVENT CARD — Time-tinted glass card
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .event-card {
  background: var(--sky-card-bg) !important;
  border-color: var(--sky-card-border) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 6px 20px var(--sky-card-shadow),
    0 18px 48px rgba(0, 0, 0, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
}

[data-theme-mode="auto"] .event-card__eyebrow {
  color: var(--sky-card-accent) !important;
  letter-spacing: 0.06em !important;
}

[data-theme-mode="auto"] .event-card__title {
  color: var(--sky-card-text) !important;
  font-weight: 800 !important;
}

[data-theme-mode="auto"] .event-card__date {
  color: var(--sky-card-text2) !important;
}

[data-theme-mode="auto"] .event-card__countdown {
  color: var(--sky-card-accent) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   HERO CARDS
   (Hero cards keep their clean cinematic look, no claymorphism override)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   SECTION HEADERS — Time-tinted text
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .section-header__title {
  color: var(--sky-card-text) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   PROGRESS BAR — Time-tinted
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .progress-inline {
  background: var(--sky-card-bg-glass) !important;
  border: 1px solid var(--sky-card-border) !important;
  box-shadow:
    0 2px 8px var(--sky-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

[data-theme-mode="auto"] .progress-inline__label,
[data-theme-mode="auto"] .progress-inline__text {
  color: var(--sky-card-text2) !important;
  font-weight: 700 !important;
}

[data-theme-mode="auto"] .progress-inline__fill {
  background: linear-gradient(90deg,
    var(--sky-card-accent) 0%,
    var(--sky-card-shadow) 100%
  ) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TRANSITION: Smooth palette shift when time slot changes
   Only the card properties animate, NOT the background image.
   ══════════════════════════════════════════════════════════════════ */
[data-theme-mode="auto"] .practice-card,
[data-theme-mode="auto"] .quick-card,
[data-theme-mode="auto"] .event-card,
[data-theme-mode="auto"] .progress-inline {
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* Titles and subtitles color-shift smoothly */
[data-theme-mode="auto"] .practice-card__title,
[data-theme-mode="auto"] .practice-card__status,
[data-theme-mode="auto"] .quick-card__title,
[data-theme-mode="auto"] .quick-card__subtitle,
[data-theme-mode="auto"] .quick-card__meta-value,
[data-theme-mode="auto"] .quick-card__progress,
[data-theme-mode="auto"] .event-card__title,
[data-theme-mode="auto"] .event-card__eyebrow,
[data-theme-mode="auto"] .event-card__date,
[data-theme-mode="auto"] .section-header__title {
  transition: color 0.35s ease !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10  HEADER — TIME-ADAPTIVE TITLE + BUTTON COLORS (Auto Mode Only)
   ANHAD title, ਅਨਹਦ subtitle, and the 4 header buttons all follow the
   time-of-day color palette in auto/dynamic mode.
   Light/dark explicit modes: completely unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ANHAD + ਅਨਹਦ title — time-adaptive visibility ── */
[data-theme-mode="auto"] .header__title {
  font-family: 'Optimus Princeps', 'Trajan Pro', serif !important;
  font-size: clamp(1.8rem, 5vw, 2.5rem) !important; /* Premium responsive sizing */
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  line-height: 1.1 !important;
  display: inline-block !important;
  text-transform: uppercase !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  text-fill-color: initial !important;
  color: #FFD566 !important; /* Premium glowing gold */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; /* High contrast readability */
  filter: none !important;
  animation: none !important;
  transition: color 0.35s ease !important;
}

/* Slot-specific gorgeous solid text colors (matches gold) */
[data-theme-mode="auto"][data-time-of-day="morning"] .header__title {
  color: #FFD566 !important;
}
[data-theme-mode="auto"][data-time-of-day="day"] .header__title {
  color: #FFD566 !important;
}
[data-theme-mode="auto"][data-time-of-day="evening"] .header__title {
  color: #FFD566 !important;
}
[data-theme-mode="auto"][data-time-of-day="night"] .header__title {
  color: #FFD566 !important;
}

/* Gurmukhi subtitle follow accent color with beautiful responsive flat design */
[data-theme-mode="auto"] .header__title-gurmukhi {
  font-family: var(--font-gurmukhi) !important;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important; /* Balanced responsive sizing */
  font-weight: 700 !important;
  display: inline-block !important;
  letter-spacing: 0.5px !important;
  opacity: 0.95 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  text-fill-color: initial !important;
  color: #FFFFFF !important; /* Solid high-contrast white */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Crisp text shadow */
  filter: none !important;
  transition: color 0.35s ease !important;
}

[data-theme-mode="auto"][data-time-of-day="morning"] .header__title-gurmukhi {
  color: #FFFFFF !important;
}
[data-theme-mode="auto"][data-time-of-day="day"] .header__title-gurmukhi {
  color: #FFFFFF !important;
}
[data-theme-mode="auto"][data-time-of-day="evening"] .header__title-gurmukhi {
  color: #FFFFFF !important;
}
[data-theme-mode="auto"][data-time-of-day="night"] .header__title-gurmukhi {
  color: #FFFFFF !important;
}

/* ── Header buttons — time-tinted background + icon color ── */
[data-theme-mode="auto"] .header__btn {
  background: var(--sky-card-icon-bg, rgba(180, 220, 255, 0.65)) !important;
  border-color: var(--sky-card-border, rgba(60, 140, 220, 0.25)) !important;
  color: var(--sky-card-accent, #0A4078) !important;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease !important;
}

[data-theme-mode="auto"] .header__btn:active {
  transform: scale(0.91);
  background: var(--sky-card-bg, rgba(210, 238, 255, 0.92)) !important;
}

/* ── Header btn image (radio icon) — follow accent color ── */
[data-theme-mode="auto"] .header__btn-img {
  transition: filter 0.35s ease !important;
}

/* Morning: warm amber filter */
[data-theme-mode="auto"][data-time-of-day="morning"] .header__btn-img {
  filter: invert(45%) sepia(90%) saturate(600%) hue-rotate(10deg) brightness(90%) contrast(100%) !important;
}

/* Day: deep blue filter */
[data-theme-mode="auto"][data-time-of-day="day"] .header__btn-img {
  filter: invert(18%) sepia(80%) saturate(800%) hue-rotate(205deg) brightness(80%) contrast(110%) !important;
}

/* Evening: crimson-gold filter */
[data-theme-mode="auto"][data-time-of-day="evening"] .header__btn-img {
  filter: invert(20%) sepia(95%) saturate(900%) hue-rotate(340deg) brightness(80%) contrast(110%) !important;
}

/* Night: ivory/gold filter */
[data-theme-mode="auto"][data-time-of-day="night"] .header__btn-img {
  filter: invert(90%) sepia(30%) saturate(400%) hue-rotate(20deg) brightness(110%) contrast(100%) drop-shadow(0 0 6px rgba(255, 213, 102, 0.4)) !important;
}

/* ── Theme icon emoji transition ── */
[data-theme-mode="auto"] .ios-emoji {
  transition: color 0.35s ease !important;
}