/* ==========================================================================
   BWEB DIGITAL STUDIO — SHIMMERING IMPERIAL GOLD EFFECTS & GLASSMORPHISM
   ========================================================================== */

/* Glassmorphism Classes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.08), inset 0 1px 0 rgba(255, 240, 160, 0.15);
}

.glass-card {
  background: rgba(26, 20, 10, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 160, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 215, 0, 0.28);
}

/* Film Grain & Golden Glitter Shimmer Overlay */
#grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background: 
    radial-gradient(2px 2px at 20px 30px, #ffd700, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, #ffe57f, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ffd700, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* Interactive Golden Spotlight */
.spotlight {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.16) 0%, rgba(245, 158, 11, 0.08) 35%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

/* Gradient Text — Polished Platinum to Radiant Imperial Gold */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 15%, #ffd700 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #fff7cc 0%, #ffd700 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow Hover */
.glow-hover {
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.glow-hover:hover {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.35);
}

/* Aurora Canvas Container */
#aurora-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}