/* ===================================
   CALCULATORPK - UNIQUE TOOL COLORS & ANIMATIONS
   ===================================*/

/* Unique Colors for Each Tool */
:root {
    /* Tool 1: Percentage Calculator */
    --tool-1-color: #FF6B6B;
    --tool-1-light: #ff8787;
    --tool-1-dark: #e85555;
    
    /* Tool 2: GST Calculator */
    --tool-2-color: #4ECDC4;
    --tool-2-light: #6dd8d0;
    --tool-2-dark: #3ab8af;
    
    /* Tool 3: EMI Calculator */
    --tool-3-color: #45B7D1;
    --tool-3-light: #64c4da;
    --tool-3-dark: #32a3bd;
    
    /* Tool 4: Age Calculator */
    --tool-4-color: #96CEB4;
    --tool-4-light: #abd9c4;
    --tool-4-dark: #7fb99f;
    
    /* Tool 5: Profit & Loss Calculator */
    --tool-5-color: #FFEAA7;
    --tool-5-light: #fff2c2;
    --tool-5-dark: #f5d77a;
    
    /* Tool 6: Area Calculator */
    --tool-6-color: #DDA0DD;
    --tool-6-light: #e7b8e7;
    --tool-6-dark: #ce88ce;
    
    /* Tool 7: BMI Calculator */
    --tool-7-color: #98D8C8;
    --tool-7-light: #afe3d6;
    --tool-7-dark: #7dc9b7;
    
    /* Tool 8: URL Shortener */
    --tool-8-color: #F7DC6F;
    --tool-8-light: #fae690;
    --tool-8-dark: #f3cf4d;
    
    /* Tool 9: QR Code Generator */
    --tool-9-color: #BB8FCE;
    --tool-9-light: #ccaadb;
    --tool-9-dark: #a576ba;
    
    /* Tool 10: Image Color Picker */
    --tool-10-color: #F1948A;
    --tool-10-light: #f5aba1;
    --tool-10-dark: #eb7569;
    
    /* Tool 11: Image Pixel Checker */
    --tool-11-color: #85C1E9;
    --tool-11-light: #9fd0ed;
    --tool-11-dark: #68afe2;
    
    /* Tool 12: Headcanon Generator */
    --tool-12-color: #F8C471;
    --tool-12-light: #fad393;
    --tool-12-dark: #f5b24e;
}

/* Unique Animations for Tool Cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flip {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px currentColor;
    }
    50% {
        box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* Apply Unique Colors and Animations to Tool Cards */
.tool-card:nth-child(1) {
    border-color: var(--tool-1-color);
    animation: fadeInUp 0.6s ease-out;
}
.tool-card:nth-child(1):hover {
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    animation: pulse 0.6s ease-in-out;
}
.tool-card:nth-child(1) .tool-icon {
    background: linear-gradient(135deg, var(--tool-1-color), var(--tool-1-light));
    color: white;
}

.tool-card:nth-child(2) {
    border-color: var(--tool-2-color);
    animation: slideInLeft 0.6s ease-out;
}
.tool-card:nth-child(2):hover {
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3);
    animation: bounce 0.6s ease-in-out;
}
.tool-card:nth-child(2) .tool-icon {
    background: linear-gradient(135deg, var(--tool-2-color), var(--tool-2-light));
    color: white;
}

.tool-card:nth-child(3) {
    border-color: var(--tool-3-color);
    animation: slideInRight 0.6s ease-out;
}
.tool-card:nth-child(3):hover {
    box-shadow: 0 8px 25px rgba(69, 183, 209, 0.3);
    animation: zoomIn 0.4s ease-in-out;
}
.tool-card:nth-child(3) .tool-icon {
    background: linear-gradient(135deg, var(--tool-3-color), var(--tool-3-light));
    color: white;
}

.tool-card:nth-child(4) {
    border-color: var(--tool-4-color);
    animation: zoomIn 0.6s ease-out;
    animation-delay: 0.3s;
}
.tool-card:nth-child(4):hover {
    box-shadow: 0 8px 25px rgba(150, 206, 180, 0.3);
    transform: translateY(-10px);
    transition: all 0.3s ease;
}
.tool-card:nth-child(4) .tool-icon {
    background: linear-gradient(135deg, var(--tool-4-color), var(--tool-4-light));
    color: white;
}

.tool-card:nth-child(5) {
    border-color: var(--tool-5-color);
    animation: fadeInUp 0.7s ease-out;
}
.tool-card:nth-child(5):hover {
    box-shadow: 0 8px 25px rgba(255, 234, 167, 0.4);
    animation: shake 0.5s ease-in-out;
}
.tool-card:nth-child(5) .tool-icon {
    background: linear-gradient(135deg, var(--tool-5-color), var(--tool-5-light));
    color: #333;
}

