/**
 * UNIVERSAL ANIMATION STANDARDS
 * Canonical source: /cappers.html
 *
 * This stylesheet defines the universal animation standards for the entire website.
 * All animations must use these CSS custom properties to ensure consistency.
 */

/* ==========================================================================
   ANIMATION DURATION STANDARDS
   Based on canonical cappers.html style
   ========================================================================== */

:root {
  /* Duration Standards (from cappers.html canonical) */
  --animation-duration-fast: 150ms;       /* Hover states, small UI changes */
  --animation-duration-standard: 200ms;   /* Navigation, buttons, popovers */
  --animation-duration-medium: 300ms;     /* Modals, major transitions, toasts */
  --animation-duration-scroll: 500ms;     /* AOS scroll animations */
  --animation-duration-slow: 800ms;       /* Complex entrances (canonical fadeInSmooth) */

  /* Easing Standards (canonical: cubic-bezier(0.25, 0.8, 0.25, 1)) */
  --animation-easing-primary: cubic-bezier(0.25, 0.8, 0.25, 1);   /* Canonical ease-out */
  --animation-easing-ease-out: ease-out;                            /* AOS standard */
  --animation-easing-ease-in-out: ease-in-out;                      /* Hover standard */
  --animation-easing-material: cubic-bezier(0.4, 0, 0.2, 1);       /* Material Design */
  --animation-easing-bounce: cubic-bezier(0.21, 1.02, 0.73, 1);    /* Toast overshoot */
  --animation-easing-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Toast standard */

  /* Transform Standards */
  --animation-transform-hover-lift: translateY(-1px);
  --animation-transform-scale-in-start: scale(0.95);
  --animation-transform-scale-in-end: scale(1);
  --animation-transform-scale-hover: scale(1.05);
  --animation-transform-slide-up-start: translateY(15px);
  --animation-transform-slide-up-end: translateY(0);

  /* Opacity Standards */
  --animation-opacity-fade-in: 0;
  --animation-opacity-fade-out: 0;
  --animation-opacity-visible: 1;
  --animation-opacity-partial: 0.6;

  /* Stagger Standards (consistent delays for sequential animations) */
  --animation-stagger-row: 50ms;        /* For table rows, list items */
  --animation-stagger-card: 50ms;       /* For card grids */
  --animation-stagger-section: 100ms;   /* For page sections */
  --animation-stagger-line: 100ms;      /* For text lines */
}

/* ==========================================================================
   CANONICAL ANIMATIONS (from cappers.html)
   ========================================================================== */

/**
 * fadeInSmooth - Canonical entrance animation from cappers.html
 * Duration: 800ms (slow)
 * Easing: cubic-bezier(0.25, 0.8, 0.25, 1)
 */
@keyframes fadeInSmooth {
  from {
    opacity: var(--animation-opacity-fade-in);
    transform: var(--animation-transform-slide-up-start);
  }
  to {
    opacity: var(--animation-opacity-visible);
    transform: var(--animation-transform-slide-up-end);
  }
}

/**
 * Standard fade-in animation for general use
 * Duration: 500ms (medium-slow)
 * Easing: cubic-bezier(0.25, 0.8, 0.25, 1)
 */
@keyframes fadeIn {
  from {
    opacity: var(--animation-opacity-fade-in);
    transform: translateY(10px);
  }
  to {
    opacity: var(--animation-opacity-visible);
    transform: translateY(0);
  }
}

/**
 * Toast notification entrance
 * Duration: 300ms (medium)
 * Easing: cubic-bezier(0.21, 1.02, 0.73, 1) - overshoot
 */
@keyframes toastIn {
  from {
    opacity: var(--animation-opacity-fade-in);
    transform: translateY(20px);
  }
  to {
    opacity: var(--animation-opacity-visible);
    transform: translateY(0);
  }
}

/**
 * Toast notification exit
 * Duration: 300ms (medium)
 * Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) - standard
 */
@keyframes toastOut {
  from {
    opacity: var(--animation-opacity-visible);
    transform: translateY(0);
  }
  to {
    opacity: var(--animation-opacity-fade-out);
    transform: translateY(20px);
  }
}

