/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-red: #ff0000;
    --dark-red: #cc0000;
    --light-red: #ff3333;
    --neon-red: #ff0040;
    --black: #000000;
    --dark-gray: #111111;
    --medium-gray: #222222;
    --light-gray: #333333;
    --white: #ffffff;
    --text-gray: #cccccc;
    --border-gray: #444444;
    --gradient-red: linear-gradient(135deg, #ff0000, #cc0000);
    --gradient-dark: linear-gradient(135deg, #000000, #222222);
    --shadow-red: 0 0 20px rgba(255, 0, 0, 0.3);
    --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
    position: relative;
}

/* Live Technical Background */
.tech-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.matrix-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent 98%, rgba(255, 0, 0, 0.1) 100%),
        linear-gradient(0deg, transparent 98%, rgba(255, 0, 0, 0.1) 100%);
    background-size: 100px 100px;
    animation: circuitMove 20s linear infinite;
}

.floating-code {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.floating-code::before,
.floating-code::after {
    content: '{ } < > [ ] ( ) => != === && || function class const let var if else for while return import export default async await try catch finally console.log document.querySelector addEventListener onClick onChange onLoad setTimeout setInterval Promise fetch API JSON HTML CSS JavaScript React Vue Angular Node.js MongoDB MySQL PostgreSQL Git GitHub Docker Kubernetes AWS Azure GCP Linux Ubuntu Windows MacOS VS Code Sublime Atom IntelliJ Eclipse Photoshop Figma Sketch Adobe XD Bootstrap Tailwind SASS LESS Webpack Babel ESLint Prettier npm yarn pip composer Maven Gradle Jenkins Travis CI/CD DevOps Agile Scrum Kanban REST GraphQL WebSocket OAuth JWT SSL HTTPS HTTP TCP/IP DNS CDN SEO PWA SPA MVC MVP MVVM OOP SOLID DRY KISS YAGNI TDD BDD Unit Testing Integration Testing E2E Testing Jest Mocha Chai Cypress Selenium Puppeteer Playwright';
    position: absolute;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: rgba(255, 0, 0, 0.1);
    white-space: nowrap;
    animation: codeFloat 30s linear infinite;
    line-height: 1.5;
}

.floating-code::before {
    top: 20%;
    left: -100%;
    animation-delay: 0s;
}

.floating-code::after {
    top: 60%;
    right: -100%;
    animation-delay: -15s;
    animation-direction: reverse;
}

.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255, 0, 0, 0.05) 1px, transparent 0);
    background-size: 50px 50px;
    animation: gridPulse 4s ease-in-out infinite;
}

/* Custom Mouse Cursor */
.mouse-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    background: var(--primary-red);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    box-shadow: 0 0 20px var(--primary-red);
}

.cursor-glow {
    position: fixed;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.2s ease;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    position: relative;
    padding: 60px 0;
    background: var(--gradient-dark);
    border-bottom: 2px solid var(--primary-red);
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--primary-red);
    box-shadow: var(--shadow-red);
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1) rotate(5deg);
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 900;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

/* Advanced Glitch Effect */
.glitch {
    position: relative;
    color: var(--white);
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glitch::before {
    animation: glitch-anim 2s infinite linear alternate-reverse;
    color: #ff0040;
    z-index: -1;
}

.glitch::after {
    animation: glitch-anim2 1s infinite linear alternate-reverse;
    color: #00ffff;
    z-index: -2;
}

.glitch-text {
    position: relative;
    z-index: 1;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGlow 3s ease-in-out infinite;
}

.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-layer:nth-child(2) {
    color: #ff0040;
    animation: glitch-layer1 0.3s infinite linear alternate-reverse;
    z-index: -1;
}

.glitch-layer:nth-child(3) {
    color: #00ff41;
    animation: glitch-layer2 0.4s infinite linear alternate-reverse;
    z-index: -2;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

/* Developer Information Section */
.developer-info {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.developer-card {
    background: var(--gradient-dark);
    border: 2px solid var(--border-gray);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-dark);
    max-width: 500px;
    width: 100%;
}

.developer-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-red);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.developer-card:hover::before {
    opacity: 0.3;
}

.developer-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red), var(--shadow-dark);
}

