/* ============================================
   TEVTA AI Platform - Animations
   Premium Micro-interactions
   ============================================ */

/* Page Transitions */
.page-transition {
    animation: pageSlideIn 0.4s ease forwards;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Hero Section Animations */
.hero-text-reveal {
    opacity: 0;
    animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }

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

.hero-image-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

/* Card Entrance Animations */
.card-enter {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: cardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Stagger animation for card grids */
.card-grid .card-custom:nth-child(1) {
    animation-delay: 0.05s;
}

.card-grid .card-custom:nth-child(2) {
    animation-delay: 0.1s;
}

.card-grid .card-custom:nth-child(3) {
    animation-delay: 0.15s;
}

.card-grid .card-custom:nth-child(4) {
    animation-delay: 0.2s;
}

.card-grid .card-custom:nth-child(5) {
    animation-delay: 0.25s;
}

.card-grid .card-custom:nth-child(6) {
    animation-delay: 0.3s;
}

/* Button Animations */
.btn-animate {
    position: relative;
    overflow: hidden;
}

.btn-animate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-animate:hover::after {
    width: 300px;
    height: 300px;
}

.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(26, 127, 90, 0.4);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(26, 127, 90, 0);
    }
}

/* Icon Animations */
.icon-bounce {
    animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

    50% {
        transform: scale(1.2);
    }

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

.icon-spin {
    animation: spin 1s linear infinite;
}

.icon-pulse {
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {

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

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

/* Progress Animations */
.progress-animate {
    animation: progressSlide 1s ease forwards;
}

@keyframes progressSlide {
    from {
        width: 0;
    }
}

.progress-glow {
    position: relative;
}

.progress-glow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
    animation: progressGlow 1.5s ease-in-out infinite;
}

@keyframes progressGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Counter Animation */
.counter-animate {
    display: inline-block;
}

/* Match Score Circle Animation */
.match-circle-animate {
    animation: matchCircle 1.5s ease forwards;
}

@keyframes matchCircle {
    from {
        background: conic-gradient(var(--primary) 0%, var(--gray-200) 0%);
    }
}

/* Notification Bell Animation */
.notification-ring {
    animation: bellRing 0.5s ease;
}

@keyframes bellRing {

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

    20%,
    60% {
        transform: rotate(15deg);
    }

    40%,
    80% {
        transform: rotate(-15deg);
    }
}

/* Success Checkmark Animation */
.checkmark-animate {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmarkDraw 0.5s ease forwards 0.3s;
}

@keyframes checkmarkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Loading Dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0;
}

@keyframes loadingDots {

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

    40% {
        transform: scale(1);
    }
}

/* Shimmer Effect */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}

/* Typing Effect */
.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--primary);
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

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

/* Fade Scale Animation */
.fade-scale-in {
    opacity: 0;
    transform: scale(0.9);
    animation: fadeScaleIn 0.4s ease forwards;
}

@keyframes fadeScaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Reveal Animation */
.slide-reveal {
    overflow: hidden;
}

.slide-reveal-content {
    transform: translateY(100%);
    animation: slideReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideReveal {
    to {
        transform: translateY(0);
    }
}

/* Flip Animation */
.flip-in {
    animation: flipIn 0.6s ease forwards;
    backface-visibility: visible;
}

@keyframes flipIn {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }

    to {
        transform: perspective(400px);
        opacity: 1;
    }
}

/* Shake Animation (for errors) */
.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Success Animation */
.success-pop {
    animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

    50% {
        transform: scale(1.2);
    }

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

/* Tooltip Fade */
.tooltip-fade {
    opacity: 0;
    transform: translateY(-10px);
    animation: tooltipFade 0.3s ease forwards;
}

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

/* Modal Animations */
.modal-enter {
    animation: modalEnter 0.3s ease forwards;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

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

.modal-backdrop-enter {
    animation: backdropEnter 0.2s ease forwards;
}

@keyframes backdropEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Scroll Reveal Trigger Classes */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Gradient Animation */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Particle Float Animation */
.particle {
    animation: particleFloat 8s ease-in-out infinite;
}

.particle:nth-child(odd) {
    animation-duration: 10s;
}

.particle:nth-child(even) {
    animation-duration: 12s;
    animation-delay: -2s;
}

@keyframes particleFloat {

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

    25% {
        transform: translateY(-20px) translateX(10px) rotate(5deg);
    }

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

    75% {
        transform: translateY(-30px) translateX(5px) rotate(3deg);
    }
}

/* Badge Bounce */
.badge-bounce {
    animation: badgeBounce 2s ease-in-out infinite;
}

@keyframes badgeBounce {

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

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

/* Count Up Effect Helper */
[data-count] {
    transition: all 0.3s ease;
}

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

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