.tool-card:nth-child(6) {
    border-color: var(--tool-6-color);
    animation: slideInLeft 0.7s ease-out;
}
.tool-card:nth-child(6):hover {
    box-shadow: 0 8px 25px rgba(221, 160, 221, 0.3);
    animation: glow 0.8s ease-in-out;
}
.tool-card:nth-child(6) .tool-icon {
    background: linear-gradient(135deg, var(--tool-6-color), var(--tool-6-light));
    color: white;
}

.tool-card:nth-child(7) {
    border-color: var(--tool-7-color);
    animation: slideInRight 0.7s ease-out;
}
.tool-card:nth-child(7):hover {
    box-shadow: 0 8px 25px rgba(152, 216, 200, 0.3);
    animation: pulse 0.6s ease-in-out;
}
.tool-card:nth-child(7) .tool-icon {
    background: linear-gradient(135deg, var(--tool-7-color), var(--tool-7-light));
    color: white;
}

.tool-card:nth-child(8) {
    border-color: var(--tool-8-color);
    animation: zoomIn 0.7s ease-out;
}
.tool-card:nth-child(8):hover {
    box-shadow: 0 8px 25px rgba(247, 220, 111, 0.4);
    animation: bounce 0.6s ease-in-out;
}
.tool-card:nth-child(8) .tool-icon {
    background: linear-gradient(135deg, var(--tool-8-color), var(--tool-8-light));
    color: #333;
}

.tool-card:nth-child(9) {
    border-color: var(--tool-9-color);
    animation: fadeInUp 0.8s ease-out;
}
.tool-card:nth-child(9):hover {
    box-shadow: 0 8px 25px rgba(187, 143, 206, 0.3);
    animation: rotate 0.8s ease-in-out;
}
.tool-card:nth-child(9) .tool-icon {
    background: linear-gradient(135deg, var(--tool-9-color), var(--tool-9-light));
    color: white;
}

.tool-card:nth-child(10) {
    border-color: var(--tool-10-color);
    animation: slideInLeft 0.8s ease-out;
    animation-delay: 0.9s;
}
.tool-card:nth-child(10):hover {
    box-shadow: 0 8px 25px rgba(241, 148, 138, 0.3);
    transform: translateY(-10px);
    transition: all 0.3s ease;
}
.tool-card:nth-child(10) .tool-icon {
    background: linear-gradient(135deg, var(--tool-10-color), var(--tool-10-light));
    color: white;
}

.tool-card:nth-child(11) {
    border-color: var(--tool-11-color);
    animation: slideInRight 0.8s ease-out;
}
.tool-card:nth-child(11):hover {
    box-shadow: 0 8px 25px rgba(133, 193, 233, 0.3);
    animation: zoomIn 0.4s ease-in-out;
}
.tool-card:nth-child(11) .tool-icon {
    background: linear-gradient(135deg, var(--tool-11-color), var(--tool-11-light));
    color: white;
}

.tool-card:nth-child(12) {
    border-color: var(--tool-12-color);
    animation: zoomIn 0.8s ease-out;
}
.tool-card:nth-child(12):hover {
    box-shadow: 0 8px 25px rgba(248, 196, 113, 0.4);
    animation: glow 0.8s ease-in-out;
}
.tool-card:nth-child(12) .tool-icon {
    background: linear-gradient(135deg, var(--tool-12-color), var(--tool-12-light));
    color: #333;
}

/* Button Hover Animations */
.tool-card .tool-link {
    transition: all 0.3s ease;
}

.tool-card:hover .tool-link {
    transform: translateY(-3px);
}

/* Icon Rotation on Hover */
.tool-card:hover .tool-icon i {
    animation: rotate 0.6s ease-in-out;
}

/* Stagger Animation for Cards on Page Load */
.tool-card:nth-child(1) { animation-delay: 0s; }
.tool-card:nth-child(2) { animation-delay: 0.1s; }
.tool-card:nth-child(3) { animation-delay: 0.2s; }
.tool-card:nth-child(4) { animation-delay: 0.3s; }
.tool-card:nth-child(5) { animation-delay: 0.4s; }
.tool-card:nth-child(6) { animation-delay: 0.5s; }
.tool-card:nth-child(7) { animation-delay: 0.6s; }
.tool-card:nth-child(8) { animation-delay: 0.7s; }
.tool-card:nth-child(9) { animation-delay: 0.8s; }
.tool-card:nth-child(10) { animation-delay: 0.9s; }
.tool-card:nth-child(11) { animation-delay: 1s; }
.tool-card:nth-child(12) { animation-delay: 1.1s; }