/* ============================================================
   SAKINA — Living Sky System v2
   Photorealistic prayer-time skies with celestial bodies,
   volumetric clouds, horizon silhouettes, and god rays
   ============================================================ */

/* ---- Sky Container ---- */
.sky-canvas {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  margin-bottom: -100vh;
  margin-bottom: -100dvh;
}

/* Smooth cross-fade transition between scenes */
.sky--transitioning .sky__base,
.sky--transitioning .sky__atmosphere,
.sky--transitioning .sky__horizon-glow,
.sky--transitioning .sky__stars,
.sky--transitioning .sky__sun,
.sky--transitioning .sky__moon,
.sky--transitioning .sky__cloud,
.sky--transitioning .sky__godrays,
.sky--transitioning .sky__silhouette {
  transition-duration: 2.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Parallax layer transitions (smooth movement) */
.sky__clouds,
.sky__celestial,
.sky__stars {
  transition: transform 0.3s ease-out;
}

/* ---- Layer 1: Base Sky Gradient ---- */
.sky__base {
  position: absolute;
  inset: 0;
  transition: background 2s ease;
}

/* ---- Layer 2: Atmospheric Light Scattering ---- */
.sky__atmosphere {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease, background 2s ease;
}

/* ---- Layer 3: Horizon Glow Band ---- */
.sky__horizon-glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 5%;
  height: 35%;
  opacity: 0;
  border-radius: 50%;
  filter: blur(40px);
  transition: all 2s ease;
}

/* ---- Layer 4: Stars ---- */
.sky__stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

.sky__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

/* ---- Layer 5: Celestial Bodies ---- */
.sky__celestial {
  position: absolute;
  inset: 0;
  transition: all 2s ease;
}

/* Sun */
.sky__sun {
  position: absolute;
  opacity: 0;
  transition: all 2s ease;
}

.sky__sun-core {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF7E0 0%, #FFD970 40%, #FFB830 70%, #FF8C00 100%);
  box-shadow:
    0 0 20px 8px rgba(255,200,60,0.5),
    0 0 60px 20px rgba(255,160,30,0.25),
    0 0 120px 40px rgba(255,140,0,0.1);
  position: relative;
  z-index: 2;
}

.sky__sun-corona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,100,0.3) 0%, rgba(255,180,50,0.1) 40%, transparent 70%);
  animation: sunPulse 6s ease-in-out infinite;
  z-index: 1;
}

.sky__sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: 
    conic-gradient(from 0deg, 
      transparent 0deg, rgba(255,220,100,0.08) 5deg, transparent 10deg,
      transparent 30deg, rgba(255,220,100,0.06) 35deg, transparent 40deg,
      transparent 60deg, rgba(255,220,100,0.08) 65deg, transparent 70deg,
      transparent 90deg, rgba(255,220,100,0.06) 95deg, transparent 100deg,
      transparent 120deg, rgba(255,220,100,0.08) 125deg, transparent 130deg,
      transparent 150deg, rgba(255,220,100,0.06) 155deg, transparent 160deg,
      transparent 180deg, rgba(255,220,100,0.08) 185deg, transparent 190deg,
      transparent 210deg, rgba(255,220,100,0.06) 215deg, transparent 220deg,
      transparent 240deg, rgba(255,220,100,0.08) 245deg, transparent 250deg,
      transparent 270deg, rgba(255,220,100,0.06) 275deg, transparent 280deg,
      transparent 300deg, rgba(255,220,100,0.08) 305deg, transparent 310deg,
      transparent 330deg, rgba(255,220,100,0.06) 335deg, transparent 340deg,
      transparent 360deg
    );
  animation: sunRaysRotate 60s linear infinite;
  z-index: 0;
}

@keyframes sunPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; }
}

@keyframes sunRaysRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Moon */
.sky__moon {
  position: absolute;
  opacity: 0;
  transition: all 2s ease;
}

.sky__moon-body {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #F0ECE0 0%, #E0D8C8 30%, #C8BFA8 60%, #B0A890 100%);
  box-shadow:
    inset -4px 2px 6px rgba(0,0,0,0.15),
    0 0 15px 5px rgba(200,195,170,0.2),
    0 0 40px 15px rgba(180,175,150,0.1);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Moon craters (subtle texture) */
.sky__moon-body::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 40%, rgba(0,0,0,0.08) 0%, transparent 8px),
    radial-gradient(circle at 60% 25%, rgba(0,0,0,0.06) 0%, transparent 5px),
    radial-gradient(circle at 45% 65%, rgba(0,0,0,0.07) 0%, transparent 6px),
    radial-gradient(circle at 70% 55%, rgba(0,0,0,0.05) 0%, transparent 4px),
    radial-gradient(circle at 35% 75%, rgba(0,0,0,0.04) 0%, transparent 3px);
}

