/* Scenery layer: mountains + sun/moon + theme glow + stars + bottom black shade */
:root {
  /* layout */
  --scenery-height: min(28vh, 260px);
  --mountains-width: 720px;
  /* lower mountains a bit so they sit closer to the bottom */
  --mountains-bottom-offset: -18px;

  /* sun / moon position + orbit */
  --sun-bottom: 60px;
  --sun-left-offset: -20px;
  --sun-drift-x: 14px;
  --sun-drift-y: 8px;
  --sun-orbit-duration: 26s;

  /* mountains brightness */
  --mountains-brightness-day: 0.92;
  --mountains-brightness-night: 0.82;
  --mountains-brightness: var(--mountains-brightness-day);
  /* extra darken for mountains (multiplier) */
  --mountains-darken-extra: 0.95;

  /* THEME COLOR (comes from header palette) */
  --glow-color: var(--accent, #88c0ff);

  /* BACK glow (behind mountains) */
  --glow-back-density-day: 78%;
  --glow-back-density-night: 88%;
  --glow-back-density: var(--glow-back-density-day);
  --glow-back-blur: 14px;
  --glow-back-height: 170%;

  /* FRONT glow (in front of mountains) */
  --glow-front-density-day: 94%;
  --glow-front-density-night: 98%;
  --glow-front-density: var(--glow-front-density-day);
  --glow-front-blur: 16px;
  --glow-front-height: 64%;

  /* Bottom black shade (in front, at the base of mountains) */
  --shade-front-opacity-day: 1.5;
  --shade-front-opacity-night: 1.5;
  --shade-front-opacity: var(--shade-front-opacity-day);
  --shade-front-height: 100%;

  /* Sun halo (day) */
  --sun-glow-color-day: var(--accent, #88c0ff);
  --sun-glow-color-night: var(--accent, #88c0ff);
  --sun-glow-color: var(--sun-glow-color-day);
  --sun-glow-mix-day: 80%;
  --sun-glow-mix-night: 0%;
  --sun-glow-mix: var(--sun-glow-mix-day);
  --sun-glow-radius: 20px;

  /* Moon halo (night) */
  --moon-glow-color-day: #cfd3da;
  --moon-glow-color-night: #93baff;
  --moon-glow-color: var(--moon-glow-color-day);
  --moon-glow-mix-day: 0%;
  --moon-glow-mix-night: 70%;
  --moon-glow-mix: var(--moon-glow-mix-day);
  --moon-glow-radius: 18px;

  /* stars (trimmed for perf) */
  --stars-opacity: .35;
  --stars-count: 140;
}

/* Root container of the scene: fixed to the bottom, safe-area aware */
#scenery-root {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--scenery-height);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* glue to iPad bottom */
  pointer-events: none;
  z-index: 1;
}

.scenery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  isolation: isolate;
}

/* THEME GLOW — behind mountains (soft) */
.scenery::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--glow-back-height) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(
      90% 120% at 50% 100%,
      color-mix(in srgb, var(--glow-color) var(--glow-back-density), transparent) 0%,
      transparent 60%
    );
  filter: blur(var(--glow-back-blur));
  z-index: 0;
  opacity: 1;
}
/* 1. НОВЫЙ СЛОЙ: Жесткое затемнение низа (Darken the lower part) */
/* Root container of the scene: fixed to the bottom */
#scenery-root {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--scenery-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  /* ИСПРАВЛЕНИЕ: Опускаем слой сцены НИЖЕ дашборда (у дашборда 5) */
  z-index: 1; 
}

/* ... (правила .scenery и .scenery::before оставь как были) ... */


/* 1. НОВЫЙ СЛОЙ: Мягкое затемнение низа (Супер-плавная версия) */
#scenery-root::after {
  content: "";
  position: absolute;
  left: 0; 
  right: 0;
  bottom: 0;
  height: 200px; /* Чуть выше, чтобы градиент успел плавно раствориться */
  
  /* ИСПРАВЛЕНО: Многоступенчатый градиент, чтобы убрать "линию" */
  background: linear-gradient(
    to top, 
    #000000 0%,           /* 0% - Черный */
    rgba(0,0,0, 0.8) 15%, /* 15% - Еще плотный */
    rgba(0,0,0, 0.4) 40%, /* 40% - Полупрозрачный */
    rgba(0,0,0, 0.1) 70%, /* 70% - Еле заметный */
    transparent 100%      /* 100% - Исчез */
  );
  
  /* Z-index внутри сцены не важен, так как вся сцена теперь ПОД дашбордом */
  z-index: 4; 
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}


/* 2. ОБНОВЛЕННЫЙ СЛОЙ: Только цветное свечение (Theme Glow) */
/* Мы убрали отсюда черный цвет, оставили только красивое размытое свечение */
.scenery::after {
  content: "";
  position: absolute;
  left: 0; 
  right: 0;
  bottom: 0;
  height: var(--glow-front-height);

  background: radial-gradient(
      70% 100% at 50% 100%,
      color-mix(in srgb, var(--glow-color) var(--glow-front-density), transparent) 0%,
      transparent 70%
    );
    
  filter: blur(var(--glow-front-blur));
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}

/* MOUNTAINS */
.scenery__mountains {
  position: absolute;
  left: 50%;
  bottom: calc(0px + var(--mountains-bottom-offset));
  transform: translateX(-50%);
  width: min(100%, var(--mountains-width));
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter:
    brightness(var(--mountains-brightness))
    brightness(var(--mountains-darken-extra));
}

