/**
 * ContentFlows — Premium Animation & Gradient System
 *
 * Philosophy: Motion should serve the UI, not distract from it.
 * - Cycle times: 3s–6s (anything faster feels cheap, anything slower feels frozen)
 * - Easing: ease-in-out for gradients, cubic-bezier(0.4, 0, 0.2, 1) for interactions
 * - Subtlety: opacity and transform only — no layout-affecting properties in loops
 * - Accessibility: all animations respect prefers-reduced-motion
 *
 * Usage:
 *   Add the class to any element. CSS handles the rest.
 *   No JavaScript required for any animation defined here.
 *
 * @file animations.css
 * @version 1.0.0
 */

/* ============================================================
   KEYFRAME DEFINITIONS
   ============================================================ */

/**
 * Hero gradient shift — slow-moving background gradient for banners,
 * profile covers, and hero sections. Looks premium on creator profiles.
 * Cycle: 6s
 */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/**
 * Shimmer scan — left-to-right light sweep. Used on cards on hover.
 * Cycle: 0.8s (one-shot on hover)
 */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/**
 * Pulse glow — subtle opacity pulse for live indicators, online badges,
 * and "recording" dots. Gives life without distraction.
 * Cycle: 2s
 */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); }
  50%       { opacity: 0.85; box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
}

/**
 * Fade in up — panel and card entrance animation.
 * One-shot: triggers when .fade-in class is added.
 */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Fade in — simple opacity entrance for modals and overlays.
 */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/**
 * Scale in — subtle scale entrance for popups, tooltips, and dropdowns.
 */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**
 * Slide in from right — used for notification toasts and drawers.
 */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/**
 * Slide in from top — used for dropdown menus and banners.
 */
