/* ============================================================
   AETHERIA LUXURY GLASSMORPHISM DESIGN SYSTEM
   Version: 4.8 | © 2026 Aetheria Digital Ltd.
   ============================================================ */

/* ── Custom Properties / Design Tokens ────────────────────── */
:root {
  --obsidian:         #0A0A0E;
  --accent-color:     #00F0FF;
  --accent-glow:      rgba(0, 240, 255, 0.35);
  --border-glow:      rgba(0, 240, 255, 0.25);
  --accent-gold:      #FFD700;
  --accent-purple:    #A855F7;
  --wa-green:         #25D366;
  --font-serif:       'Playfair Display', serif;
  --font-sans:        'Plus Jakarta Sans', sans-serif;
}

/* ── Custom Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0E; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* ── Glassmorphism Core Components ────────────────────────── */
.glass-panel {
  background:          rgba(18, 18, 26, 0.55);
  backdrop-filter:     blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:              1px solid rgba(255, 255, 255, 0.10);
  box-shadow:          0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card {
  background:          rgba(255, 255, 255, 0.03);
  backdrop-filter:     blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:              1px solid rgba(255, 255, 255, 0.08);
  transition:          all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background:          rgba(255, 255, 255, 0.07);
  border-color:        var(--border-glow);
  transform:           translateY(-6px);
  box-shadow:          0 20px 40px -15px var(--accent-glow);
}

.glass-nav {
  background:          rgba(10, 10, 14, 0.75);
  backdrop-filter:     blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:       1px solid rgba(255, 255, 255, 0.08);
}

.glass-button {
  background:   linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  border:       1px solid rgba(255, 255, 255, 0.18);
  transition:   all 0.3s ease;
}

.glass-button:hover {
  border-color: var(--accent-color);
  box-shadow:   0 0 20px var(--accent-glow);
  color:        #ffffff;
}

/* ── Theme Utility Classes ─────────────────────────────────── */
.theme-accent-text   { color:             var(--accent-color); }
.theme-accent-bg     { background-color:  var(--accent-color); }
.theme-accent-border { border-color:      var(--accent-color); }

/* ── Ambient Orbs ──────────────────────────────────────────── */
.ambient-orb {
  position:       fixed;
  border-radius:  50%;
  pointer-events: none;
  z-index:        0;
}
.orb-1 {
  top: -10%; left: -10%;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}
.orb-2 {
  bottom: -15%; right: -10%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(168,85,247,.2) 0%, transparent 70%);
}
.orb-3 {
  top: 40%; right: 25%;
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, rgba(255,215,0,.12) 0%, transparent 70%);
}

/* ── Text Gradient Utilities ───────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #FFF 30%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #FFF 20%, #FFD700 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Keyframe Animations ───────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes glow {
  0%   { opacity: .4; filter: blur(20px); }
  100% { opacity: .8; filter: blur(35px); }
}
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-glow       { animation: glow 3s ease-in-out infinite alternate; }
.animate-pulse-slow { animation: pulse 4s cubic-bezier(.4,0,.6,1) infinite; }
