/* Animations CSS file for Sales Department Landing */

/* Floating animations */
@keyframes float {

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

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float-reverse {

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

    50% {
        transform: translateY(20px) rotate(-5deg);
    }
}

@keyframes float-head {

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

    50% {
        transform: translateY(-15px) rotate(2deg) scale(1.05);
    }
}

@keyframes float-headphones {

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

    50% {
        transform: translateY(-10px) rotate(-1deg) scale(1.02);
    }
}

/* Glow animations */
@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(16, 183, 125, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 40px rgba(16, 183, 125, 0.6);
        transform: scale(1.05);
    }
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(16, 183, 125, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(16, 183, 125, 0.4);
        transform: scale(1.02);
    }
}

/* Shimmer animations */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

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

@keyframes shimmer-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes shimmer-vertical {
    0% {
        transform: translateY(-100%);
    }

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

/* Button animations */
@keyframes button-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes button-pulse {

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

    50% {
        transform: scale(1.05);
    }
}

@keyframes button-bounce {

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

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

/* Rotation animations */
@keyframes rotate-slow {
    from {
        transform: rotate(0deg);
    }

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

@keyframes rotate-reverse {
    from {
        transform: rotate(360deg);
    }

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

/* Pulse animations */
@keyframes pulse-glow {

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

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes pulse-slow {

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

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes pulse-fast {

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

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Slide animations */
@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade animations */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale animations */
@keyframes scale-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

@keyframes scale-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }

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

@keyframes scale-bounce {

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

    50% {
        transform: scale(1.1);
    }
}

/* Ripple effect */
@keyframes ripple-animation {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

/* Chart animations */
@keyframes chartGrow {
    0% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        stroke-dasharray: 1000 0;
        opacity: 1;
    }
}

@keyframes pointAppear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

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

/* Typing animation */
@keyframes typing {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes blink-caret {

    0%,
    50% {
        border-color: transparent;
    }

    51%,
    100% {
        border-color: #10b77d;
    }
}

/* Wave animation */
@keyframes wave {

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

    25% {
        transform: rotate(20deg);
    }

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

/* Bounce animations */
@keyframes bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

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

@keyframes bounce-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    25% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.02);
    }

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

/* Utility animation classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

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

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

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

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

.animate-shimmer {
    animation: shimmer 3s infinite;
}

.animate-shimmer-sweep {
    animation: shimmer-sweep 2s ease-in-out infinite;
}

.animate-shimmer-vertical {
    animation: shimmer-vertical 3s infinite;
}

.animate-button-shimmer {
    background: linear-gradient(90deg, #10b77d, #0ea86f, #10b77d);
    background-size: 200% 100%;
    animation: button-shimmer 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

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

.animate-button-bounce {
    animation: button-bounce 1s ease-in-out infinite;
}

.animate-rotate-slow {
    animation: rotate-slow 20s linear infinite;
}

.animate-rotate-reverse {
    animation: rotate-reverse 15s linear infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

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

.animate-pulse-fast {
    animation: pulse-fast 1s ease-in-out infinite;
}

.animate-slide-in-left {
    animation: slide-in-left 0.5s ease-out forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 0.5s ease-out forwards;
}

.animate-slide-in-up {
    animation: slide-in-up 0.5s ease-out forwards;
}

.animate-slide-in-down {
    animation: slide-in-down 0.5s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

.animate-fade-out {
    animation: fade-out 0.5s ease-out forwards;
}

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

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

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

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

.animate-scale-in {
    animation: scale-in 0.5s ease-out forwards;
}

.animate-scale-out {
    animation: scale-out 0.5s ease-out forwards;
}

.animate-scale-bounce {
    animation: scale-bounce 1s ease-in-out infinite;
}

.animate-ripple {
    animation: ripple-animation 0.6s linear;
}

.animate-chart-grow {
    animation: chartGrow 3s ease-in-out forwards;
}

.animate-point-appear {
    animation: pointAppear 0.6s ease-out forwards;
}

.animate-typing {
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    border-right: 2px solid #10b77d;
    white-space: nowrap;
    overflow: hidden;
}

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

.animate-bounce-in {
    animation: bounce-in 0.6s ease-out forwards;
}

.animate-bounce-out {
    animation: bounce-out 0.6s ease-out forwards;
}

/* Animation delays */
.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

.animate-delay-700 {
    animation-delay: 0.7s;
}

.animate-delay-1000 {
    animation-delay: 1s;
}

.animate-delay-1500 {
    animation-delay: 1.5s;
}

.animate-delay-2000 {
    animation-delay: 2s;
}

/* Animation durations */
.animate-duration-100 {
    animation-duration: 0.1s;
}

.animate-duration-200 {
    animation-duration: 0.2s;
}

.animate-duration-300 {
    animation-duration: 0.3s;
}

.animate-duration-500 {
    animation-duration: 0.5s;
}

.animate-duration-700 {
    animation-duration: 0.7s;
}

.animate-duration-1000 {
    animation-duration: 1s;
}

.animate-duration-1500 {
    animation-duration: 1.5s;
}

.animate-duration-2000 {
    animation-duration: 2s;
}

.animate-duration-3000 {
    animation-duration: 3s;
}

.animate-duration-5000 {
    animation-duration: 5s;
}

/* Animation iterations */
.animate-iteration-1 {
    animation-iteration-count: 1;
}

.animate-iteration-2 {
    animation-iteration-count: 2;
}

.animate-iteration-3 {
    animation-iteration-count: 3;
}

.animate-iteration-infinite {
    animation-iteration-count: infinite;
}

/* Animation fill modes */
.animate-fill-forwards {
    animation-fill-mode: forwards;
}

.animate-fill-backwards {
    animation-fill-mode: backwards;
}

.animate-fill-both {
    animation-fill-mode: both;
}

/* Animation timing functions */
.animate-ease {
    animation-timing-function: ease;
}

.animate-ease-in {
    animation-timing-function: ease-in;
}

.animate-ease-out {
    animation-timing-function: ease-out;
}

.animate-ease-in-out {
    animation-timing-function: ease-in-out;
}

.animate-linear {
    animation-timing-function: linear;
}

.animate-cubic-bezier {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover animations */
.hover-float:hover {
    animation: float 2s ease-in-out infinite;
}

.hover-glow:hover {
    animation: glow 1s ease-in-out infinite;
}

.hover-scale:hover {
    animation: scale-bounce 0.5s ease-in-out infinite;
}

.hover-rotate:hover {
    animation: rotate-slow 2s linear infinite;
}

.hover-pulse:hover {
    animation: pulse-glow 1s ease-in-out infinite;
}

/* Pause animations on hover */
.pause-on-hover:hover {
    animation-play-state: paused;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}