/**
 * Evara Animation System
 *
 * All @keyframes, animation utility classes, hover effects, continuous
 * animations, parallax, and stagger utilities for the visual builder.
 *
 * Loaded by AnimationWrapper on public site pages.
 * Uses CSS custom properties for dynamic per-element timing:
 *   --evara-anim-duration   (default: 600ms)
 *   --evara-anim-delay      (default: 0ms)
 *   --evara-anim-easing     (default: ease-out)
 *   --evara-anim-iteration  (default: infinite)
 *   --evara-anim-direction  (default: normal)
 *   --evara-parallax-speed  (default: 0.5)
 *   --evara-parallax-y      (dynamic, set by JS)
 *   --evara-stagger-delay   (dynamic, set by JS per child)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — Entrance Animations
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes evara-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes evara-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes evara-fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes evara-fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes evara-fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes evara-slideInUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes evara-slideInDown {
  from { opacity: 0; transform: translateY(-60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes evara-slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes evara-slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes evara-scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes evara-rotateIn {
  from { opacity: 0; transform: rotate(-15deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes evara-bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes evara-flipInX {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  to { opacity: 1; transform: perspective(400px) rotateX(0); }
}

@keyframes evara-flipInY {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  40% { transform: perspective(400px) rotateY(-10deg); }
  70% { transform: perspective(400px) rotateY(10deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes evara-zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — Continuous Animations
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

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

@keyframes evara-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}

@keyframes evara-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes evara-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — Hover Effects
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes evara-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes evara-hover-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — Page Transitions
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes evara-page-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes evara-page-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes evara-page-slideLeft {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes evara-page-slideRight {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIDDEN STATE — Elements waiting to animate
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-anim--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.evara-anim--active {
  visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRANCE / SCROLL ANIMATION CLASSES
   Applied via JS, animated when .evara-anim--active is added.
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-anim--fadeIn.evara-anim--active {
  animation: evara-fadeIn var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--fadeInUp.evara-anim--active {
  animation: evara-fadeInUp var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--fadeInDown.evara-anim--active {
  animation: evara-fadeInDown var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--fadeInLeft.evara-anim--active {
  animation: evara-fadeInLeft var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--fadeInRight.evara-anim--active {
  animation: evara-fadeInRight var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--slideInUp.evara-anim--active {
  animation: evara-slideInUp var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--slideInDown.evara-anim--active {
  animation: evara-slideInDown var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--slideInLeft.evara-anim--active {
  animation: evara-slideInLeft var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--slideInRight.evara-anim--active {
  animation: evara-slideInRight var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--scaleIn.evara-anim--active {
  animation: evara-scaleIn var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--rotateIn.evara-anim--active {
  animation: evara-rotateIn var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--bounceIn.evara-anim--active {
  animation: evara-bounceIn var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--flipInX.evara-anim--active {
  animation: evara-flipInX var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--flipInY.evara-anim--active {
  animation: evara-flipInY var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

.evara-anim--zoomIn.evara-anim--active {
  animation: evara-zoomIn var(--evara-anim-duration, 600ms) var(--evara-anim-easing, ease-out) var(--evara-anim-delay, 0ms) both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER EFFECT CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-hover--scale {
  transition: transform var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out);
}
.evara-hover--scale:hover {
  transform: scale(1.05);
}

.evara-hover--lift {
  transition: transform var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out),
              box-shadow var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out);
}
.evara-hover--lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.evara-hover--glow {
  transition: box-shadow var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out);
}
.evara-hover--glow:hover {
  box-shadow: 0 0 20px rgba(47, 109, 246, 0.3), 0 0 40px rgba(47, 109, 246, 0.1);
}

.evara-hover--brighten {
  transition: filter var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out);
}
.evara-hover--brighten:hover {
  filter: brightness(1.15);
}

.evara-hover--rotate {
  transition: transform var(--evara-anim-duration, 300ms) var(--evara-anim-easing, ease-out);
}
.evara-hover--rotate:hover {
  transform: rotate(3deg);
}

.evara-hover--shake:hover {
  animation: evara-shake 0.5s ease-in-out;
}

.evara-hover--pulse:hover {
  animation: evara-hover-pulse 0.6s ease-in-out;
}

.evara-hover--bounce:hover {
  animation: evara-hover-bounce 0.5s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTINUOUS ANIMATION CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-continuous--pulse {
  animation: evara-pulse var(--evara-anim-duration, 2000ms) var(--evara-anim-easing, ease-in-out)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, normal);
}

.evara-continuous--float {
  animation: evara-float var(--evara-anim-duration, 3000ms) var(--evara-anim-easing, ease-in-out)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, alternate);
}

.evara-continuous--spin {
  animation: evara-spin var(--evara-anim-duration, 2000ms) var(--evara-anim-easing, linear)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, normal);
}

.evara-continuous--bounce {
  animation: evara-bounce var(--evara-anim-duration, 1500ms) var(--evara-anim-easing, ease-in-out)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, normal);
}

.evara-continuous--shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: evara-shimmer var(--evara-anim-duration, 2000ms) var(--evara-anim-easing, linear)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, normal);
}

.evara-continuous--breathe {
  animation: evara-breathe var(--evara-anim-duration, 3000ms) var(--evara-anim-easing, ease-in-out)
             var(--evara-anim-delay, 0ms) var(--evara-anim-iteration, infinite)
             var(--evara-anim-direction, alternate);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARALLAX
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-parallax {
  will-change: transform;
  transform: translateY(var(--evara-parallax-y, 0));
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGGER DELAY UTILITIES
   Direct children with stagger delay use this class for their offset.
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-stagger-child {
  animation-delay: calc(var(--evara-anim-delay, 0ms) + var(--evara-stagger-delay, 0ms)) !important;
}

/* Explicit stagger utility classes for CSS-only usage */
.evara-stagger-1 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 80ms) !important; }
.evara-stagger-2 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 160ms) !important; }
.evara-stagger-3 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 240ms) !important; }
.evara-stagger-4 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 320ms) !important; }
.evara-stagger-5 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 400ms) !important; }
.evara-stagger-6 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 480ms) !important; }
.evara-stagger-7 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 560ms) !important; }
.evara-stagger-8 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 640ms) !important; }
.evara-stagger-9 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 720ms) !important; }
.evara-stagger-10 { animation-delay: calc(var(--evara-anim-delay, 0ms) + 800ms) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.evara-page-transition {
  will-change: opacity, transform;
}

.evara-page-transition--fadeThrough-enter {
  animation: evara-page-fadeIn 300ms ease-out both;
}
.evara-page-transition--fadeThrough-exit {
  animation: evara-page-fadeOut 200ms ease-in both;
}

.evara-page-transition--slideLeft-enter {
  animation: evara-page-slideLeft 400ms ease-out both;
}
.evara-page-transition--slideRight-enter {
  animation: evara-page-slideRight 400ms ease-out both;
}

.evara-page-transition--crossfade-enter {
  animation: evara-page-fadeIn 400ms ease-in-out both;
}
.evara-page-transition--crossfade-exit {
  animation: evara-page-fadeOut 400ms ease-in-out both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS API — for morphHero (shared element transitions)
   Browsers without support fall back gracefully to crossfade.
   ═══════════════════════════════════════════════════════════════════════════ */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

[data-view-transition-name] {
  view-transition-name: var(--evara-vt-name);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preference
   Disables all animations when prefers-reduced-motion is active.
   ═══════════════════════════════════════════════════════════════════════════ */

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

  /* Show hidden elements immediately */
  .evara-anim--hidden {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Disable parallax */
  .evara-parallax {
    transform: none !important;
  }

  /* Disable page transitions */
  .evara-page-transition {
    animation: none !important;
  }
}