.developer-avatar {
    position: relative;
    flex-shrink: 0;
}

.avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--primary-red);
    box-shadow: var(--shadow-red);
    transition: all 0.3s ease;
}

.developer-card:hover .avatar-img {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
}

.status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #00ff41;
    border-radius: 50%;
    border: 2px solid var(--black);
    animation: statusPulse 2s infinite;
}

.developer-details {
    flex-grow: 1;
    min-width: 0;
}

.developer-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.developer-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--primary-red);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.developer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dev-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-gray);
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dev-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.dev-link:hover::before {
    left: 100%;
}

.dev-link:hover {
    color: var(--white);
    background: rgba(255, 0, 0, 0.1);
    transform: translateX(5px);
}

.dev-link i {
    font-size: 1rem;
    color: var(--primary-red);
    transition: all 0.3s ease;
}

.dev-link:hover i {
    color: var(--light-red);
    transform: scale(1.2);
}

.website-link:hover i {
    animation: spin 1s linear infinite;
}

.email-link:hover i {
    animation: bounce 0.6s ease infinite;
}

.developer-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: var(--gradient-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-red);
    animation: badgeFloat 3s ease-in-out infinite;
}

.developer-badge i {
    color: var(--white);
    font-size: 1.2rem;
}

.header-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-red);
    box-shadow: var(--shadow-red);
}

.tech-lines::before,
.tech-lines::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background: var(--gradient-red);
    box-shadow: var(--shadow-red);
}

.tech-lines::before {
    left: -120px;
}

.tech-lines::after {
    right: -120px;
}

/* Controls Section */
.controls {
    padding: 40px 0;
    background: var(--dark-gray);
    border-bottom: 1px solid var(--border-gray);
}

.search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto 30px;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-red);
    font-size: 1.2rem;
}

.search-input {
    width: 100%;
    padding: 15px 20px 15px 60px;
    background: var(--medium-gray);
    border: 2px solid var(--border-gray);
    border-radius: 50px;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    background: var(--light-gray);
}

.search-input::placeholder {
    color: var(--text-gray);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 12px 25px;
    background: var(--medium-gray);
    border: 2px solid var(--border-gray);
    border-radius: 25px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--gradient-red);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 60px 0;
    background: var(--black);
}

.project-card {
    background: var(--gradient-dark);
    border: 1px solid var(--border-gray);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-red);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red), var(--shadow-dark);
}

.project-card:hover::before {
    transform: scaleX(1);
}

.project-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: var(--shadow-red);
    transition: all 0.3s ease;
}

.project-icon i {
    font-size: 2.5rem;
    color: var(--white);
}

.project-card:hover .project-icon {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}

.project-content {
    margin-bottom: 25px;
}

.project-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.project-description {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-tag {
    background: var(--medium-gray);
    color: var(--primary-red);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border-gray);
    transition: all 0.3s ease;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.tech-tag:hover {
    background: var(--primary-red);
    color: var(--white);
    transform: scale(1.05);
}

.project-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.project-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--medium-gray);
    color: var(--white);
    text-decoration: none;
    border-radius: 25px;
    border: 2px solid var(--border-gray);
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.project-link:hover {
    background: var(--gradient-red);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

.github-link:hover {
    background: var(--dark-gray);
    border-color: var(--white);
    color: var(--white);
}

/* Footer */
.footer {
    background: var(--gradient-dark);
    border-top: 2px solid var(--primary-red);
    padding: 40px 0;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-content p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-link {
    width: 45px;
    height: 45px;
    background: var(--medium-gray);
    color: var(--white);
    border: 2px solid var(--border-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--gradient-red);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-3px) scale(1.1);
}

/* Animations */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
    }
}

.project-card:hover .project-icon {
    animation: glow 2s infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .main-title {
        font-size: 2.5rem;
    }
    
    .logo-section {
        flex-direction: column;
        gap: 15px;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 0;
    }
    
    .project-card {
        padding: 25px;
    }
    
    .filter-buttons {
        gap: 10px;
    }
    
    .filter-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .project-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .project-link {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .project-card {
        padding: 20px;
    }
    
    .search-input {
        padding: 12px 15px 12px 50px;
    }
    
    .search-icon {
        left: 15px;
    }
}

/* Hidden class for filtering */
.hidden {
    display: none !important;
}

/* Loading animation */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Smooth transitions for all interactive elements */
* {
    transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-red);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--light-red);
}

