/**
 * Kinto-inspired Animations
 * Adapted for Hugo/Alpine.js from Framer Motion patterns
 */

/* ==========================================================================
   Base Easing Functions
   ========================================================================== */

:root {
  /* Kinto signature easing - smooth and elegant */
  --ease-kinto: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-kinto-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-kinto-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-kinto-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Spring-like easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Standard easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Timing */
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 800ms;
  --duration-slowest: 1000ms;
}

/* ==========================================================================
   Reveal Animations (used with Alpine.js x-intersect)
   ========================================================================== */

/* Reveal from bottom */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.animate-reveal-up {
  animation: reveal-up var(--duration-slow) var(--ease-kinto) forwards;
}

/* Reveal from top */
@keyframes reveal-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.animate-reveal-down {
  animation: reveal-down var(--duration-slow) var(--ease-kinto) forwards;
}

/* Reveal from left */
@keyframes reveal-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.animate-reveal-right {
  animation: reveal-right var(--duration-slow) var(--ease-kinto) forwards;
}

/* Reveal from right */
@keyframes reveal-left {
  from {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.animate-reveal-left {
  animation: reveal-left var(--duration-slow) var(--ease-kinto) forwards;
}

/* Scale reveal */
@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.animate-reveal-scale {
  animation: reveal-scale var(--duration-slow) var(--ease-kinto) forwards;
}

/* ==========================================================================
   Stagger Delays
   ========================================================================== */

.stagger-1 { animation-delay: 100ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 300ms; }
.stagger-4 { animation-delay: 400ms; }
.stagger-5 { animation-delay: 500ms; }
.stagger-6 { animation-delay: 600ms; }
.stagger-7 { animation-delay: 700ms; }
.stagger-8 { animation-delay: 800ms; }

/* Slower stagger for cards */
.stagger-card-1 { animation-delay: 150ms; }
.stagger-card-2 { animation-delay: 300ms; }
.stagger-card-3 { animation-delay: 450ms; }
.stagger-card-4 { animation-delay: 600ms; }
.stagger-card-5 { animation-delay: 750ms; }
.stagger-card-6 { animation-delay: 900ms; }

/* ==========================================================================
   Hover Animations
   ========================================================================== */

/* Lift on hover */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-kinto),
              box-shadow var(--duration-normal) var(--ease-kinto);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

/* Scale on hover */
.hover-scale {
  transition: transform var(--duration-normal) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Slight rotation on hover (for cards) */
.hover-unrotate {
  transition: transform var(--duration-normal) var(--ease-kinto);
}

.hover-unrotate:hover {
  transform: rotate(0deg) !important;
}

/* ==========================================================================
   Pulse and Attention Animations
   ========================================================================== */

/* Live pulse indicator */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-pulse-ring {
  animation: pulse-ring 1.5s var(--ease-out-expo) infinite;
}

/* Gentle pulse for CTA buttons */
@keyframes gentle-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
}

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

/* ==========================================================================
   Number Counter Animation (for stats)
   ========================================================================== */

@keyframes count-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-count-up {
  animation: count-up var(--duration-slow) var(--ease-kinto) forwards;
}

/* ==========================================================================
   Card Stack Animations
   ========================================================================== */

/* First card in stack */
.card-stack-1 {
  transform: rotate(3deg);
  transition: transform var(--duration-normal) var(--ease-kinto);
}

.card-stack-1:hover {
  transform: rotate(0deg);
}

/* Second card in stack */
.card-stack-2 {
  transform: rotate(-2deg);
  transition: transform var(--duration-normal) var(--ease-kinto);
}

.card-stack-2:hover {
  transform: rotate(0deg);
}

/* Third card in stack */
.card-stack-3 {
  transform: rotate(1deg);
  transition: transform var(--duration-normal) var(--ease-kinto);
}

.card-stack-3:hover {
  transform: rotate(0deg);
}

/* ==========================================================================
   Accordion Animations (for x-collapse)
   ========================================================================== */

/* Custom collapse animation */
[x-cloak] {
  display: none !important;
}

/* Smooth height transition for accordion */
.accordion-content {
  transition: height var(--duration-normal) var(--ease-kinto);
  overflow: hidden;
}

/* Icon rotation for accordion */
.accordion-icon {
  transition: transform var(--duration-normal) var(--ease-kinto);
}

.accordion-open .accordion-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   Progress Bar Animation
   ========================================================================== */

@keyframes progress-fill {
  from {
    width: 0;
  }
}

.animate-progress {
  animation: progress-fill var(--duration-slower) var(--ease-kinto) forwards;
}

/* ==========================================================================
   Line/Separator Animation
   ========================================================================== */

@keyframes line-expand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 48px;
    opacity: 1;
  }
}

.animate-line-expand {
  animation: line-expand var(--duration-slow) var(--ease-kinto) forwards;
}

/* Hover expand */
.line-hover-expand {
  width: 48px;
  transition: width var(--duration-normal) var(--ease-kinto),
              background-color var(--duration-normal) var(--ease-kinto);
}

.group:hover .line-hover-expand {
  width: 80px;
}

/* ==========================================================================
   Alpine.js Transition Classes
   ========================================================================== */

/* Enter transitions */
.enter-fade {
  transition: opacity var(--duration-slow) var(--ease-kinto);
}

.enter-slide-up {
  transition: opacity var(--duration-slow) var(--ease-kinto),
              transform var(--duration-slow) var(--ease-kinto);
}

/* For x-transition:enter */
.transition-reveal {
  transition: opacity var(--duration-slow) var(--ease-kinto),
              transform var(--duration-slow) var(--ease-kinto),
              filter var(--duration-slow) var(--ease-kinto);
}

/* Starting state */
.reveal-hidden {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
}

/* End state */
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

  .animate-pulse-ring,
  .animate-gentle-pulse {
    animation: none;
  }
}