/* ============================================================
   GRADIENT MESH BACKGROUNDS — Premium Luxury (Stripe-inspired)
   Animated radial gradients with blur for depth and atmosphere
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. HERO BANNER GRADIENT MESH
   ══════════════════════════════════════════════════════════ */

.hero-banner {
  position: relative;
  isolation: isolate;
}

.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(79, 142, 247, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(240, 180, 41, 0.10) 0%, transparent 60%);
  filter: blur(80px);
  opacity: 0.7;
  animation: mesh-move-hero 25s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes mesh-move-hero {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(40px, -30px) scale(1.1) rotate(5deg);
  }
  50% {
    transform: translate(-30px, 40px) scale(0.95) rotate(-3deg);
  }
  75% {
    transform: translate(30px, 20px) scale(1.05) rotate(4deg);
  }
}

/* ══════════════════════════════════════════════════════════
   2. MODAL BACKGROUND GLOW
   ══════════════════════════════════════════════════════════ */

.modal {
  position: relative;
  isolation: isolate;
}

.modal::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(79, 142, 247, 0.25) 0%,
    rgba(139, 92, 246, 0.15) 40%,
    transparent 70%
  );
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  animation: modal-glow 8s ease-in-out infinite;
}

@keyframes modal-glow {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.2);
  }
}

/* ══════════════════════════════════════════════════════════
   3. PAYMENT MODAL PREMIUM GLOW
   ══════════════════════════════════════════════════════════ */

.paywall-overlay .modal::before {
  background: radial-gradient(
    circle,
    rgba(240, 180, 41, 0.20) 0%,
    rgba(79, 142, 247, 0.15) 40%,
    transparent 70%
  );
}

/* Gold shimmer effect on payment modal */
.paywall-overlay .modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(240, 180, 41, 0.1) 50%,
    transparent 100%
  );
  animation: shimmer-slide 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes shimmer-slide {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

/* ══════════════════════════════════════════════════════════
   4. PACKAGES GRID AMBIENT GLOW
   ══════════════════════════════════════════════════════════ */

.packages-grid {
  position: relative;
  isolation: isolate;
}

.packages-grid::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(79, 142, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(240, 180, 41, 0.10) 0%, transparent 50%);
  filter: blur(60px);
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
  animation: packages-glow 15s ease-in-out infinite;
}

@keyframes packages-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   5. ADMIN DASHBOARD SUBTLE MESH
   ══════════════════════════════════════════════════════════ */

.admin-body {
  position: relative;
}

.admin-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(79, 142, 247, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(240, 180, 41, 0.05) 0%, transparent 50%);
  filter: blur(100px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  animation: admin-mesh 30s ease-in-out infinite;
}

@keyframes admin-mesh {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(20px, -30px);
  }
  66% {
    transform: translate(-30px, 20px);
  }
}

/* ══════════════════════════════════════════════════════════
   6. CATEGORY TABS GLOW BAR
   ══════════════════════════════════════════════════════════ */

.cat-tabs-wrap {
  position: relative;
}

.cat-tabs-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 142, 247, 0.3) 20%,
    rgba(139, 92, 246, 0.3) 50%,
    rgba(79, 142, 247, 0.3) 80%,
    transparent 100%
  );
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

/* ══════════════════════════════════════════════════════════
   7. MOVIE CARDS HOVER GLOW
   ══════════════════════════════════════════════════════════ */

.poster-card {
  position: relative;
}

