/* Night forest background: static on phones, gently alive on desktop. */
.night-forest-app {
  position: relative;
  isolation: isolate;
}

.night-forest-visuals {
  opacity: 0;
  visibility: hidden;
  background: #071426;
  transition: opacity 240ms ease-out, visibility 240ms step-end;
}

html.dark .night-forest-visuals.night-forest-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease-out, visibility 0s;
}

.night-forest-scene {
  background-color: #071426;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

html.dark .night-forest-visible .night-forest-scene {
  background-image: url('/visuals/night-forest-mobile-v1.webp');
}

.night-forest-veil {
  background:
    linear-gradient(180deg, rgba(4, 13, 28, 0.26) 0%, rgba(4, 13, 28, 0.45) 62%, rgba(4, 13, 28, 0.62) 100%),
    radial-gradient(circle at 50% 42%, rgba(7, 20, 38, 0.16), rgba(7, 20, 38, 0.52) 86%);
}

.night-forest-stars,
.night-forest-fire-glow,
.night-forest-leaves {
  display: none;
}

.night-forest-content {
  position: relative;
  z-index: 1;
}

html.dark .night-forest-app .app-main-content,
html.dark .night-forest-app .app-route-frame,
html.dark .night-forest-app .learning-path-surface,
html.dark .night-forest-app .story-detail-page,
html.dark .night-forest-app .mobile-ai-shell {
  background-color: transparent !important;
  background-image: none !important;
}

/* Calm glass surfaces keep copy readable while allowing the night scene through. */
html.dark .mobile-sidebar-shell {
  background: rgba(6, 16, 31, 0.86) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html.dark :is(.mobile-sidebar-header, .mobile-sidebar-bottom, .app-mobile-header) {
  background: rgba(9, 23, 42, 0.74) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark :is(
  .mobile-sidebar-language,
  .mobile-sidebar-extra-button,
  .mobile-sidebar-subaction,
  .mobile-sidebar-icon-button,
  .mobile-theme-toggle,
  .desktop-theme-toggle
) {
  background: rgba(21, 39, 62, 0.62) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .mobile-sidebar-profile-card > :nth-child(2) {
  background: rgba(18, 35, 57, 0.70) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html.dark .night-forest-app :is(
  .home-stat-card,
  .home-quick-actions,
  .home-quick-action-card,
  .home-heatmap-card,
  .home-daily-progress,
  .home-story-stats-card,
  .home-status-breakdown,
  .home-status-tile,
  .home-review-chart
) {
  background: rgba(10, 22, 40, 0.78) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
  border-color: rgba(148, 163, 184, 0.17) !important;
  box-shadow: 0 12px 32px rgba(2, 8, 23, 0.18) !important;
}

html.dark .night-forest-app :is(.home-quick-action-card, .home-status-tile) {
  background: rgba(19, 37, 60, 0.66) !important;
}

html.dark .night-forest-app .home-plan-status {
  background: rgba(6, 78, 59, 0.62) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.dark .night-forest-app .home-hero-banner {
  min-height: 198px;
  background:
    radial-gradient(circle at 88% 38%, rgba(245, 158, 11, 0.14), transparent 34%),
    linear-gradient(112deg, rgba(6, 18, 36, 0.82), rgba(13, 29, 52, 0.74)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  border-color: rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.24) !important;
}

html.dark .night-forest-app .home-wisdom-panel {
  background: rgba(16, 31, 52, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
  border-color: rgba(191, 219, 254, 0.16) !important;
}

@media (min-width: 921px) and (pointer: fine) {
  html.dark .night-forest-visible .night-forest-scene {
    inset: -2.5%;
    background-image: url('/visuals/night-forest-desktop-v1.webp');
    background-position: center center;
  }

  .night-forest-veil {
    background:
      linear-gradient(90deg, rgba(4, 13, 28, 0.14) 0%, rgba(4, 13, 28, 0.40) 35%, rgba(4, 13, 28, 0.56) 72%, rgba(4, 13, 28, 0.66) 100%),
      linear-gradient(180deg, rgba(4, 13, 28, 0.12), rgba(4, 13, 28, 0.38));
  }

  .night-forest-stars {
    display: block;
    opacity: 0.28;
    background-image:
      radial-gradient(circle at 18% 17%, rgba(191, 219, 254, 0.95) 0 1px, transparent 2px),
      radial-gradient(circle at 42% 11%, rgba(255, 255, 255, 0.88) 0 1px, transparent 2px),
      radial-gradient(circle at 66% 20%, rgba(186, 230, 253, 0.9) 0 1.2px, transparent 2.2px),
      radial-gradient(circle at 82% 9%, rgba(255, 255, 255, 0.84) 0 1px, transparent 2px);
  }

  .night-forest-fire-glow {
    display: block;
    left: 20%;
    bottom: -7rem;
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    opacity: 0.24;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.58) 0%, rgba(249, 115, 22, 0.18) 28%, transparent 68%);
    filter: blur(18px);
  }

  .night-forest-leaves {
    display: block;
    inset: -1.5%;
    opacity: 0.60;
    background-image: url('/visuals/night-forest-leaves-v1.webp');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 103% auto;
    transform-origin: 50% -4%;
  }
}

@media (max-width: 920px) {
  html.dark .mobile-sidebar-shell {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.dark :is(.mobile-sidebar-header, .mobile-sidebar-bottom, .app-mobile-header) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.dark .night-forest-app :is(
    .home-stat-card,
    .home-quick-actions,
    .home-quick-action-card,
    .home-heatmap-card,
    .home-daily-progress,
    .home-story-stats-card,
    .home-status-breakdown,
    .home-status-tile,
    .home-review-chart
  ) {
    background: rgba(10, 22, 40, 0.84) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.dark .night-forest-app .home-hero-banner {
    min-height: 0;
    background:
      radial-gradient(circle at 82% 18%, rgba(245, 158, 11, 0.12), transparent 34%),
      rgba(6, 18, 36, 0.84) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.dark .night-forest-app .home-mobile-quote {
    background: rgba(13, 30, 51, 0.78) !important;
    border-color: rgba(191, 219, 254, 0.14) !important;
  }
}

@media (min-width: 921px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .night-forest-motion-enabled .night-forest-scene {
    animation: night-forest-breathe 28s ease-in-out infinite alternate;
    will-change: transform;
  }

  .night-forest-motion-enabled .night-forest-leaves {
    animation: night-forest-leaf-sway 8.5s ease-in-out infinite alternate;
    will-change: transform;
  }

  .night-forest-motion-enabled .night-forest-stars {
    animation: night-forest-star-pulse 5.5s ease-in-out infinite alternate;
  }

  .night-forest-motion-enabled .night-forest-fire-glow {
    animation: night-forest-fire-pulse 3.2s ease-in-out infinite alternate;
  }
}

@keyframes night-forest-breathe {
  from { transform: scale(1.015) translate3d(-0.25%, 0, 0); }
  to { transform: scale(1.035) translate3d(0.35%, -0.2%, 0); }
}

@keyframes night-forest-leaf-sway {
  from { transform: rotate(-0.35deg) translate3d(-0.15%, 0, 0); }
  to { transform: rotate(0.55deg) translate3d(0.2%, 0.15%, 0); }
}

@keyframes night-forest-star-pulse {
  from { opacity: 0.20; }
  to { opacity: 0.42; }
}

@keyframes night-forest-fire-pulse {
  0% { opacity: 0.18; transform: scale(0.94); }
  45% { opacity: 0.29; transform: scale(1.04); }
  100% { opacity: 0.22; transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .night-forest-visuals * {
    animation: none !important;
    transition: none !important;
  }
}