/* ==========================================================================
   STYLE: RZ PEDIA Portfolio
   Obsidian Velvet & Champagne Metallic Glassmorphism
   ========================================================================== */
:root {
  --gold-primary: #D4AD5B;
  --gold-glow: rgba(212, 173, 91, 0.22);
  --bg-dark: #030406;
}

body {
  background-color: var(--bg-dark);
}

/* Background Blueprint Grid */
.luxury-bg-grid {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}

/* Luxury Glassmorphism Card */
.luxury-card {
  background: rgba(12, 15, 21, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
  border-color: rgba(212, 173, 91, 0.35);
  box-shadow: 0 16px 40px -15px rgba(212, 173, 91, 0.15);
  transform: translateY(-3px);
}

/* Luxury Action Buttons */
.luxury-gold-button {
  background: linear-gradient(135deg, #F5EBD7 0%, #D4AD5B 50%, #8C6826 100%);
  box-shadow: 0 4px 20px rgba(212, 173, 91, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
}

.luxury-gold-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(212, 173, 91, 0.4);
  filter: brightness(1.06);
}

.luxury-glass-button {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.luxury-glass-button:hover {
  border-color: rgba(212, 173, 91, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

/* Gold Gradient Typography */
.text-gradient-gold {
  background: linear-gradient(135deg, #FFFFFF 15%, #F5EBD7 45%, #D4AD5B 75%, #8C6826 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cursor Glow */
#cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 173, 91, 0.065) 0%, rgba(212, 173, 91, 0.015) 45%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Filter Tab States */
.filter-btn {
  color: #94A3B8;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
}

.filter-btn:hover {
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.15);
}

.filter-btn.active {
  background: #D4AD5B;
  color: #07090D;
  font-weight: 700;
  border-color: #D4AD5B;
  box-shadow: 0 0 16px rgba(212, 173, 91, 0.3);
}

/* Form Inputs */
.luxury-input {
  background-color: rgba(7, 9, 13, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
  transition: all 0.25s ease;
}

.luxury-input:focus {
  outline: none;
  border-color: #D4AD5B;
  box-shadow: 0 0 0 1px #D4AD5B;
  background-color: rgba(12, 15, 21, 0.95);
}

/* Ambient Radial Lights */
.radial-spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  animation: pulseLight 12s ease-in-out infinite alternate;
}

@keyframes pulseLight {
  0% { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1.08); opacity: 0.75; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #030406;
}
::-webkit-scrollbar-thumb {
  background: #1D2230;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4AD5B;
}