/* ===================================================================
 * WEVAL Editorial — Animations Library (D-OPUS97)
 * 15+ distinct scroll-triggered animations
 * Use: <element data-anim="fade-up" data-anim-delay="100">
 * Stagger: <container data-anim-stagger="80">...children...</container>
 * =================================================================== */

@keyframes wa-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wa-fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wa-slide-left {
  from { opacity: 0; transform: translateX(-48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wa-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wa-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wa-pop-in {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wa-rotate-in {
  from { opacity: 0; transform: rotate(-8deg) scale(0.92); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes wa-flip-x {
  from { opacity: 0; transform: rotateX(-70deg); transform-origin: top; }
  to { opacity: 1; transform: rotateX(0); }
}
@keyframes wa-flip-y {
  from { opacity: 0; transform: rotateY(40deg); }
  to { opacity: 1; transform: rotateY(0); }
}
@keyframes wa-blur-in {
  from { opacity: 0; filter: blur(12px); transform: scale(1.04); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes wa-skew-in {
  from { opacity: 0; transform: skewX(8deg) translateY(20px); }
  to { opacity: 1; transform: skewX(0) translateY(0); }
}
@keyframes wa-bounce-up {
  0% { opacity: 0; transform: translateY(60px); }
  60% { opacity: 1; transform: translateY(-8px); }
  80% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
@keyframes wa-clip-reveal {
  from { opacity: 0; clip-path: inset(50% 0 50% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes wa-circle-reveal {
  from { clip-path: circle(0% at 50% 50%); opacity: 0; }
  to { clip-path: circle(75% at 50% 50%); opacity: 1; }
}
@keyframes wa-draw-line {
  from { stroke-dashoffset: 100%; opacity: 0.5; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wa-glow-pulse {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  50% { opacity: 1; box-shadow: 0 0 24px 4px rgba(99,102,241,0.18); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
@keyframes wa-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Initial hidden state */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
}

/* Active state — animation plays */
[data-anim].wa-active {
  animation-duration: var(--wa-dur, 0.7s);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  opacity: 1;
}

/* Per-animation mapping */
[data-anim="fade-up"].wa-active     { animation-name: wa-fade-up; }
[data-anim="fade-down"].wa-active   { animation-name: wa-fade-down; }
[data-anim="slide-left"].wa-active  { animation-name: wa-slide-left; }
[data-anim="slide-right"].wa-active { animation-name: wa-slide-right; }
[data-anim="scale-in"].wa-active    { animation-name: wa-scale-in; }
[data-anim="pop-in"].wa-active      { animation-name: wa-pop-in; --wa-dur: 0.85s; }
[data-anim="rotate-in"].wa-active   { animation-name: wa-rotate-in; }
[data-anim="flip-x"].wa-active      { animation-name: wa-flip-x; --wa-dur: 0.9s; }
[data-anim="flip-y"].wa-active      { animation-name: wa-flip-y; --wa-dur: 0.9s; }
[data-anim="blur-in"].wa-active     { animation-name: wa-blur-in; --wa-dur: 0.85s; }
[data-anim="skew-in"].wa-active     { animation-name: wa-skew-in; }
[data-anim="bounce-up"].wa-active   { animation-name: wa-bounce-up; --wa-dur: 0.95s; }
[data-anim="clip-reveal"].wa-active { animation-name: wa-clip-reveal; --wa-dur: 0.9s; }
[data-anim="circle-reveal"].wa-active { animation-name: wa-circle-reveal; --wa-dur: 1.1s; }
[data-anim="glow-pulse"].wa-active  { animation-name: wa-glow-pulse; --wa-dur: 1.4s; }
[data-anim="count-up"].wa-active    { animation-name: wa-count-up; --wa-dur: 0.55s; }

/* Stagger handled via inline animation-delay set by JS */

/* SVG draw-line specific (for radar grid + axes) */
.wa-draw [stroke] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-draw.wa-active [stroke] { stroke-dashoffset: 0; }

/* Hover micro-interactions for cards (additive to scroll anims) */
.wa-hover-lift { transition: transform 0.3s, box-shadow 0.3s; }
.wa-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }

.wa-hover-scale { transition: transform 0.3s; }
.wa-hover-scale:hover { transform: scale(1.03); }

.wa-hover-tilt { transition: transform 0.3s; }
.wa-hover-tilt:hover { transform: perspective(800px) rotateY(2deg) rotateX(-1deg); }

/* Number counter elements */
.wa-num { display: inline-block; min-width: 1ch; }

/* Section reveal */
.wa-section { position: relative; }
.wa-section::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--we-a, #3730A3), transparent);
  transition: width 1s ease-out;
}
.wa-section.wa-active::before { width: 60%; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  [data-anim].wa-active { animation: none !important; }
  .wa-hover-lift, .wa-hover-scale, .wa-hover-tilt { transition: none; }
  .wa-hover-lift:hover, .wa-hover-scale:hover, .wa-hover-tilt:hover { transform: none; }
}