/* ==========================================================================
   Vindam Landing — Animations
   All @keyframes and their associated utility classes.
   ========================================================================== */

/* --- Gentle Float (subtle CTA arrows) --- */
@keyframes gentle-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.animate-gentle-float {
    animation: gentle-float 2.5s ease-in-out infinite;
}

/* --- Marquee (Logo slider) --- */
@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 100s linear infinite;
}

/* --- Strong Pulse (status indicators) --- */
@keyframes strong-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(109, 190, 218, 0.7);
    }

    70% {
        transform: scale(1.1);
        opacity: 0.8;
        box-shadow: 0 0 0 6px rgba(109, 190, 218, 0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(109, 190, 218, 0);
    }
}

.animate-strong-pulse {
    animation: strong-pulse 2s infinite;
}

/* --- Fade In --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-delay {
    animation: fadeIn 0.6s ease-out 0.3s both;
}

/* --- Slide Up --- */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-slide-up {
    animation: slideUp 0.8s ease-out;
}

/* --- Float --- */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

/* --- Expand (divider line) --- */
@keyframes expand {
    from {
        width: 0;
    }

    to {
        width: 4rem;
    }
}

.animate-expand {
    animation: expand 0.8s ease-out 0.4s both;
}

/* --- Slide In Right (user messages) --- */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Slide In Left (bot messages) --- */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Typing Dot --- */
@keyframes typingDot {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.7;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* --- Message Pop --- */
@keyframes messagePop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.message-pop {
    animation: messagePop 0.3s ease-out;
}

/* --- Flow Fade In (step-by-step) --- */
@keyframes flowFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.flow-step {
    opacity: 0;
    animation: flowFadeIn 0.5s ease-out forwards;
}

/* --- Spin Slow (hover icon) --- */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.group:hover .animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* --- Type Dot (hover typing) --- */
@keyframes type-dot {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.group:hover .animate-type-1 {
    animation: type-dot 1s infinite 0.1s;
}

.group:hover .animate-type-2 {
    animation: type-dot 1s infinite 0.2s;
}

.group:hover .animate-type-3 {
    animation: type-dot 1s infinite 0.3s;
}

/* --- Fly Lateral (hover) --- */
@keyframes fly-lateral {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    40% {
        transform: translate(20px, -5px) scale(0.8);
        opacity: 0;
    }

    41% {
        transform: translate(-20px, 10px) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

.group:hover .animate-fly-lateral {
    animation: fly-lateral 1.2s ease-in-out;
}

/* --- Speed Lines (hover) --- */
@keyframes speed-lines {
    0% {
        transform: translateX(10px);
        opacity: 0;
        stroke-dasharray: 0, 20;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(-5px);
        opacity: 0;
    }
}

.group:hover .animate-speed-lines path {
    animation: speed-lines 0.8s infinite linear;
}

.group:hover .animate-speed-lines path:nth-child(2) {
    animation-delay: 0.1s;
}

.group:hover .animate-speed-lines path:nth-child(3) {
    animation-delay: 0.2s;
}

/* --- Spark Fade (hover) --- */
@keyframes spark-fade {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.group:hover .animate-spark-1 {
    animation: spark-fade 0.6s ease-out infinite;
    animation-delay: 0s;
}

.group:hover .animate-spark-2 {
    animation: spark-fade 0.6s ease-out infinite;
    animation-delay: 0.1s;
}

.group:hover .animate-spark-3 {
    animation: spark-fade 0.6s ease-out infinite;
    animation-delay: 0.2s;
}

.group:hover .animate-spark-4 {
    animation: spark-fade 0.6s ease-out infinite;
    animation-delay: 0.3s;
}

/* --- Hand Shake (hover) --- */
@keyframes hand-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }
}

.group:hover .animate-hand-shake {
    animation: hand-shake 0.5s ease-in-out infinite;
}

/* --- Draw Check (hover) --- */
@keyframes draw-check {
    from {
        stroke-dasharray: 10;
        stroke-dashoffset: 10;
    }

    to {
        stroke-dasharray: 10;
        stroke-dashoffset: 0;
    }
}

.group:hover .animate-draw-check {
    animation: draw-check 0.5s ease-out forwards;
}

/* --- Pulse Text (hover) --- */
@keyframes pulse-text {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 107, 0, 0);
    }

    50% {
        transform: scale(1.05);
        text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
        color: #FF6B00;
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 107, 0, 0);
    }
}

.group:hover .animate-pulse-text {
    animation: pulse-text 1.5s infinite;
}

/* --- Fly Out (hover) --- */
@keyframes fly-out {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    25% {
        transform: translate(-2px, 2px) scale(0.95) rotate(-5deg);
    }

    50% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    75% {
        transform: translate(2px, -2px) scale(1.05) rotate(5deg);
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

.group:hover .animate-fly-out {
    animation: fly-out 2s ease-in-out infinite;
}

/* --- Float (hover variant with rotation) --- */
.group:hover .animate-float {
    animation: float 1.5s ease-in-out infinite;
}

/* --- Zoom Examine (hover) --- */
@keyframes zoom-examine {

    0%,
    100% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.3) translate(2px, -2px);
    }
}

/* --- Ping Slow (hover) --- */
@keyframes ping-slow {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.group:hover .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.group:hover .animate-ping-slower {
    animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --- Wave (recording visualizer) --- */
@keyframes wave {

    0%,
    100% {
        height: 4px;
        opacity: 0.5;
    }

    50% {
        height: 14px;
        opacity: 1;
    }
}

.animate-wave-1 {
    animation: wave 0.6s ease-in-out infinite;
}

.animate-wave-2 {
    animation: wave 0.8s ease-in-out infinite 0.1s;
}

.animate-wave-3 {
    animation: wave 0.7s ease-in-out infinite 0.2s;
}