/* ============================================================
   G-LINK — ENHANCED PREMIUM EFFECTS
   Luxury Dark Gold — Particle Effects & Hero Enhancements
   Additional layer for premium animations and effects
   ============================================================ */

/* ── Particle Background Effects ──────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

/* Floating orbs for hero sections */
.hero-section::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 15%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(212,168,67,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: 60%;
  right: 20%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(212,168,67,0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: float2 8s ease-in-out infinite 2s;
  pointer-events: none;
}

.hero-section .container::before {
  content: '';
  position: absolute;
  top: 40%;
  right: 10%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float3 7s ease-in-out infinite 1s;
  pointer-events: none;
}

/* ── Enhanced Gold Vault Effects ─────────────────────────── */
.vault-card {
  position: relative;
  overflow: hidden;
}

.vault-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(212,168,67,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: rotate 20s linear infinite;
}

.vault-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #D4A843, #F0C866, #D4A843, transparent);
  opacity: 0.6;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Gold Amount Text Effects ─────────────────────────────── */
.gold-amount {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #F0C866 0%, #D4A843 30%, #E8B84B 70%, #F0C866 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldAmountGlow 4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(212,168,67,0.3);
}

@keyframes goldAmountGlow {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(212,168,67,0.2)); }
  50%      { background-position: 100% 50%; filter: drop-shadow(0 0 15px rgba(212,168,67,0.5)); }
}

/* ── Enhanced Card Hover Effects ──────────────────────────── */
.card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 40px rgba(212,168,67,0.2), 0 8px 32px rgba(0,0,0,0.4);
}

.vault-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 0 60px rgba(212,168,67,0.25), 0 12px 48px rgba(0,0,0,0.5);
}

/* ── Button Enhanced Effects ──────────────────────────────── */
.btn-primary, .btn-gold {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.pay-blessing-btn {
  position: relative;
}

.pay-blessing-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.pay-blessing-btn:hover::after {
  opacity: 1;
}

/* ── Enhanced Input Focus Effects ─────────────────────────── */
input:focus, select:focus, textarea:focus {
  position: relative;
}

input:focus::before, select:focus::before, textarea:focus::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(212,168,67,0.3), rgba(212,168,67,0.1));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  animation: inputGlow 0.3s ease-out forwards;
}

@keyframes inputGlow {
  to {
    opacity: 1;
    inset: -1px;
  }
}

/* ── Loading Animation Enhancement ────────────────────────── */
.loading::before {
  animation: spin 0.8s linear infinite, pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── Enhanced Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #A07828 0%, #D4A843 50%, #A07828 100%);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #B8842A 0%, #E8B84B 50%, #B8842A 100%);
}

/* ── Enhanced Selection ───────────────────────────────────── */
::selection {
  background: linear-gradient(135deg, rgba(212,168,67,0.3), rgba(212,168,67,0.1));
  color: #F0C866;
  text-shadow: 0 0 8px rgba(212,168,67,0.4);
}

/* ── Enhanced Navigation Effects ──────────────────────────── */
nav::after {
  background: linear-gradient(90deg, transparent, #D4A843, #F0C866, #D4A843, transparent);
  background-size: 200% 100%;
  animation: navGlow 4s ease-in-out infinite;
}

@keyframes navGlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Enhanced Modal Effects ──────────────────────────────── */
.modal-content {
  background: linear-gradient(145deg, rgba(26,23,16,0.95), rgba(30,27,21,0.95));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(212,168,67,0.3);
  box-shadow: 0 0 80px rgba(212,168,67,0.3), 0 20px 60px rgba(0,0,0,0.6);
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4A843, #F0C866, #D4A843, transparent);
  opacity: 0.8;
}

/* ── Enhanced Hero Text Effects ───────────────────────────── */
.hero-title span {
  position: relative;
  display: inline-block;
}

.hero-title span::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(212,168,67,0.3), rgba(212,168,67,0.1));
  border-radius: 4px;
  z-index: -1;
  opacity: 0;
  animation: heroGlow 4s ease-in-out infinite;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.02); }
}

