/* ============================================================
   Furqan Ahmad Portfolio — Animations
   GSAP-enhanced + CSS Keyframes
   ============================================================ */

@keyframes pulse-glow {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.7; filter: brightness(1.3); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes scroll-wheel {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(12px); }
}

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

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

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.hero-name {
    background-size: 200% auto;
    animation: gradient-shift 4s ease infinite;
}

.about-section::before,
.skills-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: var(--accent-gradient);
    opacity: 0.3;
}

.skill-progress.animated {
    position: relative;
    overflow: hidden;
}

.skill-progress.animated::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s ease infinite;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s, left 0.3s;
    border-radius: 1px;
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 60%;
    left: 20%;
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    transition: left 0.6s;
    pointer-events: none;
    border-radius: inherit;
}

.glass-card:hover::after {
    left: 100%;
}

#loading-screen.exiting {
    animation: fade-out 0.8s forwards;
}

@keyframes fade-out {
    to { opacity: 0; visibility: hidden; }
}

.no-js .reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-name,
    .skill-progress.animated::after,
    .about-image-ring,
    .scroll-wheel,
    .badge-dot {
        animation: none !important;
    }
    .glass-card::after { display: none; }
}