/* ═══════════════════════════════════════════════════
   AMBIENT THEME ENGINE — Dynamic Environmental Styling
   ═══════════════════════════════════════════════════ */

:root {
  /* Default/Neutral Ambient Values */
  --ambient-glow: transparent;
  --ambient-overlay: transparent;
  --ambient-accent: var(--orange, #e8851e);
  --ambient-intensity: 0;
  --ambient-warmth: 0;
  --ambient-vignette: transparent;
  --ambient-grid-color: rgba(0, 212, 255, 0.012);
  --ambient-noise-opacity: 0.03;
  --ambient-card-glow: rgba(232, 133, 30, 0.2);
  --ambient-transition: 1.5s;
}

/* ─────────────────────────────────────────────────
   TIME PERIODS: morning (6-10), day (10-16),
   evening (16-20), night (20-6)
   ───────────────────────────────────────────────── */

body[data-time="morning"] {
  --ambient-intensity: 0.6;
  --ambient-warmth: 0.8;
  --ambient-glow: radial-gradient(ellipse at 80% 20%, rgba(255, 180, 80, 0.04) 0%, transparent 60%);
  --ambient-overlay: linear-gradient(180deg, rgba(255, 160, 60, 0.015) 0%, transparent 40%);
  --ambient-accent: #e8a040;
  --ambient-grid-color: rgba(255, 180, 100, 0.008);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
}

body[data-time="day"] {
  --ambient-intensity: 1;
  --ambient-warmth: 0.5;
  --ambient-glow: none;
  --ambient-overlay: none;
  --ambient-accent: var(--orange, #e8851e);
  --ambient-grid-color: rgba(0, 212, 255, 0.012);
  --ambient-vignette: none;
}

body[data-time="evening"] {
  --ambient-intensity: 0.7;
  --ambient-warmth: 0.9;
  --ambient-glow: radial-gradient(ellipse at 30% 80%, rgba(232, 133, 30, 0.06) 0%, transparent 50%),
                  radial-gradient(ellipse at 70% 20%, rgba(232, 133, 30, 0.03) 0%, transparent 50%);
  --ambient-overlay: linear-gradient(0deg, rgba(200, 120, 40, 0.02) 0%, transparent 50%);
  --ambient-accent: #d4782a;
  --ambient-grid-color: rgba(200, 140, 60, 0.008);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(10, 5, 0, 0.25) 100%);
  --ambient-card-glow: rgba(200, 120, 40, 0.15);
  --ambient-noise-opacity: 0.04;
}

body[data-time="night"] {
  --ambient-intensity: 0.3;
  --ambient-warmth: -0.5;
  --ambient-glow: radial-gradient(ellipse at 50% 50%, rgba(40, 60, 120, 0.04) 0%, transparent 60%);
  --ambient-overlay: linear-gradient(180deg, rgba(20, 30, 80, 0.02) 0%, transparent 30%);
  --ambient-accent: #7a9ccc;
  --ambient-grid-color: rgba(60, 80, 160, 0.006);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 5, 0.35) 100%);
  --ambient-card-glow: rgba(60, 80, 160, 0.12);
  --ambient-noise-opacity: 0.05;
}

/* ─────────────────────────────────────────────────
   WEATHER OVERLAY STATES
   ───────────────────────────────────────────────── */

body[data-weather="rain"] {
  --ambient-overlay: linear-gradient(180deg, rgba(40, 60, 100, 0.03) 0%, rgba(20, 40, 80, 0.02) 100%);
  --ambient-intensity: 0.6;
  --ambient-accent: #6a9cc8;
  --ambient-grid-color: rgba(80, 120, 180, 0.008);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 30%, rgba(0, 5, 20, 0.3) 100%);
}

body[data-weather="storm"] {
  --ambient-overlay: linear-gradient(180deg, rgba(30, 20, 50, 0.04) 0%, rgba(20, 15, 40, 0.03) 100%);
  --ambient-intensity: 0.4;
  --ambient-accent: #9080d0;
  --ambient-grid-color: rgba(100, 80, 180, 0.01);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 10, 0.4) 100%);
}

