/* ========== Animations: Core Keyframes ========== */

/* Slide and fade animations */
@keyframes slideFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleFade {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateFade {
  0% {
    opacity: 0;
    transform: rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes parallax {
  0% {
    background-position: center 0px;
  }
  100% {
    background-position: center -50px;
  }
}

/* Left-to-right animations */
@keyframes a-ltr-after {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(101%);
  }
}

@keyframes a-ltr-before {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Reveal animations */
@keyframes revealFromBelow {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealFromAbove {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Spin */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Pulse for vertical bars (scaleY) */
@keyframes pulse {
  0% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.8);
  }
}

/* Fade In (generic) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in / Fade-out (used by OOB/view transitions) */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* Slide transitions (auth modals and view transitions) */
@keyframes slide-from-top {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-from-bottom {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

/* Card entrance (gollam/face) */
@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GUI: pulse scale (avoid name collision with scaleY pulse) */
@keyframes pulse-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Home rocket particles */
@keyframes shoot {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translateY(20px) scale(0);
    opacity: 0;
  }
}

/* Pulse glow */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}

/* Typewriter caret */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Chat: message slide-ins and streaming gradient */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

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

/* Streaming gradient for chat input */
@keyframes streaming-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ========== Animations: Utility Classes ========== */

/* Generic fade in */
.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Alternate fade-in naming */
.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

/* Slide utilities for modals */
.slide-from-top {
  animation: slide-from-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-from-bottom {
  animation: slide-from-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade-out utility */
.fade-out {
  animation: fade-out 300ms ease-out forwards;
}

/* Pulse-glow utility */
.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Card entrance utility */
.animate-cardEntrance-1 {
  animation: cardEntrance 0.6s ease-out 0.1s forwards;
}

/* Slide and fade utilities */
.animate-slideFade {
  animation: slideFade 0.8s ease-in-out forwards;
}

.animate-scaleFade {
  animation: scaleFade 0.8s ease-in-out forwards;
}

.animate-rotateFade {
  animation: rotateFade 0.8s ease-in-out forwards;
}

.animate-parallax {
  animation: parallax 1.5s ease-in-out forwards;
}

/* Left-to-right utilities */
.animate-ltr-after {
  animation: a-ltr-after 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.animate-ltr-before {
  animation: a-ltr-before 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

/* Reveal utilities */
.animate-revealFromBelow {
  animation: revealFromBelow 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-revealFromAbove {
  animation: revealFromAbove 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.5s forwards;
}