/* ==========================================================================
   SHARED ANIMATED BACKGROUND SYSTEM - "LIVE WALLPAPER" ENGINE
   ==========================================================================
   Drop-in CSS for premium animated backgrounds across all 5 apps.
   Uses CSS-only animations (60fps, GPU-accelerated, zero JS overhead).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens for Animation)
   -------------------------------------------------------------------------- */
:root {
  /* Animation timing */
  --anim-duration-slow: 20s;
  --anim-duration-med: 12s;
  --anim-duration-fast: 8s;
  --anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Color palette for orbs (customize per app) */
  --orb-primary: #0284c7;
  --orb-secondary: #10b981;
  --orb-accent: #f59e0b;
  --orb-tertiary: #6366f1;
  
  /* Grid pattern */
  --grid-size: 40px;
  --grid-color: rgba(2, 132, 199, 0.04);
  --grid-dot-size: 1.5px;
  
  /* Shimmer sweep */
  --shimmer-angle: -22deg;
  --shimmer-duration: 8s;
}

/* App-specific color overrides */
.app-hr { --orb-primary: #4f46e5; --orb-secondary: #10b981; --orb-accent: #f59e0b; --grid-color: rgba(79, 70, 229, 0.04); }
.app-sales { --orb-primary: #0284c7; --orb-secondary: #2563eb; --orb-accent: #f59e0b; --grid-color: rgba(2, 132, 199, 0.04); }
.app-saleslead { --orb-primary: #059669; --orb-secondary: #0284c7; --orb-accent: #f59e0b; --grid-color: rgba(5, 150, 105, 0.04); }
.app-panchsheel { --orb-primary: #0284c7; --orb-secondary: #10b981; --orb-accent: #f59e0b; --grid-color: rgba(2, 132, 199, 0.04); }
.app-hub { --orb-primary: #0284c7; --orb-secondary: #2563eb; --orb-accent: #10b981; --grid-color: rgba(2, 132, 199, 0.04); }

/* --------------------------------------------------------------------------
   2. CONTAINER & LAYER STRUCTURE
   -------------------------------------------------------------------------- */
.anim-bg-root {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.anim-bg-layer {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   3. FLOATING GRADIENT ORBS (The "Live Wallpaper" Core)
   -------------------------------------------------------------------------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat var(--anim-duration-slow) var(--anim-easing) infinite alternate;
  will-change: transform, opacity;
}

.orb-1 { width: 400px; height: 400px; background: var(--orb-primary); top: -80px; left: -80px; animation-duration: 22s; animation-delay: 0s; }
.orb-2 { width: 480px; height: 480px; background: var(--orb-secondary); bottom: -100px; right: -100px; animation-duration: 26s; animation-delay: -5s; }
.orb-3 { width: 280px; height: 280px; background: var(--orb-accent); top: 35%; left: 65%; animation-duration: 18s; animation-delay: -12s; }
.orb-4 { width: 320px; height: 320px; background: var(--orb-tertiary); bottom: 30%; left: 10%; animation-duration: 24s; animation-delay: -8s; }

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.35; }
  25%  { transform: translate(40px, -30px) scale(1.12) rotate(3deg); opacity: 0.42; }
  50%  { transform: translate(-25px, 45px) scale(0.95) rotate(-2deg); opacity: 0.38; }
  75%  { transform: translate(35px, 20px) scale(1.08) rotate(1deg); opacity: 0.4; }
  100% { transform: translate(-30px, -35px) scale(1.02) rotate(-1deg); opacity: 0.35; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; opacity: 0.15; filter: blur(60px); }
}

/* --------------------------------------------------------------------------
   4. SUBTLE GRID PATTERN (Technical/Engineering Aesthetic)
   -------------------------------------------------------------------------- */
.grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(var(--grid-color) var(--grid-dot-size), transparent var(--grid-dot-size));
  background-size: var(--grid-size) var(--grid-size);
  animation: gridPulse 20s ease-in-out infinite alternate;
  opacity: 0.6;
}

@keyframes gridPulse {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.02); }
}

/* --------------------------------------------------------------------------
   5. SHIMMER SWEEP (Premium "Vault" Effect)
   -------------------------------------------------------------------------- */
.shimmer-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shimmer-sweep::before {
  content: '';
  position: absolute;
  top: 0; left: -150%; width: 100%; height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255,255,255,0.15) 30%, 
    rgba(255,255,255,0.08) 50%, 
    rgba(var(--orb-primary-rgb, 2,132,199), 0.12) 70%, 
    transparent 100%
  );
  transform: skewX(var(--shimmer-angle));
  animation: shimmerSweep var(--shimmer-duration) ease-in-out infinite;
}