@keyframes slide-in-top {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Spin — for loading spinners.
 * Cycle: 0.8s
 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/**
 * Skeleton loading — the standard "loading bones" shimmer.
 * Replaces fake placeholder data while content loads.
 * Cycle: 1.6s
 */
@keyframes skeleton-wave {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   UTILITY CLASSES — GRADIENTS
   ============================================================ */

/**
 * Animated hero gradient — for creator profile covers, landing banners.
 * Slow 6s shift between brand purple/coral/blue. Subtle and premium.
 */
.gradient-hero {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #667eea);
  background-size: 400% 400%;
  animation: gradient-shift 6s ease-in-out infinite;
}

/**
 * Warm creator gradient — OnlyFans-style warm tones.
 * Good for subscription tier banners and creator showcase cards.
 */
.gradient-warm {
  background: linear-gradient(135deg, #f7971e, #ffd200, #f09819, #f7971e);
  background-size: 300% 300%;
  animation: gradient-shift 5s ease-in-out infinite;
}

/**
 * Cool brand gradient — for admin dashboards and settings headers.
 */
.gradient-cool {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460, #533483, #1a1a2e);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease-in-out infinite;
}

/**
 * Success gradient — for earning milestones, achievement banners.
 */
.gradient-success {
  background: linear-gradient(135deg, #11998e, #38ef7d, #11998e);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease-in-out infinite;
}

/**
 * Premium gold gradient — for top-tier creators and VIP content badges.
 */
.gradient-gold {
  background: linear-gradient(135deg, #f6d365, #fda085, #f6d365);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease-in-out infinite;
}

/**
 * Static gradient text — title text with gradient fill.
 * Not animated — too distracting on text.
 * Usage: <h1 class="gradient-text-brand">Title</h1>
 */
.gradient-text-brand {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   UTILITY CLASSES — ENTRANCE ANIMATIONS
   ============================================================ */

/**
 * Fade in upward — used for dashboard cards, feed items, panels.
 * Duration: 0.4s. Add .fade-in class via JavaScript when element enters viewport.
 */
.fade-in {
  animation: fade-in-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/**
 * Staggered children — add to a container and its children
 * will animate in sequence. Works up to 8 children.
 */
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.40s; }

/**
 * Modal/dialog entrance.
 */
.animate-fade-in {
  animation: fade-in 0.2s ease-out both;
}

.animate-scale-in {
  animation: scale-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/**
 * Toast / notification slide in.
 */
.animate-slide-right {
  animation: slide-in-right 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-slide-top {
  animation: slide-in-top 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ============================================================
   UTILITY CLASSES — INTERACTIVE HOVER
   ============================================================ */

/**
 * Card lift — a subtle upward shift and shadow deepening on hover.
 * Professional alternative to "zoom on hover".
 * Apply to .card, .panel, .creator-card, etc.
 */
.hover-lift {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/**
 * Shimmer card — light sweep on hover, good for creator profile cards
 * and subscription tier cards. One-shot per hover.
 */
.hover-shimmer {
  position: relative;
  overflow: hidden;
}
.hover-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  background-size: 200% auto;
  background-position: -200% center;
  opacity: 0;
  transition: opacity 0.1s;
}
.hover-shimmer:hover::after {
  opacity: 1;
  animation: shimmer 0.7s ease-out both;
}

/**
 * Subtle scale — for icon buttons and action buttons.
 * More restrained than a full card lift.
 */
.hover-scale {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
  transform: scale(1.06);
}

/* ============================================================
   UTILITY CLASSES — STATUS INDICATORS
   ============================================================ */

/**
 * Live pulse indicator — the red dot that says "LIVE".
 * Usage: <span class="indicator-live"></span>
 */
.indicator-live {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff3b30;
  animation: pulse-glow 2s ease-in-out infinite;
}

/**
 * Online presence dot — green pulse for user online status.
 */
.indicator-online {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #34c759;
  animation: pulse-glow 3s ease-in-out infinite;
}
.indicator-online {
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
}
@keyframes pulse-glow-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
}
.indicator-online {
  animation: pulse-glow-green 3s ease-in-out infinite;
}

/**
 * Processing spinner — for upload progress, form submission.
 * Usage: <span class="spinner"></span>
 */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* ============================================================
   UTILITY CLASSES — SKELETON LOADING
   ============================================================ */

/**
 * Skeleton element — replaces hardcoded placeholder data while DB loads.
 * Pair with the correct height/width via BEM or inline style.
 * Usage: <div class="skeleton" style="height:1rem; width:60%;"></div>
 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-skeleton-base, #e8e8e8) 25%,
    var(--color-skeleton-shine, #f5f5f5) 50%,
    var(--color-skeleton-base, #e8e8e8) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-wave 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* Dark mode skeleton */
[data-theme="dark"] .skeleton {
  --color-skeleton-base:  #2a2a2a;
  --color-skeleton-shine: #3a3a3a;
}

.skeleton-text    { height: 0.875rem; border-radius: 4px; }
.skeleton-title   { height: 1.5rem;   border-radius: 4px; }
.skeleton-avatar  { border-radius: 50%; }
.skeleton-card    { height: 200px; border-radius: 8px; }
.skeleton-banner  { height: 160px; border-radius: 12px; }

/* ============================================================
   TRANSITION UTILITIES
   ============================================================ */

/**
 * Standard transition — consistent 200ms for interactive elements.
 * Use on buttons, links, toggles. Not for layout transitions.
 */
.transition-standard {
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              opacity 0.2s ease,
              box-shadow 0.2s ease;
}

/**
 * Slow transition — for theme switches, large overlays.
 */
.transition-slow {
  transition: color 0.35s ease,
              background-color 0.35s ease,
              opacity 0.35s ease;
}

/* ============================================================
   ACCESSIBILITY — RESPECT prefers-reduced-motion
   ============================================================
   Users who have enabled reduced motion in their OS settings get
   zero animation. No exceptions. Never add !important overrides here.
   ============================================================ */

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

  .gradient-hero,
  .gradient-warm,
  .gradient-cool,
  .gradient-success,
  .gradient-gold {
    animation: none;
    background-size: 100% 100%;
  }

  .indicator-live,
  .indicator-online {
    animation: none;
  }

  .skeleton {
    animation: none;
    background: var(--color-skeleton-base, #e8e8e8);
  }
}