/* === Glass-morphism Utility Classes === */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--glass-inner-glow);
}
.glass-deep {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-deep));
  -webkit-backdrop-filter: blur(var(--glass-blur-deep));
  border: 1px solid var(--glass-border-bright);
  box-shadow: var(--shadow-elevated), var(--glass-inner-glow);
}
.glass-shallow {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-shallow));
  -webkit-backdrop-filter: blur(var(--glass-blur-shallow));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}
.glass:hover, .glass-shallow:hover {
  border-color: var(--glass-border-bright);
  box-shadow: var(--shadow-card-hover), var(--glass-inner-glow);
}

/* Noise texture overlay */
.noise-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/static/images/noise.png');
  background-repeat: repeat;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Ambient light effect */
.ambient-light::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--ambient-accent), var(--ambient-blue);
  pointer-events: none;
  z-index: 0;
}

/* Hero background image system */
.hero-bg { position: relative; overflow: hidden; }
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(0.8);
  z-index: -2;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13,17,23,0.2) 0%,
    rgba(13,17,23,0.5) 50%,
    var(--bg-deep) 100%
  );
  z-index: -1;
}
:root[data-theme="light"] .hero-bg::before {
  filter: brightness(0.6) saturate(0.6);
}
:root[data-theme="light"] .hero-bg::after {
  background: linear-gradient(180deg,
    rgba(245,246,250,0.3) 0%,
    rgba(245,246,250,0.7) 50%,
    var(--bg-deep) 100%
  );
}

/* Auth page full-bleed background */
.auth-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 24px;
}
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--auth-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(0.3) saturate(0.7) blur(2px);
  z-index: -2;
}
.auth-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(13,17,23,0.4) 0%, rgba(13,17,23,0.85) 100%);
  z-index: -1;
}
:root[data-theme="light"] .auth-page::before {
  filter: brightness(0.65) saturate(0.5) blur(2px);
}
:root[data-theme="light"] .auth-page::after {
  background: radial-gradient(ellipse at center, rgba(245,246,250,0.5) 0%, rgba(245,246,250,0.92) 100%);
}

/* Animated gradient mesh */
@keyframes meshShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Button glow — all primary action buttons */
.add-task-btn,
.add-habit-btn,
.auth-submit,
.modal-confirm,
.landing-cta-primary {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.add-task-btn::after,
.add-habit-btn::after,
.auth-submit::after,
.modal-confirm::after,
.landing-cta-primary::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  opacity: 0;
  z-index: -1;
  filter: blur(14px);
  transition: opacity 0.3s;
  pointer-events: none;
}
.add-task-btn:hover::after,
.add-habit-btn:hover::after,
.auth-submit:hover::after,
.modal-confirm:hover::after,
.landing-cta-primary:hover::after {
  opacity: 0.45;
}

/* Responsive performance */
@media (max-width: 768px) {
  :root {
    --glass-blur: 12px;
    --glass-blur-deep: 20px;
    --glass-blur-shallow: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glass, .glass-deep, .glass-shallow {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}