/* ============================================================
   WORVILA — ANIMATIONS
   worvila-animations.css
   ============================================================ */

/* ── KEYFRAMES ── */
@keyframes wv-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

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

@keyframes wv-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(59,130,246,0.3); }
  50%       { box-shadow: 0 0 40px rgba(59,130,246,0.6); }
}

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

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

@keyframes wv-counter-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wv-slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes wv-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes wv-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wv-pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes wv-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wv-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

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

@keyframes wv-particle {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
  100% { transform: translateY(-120px) translateX(var(--wv-drift)) scale(0); opacity: 0; }
}

/* ── ANIMATED GRADIENT BG ── */
.wv-gradient-animated {
  background: linear-gradient(135deg, 
    rgba(59,130,246,0.15),
    rgba(139,92,246,0.15),
    rgba(6,182,212,0.1));
  background-size: 300% 300%;
  animation: wv-gradient-shift 8s ease infinite;
}

/* ── FLOAT ANIMATION ── */
.wv-float { animation: wv-float 4s ease-in-out infinite; }
.wv-float-delayed { animation: wv-float 4s ease-in-out 1.5s infinite; }

/* ── SHIMMER TEXT ── */
.wv-shimmer-text {
  background: linear-gradient(90deg,
    var(--wv-text-primary) 0%,
    var(--wv-accent-blue) 25%,
    var(--wv-accent-purple) 50%,
    var(--wv-accent-neon) 75%,
    var(--wv-text-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: wv-shimmer 4s linear infinite;
}

/* ── HERO ENTRANCE ── */
.wv-hero-content .wv-hero-eyebrow {
  animation: wv-slide-in-left 0.8s ease 0.2s both;
}
.wv-hero-content .wv-hero-title {
  animation: wv-slide-in-left 0.8s ease 0.4s both;
}
.wv-hero-content .wv-hero-desc {
  animation: wv-slide-in-left 0.8s ease 0.6s both;
}
.wv-hero-content .wv-hero-ctas {
  animation: wv-slide-in-left 0.8s ease 0.8s both;
}

/* ── SCROLL TRIGGERED ── */
.wv-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wv-reveal.wv-revealed {
  opacity: 1;
  transform: translateY(0);
}
.wv-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wv-reveal-left.wv-revealed { opacity: 1; transform: translateX(0); }
.wv-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wv-reveal-right.wv-revealed { opacity: 1; transform: translateX(0); }
.wv-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.wv-reveal-scale.wv-revealed { opacity: 1; transform: scale(1); }

/* ── STAGGER DELAYS ── */
.wv-stagger-1 { transition-delay: 0.1s; }
.wv-stagger-2 { transition-delay: 0.2s; }
.wv-stagger-3 { transition-delay: 0.3s; }
.wv-stagger-4 { transition-delay: 0.4s; }
.wv-stagger-5 { transition-delay: 0.5s; }
.wv-stagger-6 { transition-delay: 0.6s; }

/* ── GLOW BUTTON PULSE ── */
.wv-btn-primary { animation: none; }
.wv-btn-primary:hover { animation: wv-glow-pulse 1.5s ease infinite; }

/* ── COUNTER ANIMATION ── */
.wv-stat-number.wv-counting {
  animation: wv-counter-in 0.4s ease forwards;
}

/* ── PARALLAX WRAPPER ── */
.wv-parallax-wrapper { will-change: transform; }

/* ── LIGHT STREAK ── */
.wv-light-streak {
  position: absolute;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--wv-accent-blue), transparent);
  animation: wv-scanline 3s linear infinite;
  opacity: 0.15;
}

/* ── PARTICLE ── */
.wv-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--wv-accent-blue);
  animation: wv-particle 3s ease-out infinite;
}

/* ── NEON CURSOR TRAIL ── */
.wv-cursor-glow {
  position: fixed;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.3), transparent);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
}

/* ── HOVER RIPPLE ── */
.wv-ripple {
  position: relative;
  overflow: hidden;
}
.wv-ripple::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.wv-ripple:active::after {
  width: 200px; height: 200px;
  opacity: 1;
  transition: 0s;
}

/* ── SVG ANIMATED DIVIDER ── */
.wv-svg-divider {
  position: relative;
  overflow: hidden;
  height: 80px;
}
.wv-svg-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* ── PAGE TRANSITION ── */
.wv-page-transition {
  position: fixed;
  inset: 0;
  background: var(--wv-bg-primary);
  z-index: 99999;
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.wv-page-transition.wv-done {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ── PROGRESS BAR ── */
.wv-read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wv-accent-blue), var(--wv-accent-purple));
  z-index: 1001;
  transition: width 0.1s linear;
}

/* ── TYPING CURSOR ── */
.wv-typed::after {
  content: '|';
  animation: wv-blink 0.8s step-end infinite;
  color: var(--wv-accent-blue);
}

/* ── SECTION BACKGROUND ── */
.wv-section-dark { background: var(--wv-bg-secondary); }
.wv-section-accent {
  background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(139,92,246,0.04));
}