/* Global Animations */

/* Dashboard Icon Animation */
@keyframes tileX-move {

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

    50% {
        transform: translateX(2px);
        opacity: 1;
    }
}

@keyframes tileX-scale {

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

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

@keyframes tile-float {

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

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

.group:hover .animate-tileX {
    animation: tileX-move 0.6s ease-in-out;
}

.group:hover .animate-tileX:nth-child(2) {
    animation: tileX-scale 0.6s ease-in-out 0.1s;
}

.group:hover .animate-tileX:nth-child(3) {
    animation: tile-float 0.8s ease-in-out 0.2s;
}

.dashboard-btn:hover svg {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Menu Icon Animation */
@keyframes menu-line {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(10px);
        opacity: 0;
    }

    51% {
        transform: translateX(-10px);
        opacity: 0;
    }

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

@keyframes menu-line-reverse {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(-10px);
        opacity: 0;
    }

    51% {
        transform: translateX(10px);
        opacity: 0;
    }

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

.group:hover .animate-menu-line:nth-child(1) {
    animation: menu-line 0.6s ease-in-out;
}

.group:hover .animate-menu-line:nth-child(2) {
    animation: menu-line-reverse 0.6s ease-in-out 0.1s;
}

.group:hover .animate-menu-line:nth-child(3) {
    animation: menu-line 0.6s ease-in-out 0.2s;
}

/* Login Icon Animation */
@keyframes login-arrow-move {

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

    50% {
        transform: translateX(3px);
    }
}

@keyframes login-line-move {

    0%,
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50% {
        transform: scaleX(0.7);
        transform-origin: left;
    }
}

.group:hover .animate-login-arrow {
    animation: login-arrow-move 0.6s ease-in-out infinite;
}

.group:hover .animate-login-line {
    animation: login-line-move 0.6s ease-in-out infinite;
}

/* Eye-Off Icon Animation */
@keyframes eye-arc {

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

    50% {
        stroke-dasharray: 0 20;
        opacity: 0.5;
    }
}

@keyframes eye-slash {

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

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

.group:hover .animate-eye-arc {
    animation: eye-arc 0.8s ease-in-out;
}

.group:hover .animate-eye-slash {
    animation: eye-slash 0.5s ease-in-out;
}

/* Logout Icon Animation */
@keyframes logout-arrow-move {

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

    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

@keyframes logout-door-draw {

    0%,
    100% {
        stroke-dasharray: 1 0;
    }
}

.group:hover .animate-logout-arrow {
    animation: logout-arrow-move 0.6s ease-in-out;
}

/* Settings Icon Animation */
@keyframes settings-spin {
    0% {
        transform: rotate(0deg);
    }

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

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

@keyframes gear-draw {
    0% {
        stroke-dasharray: 0 100;
        opacity: 0;
    }

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

.group:hover .animate-settings-spin {
    animation: settings-spin 1s ease-in-out;
}

/* Upload Icon Animation */
@keyframes upload-shaft {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-3px);
        opacity: 0.5;
    }

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

@keyframes upload-tray {
    0% {
        stroke-dasharray: 1 0;
    }

    50% {
        stroke-dasharray: 0 1;
    }

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

.group:hover .animate-upload-shaft {
    animation: upload-shaft 0.6s ease-in-out infinite;
}

.group:hover .animate-upload-head {
    animation: upload-shaft 0.6s ease-in-out infinite;
}

.group:hover .animate-upload-tray {
    animation: upload-tray 1s ease-in-out;
}

/* Credit Card Animation */
@keyframes card-tilt {

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

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

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

@keyframes card-stripe {

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

    50% {
        transform: translateX(-2px);
        opacity: 0.7;
    }
}

@keyframes card-swipe {
    0% {
        stroke-dasharray: 0 10;
        opacity: 0;
    }

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

.group:hover .animate-card-tilt {
    animation: card-tilt 0.6s ease-in-out;
}

.group:hover .animate-card-stripe {
    animation: card-stripe 0.6s ease-in-out;
}

.group:hover .animate-card-swipe {
    animation: card-swipe 0.6s ease-in-out;
}

/* Pound Animation */
@keyframes pound-draw {
    0% {
        stroke-dasharray: 0 100;
        opacity: 0;
    }

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

.group:hover .animate-pound-curve {
    animation: pound-draw 0.6s ease-in-out;
}

.group:hover .animate-pound-vert {
    animation: pound-draw 0.6s ease-in-out 0.1s;
}

.group:hover .animate-pound-mid {
    animation: pound-draw 0.6s ease-in-out 0.2s;
}

.group:hover .animate-pound-base {
    animation: pound-draw 0.6s ease-in-out 0.3s;
}

/* Users Icon Animation - Ported from React/Framer Motion */
@keyframes users-arc-draw {
    0% {
        stroke-dashoffset: 50;
        opacity: 0.3;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes users-head-pop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes users-side-draw {
    0% {
        stroke-dashoffset: 40;
        opacity: 0.2;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.group:hover .animate-user-body {
    stroke-dasharray: 50;
    /* Matches React variant */
    animation: users-arc-draw 0.7s ease-in-out forwards;
}

.group:hover .animate-user-head {
    transform-origin: 9px 7px;
    /* Center of circle cx=9 cy=7 */
    animation: users-head-pop 0.6s ease-out forwards;
}

.group:hover .animate-user-side {
    stroke-dasharray: 40;
    /* Matches React variant */
    animation: users-side-draw 0.7s ease-in-out 0.3s forwards;
    /* 0.3s delay */
}

/* Page Entry Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

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

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

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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

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

.slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.slide-up-delay-1 {
    animation: slideUp 0.6s ease-out 0.1s forwards;
    opacity: 0;
}

.slide-up-delay-2 {
    animation: slideUp 0.6s ease-out 0.2s forwards;
    opacity: 0;
}

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

.scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}
/* Index Specific */
@keyframes tile-bounce {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    33% { transform: translateY(3px) scale(0.95); opacity: 0.6; }
    66% { transform: translateY(-2px) scale(1.04); opacity: 1; }
}

.group:hover .animate-tile0 {
    animation: tile-bounce 0.5s ease-in-out;
}