/**
 * Abdur Rehman Portfolio - Animations & Transitions
 * Keyframes, hover-glow transitions, scroll-revealed elements classes, and page loader fades.
 */

/* ==========================================================================
   1. Scroll Reveal Mechanics (Observer Classes)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

.reveal--left {
    transform: translateX(-40px);
}

.reveal--right {
    transform: translateX(40px);
}

.reveal--scale {
    transform: scale(0.92);
}

/* Activated state via JavaScript Observer */
.reveal.reveal--active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Staggered load delays (utility offsets) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ==========================================================================
   2. Keyframe Animations
   ========================================================================== */
/* Ambient light pulse */
@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
        opacity: 0.8;
    }
    50% {
        box-shadow: 0 0 25px rgba(6, 182, 212, 0.4);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
        opacity: 0.8;
    }
}

.anim-glow {
    animation: glow-pulse 3s infinite ease-in-out;
}

/* Floating animation for icons/graphics */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.anim-float {
    animation: float 4s ease-in-out infinite;
}

/* Pulse animation for active dot indicator */
@keyframes dot-pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.anim-pulse {
    animation: dot-pulse 2s infinite ease-in-out;
}

/* Subtly moving background radial orbs */
@keyframes orb-move {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

.anim-orb-1 {
    animation: orb-move 20s infinite alternate ease-in-out;
}

.anim-orb-2 {
    animation: orb-move 25s infinite alternate-reverse ease-in-out;
    animation-delay: 2s;
}

/* Text Shimmer Effect (for headers/accents) */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.shimmer-text {
    background: linear-gradient(
        90deg, 
        var(--color-text-primary) 0%, 
        var(--color-accent) 25%, 
        var(--color-secondary) 50%, 
        var(--color-text-primary) 75%, 
        var(--color-text-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 8s linear infinite;
}