/* Technical Background Animations */
@keyframes circuitMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

@keyframes codeFloat {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100vw);
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.1;
    }
}

@keyframes matrixRain {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes techGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
    }
}

@keyframes dataStream {
    0% {
        transform: translateX(-100%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) rotate(360deg);
        opacity: 0;
    }
}

/* Enhanced Mouse Interactions */
.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary-red);
    box-shadow: 
        var(--shadow-red), 
        var(--shadow-dark),
        0 0 50px rgba(255, 0, 0, 0.2);
    animation: techGlow 2s infinite;
}

.project-card:hover .project-title {
    color: var(--light-red);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.project-card:hover .tech-tag {
    animation: techPulse 0.5s ease;
}

@keyframes techPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    }
    100% {
        transform: scale(1);
    }
}

/* Interactive Elements */
.filter-btn:hover {
    background: var(--gradient-red);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px) scale(1.05);
    animation: techGlow 1s infinite;
}

.project-link:hover {
    background: var(--gradient-red);
    border-color: var(--primary-red);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Technology Typography Effects */
.main-title {
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(255, 0, 0, 0.8), 0 0 70px rgba(255, 0, 0, 0.4);
    }
}

/* Advanced Glitch Animations */
@keyframes glitch-anim {
    0% {
        clip: rect(64px, 9999px, 66px, 0);
        transform: skew(0.5deg);
    }
    5% {
        clip: rect(30px, 9999px, 36px, 0);
        transform: skew(0.1deg);
    }
    10% {
        clip: rect(70px, 9999px, 71px, 0);
        transform: skew(0.8deg);
    }
    15% {
        clip: rect(10px, 9999px, 15px, 0);
        transform: skew(0.2deg);
    }
    20% {
        clip: rect(40px, 9999px, 45px, 0);
        transform: skew(0.6deg);
    }
    25% {
        clip: rect(25px, 9999px, 30px, 0);
        transform: skew(0.3deg);
    }
    30% {
        clip: rect(60px, 9999px, 65px, 0);
        transform: skew(0.7deg);
    }
    35% {
        clip: rect(5px, 9999px, 10px, 0);
        transform: skew(0.1deg);
    }
    40% {
        clip: rect(50px, 9999px, 55px, 0);
        transform: skew(0.4deg);
    }
    45% {
        clip: rect(35px, 9999px, 40px, 0);
        transform: skew(0.9deg);
    }
    50% {
        clip: rect(20px, 9999px, 25px, 0);
        transform: skew(0.2deg);
    }
    55% {
        clip: rect(75px, 9999px, 80px, 0);
        transform: skew(0.6deg);
    }
    60% {
        clip: rect(15px, 9999px, 20px, 0);
        transform: skew(0.8deg);
    }
    65% {
        clip: rect(45px, 9999px, 50px, 0);
        transform: skew(0.3deg);
    }
    70% {
        clip: rect(55px, 9999px, 60px, 0);
        transform: skew(0.5deg);
    }
    75% {
        clip: rect(0px, 9999px, 5px, 0);
        transform: skew(0.7deg);
    }
    80% {
        clip: rect(80px, 9999px, 85px, 0);
        transform: skew(0.1deg);
    }
    85% {
        clip: rect(65px, 9999px, 70px, 0);
        transform: skew(0.4deg);
    }
    90% {
        clip: rect(85px, 9999px, 90px, 0);
        transform: skew(0.9deg);
    }
    95% {
        clip: rect(90px, 9999px, 95px, 0);
        transform: skew(0.2deg);
    }
    100% {
        clip: rect(95px, 9999px, 100px, 0);
        transform: skew(0.6deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
        transform: skew(0.8deg);
    }
    5% {
        clip: rect(25px, 9999px, 30px, 0);
        transform: skew(0.2deg);
    }
    10% {
        clip: rect(75px, 9999px, 80px, 0);
        transform: skew(0.6deg);
    }
    15% {
        clip: rect(15px, 9999px, 20px, 0);
        transform: skew(0.4deg);
    }
    20% {
        clip: rect(45px, 9999px, 50px, 0);
        transform: skew(0.9deg);
    }
    25% {
        clip: rect(35px, 9999px, 40px, 0);
        transform: skew(0.1deg);
    }
    30% {
        clip: rect(55px, 9999px, 60px, 0);
        transform: skew(0.7deg);
    }
    35% {
        clip: rect(5px, 9999px, 10px, 0);
        transform: skew(0.3deg);
    }
    40% {
        clip: rect(85px, 9999px, 90px, 0);
        transform: skew(0.5deg);
    }
    45% {
        clip: rect(0px, 9999px, 5px, 0);
        transform: skew(0.8deg);
    }
    50% {
        clip: rect(70px, 9999px, 75px, 0);
        transform: skew(0.2deg);
    }
    55% {
        clip: rect(20px, 9999px, 25px, 0);
        transform: skew(0.6deg);
    }
    60% {
        clip: rect(90px, 9999px, 95px, 0);
        transform: skew(0.4deg);
    }
    65% {
        clip: rect(40px, 9999px, 45px, 0);
        transform: skew(0.9deg);
    }
    70% {
        clip: rect(60px, 9999px, 65px, 0);
        transform: skew(0.1deg);
    }
    75% {
        clip: rect(10px, 9999px, 15px, 0);
        transform: skew(0.7deg);
    }
    80% {
        clip: rect(80px, 9999px, 85px, 0);
        transform: skew(0.3deg);
    }
    85% {
        clip: rect(30px, 9999px, 35px, 0);
        transform: skew(0.5deg);
    }
    90% {
        clip: rect(50px, 9999px, 55px, 0);
        transform: skew(0.8deg);
    }
    95% {
        clip: rect(95px, 9999px, 100px, 0);
        transform: skew(0.2deg);
    }
    100% {
        clip: rect(100px, 9999px, 105px, 0);
        transform: skew(0.6deg);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }
    10% {
        transform: skew(2deg);
    }
    20% {
        transform: skew(-1deg);
    }
    30% {
        transform: skew(1deg);
    }
    40% {
        transform: skew(-2deg);
    }
    50% {
        transform: skew(0deg);
    }
    60% {
        transform: skew(1deg);
    }
    70% {
        transform: skew(-1deg);
    }
    80% {
        transform: skew(2deg);
    }
    90% {
        transform: skew(-2deg);
    }
    100% {
        transform: skew(0deg);
    }
}

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

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

@keyframes textGlow {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(255, 0, 0, 0.8),
            0 0 10px rgba(255, 0, 0, 0.6),
            0 0 15px rgba(255, 0, 0, 0.4),
            0 0 20px rgba(255, 0, 0, 0.2);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(255, 0, 0, 1),
            0 0 20px rgba(255, 0, 0, 0.8),
            0 0 30px rgba(255, 0, 0, 0.6),
            0 0 40px rgba(255, 0, 0, 0.4),
            0 0 50px rgba(255, 0, 0, 0.2);
    }
}

/* Developer Section Animations */
@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(0, 255, 65, 0);
    }
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-5px) rotate(120deg);
    }
    66% {
        transform: translateY(5px) rotate(240deg);
    }
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Responsive Developer Card */
@media (max-width: 768px) {
    .developer-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        max-width: 350px;
    }
    
    .developer-links {
        align-items: center;
    }
    
    .dev-link {
        justify-content: center;
        min-width: 200px;
    }
    
    .developer-badge {
        top: -5px;
        right: -5px;
        width: 35px;
        height: 35px;
    }
    
    .developer-badge i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .developer-card {
        margin: 0 10px;
        padding: 15px;
    }
    
    .developer-name {
        font-size: 1.1rem;
    }
    
    .developer-title {
        font-size: 0.8rem;
    }
    
    .dev-link {
        font-size: 0.8rem;
        min-width: 180px;
    }
}

/* Responsive cursor effects */
@media (max-width: 768px) {
    body {
        cursor: auto;
    }
    
    .mouse-follower,
    .cursor-glow {
        display: none;
    }
}