/*
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: animations.css
 * @TITLE: Wexford Lodge - Member Portal
 * @DESCRIPTION: Animation keyframes and utility classes. Entrance animations (fade-in-up, fade-in-left), shimmer, spinner, and pulse-gold. IntersectionObserver targets use [data-animate]. Respects prefers-reduced-motion.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.3
 * - File Modified | Ary van der Pijl | 2026/07/16 | QA-070 | Updated the three hardcoded rgba(184,134,11,*) gold glow values (pulseGold keyframes, progress-bar box-shadow) to rgba(192,138,14,*), matching the refreshed --color-gold-700 value in tokens.css.
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026/06/19 | STANDARDS-COMPLIANCE | Applied ATH Solutions 2026 coding standards. |
 * VERSION 1.0.0.1
 * + File Created, Ary van der Pijl, 2026/06/13
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─────────────────────────────────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spinGold {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(192, 138, 14, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(192, 138, 14, 0);
  }
}

@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

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

  10% {
    transform: rotate(10deg);
  }

  30% {
    transform: rotate(-8deg);
  }

  50% {
    transform: rotate(6deg);
  }

  70% {
    transform: rotate(-4deg);
  }

  90% {
    transform: rotate(2deg);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATION UTILITIES
───────────────────────────────────────────────────────────────────────── */

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) var(--animation-delay, 0ms) both;
}

.animate-fade-in-left {
  animation: fadeInLeft var(--transition-slow) var(--animation-delay, 0ms) both;
}

.animate-fade-in-right {
  animation: fadeInRight var(--transition-slow) var(--animation-delay, 0ms) both;
}

.animate-fade-in {
  animation: fadeIn var(--transition-base) var(--animation-delay, 0ms) both;
}

.animate-scale-in {
  animation: scaleIn var(--transition-spring) both;
}

.animate-pulse-gold {
  animation: pulseGold 2s infinite;
}

.animate-bell-shake {
  animation: bellShake 0.8s ease-in-out;
}

/* ─────────────────────────────────────────────────────────────────────────
   STAGGER DELAY UTILITIES
───────────────────────────────────────────────────────────────────────── */

.delay-50 {
  animation-delay: 50ms;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-150 {
  animation-delay: 150ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-600 {
  animation-delay: 600ms;
}

.delay-700 {
  animation-delay: 700ms;
}

.delay-800 {
  animation-delay: 800ms;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL ANIMATION TARGETS
   (IntersectionObserver in animations.js triggers .animate-fade-in-up)
───────────────────────────────────────────────────────────────────────── */

[data-animate] {
  opacity: 0;
}

[data-animate].animated {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   INLINE SPINNER (for button loading states)
───────────────────────────────────────────────────────────────────────── */

.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spinGold 0.65s linear infinite;
  flex-shrink: 0;
}

.spinner-md {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spinGold 0.8s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   TOP PROGRESS BAR (NProgress-style)
───────────────────────────────────────────────────────────────────────── */

.progress-bar-top {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  z-index: calc(var(--z-toast) + 1);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: width var(--transition-base);
  box-shadow: 0 0 8px rgba(192, 138, 14, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────
   REDUCED MOTION OVERRIDE
───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animate] {
    opacity: 1;
  }
}