@keyframes shimmerSweep {
  0%, 70% { left: -150%; }
  100% { left: 200%; }
}

/* --------------------------------------------------------------------------
   6. PARTICLE FIELD (Subtle Depth)
   -------------------------------------------------------------------------- */
.particle-field {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.3) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.25) 1px, transparent 1px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 
    200px 200px,
    180px 180px,
    220px 220px,
    160px 160px;
  animation: particleDrift 30s linear infinite;
  opacity: 0.4;
}

@keyframes particleDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 200px 100px, -180px 180px, 220px -150px, -160px 200px; }
}

/* --------------------------------------------------------------------------
   7. MOUSE PARALLAX (Interactive Depth - Optional JS)
   -------------------------------------------------------------------------- */
.parallax-layer {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   8. CARD HOVER MICRO-ANIMATIONS (Spring Physics)
   -------------------------------------------------------------------------- */
.spring-hover {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.spring-hover:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}
.spring-hover:active {
  transform: translateY(0) scale(0.99) !important;
}

/* Stamp/thump animation for buttons */
.stamp-animate {
  animation: stampSlam 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes stampSlam {
  0% { opacity: 0; transform: scale(2.5) rotate(-20deg); filter: blur(4px); }
  60% { opacity: 0.9; transform: scale(0.9) rotate(-5deg); filter: blur(0); }
  80% { transform: scale(1.05) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}

/* --------------------------------------------------------------------------
   9. PAGE TRANSITION (Fade + Slide)
   -------------------------------------------------------------------------- */
.page-enter {
  animation: pageEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-exit {
  animation: pageExit 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pageExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

/* --------------------------------------------------------------------------
   10. TOAST / NOTIFICATION ANIMATIONS
   -------------------------------------------------------------------------- */
.toast-enter {
  animation: toastEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-exit {
  animation: toastExit 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastEnter {
  from { opacity: 0; transform: translateX(100px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastExit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(100px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   11. LOADING SKELETON SHIMMER
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   12. UTILITY CLASSES
   -------------------------------------------------------------------------- */
.animated-bg {
  position: relative;
  overflow: hidden;
}
.animated-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Glassmorphism helper */
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3);
}

/* ==========================================================================
   USAGE EXAMPLES (Add to each app's HTML <body>):
   ==========================================================================
   
   <!-- Main Hub -->
   <div class="anim-bg-root" data-app="hub">
     <div class="anim-bg-layer orb orb-1"></div>
     <div class="anim-bg-layer orb orb-2"></div>
     <div class="anim-bg-layer orb orb-3"></div>
     <div class="anim-bg-layer orb orb-4"></div>
     <div class="anim-bg-layer grid-pattern"></div>
     <div class="anim-bg-layer shimmer-sweep"></div>
     <div class="anim-bg-layer particle-field"></div>
   </div>

   <!-- HR App (React) - Add to App.tsx root div -->
   <div class="anim-bg-root app-hr">...</div>

   <!-- SalesTrack CRM -->
   <div class="anim-bg-root app-sales">...</div>

   <!-- Sales Lead -->
   <div class="anim-bg-root app-saleslead">...</div>

   <!-- Panchsheel -->
   <div class="anim-bg-root app-panchsheel">...</div>
   ========================================================================== */