.sky__moon-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(20,20,30,0.4) 100%);
  z-index: 3;
}

.sky__moon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,195,170,0.12) 0%, transparent 60%);
  animation: moonGlow 8s ease-in-out infinite;
  z-index: 1;
}

@keyframes moonGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* ---- Layer 6: Volumetric Clouds ---- */
.sky__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sky__cloud {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  transition: opacity 2s ease, background 2s ease, filter 2s ease;
}

/* Cloud shapes — stacked radial gradients for volume */
.sky__cloud--1 {
  width: 160px;
  height: 45px;
  top: 12%;
  left: -100px;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.6) 0%, transparent 70%),
    radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 55%, rgba(255,255,255,0.4) 0%, transparent 60%);
  filter: blur(6px);
  animation: cloudFloat 70s linear infinite;
}

.sky__cloud--2 {
  width: 120px;
  height: 35px;
  top: 24%;
  left: -80px;
  background:
    radial-gradient(ellipse at 40% 45%, rgba(255,255,255,0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.4) 0%, transparent 60%);
  filter: blur(8px);
  animation: cloudFloat 55s linear infinite;
  animation-delay: -20s;
}

.sky__cloud--3 {
  width: 200px;
  height: 55px;
  top: 18%;
  left: -120px;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(255,255,255,0.5) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.6) 0%, transparent 65%),
    radial-gradient(ellipse at 75% 55%, rgba(255,255,255,0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 45%, rgba(255,255,255,0.3) 0%, transparent 55%);
  filter: blur(5px);
  animation: cloudFloat 90s linear infinite;
  animation-delay: -45s;
}

.sky__cloud--4 {
  width: 100px;
  height: 30px;
  top: 32%;
  left: -60px;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255,255,255,0.45) 0%, transparent 65%),
    radial-gradient(ellipse at 65% 45%, rgba(255,255,255,0.35) 0%, transparent 60%);
  filter: blur(10px);
  animation: cloudFloat 65s linear infinite;
  animation-delay: -30s;
}

.sky__cloud--5 {
  width: 140px;
  height: 40px;
  top: 8%;
  left: -90px;
  background:
    radial-gradient(ellipse at 45% 50%, rgba(255,255,255,0.5) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 45%, rgba(255,255,255,0.35) 0%, transparent 60%);
  filter: blur(7px);
  animation: cloudFloat 80s linear infinite;
  animation-delay: -55s;
}

@keyframes cloudFloat {
  0% { transform: translateX(0); }
  100% { transform: translateX(550px); }
}

/* ---- Layer 7: God Rays ---- */
.sky__godrays {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 2s ease;
  background: 
    conic-gradient(from 180deg at 50% 120%,
      transparent 0deg,
      rgba(255,220,150,0.03) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255,220,150,0.04) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255,220,150,0.03) 68deg,
      transparent 76deg,
      transparent 90deg,
      rgba(255,220,150,0.05) 98deg,
      transparent 106deg,
      transparent 120deg,
      rgba(255,220,150,0.03) 128deg,
      transparent 136deg,
      transparent 150deg,
      rgba(255,220,150,0.04) 158deg,
      transparent 166deg,
      transparent 180deg
    );
}

/* ---- Layer 8: Horizon Silhouette ---- */
.sky__silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55px;
  color: transparent;
  transition: color 2s ease, opacity 2s ease;
  z-index: 2;
}

/* ---- Layer 9: Shooting Star ---- */
.sky__shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.sky__shooting-star--active {
  animation: shootingStar 1.5s ease-out forwards;
}

@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
    box-shadow: 0 0 6px 2px rgba(255,255,255,0.8), -30px 0 20px 1px rgba(255,255,255,0.3);
  }
  8% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-200px, 130px) scale(0.2);
    box-shadow: 0 0 2px 0 rgba(255,255,255,0), -60px 0 40px 0 rgba(255,255,255,0);
  }
}

/* ---- Layer 10: Bird ---- */
.sky__bird {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  color: rgba(20,33,61,0.5);
}

.sky__bird--active {
  animation: birdFlight 28s linear forwards;
}

@keyframes birdFlight {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  3% { opacity: 0.5; }
  50% { opacity: 0.4; transform: translate(-200px, -30px) scale(0.5); }
  97% { opacity: 0.3; }
  100% { opacity: 0; transform: translate(-420px, -50px) scale(0.4); }
}


/* ============================================================
   SCENE: FAJR — Pre-dawn, first light
   Sky: deep navy fading to warm peach at horizon
   Sun: just below horizon, warm glow
   Moon: crescent fading high
   Clouds: wispy, catching pink/gold light
   ============================================================ */

