/**
 * MIGESTI OS — Atmospheric CSS (Phase 106B)
 * Cloud layers, rain/snow effects, golden hour overlay.
 * Pure CSS — no images, no canvas overhead.
 *
 * Architect: Matthew F. Inglima — MIGESTI OS
 * CONFIDENTIAL — All Rights Reserved
 */

/* ═══════════════════════════════════════════════════════════════
   CLOUD LAYER — procedural CSS clouds
   Density, size, and movement match actual cloud cover.
   ═══════════════════════════════════════════════════════════════ */

.cloud-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease;
  overflow: hidden;
}

body.weather-partly-cloudy .cloud-layer { opacity: 0.4; }
body.weather-overcast .cloud-layer      { opacity: 0.85; }
body.weather-rain .cloud-layer          { opacity: 0.95; }
body.weather-storm .cloud-layer         { opacity: 1.0; }

/* Individual cloud blobs — procedurally positioned by JS */
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  animation: cloud-drift linear infinite;
}

/* Cloud colors per theme */
[data-theme="sunrise"] .cloud { background: rgba(255, 220, 180, 0.6); }
[data-theme="day"] .cloud     { background: rgba(255, 255, 255, 0.7); }
[data-theme="sunset"] .cloud  { background: rgba(180, 80, 30, 0.5); }
[data-theme="night"] .cloud   { background: rgba(20, 25, 60, 0.6); }

/* Overcast — flat grey ceiling in day theme */
body.weather-overcast[data-theme="day"] .cloud-layer,
body.weather-overcast .cloud-layer {
  background: linear-gradient(
    180deg,
    rgba(180, 185, 195, 0.5) 0%,
    rgba(200, 205, 215, 0.3) 100%
  );
}

@keyframes cloud-drift {
  from { transform: translateX(-10%); }
  to   { transform: translateX(110%); }
}


/* ═══════════════════════════════════════════════════════════════
   RAIN EFFECT — CSS repeating gradient
   ═══════════════════════════════════════════════════════════════ */

.rain-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background-image: repeating-linear-gradient(
    transparent 0px,
    transparent 4px,
    rgba(174, 194, 224, 0.15) 4px,
    rgba(174, 194, 224, 0.15) 5px
  );
  background-size: 3px 8px;
  animation: rain-fall 0.3s linear infinite;
  display: none;
}

body.weather-rain .rain-layer {
  display: block;
  opacity: 0.6;
}

body.weather-storm .rain-layer {
  display: block;
  opacity: 0.9;
  animation-duration: 0.15s;
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 8px; }
}


/* ═══════════════════════════════════════════════════════════════
   SNOW EFFECT — radial-gradient dots
   ═══════════════════════════════════════════════════════════════ */

.snow-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: none;
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(3px 3px at 60% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.5), transparent);
  background-size: 200px 200px, 150px 150px, 180px 180px, 160px 160px;
}

body.weather-snow .snow-layer {
  display: block;
  animation: snow-fall 8s linear infinite;
}

@keyframes snow-fall {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 5px 200px, -3px 150px, 4px 180px, -2px 160px; }
}


/* ═══════════════════════════════════════════════════════════════
   GOLDEN HOUR OVERLAY — warm atmospheric glow
   ═══════════════════════════════════════════════════════════════ */

.golden-hour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: var(--golden-hour-warmth, transparent);
  transition: background 60s ease;
}

/* Panel warmth during golden hour */
body.golden-hour [class*="-panel"],
body.golden-hour [class*="-card"],
body.golden-hour .mig-card,
body.golden-hour .mig-panel,
body.golden-hour .crystal-panel {
  box-shadow: 0 0 30px rgba(255, 180, 50, calc(var(--golden-hour-intensity, 0) * 0.12));
  border-color: rgba(255, 180, 50, calc(var(--golden-hour-intensity, 0) * 0.15));
  transition: box-shadow 2s ease, border-color 2s ease;
}


/* ═══════════════════════════════════════════════════════════════
   Z-INDEX STACK — sky behind everything
   ═══════════════════════════════════════════════════════════════ */

/* Layer 0 — sky canvas */
body > canvas,
#mig-galaxy-canvas,
#mig-star-canvas,
.mig-star-canvas,
.atmospheric-bg {
  z-index: 0 !important;
  position: fixed;
}

/* Layer 1 — weather effects */
.cloud-layer,
.rain-layer,
.snow-layer,
.golden-hour-overlay {
  z-index: 1 !important;
}

/* Layer 2 — content panels */
.mig-app,
.mig-sidebar,
.mig-workspace-shell__content,
[class*="-panel"],
[class*="-card"] {
  position: relative;
  z-index: 2;
}

/* Layer 100 — navigation */
nav,
.mig-sidebar,
.mig-topbar,
.mig-nav,
#mig-back-bar {
  z-index: 100 !important;
  position: relative;
}

/* Layer 1000 — overlays */
.modal,
.mig-modal,
.crystal-modal,
.vault-modal,
.drawer,
.dropdown-menu,
.dropdown-content {
  z-index: 1000 !important;
}


/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC TRANSITION — smooth 2s crossfade
   ═══════════════════════════════════════════════════════════════ */

body {
  transition: background 2s ease;
}

html {
  transition: color 2s ease;
}

[class*="-panel"],
[class*="-card"],
nav,
.mig-sidebar,
input, textarea, select {
  transition: background 2s ease, color 2s ease, border-color 2s ease, box-shadow 2s ease;
}