/* ==========================================
   120 FPS OPTIMIZATION STYLES
   Ultra-smooth animations at 120 frames per second
   ========================================== */

/* Ensure all animations use will-change for GPU acceleration */
.glass-card,
.skill-card,
.service-card,
.project-card,
.testimonial-card,
.stat-item,
.timeline-item {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Optimize particle canvas for 120 FPS */
#particleCanvas {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Smooth scroll with 120 FPS */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Hero content parallax optimization */
.hero-content {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Button interactions at 120 FPS */
.btn {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Loading animations optimized */
.loading-ring {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.loading-bar {
    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Cursor and typing optimized */
.cursor {
    will-change: opacity;
}

.typed-text {
    will-change: contents;
}

/* Navigation smooth transitions */
.nav-links a::after {
    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Progress bar shimmer at 120 FPS */
.progress-bar::after {
    will-change: transform;
    animation: shimmer-120fps 2s infinite;
}

@keyframes shimmer-120fps {
    0% {
        transform: translateX(-100%) translateZ(0);
    }

    100% {
        transform: translateX(100%) translateZ(0);
    }
}

/* Floating shapes ultra-smooth */
.floating-shapes>* {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Social links ultra-smooth hover */
.social-link {
    will-change: transform, background;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Project overlay smooth transition */
.project-overlay {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Scroll progress ultra-smooth */
.scroll-progress {
    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Form inputs smooth focus */
.form-group input,
.form-group textarea {
    will-change: border-color, box-shadow;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Stats counter smooth */
.stat-number {
    will-change: contents;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Timeline smooth reveal */
.timeline::before {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Optimize all transitions for 120 FPS */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force hardware acceleration for smooth animations */
@media (min-width: 768px) {
    .glass-card:hover {
        transform: translateY(-10px) rotateX(2deg) rotateY(2deg) translateZ(0);
        -webkit-transform: translateY(-10px) rotateX(2deg) rotateY(2deg) translateZ(0);
    }

    .skill-card:hover,
    .service-card:hover,
    .project-card:hover,
    .testimonial-card:hover {
        transform: translateY(-10px) scale(1.02) translateZ(0);
        -webkit-transform: translateY(-10px) scale(1.02) translateZ(0);
    }
}

/* Loading logo pulse at 120 FPS */
@keyframes pulse-scale-120fps {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1) translateZ(0);
        -webkit-transform: translate(-50%, -50%) scale(1.1) translateZ(0);
    }
}

.logo-text {
    animation: pulse-scale-120fps 2s ease-in-out infinite;
}

/* Glow pulse at 120 FPS */
@keyframes glow-pulse-120fps {

    0%,
    100% {
        filter: drop-shadow(0 0 5px var(--color-primary)) drop-shadow(0 0 10px var(--color-primary));
    }

    50% {
        filter: drop-shadow(0 0 10px var(--color-primary)) drop-shadow(0 0 20px var(--color-primary)) drop-shadow(0 0 30px var(--color-accent));
    }
}

.glow {
    animation: glow-pulse-120fps 2s ease-in-out infinite;
}

/* Float animations at 120 FPS */
@keyframes float-120fps {

    0%,
    100% {
        transform: translateY(0px) translateZ(0);
        -webkit-transform: translateY(0px) translateZ(0);
    }

    50% {
        transform: translateY(-10px) translateZ(0);
        -webkit-transform: translateY(-10px) translateZ(0);
    }
}

.floating {
    animation: float-120fps 3s ease-in-out infinite;
}

/* Background pulse at 120 FPS */
@keyframes backgroundPulse-120fps {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

body::before {
    animation: backgroundPulse-120fps 10s ease-in-out infinite alternate;
}

/* Blink at 120 FPS */
@keyframes blink-120fps {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.cursor {
    animation: blink-120fps 0.7s infinite;
}

/* Spin at 120 FPS */
@keyframes spin-120fps {
    0% {
        transform: rotate(0deg) translateZ(0);
    }

    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

.loading-ring {
    animation: spin-120fps 1.5s linear infinite;
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile optimizations for 120 FPS */
@media (max-width: 768px) {

    /* Reduce complexity on mobile for performance */
    .glass-card:hover {
        transform: translateY(-5px) translateZ(0);
        -webkit-transform: translateY(-5px) translateZ(0);
    }
}

/* Print optimizations */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
}