.sky--fajr .sky__base {
  background: linear-gradient(
    175deg,
    #070B1A 0%,
    #0E1630 15%,
    #1B2D55 30%,
    #2A4570 42%,
    #3E607E 54%,
    #5E7E8A 64%,
    #8AA09A 74%,
    #B8BFA0 82%,
    #D4C8A0 88%,
    #E8C8A0 93%,
    #F0BFA0 97%,
    #F5B890 100%
  );
}

.sky--fajr .sky__atmosphere {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(245,184,144,0.3) 0%,
    rgba(200,168,130,0.15) 25%,
    rgba(100,130,160,0.08) 50%,
    transparent 70%
  );
}

.sky--fajr .sky__horizon-glow {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(255,180,120,0.5) 0%, 
    rgba(255,150,80,0.25) 30%, 
    rgba(200,120,80,0.1) 50%, 
    transparent 70%
  );
}

.sky--fajr .sky__sun {
  opacity: 1;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.sky--fajr .sky__sun-core {
  width: 34px;
  height: 34px;
  background: radial-gradient(circle, #FFF0D0 0%, #FFD080 40%, #FF9040 80%, #E06020 100%);
  box-shadow:
    0 0 30px 15px rgba(255,160,60,0.4),
    0 0 80px 30px rgba(255,120,40,0.2),
    0 0 140px 50px rgba(255,100,30,0.08);
}

.sky--fajr .sky__sun-corona {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255,180,80,0.25) 0%, rgba(255,140,50,0.08) 40%, transparent 70%);
}

.sky--fajr .sky__moon {
  opacity: 0.4;
  top: 12%;
  right: 25%;
}

.sky--fajr .sky__moon-body {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 8px 3px rgba(200,195,170,0.1);
}

.sky--fajr .sky__moon-shadow {
  width: 20px;
  height: 20px;
}

.sky--fajr .sky__stars {
  opacity: 0.2;
}

.sky--fajr .sky__star {
  animation: starFade 8s ease-in-out infinite;
}

@keyframes starFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.1; }
}

.sky--fajr .sky__cloud {
  opacity: 0.5;
}

/* Fajr clouds catch pink/gold light from below */
.sky--fajr .sky__cloud--1 {
  background: 
    radial-gradient(ellipse at 30% 70%, rgba(255,180,130,0.5) 0%, transparent 70%),
    radial-gradient(ellipse at 60% 60%, rgba(255,200,160,0.4) 0%, transparent 65%),
    radial-gradient(ellipse at 80% 75%, rgba(240,170,120,0.3) 0%, transparent 60%);
}
.sky--fajr .sky__cloud--2 {
  background:
    radial-gradient(ellipse at 40% 65%, rgba(255,190,140,0.4) 0%, transparent 65%),
    radial-gradient(ellipse at 70% 70%, rgba(250,180,130,0.3) 0%, transparent 60%);
}
.sky--fajr .sky__cloud--3 {
  background:
    radial-gradient(ellipse at 25% 70%, rgba(255,180,130,0.4) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 60%, rgba(255,200,160,0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 75% 75%, rgba(240,170,120,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 65%, rgba(230,160,110,0.25) 0%, transparent 55%);
}

.sky--fajr .sky__silhouette {
  color: rgba(10,15,30,0.6);
}

.sky--fajr .sky__bird {
  color: rgba(20,33,61,0.5);
}

.sky--fajr .sky__godrays {
  opacity: 0.4;
  background:
    conic-gradient(from 180deg at 50% 110%,
      transparent 0deg,
      rgba(255,180,100,0.04) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255,180,100,0.05) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255,180,100,0.03) 68deg,
      transparent 76deg,
      transparent 100deg,
      rgba(255,180,100,0.04) 108deg,
      transparent 116deg,
      transparent 140deg,
      rgba(255,180,100,0.05) 148deg,
      transparent 156deg,
      transparent 180deg
    );
}


/* ============================================================
   SCENE: DHUHR — Zenith, full daylight
   Sky: vivid blue, lightest at horizon
   Sun: high and bright with strong rays
   Clouds: white, fluffy, drifting
   ============================================================ */

.sky--dhuhr .sky__base {
  background: linear-gradient(
    180deg,
    #1565A0 0%,
    #1E78B5 12%,
    #2A8EC8 25%,
    #3EA5D8 40%,
    #5CBAE2 55%,
    #80CDEA 68%,
    #A5DDF0 80%,
    #C8EBF5 90%,
    #E0F2F8 100%
  );
}

.sky--dhuhr .sky__atmosphere {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.08) 0%,
    transparent 25%
  );
}

