/**
 * 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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULSE GLOW — Universal continuous glow effect
   Activated by ElementWrapper when props.pulseGlow is true. Two modes:
     .el--pulse-glow-behind  — outer halo (drop-shadow style, extends past edges)
     .el--pulse-glow-inside  — inner glow (inset shadow within the element)
   CSS custom properties (set by ElementWrapper from inspector fields):
     --el-pulse-color      Glow color, defaults to theme accent
     --el-pulse-speed      Cycle duration, default 500ms (1 pulse / 0.5s)
     --el-pulse-size       Blur radius, default 24px
     --el-pulse-min        Trough opacity 0-1, default 0.25
     --el-pulse-intensity  Peak opacity 0-1, default 1
     --el-pulse-opacity    Master multiplier 0-1, default 0.7
   Implemented via ::after pseudo on the wrapper so it composites cleanly
   over any renderer (button, icon, card, image, etc.) without conflicting
   with the element's own --el-shadow. The pseudo inherits border-radius
   so the halo follows rounded corners.
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="el--pulse-glow-"] {
  position: relative;
}

[class*="el--pulse-glow-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--el-pulse-opacity, 0.7);
  animation: el-pulse-glow var(--el-pulse-speed, 500ms) ease-in-out infinite;
  will-change: opacity;
}

/* Behind: glow projects outward via box-shadow's natural outside spread. */
.el--pulse-glow-behind::after {
  box-shadow:
    0 0 var(--el-pulse-size, 24px) var(--el-pulse-color, var(--site-accent, #38bdf8));
}

/* Inside: glow renders inward via inset box-shadow, contained by the element's
   border-radius so it tucks into rounded corners. */
/* Isolation only needed on inside variant: pseudo sits over content (inset:0),
   so it must paint behind children via z-index:-1 within a local stacking context. */
.el--pulse-glow-inside {
  isolation: isolate;
}
.el--pulse-glow-inside::after {
  z-index: -1;
  box-shadow:
    inset 0 0 var(--el-pulse-size, 24px) var(--el-pulse-color, var(--site-accent, #38bdf8));
}

/* Edge / corner modes — directional box-shadow with offset.
   --el-pulse-offset shifts the glow center past the edge so the halo
   reads as "coming from outside" rather than wrapping the whole element. */
.el--pulse-glow-top::after {
  box-shadow:
    0 calc(var(--el-pulse-offset, 0px) * -1) var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-bottom::after {
  box-shadow:
    0 var(--el-pulse-offset, 0px) var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-left::after {
  box-shadow:
    calc(var(--el-pulse-offset, 0px) * -1) 0 var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-right::after {
  box-shadow:
    var(--el-pulse-offset, 0px) 0 var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-top-left::after {
  box-shadow:
    calc(var(--el-pulse-offset, 0px) * -1) calc(var(--el-pulse-offset, 0px) * -1)
    var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-top-right::after {
  box-shadow:
    var(--el-pulse-offset, 0px) calc(var(--el-pulse-offset, 0px) * -1)
    var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-bottom-left::after {
  box-shadow:
    calc(var(--el-pulse-offset, 0px) * -1) var(--el-pulse-offset, 0px)
    var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}
.el--pulse-glow-bottom-right::after {
  box-shadow:
    var(--el-pulse-offset, 0px) var(--el-pulse-offset, 0px)
    var(--el-pulse-size, 24px)
    var(--el-pulse-color, var(--site-accent, #38bdf8));
}

@keyframes el-pulse-glow {
  0%,
  100% {
    opacity: calc(var(--el-pulse-opacity, 0.7) * var(--el-pulse-min, 0.25));
  }
  50% {
    opacity: calc(var(--el-pulse-opacity, 0.7) * var(--el-pulse-intensity, 1));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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;
  }

  /* Pulse-glow: the global animation-duration freeze above leaves the ::after
     pseudo stuck at its base 70% opacity, producing a permanent static halo.
     RM users want no glow at all — hide the pseudo entirely. */
  [class*="el--pulse-glow-"]::after {
    display: none !important;
  }

  /* Universal hover-lift kill-switch.
     Pages are loaded with hover translates / scales scattered across many
     element CSS files (cards, buttons, region tiles, services, project
     cards, testimonials, pricing, blog cards, property cards, timelines,
     CTA-with-image, product cards). The global transition-duration zero
     above neutralizes the *animation*, but the destination transform still
     applies as a static offset on hover. Users with vestibular sensitivity
     still see the page shift on every pointer enter. This block forces
     the hover transform back to the resting state for every known
     hover-lift hook, so the page sits still under reduced-motion. */
  .site-btn:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .region-card:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .property-card:hover,
  .service-card:hover,
  .timeline-card:hover,
  .cta-with-image:hover,
  .product-card:hover,
  .el-region-card:hover,
  .el-feature-card:hover,
  .el-pricing-card:hover,
  .el-property-card:hover,
  .el-blog-card:hover,
  .el-service-card:hover,
  .el-testimonial-card:hover,
  .el-project-card:hover {
    transform: none !important;
  }
}