/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS - Keyframes and Animation Classes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(1deg);
    }
    50% {
        transform: translateY(-20px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

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

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

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

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

@keyframes shimmer {
    0% {
        transform: rotate(45deg) translateY(-100%);
    }
    100% {
        transform: rotate(45deg) translateY(200%);
    }
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(0, 240, 255, 0.6));
    }
}

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

@keyframes flowParticle {
    0% {
        left: 5%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 95%;
        opacity: 0;
    }
}

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

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

@keyframes morphBlob {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 50% 70% 60%;
    }
    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(0, 240, 255, 0.8), 0 0 60px rgba(0, 240, 255, 0.4);
    }
}

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

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glitch {
    0%, 100% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCaret {
    0%, 100% { border-right-color: transparent; }
    50% { border-right-color: var(--accent-primary); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reveal animations - elements start visible, GSAP handles the animation */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 1;
}

/* Continuous animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

.animate-rotate {
    animation: rotate 60s linear infinite; /* Slowed from 20s for performance */
}

.animate-rotate-reverse {
    animation: rotateReverse 75s linear infinite; /* Slowed from 25s for performance */
}

.animate-morph {
    animation: morphBlob 8s ease-in-out infinite;
}

.animate-glow {
    animation: textGlow 3s ease-in-out infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
}

/* Stagger delay utilities */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* SVG animations */
.svg-draw path,
.svg-draw line,
.svg-draw circle,
.svg-draw rect {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.svg-draw.animate path,
.svg-draw.animate line,
.svg-draw.animate circle,
.svg-draw.animate rect {
    animation: drawLine 2s var(--ease-out-expo) forwards;
}

/* Text animations */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-out-expo);
}

.text-reveal.animate span {
    transform: translateY(0);
}

/* Magnetic effect (handled by JS, but base styles here) */
.magnetic {
    transition: transform var(--duration-fast) var(--ease-out-quart);
}

/* Parallax placeholders */
[data-parallax] {
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT SVG ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.project-svg {
    width: 80px;
    height: 80px;
    opacity: 0.9;
}

.svg-draw-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: svgDraw 2s ease forwards;
}

@keyframes svgDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.svg-float {
    animation: svgFloat 3s ease-in-out infinite;
}

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

.svg-float-slow {
    animation: svgFloatSlow 5s ease-in-out infinite;
}

@keyframes svgFloatSlow {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-2px) translateX(2px); }
}

.svg-pulse {
    animation: svgPulse 2s ease-in-out infinite;
}

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

.svg-rotate {
    transform-origin: center;
    animation: svgRotate 8s linear infinite;
}

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

/* Project card hover effects for SVGs */
.project-card:hover .project-svg {
    opacity: 1;
}

.project-card:hover .svg-float {
    animation-duration: 1.5s;
}

.project-card:hover .svg-rotate {
    animation-duration: 4s;
}