.sky--dhuhr .sky__horizon-glow {
  opacity: 0.3;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(255,255,255,0.3) 0%, 
    transparent 60%
  );
}

.sky--dhuhr .sky__sun {
  opacity: 1;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.sky--dhuhr .sky__sun-core {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #FFFFFF 0%, #FFFBE0 30%, #FFE880 60%, #FFD040 100%);
  box-shadow:
    0 0 30px 12px rgba(255,240,180,0.6),
    0 0 80px 30px rgba(255,220,100,0.3),
    0 0 160px 60px rgba(255,200,60,0.1);
}

.sky--dhuhr .sky__sun-corona {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(255,250,220,0.35) 0%, rgba(255,230,150,0.12) 40%, transparent 70%);
}

.sky--dhuhr .sky__sun-rays {
  width: 200px;
  height: 200px;
}

.sky--dhuhr .sky__cloud {
  opacity: 0.65;
}

.sky--dhuhr .sky__godrays {
  opacity: 0.5;
}

.sky--dhuhr .sky__silhouette {
  color: rgba(80,120,140,0.12);
}


/* ============================================================
   SCENE: ASR — Golden afternoon
   Sky: warm blue → amber → gold at horizon
   Sun: lower, warmer, with golden rays
   Clouds: gold-tinted edges
   ============================================================ */

.sky--asr .sky__base {
  background: linear-gradient(
    178deg,
    #2468A0 0%,
    #3580A8 15%,
    #5098A5 30%,
    #70AA98 42%,
    #90B888 54%,
    #B0C078 64%,
    #C8BC68 74%,
    #DDB458 82%,
    #E8A848 88%,
    #EE9838 93%,
    #E88830 97%,
    #DE7828 100%
  );
}

.sky--asr .sky__atmosphere {
  opacity: 1;
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(240,180,80,0.12) 55%,
    rgba(230,150,50,0.2) 80%,
    rgba(220,130,40,0.25) 100%
  );
}

.sky--asr .sky__horizon-glow {
  opacity: 1;
  background: radial-gradient(ellipse at 35% 100%, 
    rgba(255,180,60,0.45) 0%, 
    rgba(255,150,40,0.2) 35%, 
    rgba(220,120,30,0.08) 55%, 
    transparent 70%
  );
}

.sky--asr .sky__sun {
  opacity: 1;
  bottom: 18%;
  left: 25%;
}

.sky--asr .sky__sun-core {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, #FFF5D0 0%, #FFD870 30%, #FFB030 60%, #FF8800 100%);
  box-shadow:
    0 0 25px 10px rgba(255,180,40,0.5),
    0 0 70px 25px rgba(255,150,20,0.25),
    0 0 130px 50px rgba(255,130,0,0.08);
}

.sky--asr .sky__sun-corona {
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(255,200,80,0.3) 0%, rgba(255,170,50,0.1) 40%, transparent 70%);
}

.sky--asr .sky__cloud {
  opacity: 0.55;
}

