/* ====================================
   Animation Styles
   ==================================== */

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 {
  transition-delay: 0.15s;
}

.reveal-d2 {
  transition-delay: 0.3s;
}

.reveal-d3 {
  transition-delay: 0.45s;
}

.reveal-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(24px);
  transition: opacity 0.8s ease,
              filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: all 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) rotate(2deg);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 0.28em;
}

.word-reveal.visible .word {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.overline-wipe {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateX(-16px);
  transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.overline-wipe.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Keyframe Animations */
@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(0.7);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

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

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

@keyframes msgAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}