/* ============================================================
   ANIMATIONS — Scroll reveals, hover effects, grain overlay
   ============================================================ */

/* ========================
   SCROLL REVEAL
   ======================== */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-animate="scale"] {
  transform: scale(0.95);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="slide-left"] {
  transform: translateX(-24px);
}

[data-animate="slide-right"] {
  transform: translateX(24px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* ========================
   FLOAT ANIMATION
   ======================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

.float-delayed {
  animation: float 4s ease-in-out infinite;
  animation-delay: -2s;
}

/* ========================
   CTA PULSE
   ======================== */
@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(52, 211, 153, 0); }
  50% { box-shadow: var(--shadow-md), 0 0 24px rgba(52, 211, 153, 0.25); }
}

.pulse-cta {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ========================
   PROGRESS RING
   ======================== */
@keyframes ring-fill {
  from { stroke-dashoffset: 283; }
}

.ring-animate {
  animation: ring-fill 1.5s var(--ease-out) forwards;
}

/* ========================
   GRAIN TEXTURE OVERLAY
   ======================== */
.grain::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ========================
   SHIMMER (for loading or decorative)
   ======================== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* ========================
   TIMELINE DOT PULSE
   ======================== */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

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

/* ========================
   COUNTER (number roll)
   ======================== */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.count-animate {
  animation: count-up 0.6s var(--ease-out) forwards;
}

/* ========================
   HOVER LIFT (for cards)
   ======================== */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}