/* Asr clouds glow warm on undersides */
.sky--asr .sky__cloud--1 {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.5) 0%, transparent 65%),
    radial-gradient(ellipse at 60% 70%, rgba(255,200,100,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 55%, rgba(255,180,80,0.3) 0%, transparent 55%);
}
.sky--asr .sky__cloud--2 {
  background:
    radial-gradient(ellipse at 40% 35%, rgba(255,255,255,0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 65%, rgba(255,190,90,0.35) 0%, transparent 55%);
}
.sky--asr .sky__cloud--3 {
  background:
    radial-gradient(ellipse at 25% 40%, rgba(255,255,255,0.45) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 70%, rgba(255,200,100,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 55%, rgba(255,180,80,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 65%, rgba(255,170,70,0.25) 0%, transparent 50%);
}

.sky--asr .sky__godrays {
  opacity: 0.6;
  background:
    conic-gradient(from 200deg at 30% 120%,
      transparent 0deg,
      rgba(255,190,80,0.05) 8deg,
      transparent 16deg,
      transparent 25deg,
      rgba(255,190,80,0.06) 33deg,
      transparent 41deg,
      transparent 55deg,
      rgba(255,190,80,0.04) 63deg,
      transparent 71deg,
      transparent 85deg,
      rgba(255,190,80,0.06) 93deg,
      transparent 101deg,
      transparent 115deg,
      rgba(255,190,80,0.04) 123deg,
      transparent 131deg,
      transparent 160deg
    );
}

.sky--asr .sky__silhouette {
  color: rgba(100,70,30,0.15);
}


/* ============================================================
   SCENE: MAGHRIB — Sunset
   Sky: deep purple → magenta → orange → gold at horizon
   Sun: at/below horizon, massive warm glow
   Silhouette: mosque/minaret prominent
   Clouds: dramatic purple + orange lit
   ============================================================ */

.sky--maghrib .sky__base {
  background: linear-gradient(
    178deg,
    #0E0820 0%,
    #1A1040 10%,
    #301860 20%,
    #502868 30%,
    #783870 40%,
    #A04458 50%,
    #C05840 58%,
    #D87030 65%,
    #E88828 72%,
    #F0A028 78%,
    #F5B838 84%,
    #F4C84A 90%,
    #F0D870 96%,
    #EDE0A0 100%
  );
}

.sky--maghrib .sky__atmosphere {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(240,200,100,0.2) 0%,
    rgba(200,100,60,0.12) 25%,
    rgba(100,40,80,0.08) 50%,
    transparent 70%
  );
}

.sky--maghrib .sky__horizon-glow {
  opacity: 1;
  height: 45%;
  background: radial-gradient(ellipse at 50% 100%, 
    rgba(255,200,80,0.55) 0%, 
    rgba(255,150,50,0.3) 25%, 
    rgba(200,80,40,0.15) 45%, 
    rgba(80,30,60,0.05) 65%, 
    transparent 80%
  );
}

.sky--maghrib .sky__sun {
  opacity: 1;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(35%);
}

.sky--maghrib .sky__sun-core {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, #FFF0C0 0%, #FFD060 30%, #FF9020 60%, #E06010 100%);
  box-shadow:
    0 0 40px 20px rgba(255,160,40,0.5),
    0 0 100px 40px rgba(255,120,20,0.25),
    0 0 180px 70px rgba(255,80,10,0.1);
}

.sky--maghrib .sky__sun-corona {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,180,60,0.35) 0%, rgba(255,130,30,0.12) 40%, transparent 65%);
}

.sky--maghrib .sky__stars {
  opacity: 0.15;
}

.sky--maghrib .sky__cloud {
  opacity: 0.6;
}