/* ── Enhanced Blessing Card Effects ───────────────────────── */
.blessing-card {
  background: linear-gradient(145deg, rgba(26,23,16,0.9), rgba(30,27,21,0.9));
  border: 1px solid rgba(212,168,67,0.15);
}

.blessing-card:hover {
  border-color: rgba(212,168,67,0.4);
  box-shadow: 0 0 40px rgba(212,168,67,0.25), 0 8px 32px rgba(0,0,0,0.5);
  transform: translateY(-4px) scale(1.005);
}

.blessing-card::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, rgba(212,168,67,0.1), transparent, rgba(212,168,67,0.05));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}

.blessing-card:hover::before {
  opacity: 1;
}

/* ── Enhanced Amount Selection ────────────────────────────── */
.amount-btn.selected {
  position: relative;
  overflow: hidden;
}

.amount-btn.selected::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,168,67,0.2), rgba(212,168,67,0.1));
  animation: selectedPulse 2s ease-in-out infinite;
}

@keyframes selectedPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

/* ── Enhanced Transaction Items ───────────────────────────── */
.transaction-item:hover {
  background: linear-gradient(135deg, rgba(212,168,67,0.03), rgba(212,168,67,0.01));
  transform: translateX(4px);
}

/* ── Enhanced Footer Effects ─────────────────────────────── */
footer::before {
  background: linear-gradient(90deg, transparent, #D4A843, #F0C866, #D4A843, transparent);
  background-size: 200% 100%;
  animation: footerGlow 6s ease-in-out infinite;
}

@keyframes footerGlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Enhanced Auth Card Effects ──────────────────────────── */
.auth-card::before {
  background: linear-gradient(90deg, #A07828, #F0C866, #D4A843, #F0C866, #A07828);
  background-size: 300% 100%;
  animation: authGlow 5s ease-in-out infinite;
}

@keyframes authGlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Enhanced Feature Cards ──────────────────────────────── */
.feature-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 50px rgba(212,168,67,0.3), 0 12px 40px rgba(0,0,0,0.6);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, rgba(212,168,67,0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card:hover::before {
  opacity: 1;
}

/* ── Enhanced Badge Effects ──────────────────────────────── */
.badge-gold, .tag-gold {
  position: relative;
  overflow: hidden;
}

.badge-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,168,67,0.3), rgba(212,168,67,0.1));
  opacity: 0;
  transition: opacity 0.3s;
}

.badge-gold:hover::before {
  opacity: 1;
}

/* ── Enhanced Responsive Effects ─────────────────────────── */
@media (max-width: 768px) {
  .hero-section::before,
  .hero-section::after,
  .hero-section .container::before {
    display: none;
  }

  .vault-card::before {
    width: 150px;
    height: 150px;
    top: -40px;
    right: -40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Dark Mode Optimizations ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --gold-primary: #E8B84B;
    --gold-light: #F7E8BC;
    --gold-deep: #B8842A;
  }
}

/* ── High Contrast Mode ──────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --gold-primary: #FFD700;
    --gold-light: #FFFFE0;
    --gold-deep: #DAA520;
    --text-primary: #FFFFFF;
    --bg-card: #1A1A1A;
  }
}

/* ── Performance Optimizations ───────────────────────────── */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Apply GPU acceleration to animated elements */
.card, .btn, .vault-card, .blessing-card,
.hero-section, .modal-content {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Accessibility Enhancements ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-section::after,
  .vault-card::before,
  .gold-amount,
  nav::after {
    animation: none;
  }
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* ── Print Styles ────────────────────────────────────────── */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: white !important;
  }

  .hero-section::before,
  .hero-section::after,
  .vault-card::before,
  .vault-card::after {
    display: none !important;
  }
}