/**
 * Loading rotation animation
 * Duration: 3s (slow, continuous)
 * Easing: linear (constant speed)
 */
@keyframes rotation {
  from {
    --gradient-angle: 0deg;
  }
  to {
    --gradient-angle: 360deg;
  }
}

/* ==========================================================================
   UTILITY CLASSES (Use these instead of inline styles)
   ========================================================================== */

/**
 * Fade in row - Used for leaderboard rows with stagger
 * Duration: 800ms (slow) - Canonical from cappers.html
 * Apply with: class="fade-in-row"
 * Customize stagger with: style="animation-delay: 50ms"
 */
.fade-in-row {
  animation: fadeInSmooth var(--animation-duration-slow) var(--animation-easing-primary) forwards;
}

/**
 * Standard fade-in for cards and sections
 * Duration: 500ms (scroll)
 * Easing: cubic-bezier(0.25, 0.8, 0.25, 1)
 */
.fade-in {
  animation: fadeIn var(--animation-duration-scroll) var(--animation-easing-primary) forwards;
}

/**
 * Toast notifications
 * Duration: 300ms (medium)
 */
.toast {
  animation: toastIn var(--animation-duration-medium) var(--animation-easing-bounce) forwards;
}

.toast.hiding {
  animation: toastOut var(--animation-duration-medium) var(--animation-easing-standard) forwards;
}

/**
 * Loading state rotation
 * Duration: 3s linear infinite
 */
.ai-glow-border {
  transition: opacity var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

.ai-glow-container.is-ai-loading .ai-glow-border {
  animation: rotation 3s linear infinite;
}

/* ==========================================================================
   STANDARD HOVER STATES
   ========================================================================== */

/**
 * Card hover - Canonical from cappers.html
 * Transform: translateY(-1px)
 * Duration: 200ms (standard)
 * Easing: ease-in-out
 */
.leaderboard-card,
.card-hover {
  transition: transform var(--animation-duration-standard) var(--animation-easing-ease-in-out),
              box-shadow var(--animation-duration-standard) var(--animation-easing-ease-in-out),
              border-color var(--animation-duration-standard) var(--animation-easing-ease-in-out);
  will-change: transform, box-shadow;
}

.leaderboard-card:hover,
.card-hover:hover {
  transform: var(--animation-transform-hover-lift);
  box-shadow: 0 4px 8px var(--shadow-color);
  border-color: var(--apple-blue);
}

/**
 * Icon hover
 * Transform: scale(1.1)
 * Duration: 200ms (standard)
 * Easing: ease-in-out
 */
.icon-hover {
  transition: transform var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

.icon-hover:hover {
  transform: scale(1.1);
}

/**
 * Button hover with subtle lift
 */
.button-hover {
  transition: all var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

.button-hover:hover {
  transform: var(--animation-transform-hover-lift);
}

/* ==========================================================================
   STANDARD POPOVER/MODAL ANIMATIONS
   ========================================================================== */

/**
 * Popover entrance - Settings popover from cappers.html
 * Scale: 0.95 → 1.0
 * Duration: 150ms (fast)
 * Easing: ease-out
 */
.popover,
.settings-popover {
  transition: all var(--animation-duration-fast) var(--animation-easing-ease-out);
  transform: var(--animation-transform-scale-in-start);
  opacity: var(--animation-opacity-fade-out);
}

.popover.is-open,
.settings-popover.is-open,
.popover.active,
.filter-popover.active {
  transform: var(--animation-transform-scale-in-end);
  opacity: var(--animation-opacity-visible);
}

/**
 * Filter popover from cappers.html
 * Scale: 0.95 → 1.0
 * Duration: 200ms (standard)
 * Easing: ease-out
 */
.filter-popover {
  transition: all var(--animation-duration-standard) var(--animation-easing-ease-out);
  transform: var(--animation-transform-scale-in-start);
  opacity: var(--animation-opacity-fade-out);
}

/* ==========================================================================
   STANDARD TABLE ANIMATIONS
   ========================================================================== */

/**
 * Table row hover - Updated from Material Design to canonical
 * Duration: 150ms (fast) - For subtle row highlighting
 * Easing: cubic-bezier(0.25, 0.8, 0.25, 1) - Canonical
 */
.picks-table tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--animation-easing-primary);
  transition-duration: var(--animation-duration-fast);
}

/**
 * Pagination button hover
 * Duration: 150ms (fast)
 * Easing: cubic-bezier(0.25, 0.8, 0.25, 1) - Canonical
 */
.pagination-button {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--animation-easing-primary);
  transition-duration: var(--animation-duration-fast);
}