/* Maghrib clouds: dramatic purple tops, orange/gold undersides */
.sky--maghrib .sky__cloud--1 {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(80,40,80,0.4) 0%, transparent 65%),
    radial-gradient(ellipse at 60% 70%, rgba(255,150,60,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(200,80,60,0.35) 0%, transparent 55%);
}
.sky--maghrib .sky__cloud--2 {
  background:
    radial-gradient(ellipse at 40% 25%, rgba(90,40,80,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(255,160,70,0.4) 0%, transparent 55%);
}
.sky--maghrib .sky__cloud--3 {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(80,40,70,0.35) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 70%, rgba(255,160,70,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 40%, rgba(120,50,70,0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 65%, rgba(255,140,50,0.35) 0%, transparent 50%);
}

.sky--maghrib .sky__godrays {
  opacity: 0.7;
  background:
    conic-gradient(from 180deg at 50% 105%,
      transparent 0deg,
      rgba(255,180,60,0.06) 8deg,
      transparent 16deg,
      transparent 25deg,
      rgba(255,140,40,0.07) 33deg,
      transparent 41deg,
      transparent 55deg,
      rgba(255,180,60,0.05) 63deg,
      transparent 71deg,
      transparent 85deg,
      rgba(255,140,40,0.07) 93deg,
      transparent 101deg,
      transparent 115deg,
      rgba(255,180,60,0.05) 123deg,
      transparent 131deg,
      transparent 150deg,
      rgba(255,140,40,0.06) 158deg,
      transparent 166deg,
      transparent 180deg
    );
}

.sky--maghrib .sky__silhouette {
  color: rgba(15,8,30,0.7);
  height: 60px;
}


/* ============================================================
   SCENE: ISHA — Deep night
   Sky: very dark navy/black
   Moon: crescent with glow
   Stars: brilliant, twinkling
   Clouds: barely visible, backlit by moonlight
   ============================================================ */

.sky--isha .sky__base {
  background: linear-gradient(
    180deg,
    #040608 0%,
    #060A12 12%,
    #080E1C 28%,
    #0A1228 45%,
    #0C1632 62%,
    #0E1A3A 78%,
    #101E42 90%,
    #12204A 100%
  );
}

.sky--isha .sky__atmosphere {
  opacity: 1;
  background: radial-gradient(
    ellipse at 70% 20%,
    rgba(40,50,80,0.08) 0%,
    transparent 50%
  );
}

.sky--isha .sky__moon {
  opacity: 1;
  top: 10%;
  right: 22%;
}

.sky--isha .sky__moon-body {
  width: 32px;
  height: 32px;
  box-shadow:
    inset -4px 2px 5px rgba(0,0,0,0.15),
    0 0 20px 8px rgba(200,195,170,0.15),
    0 0 50px 20px rgba(180,175,150,0.08),
    0 0 100px 40px rgba(160,155,130,0.03);
}

.sky--isha .sky__moon-shadow {
  width: 32px;
  height: 32px;
}

.sky--isha .sky__moon-glow {
  width: 100px;
  height: 100px;
}

.sky--isha .sky__stars {
  opacity: 1;
}

.sky--isha .sky__star {
  animation: starTwinkle var(--twinkle-dur, 4s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@keyframes starTwinkle {
  0%, 100% { opacity: var(--star-base, 0.6); transform: scale(1); }
  50% { opacity: var(--star-peak, 1); transform: scale(1.2); }
}

.sky--isha .sky__cloud {
  opacity: 0.12;
}

/* Isha clouds: very subtle, moonlit edges */
.sky--isha .sky__cloud--1 {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(60,70,100,0.3) 0%, transparent 65%),
    radial-gradient(ellipse at 60% 40%, rgba(80,90,120,0.2) 0%, transparent 60%);
  filter: blur(12px);
}
.sky--isha .sky__cloud--3 {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(60,70,100,0.25) 0%, transparent 65%),
    radial-gradient(ellipse at 75% 50%, rgba(80,90,120,0.15) 0%, transparent 60%);
  filter: blur(14px);
}

.sky--isha .sky__silhouette {
  color: rgba(4,6,12,0.85);
  height: 55px;
}


/* ============================================================
   ADAPTIVE UI COLORS — Per Scene
   ============================================================ */

.home--v4[data-sky="fajr"],
.home--v4[data-sky="maghrib"],
.home--v4[data-sky="isha"] {
  --sky-text: #F5F0E8;
  --sky-text2: rgba(245,240,232,0.75);
  --sky-text3: rgba(245,240,232,0.45);
  --sky-accent: #6DD4C0;
  --sky-surface: rgba(255,255,255,0.08);
  --sky-border: rgba(255,255,255,0.1);
  --sky-card-bg: rgba(10,20,30,0.35);
  --sky-card-border: rgba(255,255,255,0.08);
  --sky-cta-shadow: rgba(109,212,192,0.3);
}

.home--v4[data-sky="dhuhr"],
.home--v4[data-sky="asr"] {
  --sky-text: #1A2E2A;
  --sky-text2: rgba(26,46,42,0.7);
  --sky-text3: rgba(26,46,42,0.45);
  --sky-accent: var(--emerald);
  --sky-surface: rgba(255,255,255,0.6);
  --sky-border: rgba(0,0,0,0.08);
  --sky-card-bg: rgba(255,255,255,0.7);
  --sky-card-border: rgba(0,0,0,0.06);
  --sky-cta-shadow: rgba(13,107,94,0.25);
}

/* Apply sky-adaptive colors when a sky scene is active */
.home--v4[data-sky] .hv4-greeting__salaam {
  color: var(--sky-text);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-greeting__subtitle {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-prayer-focus__status {
  color: var(--sky-accent);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-prayer-focus__name {
  color: var(--sky-text);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-prayer-focus__time {
  color: var(--sky-text2);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-cd__num {
  color: var(--sky-text);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-cd__label {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-cd__sep {
  color: var(--sky-text3);
}

.home--v4[data-sky] .hv4-dot__name {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-dot__time {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-dot--current .hv4-dot__name {
  color: var(--sky-accent);
}

.home--v4[data-sky] .hv4-dot--done .hv4-dot__name {
  color: var(--sky-accent);
}

.home--v4[data-sky] .hv4-tracker__thread-bg {
  stroke: var(--sky-border);
  transition: stroke 1.2s ease;
}

.home--v4[data-sky] .hv4-tracker__thread-fill {
  stroke: var(--sky-accent);
  transition: stroke 1.2s ease, stroke-dashoffset 800ms var(--ease-settle);
}

.home--v4[data-sky] .hv4-dot--upcoming .hv4-dot__circle {
  background: var(--sky-surface);
  border-color: var(--sky-border);
  transition: all 1.2s ease;
}

.home--v4[data-sky] .hv4-dot--current .hv4-dot__circle {
  border-color: var(--sky-accent);
  box-shadow: 0 0 0 4px rgba(109,212,192,0.12);
}

.home--v4[data-sky] .hv4-noor-badge {
  background: var(--sky-surface);
  border-color: var(--sky-border);
  transition: all 1.2s ease;
}

.home--v4[data-sky] .hv4-noor-count {
  color: var(--sky-accent);
}

.home--v4[data-sky] .hv4-noor-pip {
  background: var(--sky-accent);
  box-shadow: 0 0 8px rgba(109,212,192,0.35);
}

/* Hero CTA adapts */
.home--v4[data-sky="fajr"] .hv4-cta,
.home--v4[data-sky="isha"] .hv4-cta {
  background: var(--sky-accent);
  color: #0A1A18;
  box-shadow: 0 4px 20px var(--sky-cta-shadow);
}

.home--v4[data-sky="maghrib"] .hv4-cta {
  background: #F0AD45;
  color: #1A1040;
  box-shadow: 0 4px 20px rgba(240,173,69,0.3);
}

/* ---- Guidance Card Adaptation ---- */
.home--v4[data-sky] .hv4-context-card {
  background: var(--sky-card-bg);
  border: 1px solid var(--sky-card-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 1.2s ease;
}

.home--v4[data-sky] .hv4-context-card__arabic {
  color: var(--sky-text);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-context-card__translation {
  color: var(--sky-text2);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-context-card__ref {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv4-context-card__btn {
  background: var(--sky-surface);
  color: var(--sky-text2);
  border-color: var(--sky-border);
  transition: all 1.2s ease;
}

/* ---- Quick Actions Adaptation ---- */
.home--v4[data-sky] .hv3-action__icon {
  background: var(--sky-surface);
  color: var(--sky-accent);
  border-color: var(--sky-border);
  transition: all 1.2s ease;
}

.home--v4[data-sky] .hv3-action__label {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

/* ---- Noor Garden Adaptation ---- */
.home--v4[data-sky] .hv3-garden__title {
  color: var(--sky-text);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv3-garden__period {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv3-garden__message {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

.home--v4[data-sky] .hv3-stem__label {
  color: var(--sky-text3);
  transition: color 1.2s ease;
}

/* ---- Tab Bar Adaptation ---- */
.home--v4[data-sky="fajr"] .tab-bar,
.home--v4[data-sky="maghrib"] .tab-bar,
.home--v4[data-sky="isha"] .tab-bar {
  background: rgba(10,14,26,0.85);
  border-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.home--v4[data-sky="fajr"] .tab-bar .tab,
.home--v4[data-sky="maghrib"] .tab-bar .tab,
.home--v4[data-sky="isha"] .tab-bar .tab {
  color: rgba(245,240,232,0.4);
}

.home--v4[data-sky="fajr"] .tab-bar .tab.active,
.home--v4[data-sky="maghrib"] .tab-bar .tab.active,
.home--v4[data-sky="isha"] .tab-bar .tab.active {
  color: #6DD4C0;
}

/* ---- Hero complete state for dark skies ---- */
.home--v4[data-sky="fajr"] .hv4-prayer-focus--complete .hv4-prayer-focus__name,
.home--v4[data-sky="maghrib"] .hv4-prayer-focus--complete .hv4-prayer-focus__name,
.home--v4[data-sky="isha"] .hv4-prayer-focus--complete .hv4-prayer-focus__name {
  background: linear-gradient(135deg, #6DD4C0, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   DAILY READING SECTION
   ============================================================ */

.hv3-daily {
  position: relative;
  z-index: 1;
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-16);
}

.hv3-daily__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-12);
}

.hv3-daily__title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.hv3-daily__subtitle {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}

.hv3-daily__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.hv3-daily__scroll::-webkit-scrollbar {
  display: none;
}

.hv3-daily-card {
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease;
}

.hv3-daily-card:active {
  transform: scale(0.97);
}

.hv3-daily-card--hadith {
  background: linear-gradient(145deg, #0A3D35, #0D5248);
  color: #F5F0E8;
}

.hv3-daily-card--hadith .hv3-daily-card__icon {
  background: rgba(201,168,76,0.15);
  color: #C9A84C;
}

.hv3-daily-card--scholar {
  background: linear-gradient(145deg, #1A1040, #2E1B5E);
  color: #F5F0E8;
}

.hv3-daily-card--scholar .hv3-daily-card__icon {
  background: rgba(201,168,76,0.15);
  color: #C9A84C;
}

.hv3-daily-card--juz {
  background: linear-gradient(145deg, var(--surface), #F0EDE6);
  color: var(--text);
  border: 1px solid var(--border);
}

.hv3-daily-card--juz .hv3-daily-card__icon {
  background: rgba(13,107,94,0.1);
  color: var(--emerald);
}

.hv3-daily-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.hv3-daily-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hv3-daily-card__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

.hv3-daily-card__arabic {
  font-family: var(--f-arabic);
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 10px;
  direction: rtl;
}

.hv3-daily-card__text {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.85;
  margin-bottom: 10px;
}

.hv3-daily-card__source {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.45;
  letter-spacing: 0.04em;
}

.hv3-daily-card__author {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 4px;
}

.hv3-juz-progress {
  margin-top: 12px;
}

.hv3-juz-progress__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(13,107,94,0.1);
  overflow: hidden;
  margin-bottom: 8px;
}

.hv3-juz-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--emerald);
  transition: width 600ms var(--ease-settle);
}

.hv3-juz-progress__label {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--f-mono);
}

/* Daily card adaptation for dark skies */
.home--v4[data-sky="fajr"] .hv3-daily__title,
.home--v4[data-sky="maghrib"] .hv3-daily__title,
.home--v4[data-sky="isha"] .hv3-daily__title {
  color: var(--sky-text);
}

.home--v4[data-sky="fajr"] .hv3-daily__subtitle,
.home--v4[data-sky="maghrib"] .hv3-daily__subtitle,
.home--v4[data-sky="isha"] .hv3-daily__subtitle {
  color: var(--sky-text3);
}

.home--v4[data-sky="fajr"] .hv3-daily-card--juz,
.home--v4[data-sky="maghrib"] .hv3-daily-card--juz,
.home--v4[data-sky="isha"] .hv3-daily-card--juz {
  background: rgba(10,20,30,0.4);
  border-color: rgba(255,255,255,0.08);
  color: #F5F0E8;
}

.home--v4[data-sky="fajr"] .hv3-daily-card--juz .hv3-daily-card__icon,
.home--v4[data-sky="maghrib"] .hv3-daily-card--juz .hv3-daily-card__icon,
.home--v4[data-sky="isha"] .hv3-daily-card--juz .hv3-daily-card__icon {
  background: rgba(109,212,192,0.12);
  color: #6DD4C0;
}

.home--v4[data-sky="fajr"] .hv3-juz-progress__bar,
.home--v4[data-sky="maghrib"] .hv3-juz-progress__bar,
.home--v4[data-sky="isha"] .hv3-juz-progress__bar {
  background: rgba(255,255,255,0.08);
}

.home--v4[data-sky="fajr"] .hv3-juz-progress__fill,
.home--v4[data-sky="maghrib"] .hv3-juz-progress__fill,
.home--v4[data-sky="isha"] .hv3-juz-progress__fill {
  background: #6DD4C0;
}

.home--v4[data-sky="fajr"] .hv3-juz-progress__label,
.home--v4[data-sky="maghrib"] .hv3-juz-progress__label,
.home--v4[data-sky="isha"] .hv3-juz-progress__label {
  color: rgba(245,240,232,0.45);
}

/* ---- Noor Garden Adaptation for Dark Skies ---- */
.home--v4[data-sky="fajr"] .hv3-garden,
.home--v4[data-sky="maghrib"] .hv3-garden,
.home--v4[data-sky="isha"] .hv3-garden {
  background: rgba(10,20,30,0.35);
  border-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 1.2s ease;
}

.home--v4[data-sky="fajr"] .hv3-garden__plot,
.home--v4[data-sky="maghrib"] .hv3-garden__plot,
.home--v4[data-sky="isha"] .hv3-garden__plot {
  border-bottom-color: rgba(255,255,255,0.08);
}

.home--v4[data-sky="fajr"] .hv3-stem__bar,
.home--v4[data-sky="maghrib"] .hv3-stem__bar,
.home--v4[data-sky="isha"] .hv3-stem__bar {
  background: #6DD4C0;
}

.home--v4[data-sky="fajr"] .hv3-stem__tip--empty,
.home--v4[data-sky="maghrib"] .hv3-stem__tip--empty,
.home--v4[data-sky="isha"] .hv3-stem__tip--empty {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.home--v4[data-sky="fajr"] .hv3-stem__tip--full,
.home--v4[data-sky="maghrib"] .hv3-stem__tip--full,
.home--v4[data-sky="isha"] .hv3-stem__tip--full {
  background: #6DD4C0;
  box-shadow: 0 0 12px rgba(109,212,192,0.35), 0 0 4px rgba(109,212,192,0.2);
}

.home--v4[data-sky="fajr"] .hv3-stem__tip--full-today,
.home--v4[data-sky="maghrib"] .hv3-stem__tip--full-today,
.home--v4[data-sky="isha"] .hv3-stem__tip--full-today {
  background: #6DD4C0;
  box-shadow: 0 0 12px rgba(109,212,192,0.35);
}

.home--v4[data-sky="fajr"] .hv3-stem--today .hv3-stem__label,
.home--v4[data-sky="maghrib"] .hv3-stem--today .hv3-stem__label,
.home--v4[data-sky="isha"] .hv3-stem--today .hv3-stem__label {
  color: #6DD4C0;
}