/*
 * Glass Effects — Backdrop Filter Declarations
 *
 * Lightning CSS (Tailwind v4) strips backdrop-filter from globals.css during compilation.
 * This file is served from /public/ to bypass PostCSS/Lightning CSS processing entirely.
 * Only backdrop-filter declarations live here; backgrounds, borders, shadows stay in globals.css.
 */

/* ─── Light Glass Cards ──────────────────────────────── */
.glass-card {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.glass-card-frosted {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.glass-card-v2 {
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}

/* V8: light cards are near-opaque — no blur needed */
.glass-card-v3 {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-ultra {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
}

.glass-card-frosted:hover {
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
}

/* ─── Dark Glass Cards ───────────────────────────────── */
.glass-dark {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.glass-dark-strong {
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
}

.glass-dark-premium {
  backdrop-filter: blur(40px) saturate(240%);
  -webkit-backdrop-filter: blur(40px) saturate(240%);
}

/* ─── Auth Glass Cards ───────────────────────────────── */
.glass-auth-card {
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}

.glass-auth-ultra {
  backdrop-filter: blur(48px) saturate(250%);
  -webkit-backdrop-filter: blur(48px) saturate(250%);
}

/* ─── Navbar Glass ───────────────────────────────────── */
.glass-navbar {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ─── Glass Inner Elements ───────────────────────────── */
.glass-auth-inner {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.glass-auth-ultra-inner {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Shimmer & Animation Effects ────────────────────── */
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
}

.animate-shimmer-premium {
  background: linear-gradient(90deg, transparent 0%, rgba(253, 172, 83, 0.08) 25%, rgba(253, 172, 83, 0.15) 50%, rgba(253, 172, 83, 0.08) 75%, transparent 100%);
  background-size: 200% 100%;
}

.btn-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.glass-light-sweep::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* ─── Animated Gradient Border ────────────────────────── */
.animated-border-glow::before {
  background: conic-gradient(
    from 0deg,
    rgba(253, 172, 83, 0.4),
    rgba(253, 172, 83, 0.1),
    rgba(44, 140, 153, 0.3),
    rgba(253, 172, 83, 0.1),
    rgba(253, 172, 83, 0.4)
  );
}

/* ─── Icon Glow Effects ──────────────────────────────── */
.icon-glow-ring::after {
  background: radial-gradient(circle, rgba(253, 172, 83, 0.2), transparent 70%);
}

/* ─── Card Inner Glow ────────────────────────────────── */
.card-inner-glow::after {
  background: radial-gradient(circle at 30% 30%, rgba(253, 172, 83, 0.08) 0%, transparent 50%);
}