/*
 * FCOS Animate — CSS Animation Library
 * Shared animation classes for all 42 FCOS templates.
 * Usage: <link rel="stylesheet" href="fcos-animate.css">
 *
 * Entrance animations need this JS (paste before </body>):
 * <script>
 * const o = new IntersectionObserver((entries) => {
 *   entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); o.unobserve(e.target); }});
 * }, { threshold: 0.1 });
 * document.querySelectorAll('[class*="animate-"]').forEach(el => o.observe(el));
 * </script>
 *
 * Or for staggered lists:
 * document.querySelectorAll('.stagger-list').forEach(list => {
 *   list.querySelectorAll('[class*="animate-"]').forEach((el, i) => {
 *     el.style.transitionDelay = (i * 0.05) + 's';
 *   });
 * });
 */

/* ==========================================================================
   Custom Properties
   ========================================================================== */

:root {
  --animate-duration: 0.5s;
  --animate-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --animate-distance: 20px;
  --animate-distance-lg: 40px;
}

/* ==========================================================================
   1. Entrance Animations — Base States
   All start invisible; .in-view triggers the animation.
   ========================================================================== */

.animate-fade,
.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-scale,
.animate-scale-up,
.animate-slide-up,
.animate-slide-down,
.animate-zoom {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: var(--animate-duration);
  transition-timing-function: var(--animate-easing);
}

.animate-fade-up    { transform: translateY(var(--animate-distance)); }
.animate-fade-down  { transform: translateY(calc(var(--animate-distance) * -1)); }
.animate-fade-left  { transform: translateX(calc(var(--animate-distance) * -1)); }
.animate-fade-right { transform: translateX(var(--animate-distance)); }
.animate-scale      { transform: scale(0.95); }
.animate-scale-up   { transform: scale(0.8); }
.animate-slide-up   { transform: translateY(var(--animate-distance-lg)); }
.animate-slide-down { transform: translateY(calc(var(--animate-distance-lg) * -1)); }
.animate-zoom       { transform: scale(0); }

/* — Entrance: Active (.in-view) — */

.animate-fade.in-view,
.animate-fade-up.in-view,
.animate-fade-down.in-view,
.animate-fade-left.in-view,
.animate-fade-right.in-view,
.animate-scale.in-view,
.animate-scale-up.in-view,
.animate-slide-up.in-view,
.animate-slide-down.in-view,
.animate-zoom.in-view {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ==========================================================================
   2. Stagger Delays — Normal (0.05s per step)
   ========================================================================== */

.stagger-1  { transition-delay: 0.05s; }
.stagger-2  { transition-delay: 0.10s; }
.stagger-3  { transition-delay: 0.15s; }
.stagger-4  { transition-delay: 0.20s; }
.stagger-5  { transition-delay: 0.25s; }
.stagger-6  { transition-delay: 0.30s; }
.stagger-7  { transition-delay: 0.35s; }
.stagger-8  { transition-delay: 0.40s; }
.stagger-9  { transition-delay: 0.45s; }
.stagger-10 { transition-delay: 0.50s; }
.stagger-11 { transition-delay: 0.55s; }
.stagger-12 { transition-delay: 0.60s; }

/* — Stagger Fast (0.03s per step) — */

.stagger-fast-1  { transition-delay: 0.03s; }
.stagger-fast-2  { transition-delay: 0.06s; }
.stagger-fast-3  { transition-delay: 0.09s; }
.stagger-fast-4  { transition-delay: 0.12s; }
.stagger-fast-5  { transition-delay: 0.15s; }
.stagger-fast-6  { transition-delay: 0.18s; }
.stagger-fast-7  { transition-delay: 0.21s; }
.stagger-fast-8  { transition-delay: 0.24s; }
.stagger-fast-9  { transition-delay: 0.27s; }
.stagger-fast-10 { transition-delay: 0.30s; }
.stagger-fast-11 { transition-delay: 0.33s; }
.stagger-fast-12 { transition-delay: 0.36s; }

/* ==========================================================================
   3. Continuous Animations (always running)
   ========================================================================== */

.pulse {
  animation: pulse 2s var(--animate-easing) infinite;
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

.bounce {
  animation: bounce 0.6s var(--animate-easing) infinite alternate;
}

.shake {
  animation: shake 0.4s ease-in-out;
}

.float {
  animation: float 3s ease-in-out infinite;
}

.blink {
  animation: blink 1.5s ease-in-out infinite;
}

/* ==========================================================================
   4. Hover Animations
   ========================================================================== */

.hover-lift {
  transition: transform 0.2s var(--animate-easing), box-shadow 0.2s var(--animate-easing);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.hover-glow {
  transition: box-shadow 0.2s var(--animate-easing);
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.hover-scale {
  transition: transform 0.2s var(--animate-easing);
}
.hover-scale:hover {
  transform: scale(1.03);
}

.hover-bright {
  transition: filter 0.2s var(--animate-easing);
}
.hover-bright:hover {
  filter: brightness(1.1);
}

.hover-border {
  transition: border-color 0.2s var(--animate-easing);
}
.hover-border:hover {
  border-color: #f5a623;
}

/* ==========================================================================
   5. Transition Utilities
   ========================================================================== */

.transition-fast   { transition-duration: 0.1s;  transition-timing-function: var(--animate-easing); }
.transition        { transition-duration: 0.15s; transition-timing-function: var(--animate-easing); }
.transition-slow   { transition-duration: 0.3s;  transition-timing-function: var(--animate-easing); }

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: var(--animate-easing);
}

.transition-transform {
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: var(--animate-easing);
}

.transition-all {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: var(--animate-easing);
}

/* ==========================================================================
   6. Duration & Delay Modifiers
   ========================================================================== */

.duration-100  { transition-duration: 0.1s;  animation-duration: 0.1s; }
.duration-200  { transition-duration: 0.2s;  animation-duration: 0.2s; }
.duration-300  { transition-duration: 0.3s;  animation-duration: 0.3s; }
.duration-400  { transition-duration: 0.4s;  animation-duration: 0.4s; }
.duration-500  { transition-duration: 0.5s;  animation-duration: 0.5s; }
.duration-600  { transition-duration: 0.6s;  animation-duration: 0.6s; }
.duration-700  { transition-duration: 0.7s;  animation-duration: 0.7s; }
.duration-800  { transition-duration: 0.8s;  animation-duration: 0.8s; }
.duration-900  { transition-duration: 0.9s;  animation-duration: 0.9s; }
.duration-1000 { transition-duration: 1.0s;  animation-duration: 1.0s; }

.delay-100 { transition-delay: 0.1s; animation-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; animation-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; animation-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; animation-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; animation-delay: 0.5s; }

/* ==========================================================================
   7. Keyframe Definitions
   ========================================================================== */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.2); }
  50%      { box-shadow: 0 0 20px rgba(255, 193, 7, 0.6); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ==========================================================================
   8. Reduced Motion — Respect user preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [class*="animate-"], .pulse, .spin, .bounce, .float, .shake, .blink {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}