body[data-weather="snow"] {
  --ambient-overlay: linear-gradient(180deg, rgba(180, 200, 230, 0.02) 0%, transparent 60%);
  --ambient-intensity: 0.5;
  --ambient-accent: #8ab0d4;
  --ambient-grid-color: rgba(140, 180, 220, 0.008);
  --ambient-vignette: radial-gradient(ellipse at center, transparent 35%, rgba(100, 120, 150, 0.15) 100%);
}

body[data-weather="cloudy"] {
  --ambient-overlay: linear-gradient(180deg, rgba(100, 110, 130, 0.02) 0%, transparent 50%);
  --ambient-intensity: 0.7;
  --ambient-accent: #a0a8b8;
  --ambient-grid-color: rgba(120, 140, 160, 0.008);
}

body[data-weather="fog"] {
  --ambient-overlay: linear-gradient(180deg, rgba(140, 150, 160, 0.03) 0%, rgba(120, 130, 140, 0.02) 100%);
  --ambient-accent: #8090a0;
  --ambient-noise-opacity: 0.06;
  --ambient-intensity: 0.4;
}

body[data-weather="clear"] {
  --ambient-overlay: none;
  --ambient-intensity: 1;
}

/* ─────────────────────────────────────────────────
   SEASONAL ACCENTS
   ───────────────────────────────────────────────── */

body[data-season="spring"] {
  --ambient-glow: radial-gradient(ellipse at 60% 70%, rgba(100, 200, 120, 0.03) 0%, transparent 50%);
}

body[data-season="summer"] {
  --ambient-glow: radial-gradient(ellipse at 70% 30%, rgba(255, 200, 60, 0.04) 0%, transparent 50%);
}

body[data-season="autumn"] {
  --ambient-glow: radial-gradient(ellipse at 40% 60%, rgba(200, 100, 30, 0.04) 0%, transparent 50%);
  --ambient-accent: #c87830;
}

body[data-season="winter"] {
  --ambient-glow: radial-gradient(ellipse at 50% 40%, rgba(100, 140, 200, 0.03) 0%, transparent 50%);
  --ambient-accent: #7aa0cc;
}

/* ─────────────────────────────────────────────────
   SMOOTH TRANSITIONS (1.5s)
   ───────────────────────────────────────────────── */

body {
  transition: background var(--ambient-transition) ease,
              color var(--ambient-transition) ease;
}

/* Ambient Glow Layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--ambient-glow);
  pointer-events: none;
  z-index: 1;
  transition: background 2s ease;
  opacity: 1;
}

/* Ambient Overlay Layer */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--ambient-overlay);
  pointer-events: none;
  z-index: 0;
  transition: background 2s ease;
}

/* Vignette Layer */
.ambient-vignette {
  position: fixed;
  inset: 0;
  background: var(--ambient-vignette);
  pointer-events: none;
  z-index: 2;
  transition: background 2s ease;
}

/* Grid Pattern */
.ambient-grid {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(var(--ambient-grid-color) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ambient-grid-color) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: var(--ambient-noise-opacity);
  transition: opacity var(--ambient-transition);
}

/* Noise Pattern */
.ambient-noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='400' height='400' fill='%23000000' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: var(--ambient-noise-opacity);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--ambient-transition);
}

/* Content layers should appear above ambient effects */
.main-content,
main,
.container,
.page-wrapper {
  position: relative;
  z-index: 10;
}

/* Accent Color Transitions */
.ambient-accent-color {
  color: var(--ambient-accent);
  transition: color var(--ambient-transition);
}

.ambient-accent-border {
  border-color: var(--ambient-accent);
  transition: border-color var(--ambient-transition);
}

.ambient-accent-bg {
  background-color: var(--ambient-accent);
  transition: background-color var(--ambient-transition);
}

/* Card Glow Effect */
.ambient-card {
  box-shadow: 0 0 0 1px var(--ambient-card-glow);
  transition: box-shadow var(--ambient-transition);
}

.ambient-card:hover {
  box-shadow: 0 0 12px var(--ambient-card-glow);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 900px) {
  :root {
    --ambient-transition: 1.2s;
  }
}

@media (max-width: 600px) {
  :root {
    --ambient-transition: 1s;
  }

  .ambient-noise-opacity {
    --ambient-noise-opacity: 0.02;
  }
}