/* SUN / MOON */
.scenery__sun,
.scenery__moon {
  position: absolute;
  left: 50%;
  bottom: var(--sun-bottom);
  width: clamp(64px, 8vw, 140px);
  height: auto;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
  will-change: transform, filter;
}

.scenery__sun {
  animation: sunOrbit var(--sun-orbit-duration) ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--sun-glow-radius)
      color-mix(in srgb, var(--sun-glow-color) var(--sun-glow-mix), transparent));
}

.scenery__moon {
  animation: moonOrbit var(--sun-orbit-duration) ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--moon-glow-radius)
      color-mix(in srgb, var(--moon-glow-color) var(--moon-glow-mix), transparent));
}

@keyframes sunOrbit {
  0%   { transform: translate(calc(-50% + var(--sun-left-offset) - var(--sun-drift-x)), calc(0px - var(--sun-drift-y))); }
  25%  { transform: translate(calc(-50% + var(--sun-left-offset)), 0); }
  50%  { transform: translate(calc(-50% + var(--sun-left-offset) + var(--sun-drift-x)), calc(0px + var(--sun-drift-y))); }
  75%  { transform: translate(calc(-50% + var(--sun-left-offset)), 0); }
  100% { transform: translate(calc(-50% + var(--sun-left-offset) - var(--sun-drift-x)), calc(0px - var(--sun-drift-y))); }
}

@keyframes moonOrbit {
  0%   { transform: translate(calc(-50% + var(--sun-left-offset) - var(--sun-drift-x)), calc(0px - var(--sun-drift-y))); }
  25%  { transform: translate(calc(-50% + var(--sun-left-offset)), 0); }
  50%  { transform: translate(calc(-50% + var(--sun-left-offset) + var(--sun-drift-x)), calc(0px + var(--sun-drift-y))); }
  75%  { transform: translate(calc(-50% + var(--sun-left-offset)), 0); }
  100% { transform: translate(calc(-50% + var(--sun-left-offset) - var(--sun-drift-x)), calc(0px - var(--sun-drift-y))); }
}

/* Stars canvas */
.scenery__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .8s ease;
  width: 100vw;
}

/* Day/Night toggles */
#scenery-root[data-mode="day"]   .scenery__sun  { opacity: 1; }
#scenery-root[data-mode="night"] .scenery__moon { opacity: 1; }
#scenery-root[data-mode="night"] .scenery__stars { opacity: var(--stars-opacity); }

/* Mode switches: halos & brightness */
#scenery-root[data-mode="day"]{
  --mountains-brightness: var(--mountains-brightness-day);
  --glow-front-density: var(--glow-front-density-day);
  --glow-back-density:  var(--glow-back-density-day);
  --shade-front-opacity: var(--shade-front-opacity-day);
  --sun-glow-color: var(--sun-glow-color-day);
  --sun-glow-mix: var(--sun-glow-mix-day);
  --moon-glow-color: var(--moon-glow-color-day);
  --moon-glow-mix: var(--moon-glow-mix-day);
}

#scenery-root[data-mode="night"]{
  --mountains-brightness: var(--mountains-brightness-night);
  --glow-front-density: var(--glow-front-density-night);
  --glow-back-density:  var(--glow-back-density-night);
  --shade-front-opacity: var(--shade-front-opacity-night);
  --sun-glow-color: var(--sun-glow-color-night);
  --sun-glow-mix: var(--sun-glow-mix-night);
  --moon-glow-color: var(--moon-glow-color-night);
  --moon-glow-mix: var(--moon-glow-mix-night);
}

/* System dark fallback */
@media (prefers-color-scheme: dark) {
  #scenery-root:not([data-mode]) .scenery__moon { opacity: 1; }
  #scenery-root:not([data-mode]) .scenery__stars { opacity: var(--stars-opacity); }
  #scenery-root:not([data-mode]) {
    --mountains-brightness: var(--mountains-brightness-night);
    --glow-front-density: var(--glow-front-density-night);
    --glow-back-density:  var(--glow-back-density-night);
    --shade-front-opacity: var(--shade-front-opacity-night);
    --sun-glow-color: var(--sun-glow-color-night);
    --sun-glow-mix: var(--sun-glow-mix-night);
    --moon-glow-color: var(--moon-glow-color-night);
    --moon-glow-mix: var(--moon-glow-mix-night);
  }
}

/* OFF state from toggle button (keeps background glows) */
#scenery-root[data-scenery-off] .scenery__mountains { display: none !important; }
#scenery-root[data-scenery-off] .scenery__sun,
#scenery-root[data-scenery-off] .scenery__moon { display: none !important; }
#scenery-root[data-scenery-off] .scenery__stars { display: none !important; }

/* Pause animations + stars when disabled via API */
#scenery-root[data-scene-enabled="0"] .scenery__sun,
#scenery-root[data-scene-enabled="0"] .scenery__moon,
#scenery-root[data-scene-enabled="0"] .scenery__stars,
#scenery-root[data-scenery-off] .scenery__sun,
#scenery-root[data-scenery-off] .scenery__moon {
  animation-play-state: paused !important;
}

#scenery-root[data-scene-enabled="0"] .scenery__stars {
  display: none !important;
  opacity: 0 !important;
}