/* ============================= */
/* TIME-OF-DAY THEMES            */
/* Applied as .theme-X on .app   */
/* Works alongside .mode-X       */
/* ============================= */

/* ============================= */
/* MORNING  05:00 – 11:59        */
/* ============================= */

.app.theme-morning {
  background-color: #030810;
  background-image: linear-gradient(180deg, #061528 0%, #07101e 40%, #030810 100%);
  background-size: 100% 100svh;
  background-repeat: no-repeat;
}


.app.theme-morning .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, #030810 40%); }

.app.theme-morning .horizon-glow {
  opacity: 0.70;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 200, 110, 0.32) 0%,
    rgba(255, 160, 60, 0.10) 45%,
    transparent 72%);
}


.app.theme-morning .stars { opacity: 0; }
.app.theme-morning .moon  { opacity: 0; }

.app.theme-morning .carousel-left-btn,
.app.theme-morning .carousel-right-btn,
.app.theme-morning .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 210, 130, 0.07), transparent 40%),
    rgba(20, 18, 14, 0.34);
}

.app.theme-morning .track-label {
  color: rgba(255, 225, 175, 0.68);
}

/* ============================= */
/* DAY  12:00 – 17:59            */
/* ============================= */

.app.theme-day {
  background-color: #03060d;
  background-image: linear-gradient(180deg, #04101f 0%, #060d19 42%, #03060d 100%);
  background-size: 100% 100svh;
  background-repeat: no-repeat;
}


.app.theme-day .horizon-glow {
  opacity: 0.48;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 160, 60, 0.28) 0%,
    rgba(255, 130, 40, 0.08) 45%,
    transparent 72%);
}


.app.theme-day .stars { opacity: 0; }
.app.theme-day .moon  { opacity: 0; }

/* ============================= */
/* SUNSET  18:00 – 20:59         */
/* ============================= */

.app.theme-sunset {
  background-color: #020208;
  background-image: linear-gradient(180deg, #0e0614 0%, #07050f 42%, #020208 100%);
  background-size: 100% 100svh;
  background-repeat: no-repeat;
}


.app.theme-sunset .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, #020208 40%); }

.app.theme-sunset .horizon-glow {
  opacity: 0.88;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 100, 40, 0.36) 0%,
    rgba(180, 50, 120, 0.14) 42%,
    transparent 72%);
}


.app.theme-sunset .stars { opacity: 0.35; }
.app.theme-sunset .moon  { opacity: 0.50; }

.app.theme-sunset .carousel-left-btn,
.app.theme-sunset .carousel-right-btn,
.app.theme-sunset .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(200, 90, 150, 0.08), transparent 40%),
    rgba(18, 10, 22, 0.38);
}

.app.theme-sunset .track-label {
  color: rgba(255, 195, 155, 0.68);
}

/* ============================= */
/* NIGHT  21:00 – 04:59          */
/* ============================= */

.app.theme-night {
  background-color: #010206;
  background-image: linear-gradient(180deg, #020c1c 0%, #030810 40%, #010206 100%);
  background-size: 100% 100svh;
  background-repeat: no-repeat;
}


.app.theme-night .mode-backdrop { background: linear-gradient(to bottom, transparent 0%, #01020691 40%); }

.app.theme-night .horizon-glow {
  opacity: 0.32;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(60, 80, 200, 0.24) 0%,
    rgba(30, 40, 120, 0.08) 45%,
    transparent 72%);
}


.app.theme-night .stars { opacity: 1; }
.app.theme-night .moon  { opacity: 1; }

.app.theme-night .carousel-left-btn,
.app.theme-night .carousel-right-btn,
.app.theme-night .volume-btn {
  background:
    radial-gradient(circle at 35% 30%, rgba(70, 110, 220, 0.09), transparent 40%),
    rgba(10, 16, 36, 0.42);
}

.app.theme-night .track-label,
.app.theme-night .track-artist {
  color: rgba(255, 255, 255, 0.58);
}

.app.theme-night .weather-widget {
  background: rgba(12, 20, 44, 0.52);
}

/* ============================= */
/* MODE-SPECIFIC HORIZON GLOW    */
/* Overrides time-of-day default */
/* Must stay AFTER theme rules   */
/* ============================= */

.app.mode-rap .horizon-glow {
  opacity: 0.65;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(180, 20, 255, 0.30) 0%,
    rgba(200, 0, 150, 0.12) 42%,
    transparent 70%);
}

.app.mode-rock .horizon-glow {
  opacity: 0.75;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 60, 10, 0.34) 0%,
    rgba(200, 40, 0, 0.12) 42%,
    transparent 70%);
}

.app.mode-deep .horizon-glow {
  opacity: 0.55;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(60, 40, 220, 0.28) 0%,
    rgba(80, 60, 180, 0.10) 42%,
    transparent 70%);
}

.app.mode-lofi .horizon-glow {
  opacity: 0.45;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(100, 160, 220, 0.22) 0%,
    rgba(150, 130, 210, 0.08) 42%,
    transparent 70%);
}

.app.mode-euro .horizon-glow {
  opacity: 0.70;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(0, 200, 255, 0.28) 0%,
    rgba(220, 0, 180, 0.14) 42%,
    transparent 70%);
}

.app.mode-pulse .horizon-glow {
  opacity: 0.80;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(160, 255, 20, 0.30) 0%,
    rgba(100, 200, 10, 0.12) 42%,
    transparent 70%);
}

.app.mode-manele .horizon-glow {
  opacity: 0.72;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 155, 0, 0.32) 0%,
    rgba(200, 100, 0, 0.12) 42%,
    transparent 70%);
}