/**
 * View toggle button
 * Duration: 200ms (standard)
 * Easing: ease-in-out
 */
.view-toggle-btn {
  transition: all var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

/**
 * Table container loading
 * Duration: 200ms (standard)
 * Easing: ease-in-out
 */
.table-container {
  transition: opacity var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

/* ==========================================================================
   STANDARD NAVIGATION ANIMATIONS
   ========================================================================== */

/**
 * Navigation links - Canonical from cappers.html
 * Duration: 200ms (standard)
 * Easing: ease (default)
 */
nav a,
.navigation-link {
  transition: all var(--animation-duration-standard);
}

/**
 * Date range button
 * Duration: 200ms (standard)
 */
.date-range-btn {
  transition: color, background-color var(--animation-duration-standard);
}

/**
 * Segmented control buttons
 * Duration: 200ms (standard)
 * Easing: ease-in-out
 */
.segmented-control button {
  transition: all var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

/* ==========================================================================
   STANDARD LOADING STATES
   ========================================================================== */

/**
 * Loading opacity transition
 * Duration: 400ms (medium)
 * Easing: ease-in-out
 */
.loading-opacity {
  transition: opacity var(--animation-duration-medium) var(--animation-easing-ease-in-out);
}

/* ==========================================================================
   GRAPHIC CONTAINER
   Updated from 0.3s to standard 0.2s
   ========================================================================== */
#graphic-container {
  transition: all var(--animation-duration-standard) var(--animation-easing-ease-in-out);
}

/* ==========================================================================
   RESPONSIVE ANIMATION ADJUSTMENTS
   ========================================================================== */

/**
 * Reduce motion for accessibility
 */
@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;
  }

  .ai-glow-container.is-ai-loading .ai-glow-border {
    animation: none;
  }
}

/* ==========================================================================
   USAGE GUIDELINES
   ========================================================================== */

/**
 * TO USE THESE STANDARDS:
 *
 * 1. For scroll animations: Use AOS with duration: 500, easing: 'ease-out'
 * 2. For hover effects: Add class="card-hover" or "icon-hover"
 * 3. For staggered rows: Add class="fade-in-row" with style="animation-delay: 50ms"
 * 4. For custom animations: Use CSS custom properties like:
 *    animation: fadeIn var(--animation-duration-scroll) var(--animation-easing-primary);
 * 5. For popovers: Add class="popover" and toggle "is-open" class
 *
 * ALWAYS use the defined CSS custom properties instead of hardcoded values!
 */

 /* ==========================================================================
    GLOBAL APP LOADER (Auth + Tools gating)
    ========================================================================== */

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #f3f4f6; /* neutral light gray */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple spinner */
.app-loader .spinner {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 3px solid #d1d5db;
  border-top-color: #111827;
  animation: app-loader-spin 0.6s linear infinite;
}

@keyframes app-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* While app-loading is active:
   - Hide all body children except the loader to avoid nav/tools flicker. */
body.app-loading > *:not(#app-loader) {
  visibility: hidden !important;
}

/* When not loading, ensure loader does not block content */
body:not(.app-loading) #app-loader {
  display: none;
}

/* ==========================================================================
   ADMIN-GATED TOOLS NAV VISIBILITY
   ========================================================================== */
/*
 * By default (before admin verification), any Tools nav element remains hidden.
 * Only when AuthManager confirms admin and sets .admin-ready on <body>
 * can these elements be revealed by JS.
 */
body:not(.admin-ready) [data-tools-nav="true"] {
  display: none !important;
}