/* 
========================================================================
SREE JAIN INFOTECH - Animations Sheet (animations.css)
Description: Keyframe animations, glows, and interactive hover effects.
========================================================================
*/

/* 1. Page Load Reveal Animation */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-reveal {
    opacity: 0;
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger reveals */
.animate-reveal-delay-1 {
    opacity: 0;
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.animate-reveal-delay-2 {
    opacity: 0;
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* 2. Floating Animation for Graphic Card */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

/* 3. Terminal typing cursor effect */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.terminal-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background-color: var(--emerald-glow);
    margin-left: 4px;
    animation: blink 1s step-end infinite;
}

/* 4. Card Lift & Hover Glow Transitions */
.glass, .glass-strong {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(99, 102, 241, 0.05);
}

.glass-strong:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
                0 0 30px rgba(99, 102, 241, 0.1);
}

/* 5. Button Hover Scale & Shine */
.btn-brand, .btn-outline {
    position: relative;
    overflow: hidden;
}

.btn-brand::after, .btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: all 0.6s ease;
}

.btn-brand:hover::after, .btn-outline:hover::after {
    left: 100%;
}