.poster-card::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle at center,
    rgba(79, 142, 247, 0.2) 0%,
    transparent 70%
  );
  filter: blur(30px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

.poster-card:hover::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   8. BUTTON GRADIENT GLOW (Premium buttons)
   ══════════════════════════════════════════════════════════ */

.btn-primary,
.btn-danger {
  position: relative;
  overflow: visible;
}

.btn-primary::before,
.btn-danger::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  border-radius: inherit;
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-primary:hover::before,
.btn-danger:hover::before {
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════
   9. STAT CARDS GRADIENT ACCENTS
   ══════════════════════════════════════════════════════════ */

.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(79, 142, 247, 0.08) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.stat-card:hover::before {
  opacity: 1;
  transform: translate(-25%, -25%);
}

/* Color variants */
.stat-card.s-cyan::before {
  background: radial-gradient(circle, rgba(79, 142, 247, 0.12) 0%, transparent 50%);
}

.stat-card.s-green::before {
  background: radial-gradient(circle, rgba(6, 214, 160, 0.10) 0%, transparent 50%);
}

.stat-card.s-gold::before {
  background: radial-gradient(circle, rgba(240, 180, 41, 0.12) 0%, transparent 50%);
}

.stat-card.s-red::before {
  background: radial-gradient(circle, rgba(232, 52, 74, 0.10) 0%, transparent 50%);
}

/* ══════════════════════════════════════════════════════════
   10. PAGE BACKGROUND MESH (Root level)
   ══════════════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 10% 10%, rgba(79, 142, 247, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 90%, rgba(139, 92, 246, 0.04) 0%, transparent 40%);
  filter: blur(120px);
  opacity: 0.6;
  z-index: -999;
  pointer-events: none;
  animation: body-mesh 40s ease-in-out infinite alternate;
}

@keyframes body-mesh {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(30px, 30px) rotate(5deg);
  }
}

/* ══════════════════════════════════════════════════════════
   11. LOADING SPINNER GLOW
   ══════════════════════════════════════════════════════════ */

.spinner {
  position: relative;
}

.spinner::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    circle,
    rgba(79, 142, 247, 0.3) 0%,
    transparent 70%
  );
  filter: blur(20px);
  animation: spinner-glow 1.5s ease-in-out infinite;
}

@keyframes spinner-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* ══════════════════════════════════════════════════════════
   12. TRANSACTION LIST ROW HOVER GLOW
   ══════════════════════════════════════════════════════════ */

.event-entry,
[onmouseenter*="background"] {
  position: relative;
}

.event-entry::before,
[onmouseenter*="background"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 142, 247, 0.08) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: inherit;
}

.event-entry:hover::before,
[onmouseenter]:hover::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   13. FORM INPUT FOCUS GLOW ENHANCEMENT
   ══════════════════════════════════════════════════════════ */

.form-input,
.premium-input {
  position: relative;
}

.form-input:focus,
.premium-input:focus {
  position: relative;
}

/* Apply glow via wrapper or pseudo-element */
.form-group {
  position: relative;
}

.form-group::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(79, 142, 247, 0.2) 0%,
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}

.form-group:focus-within::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   14. PACKAGE CARD SELECTED AURA
   ══════════════════════════════════════════════════════════ */

.pkg-card.selected {
  position: relative;
}

.pkg-card.selected::after {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(
    ellipse at center,
    rgba(79, 142, 247, 0.3) 0%,
    rgba(139, 92, 246, 0.2) 40%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: selected-pulse 2s ease-in-out infinite;
}

@keyframes selected-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ══════════════════════════════════════════════════════════
   15. MOBILE OPTIMIZATIONS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Reduce blur for better mobile performance */
  .hero-banner::before,
  .modal::before,
  .packages-grid::before,
  body::before {
    filter: blur(60px);
  }

  /* Simplify animations on mobile */
  @keyframes mesh-move-hero {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.05); }
  }
}

/* ══════════════════════════════════════════════════════════
   16. PERFORMANCE OPTIMIZATIONS
   ══════════════════════════════════════════════════════════ */

/* Hardware acceleration for smooth animations */
.hero-banner::before,
.modal::before,
.packages-grid::before,
.admin-body::before,
body::before {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════
   17. REDUCED MOTION SUPPORT
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hero-banner::before,
  .modal::before,
  .packages-grid::before,
  .admin-body::before,
  body::before,
  .spinner::after {
    animation: none !important;
  }

  .modal::after,
  .cat-tabs-wrap::after {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   18. HIGH CONTRAST MODE
   ══════════════════════════════════════════════════════════ */

@media (prefers-contrast: high) {
  .hero-banner::before,
  .modal::before,
  .packages-grid::before,
  .admin-body::before,
  body::before {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════
   19. PRINT STYLES (remove gradients)
   ══════════════════════════════════════════════════════════ */

@media print {
  *::before,
  *::after {
    background: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   20. DARK MODE ENHANCEMENTS (optional)
   ══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .hero-banner::before {
    opacity: 0.8;
  }

  .modal::before {
    opacity: 0.7;
  }
}

/* ══════════════════════════════════════════════════════════
   USAGE NOTES
   ══════════════════════════════════════════════════════════
   
   These gradient meshes create depth and premium atmosphere:
   - All meshes use blur for soft, natural look
   - Animations are subtle and slow (15-40s cycles)
   - Hardware accelerated for smooth 60fps
   - Automatically disabled for reduced-motion preference
   - Mobile-optimized with reduced blur radius
   - Print-friendly (gradients removed)
   
   Inspired by: Stripe, Apple, Linear, Vercel
   
   ══════════════════════════════════════════════════════════ */