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

:root {
    /* Modern Color Palette - Updated to match image 10 */
    --bg-primary: #0a0a0f;
    --bg-secondary: #11121a;
    --bg-tertiary: #1b1d29;
    --unity-blue: #00d4ff;
    --unity-orange: #ff6b35;
    --unity-green: #4caf50;
    --unity-purple: #a855f7;
    --text-primary: #eaeaf7;
    --text-secondary: #c0c0d0;
    --text-muted: #7575a0;
    --accent-cyan: #00ffff;
    --accent-pink: #ff006e;
    --accent-violet: #8b5cf6;
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #a855f7 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #00d4ff 100%);
    --gradient-unity: linear-gradient(135deg, #00d4ff 0%, #a855f7 50%, #ff6b35 100%);
    --gradient-modern: linear-gradient(135deg, #a855f7 0%, #00d4ff 50%, #4caf50 100%);

    /* Enhanced Shadows and Glows */
    --glow-primary: 0 0 25px rgba(0, 212, 255, 0.6);
    --glow-secondary: 0 0 20px rgba(255, 107, 53, 0.4);
    --glow-purple: 0 0 20px rgba(168, 85, 247, 0.4);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-modern: 0 15px 50px rgba(168, 85, 247, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background:
        radial-gradient(1200px 600px at 20% 20%, rgba(0, 212, 255, 0.06), transparent 60%),
        radial-gradient(1000px 500px at 80% 10%, rgba(168, 85, 247, 0.06), transparent 60%), var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated Star Background with Geometric Particles */
.stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(45deg, #0a0a0f 0%, #1a1a28 50%, #16213e 100%);
    overflow: hidden;
}

.stars-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 107, 53, 0.03) 0%, transparent 50%);
    animation: backgroundShift 20s ease-in-out infinite alternate;
}

.stars-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(
            45deg,
            transparent 24%,
            rgba(0, 212, 255, 0.05) 25%,
            rgba(0, 212, 255, 0.05) 26%,
            transparent 27%,
            transparent 74%,
            rgba(0, 212, 255, 0.05) 75%,
            rgba(0, 212, 255, 0.05) 76%,
            transparent 77%
        ),
        linear-gradient(
            -45deg,
            transparent 24%,
            rgba(76, 175, 80, 0.05) 25%,
            rgba(76, 175, 80, 0.05) 26%,
            transparent 27%,
            transparent 74%,
            rgba(76, 175, 80, 0.05) 75%,
            rgba(76, 175, 80, 0.05) 76%,
            transparent 77%
        );
    background-size: 100px 100px;
    animation: backgroundMove 30s linear infinite;
    opacity: 0.3;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

.star:nth-child(1) {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}
.star:nth-child(2) {
    top: 20%;
    left: 80%;
    animation-delay: 0.5s;
}
.star:nth-child(3) {
    top: 30%;
    left: 30%;
    animation-delay: 1s;
}
.star:nth-child(4) {
    top: 45%;
    left: 70%;
    animation-delay: 1.5s;
}
.star:nth-child(5) {
    top: 60%;
    left: 20%;
    animation-delay: 2s;
}
.star:nth-child(6) {
    top: 70%;
    left: 90%;
    animation-delay: 2.5s;
}
.star:nth-child(7) {
    top: 80%;
    left: 40%;
    animation-delay: 3s;
}
.star:nth-child(8) {
    top: 90%;
    left: 75%;
    animation-delay: 0.3s;
}
.star:nth-child(9) {
    top: 15%;
    left: 60%;
    animation-delay: 1.2s;
}
.star:nth-child(10) {
    top: 35%;
    left: 85%;
    animation-delay: 1.8s;
}

/* Floating Geometric Particles */
.floating-particle {
    position: absolute;
    animation: floatParticle 8s ease-in-out infinite;
    opacity: 0.6;
}

.floating-particle.triangle {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid rgba(0, 212, 255, 0.4);
}

.floating-particle.square {
    width: 12px;
    height: 12px;
    background: rgba(76, 175, 80, 0.4);
    transform: rotate(45deg);
}

.floating-particle.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.4);
}

@keyframes twinkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes backgroundMove {
    0% {
        transform: translateX(0) translateY(0);
    }
    100% {
        transform: translateX(100px) translateY(100px);
    }
}

@keyframes floatParticle {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-20px) rotate(120deg);
        opacity: 1;
    }
    66% {
        transform: translateY(10px) rotate(240deg);
        opacity: 0.8;
    }
}

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Project cards initial state management */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    flex-wrap: wrap;
    gap: 2rem;
}

.projects-loaded .project-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.5s ease;
}

.projects-loaded .project-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Typography */
.section-title {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 4rem;
    background: var(--gradient-unity);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--glow-primary);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-orange));
    border-radius: 3px;
    box-shadow: var(--glow-primary);
    animation: underlineAppear 1s ease-out forwards;
    animation-delay: 0.2s;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.navbar.scrolled {
    background: rgba(26, 26, 26, 0.98);
    box-shadow: 0 4px 30px rgba(0, 212, 255, 0.15);
    border-bottom-color: rgba(0, 212, 255, 0.2);
}

.nav-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    position: relative;
}

.logo-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 900;
    background: var(--gradient-unity);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--glow-primary);
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Language Switcher */
.language-switcher {
    display: flex;
    gap: 0.5rem;
    margin-right: 2rem;
}

.lang-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--unity-blue);
    border-radius: 20px;
    color: var(--unity-blue);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn.active {
    background: var(--unity-blue);
    color: var(--bg-primary);
    box-shadow: var(--glow-primary);
}

.lang-btn:hover {
    background: var(--unity-blue);
    color: var(--bg-primary);
    box-shadow: var(--glow-primary);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--unity-blue);
    text-shadow: var(--glow-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-unity);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--unity-blue);
    text-shadow: 0 0 10px var(--unity-blue);
}

.nav-link.active::after {
    width: 100%;
    background: var(--unity-orange);
    box-shadow: 0 0 10px var(--unity-orange);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--unity-blue);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    position: relative;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.glitch {
    position: relative;
    background: var(--gradient-unity);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glitch 2s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    animation: glitch-1 0.5s infinite;
    color: var(--accent-cyan);
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 0.5s infinite;
    color: var(--accent-pink);
    z-index: -2;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--unity-blue);
    margin-bottom: 1rem;
    text-shadow: var(--glow-primary);
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    color: var(--unity-orange);
    text-shadow: var(--glow-secondary);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* Unity Visual */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.unity-logo-container {
    position: relative;
    width: 300px;
    height: 300px;
}

.unity-logo {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unity-cube {
    width: 80px;
    height: 80px;
    background: var(--gradient-unity);
    border-radius: 10px;
    animation: float 3s ease-in-out infinite;
    box-shadow: var(--glow-primary);
}

.orbit {
    position: absolute;
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    animation: rotate 10s linear infinite;
}

.orbit-1 {
    width: 150px;
    height: 150px;
    animation-duration: 8s;
}

.orbit-2 {
    width: 200px;
    height: 200px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.orbit-3 {
    width: 250px;
    height: 250px;
    animation-duration: 16s;
}

.orbit::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--unity-blue);
    border-radius: 50%;
    box-shadow: var(--glow-primary);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border-right: 2px solid var(--unity-blue);
    border-bottom: 2px solid var(--unity-blue);
    transform: rotate(45deg);
    animation: bounce 2s infinite;
}

/* Projects Section */
.projects {
    padding: 6rem 0;
    background: var(--bg-primary);
}

/* Project Filters */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 2px solid var(--unity-blue);
    border-radius: 30px;
    color: var(--unity-blue);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--unity-blue);
    color: var(--bg-primary);
    box-shadow: var(--glow-primary);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
}

/* Ensure consistent card heights */
.project-card {
    background: rgba(26, 26, 40, 0.8);
    border-radius: 15px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(168, 85, 247, 0.3);
    min-height: 420px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    transition:
        all 0.5s ease,
        transform 0.3s ease,
        opacity 0.5s ease;
    box-shadow: var(--shadow-modern);
    position: relative;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

.project-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.project-card.fade-in-animate {
    animation: projectCardAppear 0.5s ease-out forwards;
}

.project-card.filtered-out {
    display: none !important;
}

.project-card:not(.filtered-out):hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--unity-blue);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

@keyframes projectCardAppear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-card .project-content h3 {
    display: inline-block;
}

/* Project Preview Images */
.project-preview {
    position: relative;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-image-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-preview {
    position: relative;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}

.project-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.project-card:hover .project-preview img {
    transform: scale(1.06);
    transition: transform 0.3s ease-in-out;
  }
  

.preview-overlay {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-overlay i {
    font-size: 3rem;
    color: var(--unity-blue);
    text-shadow: 0 0 20px var(--unity-blue);
}

.project-card:hover .preview-overlay {
    opacity: 1;
}

/* Progress Ring Status */
.project-status {
    position: absolute;
    top: 1.25rem;
    right: 1.15rem;
    z-index: 10;
}

.status-ring {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
}

.status-text {
    position: absolute;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
}

.status-ring .status-tooltip {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--unity-blue);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.status-ring .status-tooltip.visible {
    opacity: 1;
}

.status-ring[data-status='released'] .progress-ring__circle {
    stroke: var(--unity-blue);
}

.status-ring[data-status='development'] .progress-ring__circle {
    stroke: var(--unity-orange);
}

.status-ring[data-status='concept'] .progress-ring__circle {
    stroke: var(--unity-green);
}

.project-content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.project-content p {
    flex: 1;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 0;
    -webkit-box-orient: vertical;
    color: var(--text-secondary);
}

.project-content h3 {
    color: var(--unity-blue);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* Favorite badge pinned on card */
.favorite-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: none;
}
.favorite-badge i {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    font-size: 1.2rem;
}
/* Keep favorite badge in place on card hover */
.project-card:not(.filtered-out):hover .favorite-badge {
    transform: translateY(0);
}

/* Bot Preview Styles */
.bot-preview {
    background: linear-gradient(135deg, rgba(26, 26, 40, 0.9) 0%, rgba(42, 42, 58, 0.6) 100%);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.bot-avatar-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.project-card:hover .bot-avatar-large {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
}

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

.project-card:hover .bot-preview::before {
    left: 100%;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tag {
    background: rgba(0, 212, 255, 0.1);
    color: var(--unity-blue);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.project-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
}

.project-icon {
    margin-left: auto;
    color: var(--unity-blue);
    font-size: 1.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-card);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--unity-blue);
    border: 2px solid var(--unity-blue);
}

.btn-secondary:hover {
    background: var(--unity-blue);
    color: var(--bg-primary);
    box-shadow: var(--glow-primary);
}

.btn-demo {
    background: var(--unity-green);
    color: white;
}

.btn-demo:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.project-buttons .btn {
    flex: 1;
    min-width: 100px;
    max-width: 150px;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Skills Section */
.skills {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.skill-icon-item {
    width: 120px;
    height: 120px;
    background: rgba(42, 42, 42, 0.6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.skill-icon-item:hover {
    transform: translateY(-10px) scale(1.1);
    border-color: var(--unity-blue);
    box-shadow: var(--glow-primary);
    animation: skillHover 0.6s ease;
}

.skill-icon-item i {
    font-size: 3.5rem;
    color: var(--unity-blue);
    transition: all 0.3s ease;
}

.skill-icon-item:hover i {
    color: var(--unity-orange);
    transform: rotate(10deg);
}

/* Skill Icon Images */
.skill-icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.skill-item:hover .skill-icon-image {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    min-height: 48px;
}

.custom-icon {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: 'Orbitron', monospace;
    color: var(--unity-blue);
    transition: all 0.3s ease;
}

.skill-icon-item:hover .custom-icon {
    color: var(--unity-orange);
    transform: rotate(10deg);
}

.ae-icon {
    background: linear-gradient(45deg, #00005b, #9a4cff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr-icon {
    background: linear-gradient(45deg, #00005b, #ea77ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maya-icon {
    background: linear-gradient(45deg, #0696d7, #37b5a5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes skillHover {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.15);
    }
    100% {
        transform: translateY(-10px) scale(1.1);
    }
}

/* About Section */
.about {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.about-card {
    background: rgba(42, 42, 42, 0.6);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
}

.about-card h3 {
    color: var(--unity-blue);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.experience-timeline {
    background: rgba(42, 42, 42, 0.6);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.timeline-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-date {
    color: var(--unity-orange);
    font-weight: 600;
}

.timeline-content h4 {
    color: var(--unity-blue);
    margin-bottom: 0.5rem;
}

.timeline-content ul {
    list-style: none;
    padding-left: 0;
}

.timeline-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.timeline-content li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--unity-blue);
}

.profile-card {
    background: rgba(42, 42, 42, 0.6);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(76, 175, 80, 0.2);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.profile-photo {
    margin-bottom: 1rem;
}

.photo-placeholder {
    width: 120px;
    height: 120px;
    background: var(--gradient-unity);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 3rem;
    color: white;
    overflow: hidden;
}

.photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.profile-link {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--unity-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--unity-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

.profile-link:hover {
    background: var(--unity-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
}

/* Content Section */
.content {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

.content-section {
    margin-bottom: 4rem;
}

.content-section h3 {
    color: var(--unity-blue);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.video-card {
    background: rgba(42, 42, 42, 0.6);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
}

.video-card:hover {
    transform: translateY(-5px);
    border-color: var(--unity-blue);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

.video-link {
    text-decoration: none;
    color: inherit;
}

.video-thumbnail {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}

.tiktok-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff0050, #00f2ea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff0000;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.video-card:hover .play-overlay {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 1.5rem;
}

.video-info h4 {
    color: var(--unity-blue);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.video-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.spotify-embed {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

/* Contact Section */
.contact {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.contact-content {
    display: flex;
    justify-content: center;
}

.contact-info {
    max-width: 600px;
    width: 100%;
}

.contact-card {
    background: rgba(26, 26, 26, 0.8);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: var(--shadow-card);
}

.contact-card h3 {
    color: var(--unity-blue);
    margin-bottom: 1.5rem;
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(42, 42, 42, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--unity-blue);
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-unity);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text span:first-child {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.contact-text a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-text a:hover {
    color: var(--unity-blue);
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    padding: 2rem 0;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
}

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

.footer-text {
    color: var(--text-muted);
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--unity-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--unity-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--unity-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
}

/* Animations */
@keyframes glitch {
    0%,
    100% {
        transform: translate(0);
        text-shadow: none;
    }
    2%,
    64% {
        transform: translate(2px, -2px) skewX(0.5deg);
        text-shadow:
            -2px 2px 0 #ff00ff,
            2px -2px 0 #00ffff;
    }
    4%,
    60% {
        transform: translate(-2px, 2px) skewX(-0.5deg);
        text-shadow:
            2px -2px 0 #ff00ff,
            -2px 2px 0 #00ffff;
    }
    62% {
        transform: translate(1px, -1px) skewX(0deg);
        text-shadow:
            -1px 1px 0 #ff00ff,
            1px -1px 0 #00ffff;
    }
}

@keyframes glitch-1 {
    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 glitch-2 {
    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 float {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

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

@keyframes pulse {
    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

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

/* Filter Animation */
.project-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.project-card.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .skills-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        order: 2;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(10, 10, 10, 0.95);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        backdrop-filter: blur(10px);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .language-switcher {
        margin-right: 1rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-stats {
        justify-content: center;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-card {
        min-height: 420px;
    }

    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .skill-icon-item {
        width: 100px;
        height: 100px;
    }

    .skill-icon-item i,
    .custom-icon {
        font-size: 2.5rem;
    }

    .project-filters {
        gap: 0.5rem;
    }

    .filter-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    .unity-logo-container {
        width: 250px;
        height: 250px;
    }

    .section-title {
        font-size: 2rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }

    .project-buttons {
        flex-direction: column;
    }

    .project-buttons .btn {
        width: 100%;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-icon-item {
        width: 80px;
        height: 80px;
    }

    .skill-icon-item i,
    .custom-icon {
        font-size: 2rem;
    }

    .project-filters {
        flex-direction: column;
        align-items: center;
    }

    .filter-btn {
        width: 200px;
    }
}

/* ===============================
   TYPEWRITER EFFECT STYLES
   =============================== */
.typewriter {
    color: var(--unity-blue);
    font-weight: 600;
    min-height: 1.5em;
    display: inline-block;
}

.typewriter-cursor {
    color: var(--unity-blue);
    animation: blink 1s infinite;
    font-weight: 100;
    margin-left: 2px;
}

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

/* ===============================
   CUSTOM CURSOR STYLES
   =============================== */
.custom-cursor,
.cursor-follower {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.2s ease;
}

.custom-cursor {
    width: 20px;
    height: 20px;
    background: var(--unity-blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 2px solid var(--unity-blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
}

.custom-cursor.clicked {
    animation: cursorClick 0.3s ease-out;
}

.cursor-follower.clicked {
    animation: cursorExpand 0.5s ease-out;
}

@keyframes cursorClick {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes cursorExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
        box-shadow: 0 0 0 0 var(--unity-blue);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
        box-shadow: 0 0 20px 10px rgba(0, 212, 255, 0.3);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
        box-shadow: 0 0 0 0 var(--unity-blue);
    }
}

/* Click Effect Animation */
.click-effect {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.8) 0%, rgba(0, 212, 255, 0.4) 50%, transparent 100%);
    transform: translate(-50%, -50%);
    animation: clickExpand 0.6s ease-out forwards;
}

@keyframes clickExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
    }
}

/* ===============================
   NEW SKILLS GRID REDESIGN
   =============================== */
.new-skills-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 0;
}

.skills-category {
    margin-bottom: 4rem;
}

.category-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--unity-blue);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--unity-orange);
}

.skills-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.skill-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Skill levels */
.skill-level {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    margin-top: 8px;
}
.skill-level .skill-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple));
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
    transition: width 0.8s ease;
}

.skill-item:hover {
    transform: translateY(-5px);
}

.skill-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(42, 42, 42, 0.7);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.skill-item:hover .skill-icon {
    border-color: var(--unity-blue);
    background: rgba(0, 212, 255, 0.1);
    box-shadow: var(--glow-primary);
}

.skill-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

/* ========================
   C# Animation - Energy & Spark
   ======================== */
.csharp-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csharp-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--unity-blue);
    z-index: 3;
    position: relative;
}

.skill-item:hover .csharp-text {
    animation: energyGlow 0.8s ease-out;
}

.energy-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid var(--unity-blue);
    border-radius: 50%;
    opacity: 0;
    animation: energyPulse 2s ease-in-out infinite;
}

.skill-item:hover .energy-circle {
    opacity: 1;
}

.spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--unity-orange);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--unity-orange);
}

.spark1 {
    top: 20px;
    left: 20px;
}
.spark2 {
    top: 20px;
    right: 20px;
}
.spark3 {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.skill-item:hover .spark {
    animation: sparkAppear 1.2s ease-out;
}

.skill-item:hover .spark1 {
    animation-delay: 0.1s;
}
.skill-item:hover .spark2 {
    animation-delay: 0.3s;
}
.skill-item:hover .spark3 {
    animation-delay: 0.5s;
}

@keyframes energyGlow {
    0% {
        color: var(--unity-blue);
        text-shadow: none;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 20px var(--unity-blue);
    }
    100% {
        color: var(--unity-blue);
        text-shadow: none;
    }
}

@keyframes energyPulse {
    0%,
    100% {
        transform: scale(0.9);
        border-color: var(--unity-blue);
    }
    50% {
        transform: scale(1.1);
        border-color: var(--unity-orange);
        box-shadow: 0 0 20px var(--unity-blue);
    }
}

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

/* ========================
   Kotlin Animation - 3 Parts Split & Reunite
   ======================== */
.kotlin-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kotlin-part {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(45deg, #7f52ff, #00d4ff);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.kotlin-part.part1 {
    top: 25px;
    left: 25px;
}

.kotlin-part.part2 {
    top: 25px;
    right: 25px;
}

.kotlin-part.part3 {
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.kotlin-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--unity-blue);
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.skill-item:hover .kotlin-part.part1 {
    animation: kotlinSplit1 1.5s ease-in-out;
}

.skill-item:hover .kotlin-part.part2 {
    animation: kotlinSplit2 1.5s ease-in-out;
}

.skill-item:hover .kotlin-part.part3 {
    animation: kotlinSplit3 1.5s ease-in-out;
}

.skill-item:hover .kotlin-text {
    opacity: 0;
}

@keyframes kotlinSplit1 {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: translate(-15px, -15px);
        opacity: 0.7;
    }
}

@keyframes kotlinSplit2 {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: translate(15px, -15px);
        opacity: 0.7;
    }
}

@keyframes kotlinSplit3 {
    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, 15px);
        opacity: 0.7;
    }
}

/* ========================
   SQL Animation - Data Digits Floating
   ======================== */
.sql-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.database-main {
    font-size: 2.5rem;
    color: var(--unity-blue);
    z-index: 2;
}

.data-digit {
    position: absolute;
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: var(--unity-orange);
    font-weight: 700;
    opacity: 0;
}

.digit1 {
    top: 15px;
    left: 20px;
}

.digit2 {
    top: 15px;
    right: 20px;
}

.digit3 {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.skill-item:hover .data-digit {
    animation: digitFloat 2s ease-in-out;
}

.skill-item:hover .digit1 {
    animation-delay: 0s;
}
.skill-item:hover .digit2 {
    animation-delay: 0.7s;
}
.skill-item:hover .digit3 {
    animation-delay: 1.4s;
}

@keyframes digitFloat {
    0%,
    90%,
    100% {
        opacity: 0;
        transform: translateY(0px) scale(1);
    }
    10%,
    80% {
        opacity: 1;
        transform: translateY(-10px) scale(1.2);
    }
}

/* ========================
   .NET Animation - Framework Lines
   ======================== */
.dotnet-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dotnet-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--unity-blue);
    z-index: 2;
}

.framework-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.framework-lines::before,
.framework-lines::after {
    content: '';
    position: absolute;
    background: var(--unity-orange);
    opacity: 0;
}

.framework-lines::before {
    top: 30%;
    left: 10%;
    right: 10%;
    height: 2px;
    animation: lineExpand 1.5s ease-out;
}

.framework-lines::after {
    left: 30%;
    right: 30%;
    top: 10%;
    bottom: 10%;
    width: 2px;
    margin: 0 auto;
    animation: lineExpand 1.5s ease-out 0.3s;
}

.skill-item:hover .framework-lines {
    opacity: 1;
}

.skill-item:hover .framework-lines::before,
.skill-item:hover .framework-lines::after {
    opacity: 1;
}

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

/* ========================
   ASP.NET Animation - Wave Scan
   ======================== */
.aspnet-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aspnet-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--unity-blue);
    z-index: 2;
}

.scan-wave {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--unity-blue), transparent);
    opacity: 0;
}

.grid-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.2) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skill-item:hover .scan-wave {
    animation: scanMove 1.5s ease-in-out;
}

.skill-item:hover .grid-pattern {
    opacity: 0.6;
    animation: gridFade 1.5s ease-in-out;
}

@keyframes scanMove {
    0% {
        top: 0;
        opacity: 0;
    }
    30%,
    70% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

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

/* ========================
   WPF Animation - Interface Grid
   ======================== */
.wpf-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpf-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--unity-blue);
    z-index: 2;
}

.interface-grid {
    position: absolute;
    width: 80%;
    height: 80%;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.4) 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.skill-item:hover .interface-grid {
    opacity: 1;
    transform: scale(1);
    animation: interfacePulse 1.5s ease-in-out;
}

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

/* ========================
   Unity Animation - 3D Cube Rotation
   ======================== */
.unity-animated {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 200px;
}

.unity-cube {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 25px auto;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.skill-item:hover .unity-cube {
    animation: unityRotate 2s ease-in-out;
}

.cube-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px solid var(--unity-blue);
    background: rgba(0, 212, 255, 0.15);
}

.cube-face.front {
    transform: rotateY(0deg) translateZ(25px);
}
.cube-face.back {
    transform: rotateY(180deg) translateZ(25px);
}
.cube-face.right {
    transform: rotateY(90deg) translateZ(25px);
}
.cube-face.left {
    transform: rotateY(-90deg) translateZ(25px);
}
.cube-face.top {
    transform: rotateX(90deg) translateZ(25px);
}
.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(25px);
}

@keyframes unityRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* ========================
   Remaining Skills Animations
   ======================== */

/* DOTween */
.dotween-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dotween-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--unity-blue);
    z-index: 3;
}

.tween-ball {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--unity-orange);
    border-radius: 50%;
    top: 20px;
    left: 20px;
    opacity: 0;
    box-shadow: 0 0 8px var(--unity-orange);
}

.animation-trail {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--unity-orange), transparent);
    top: 50%;
    opacity: 0;
}

.skill-item:hover .tween-ball {
    animation: tweenPath 2s ease-in-out;
}

.skill-item:hover .animation-trail {
    animation: trailFade 2s ease-in-out;
}

@keyframes tweenPath {
    0% {
        top: 20px;
        left: 20px;
        opacity: 1;
    }
    25% {
        top: 20px;
        right: 20px;
        left: auto;
    }
    50% {
        bottom: 20px;
        top: auto;
        right: 20px;
    }
    75% {
        bottom: 20px;
        left: 20px;
        right: auto;
    }
    100% {
        top: 20px;
        left: 20px;
        opacity: 0;
    }
}

@keyframes trailFade {
    0%,
    90%,
    100% {
        opacity: 0;
    }
    10%,
    80% {
        opacity: 0.6;
    }
}

/* Blender Cube Assembly */
.blender-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blender-cube-assembly {
    position: relative;
    width: 60px;
    height: 60px;
}

.cube-part {
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--unity-blue);
    border: 1px solid var(--unity-orange);
    transition: all 0.3s ease;
}

.cube-part.part1 {
    top: 0;
    left: 0;
}
.cube-part.part2 {
    top: 0;
    right: 0;
}
.cube-part.part3 {
    bottom: 0;
    left: 0;
}
.cube-part.part4 {
    bottom: 0;
    right: 0;
}

.skill-item:hover .cube-part {
    animation: cubeAssemble 2s ease-in-out;
}

.skill-item:hover .cube-part.part1 {
    animation-delay: 0s;
}
.skill-item:hover .cube-part.part2 {
    animation-delay: 0.2s;
}
.skill-item:hover .cube-part.part3 {
    animation-delay: 0.4s;
}
.skill-item:hover .cube-part.part4 {
    animation-delay: 0.6s;
}

@keyframes cubeAssemble {
    0%,
    100% {
        transform: translate(0, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-10px, -10px) rotateZ(180deg);
    }
}

/* PostgreSQL Data Streams */
.postgresql-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.postgres-icon {
    font-size: 2.5rem;
    color: var(--unity-blue);
    z-index: 3;
}

.data-stream {
    position: absolute;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, var(--unity-orange), transparent);
    opacity: 0;
}

.stream1 {
    top: 10px;
    left: 25%;
}
.stream2 {
    top: 10px;
    left: 50%;
}
.stream3 {
    top: 10px;
    left: 75%;
}

.skill-item:hover .data-stream {
    animation: dataFlow 1.5s ease-in-out;
}

.skill-item:hover .stream1 {
    animation-delay: 0s;
}
.skill-item:hover .stream2 {
    animation-delay: 0.3s;
}
.skill-item:hover .stream3 {
    animation-delay: 0.6s;
}

@keyframes dataFlow {
    0% {
        top: 10px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        top: 80%;
        opacity: 0;
    }
}

/* MySQL Pulse */
.mysql-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mysql-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--unity-blue);
    z-index: 2;
}

.data-pulse-ring {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid var(--unity-orange);
    border-radius: 10px;
    opacity: 0;
}

.skill-item:hover .data-pulse-ring {
    animation: mysqlPulse 1.5s ease-in-out;
}

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

/* LINQ Query Lines */
.linq-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linq-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--unity-blue);
    z-index: 2;
}

.query-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.query-lines::before,
.query-lines::after {
    content: '';
    position: absolute;
    height: 1px;
    background: var(--unity-orange);
    opacity: 0;
}

.query-lines::before {
    top: 30%;
    left: 20%;
    right: 20%;
}

.query-lines::after {
    top: 70%;
    left: 25%;
    right: 25%;
}

.skill-item:hover .query-lines::before,
.skill-item:hover .query-lines::after {
    animation: queryWrite 1.2s ease-out;
}

.skill-item:hover .query-lines::after {
    animation-delay: 0.3s;
}

@keyframes queryWrite {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

/* Git Branch Merge */
.git-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.git-icon {
    font-size: 2.5rem;
    color: var(--unity-blue);
    z-index: 3;
}

.git-branch {
    position: absolute;
    width: 2px;
    height: 25px;
    background: var(--unity-orange);
    opacity: 0;
}

.branch1 {
    top: 15px;
    left: 25%;
    transform: rotate(-30deg);
}

.branch2 {
    top: 15px;
    right: 25%;
    transform: rotate(30deg);
}

.merge-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--unity-green);
    border-radius: 50%;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.skill-item:hover .git-branch {
    animation: branchGrow 2s ease-in-out;
}

.skill-item:hover .branch1 {
    animation-delay: 0s;
}
.skill-item:hover .branch2 {
    animation-delay: 0.5s;
}

.skill-item:hover .merge-point {
    animation: mergeAppear 2s ease-in-out 1s;
}

@keyframes branchGrow {
    0%,
    100% {
        height: 0;
        opacity: 0;
    }
    30%,
    70% {
        height: 25px;
        opacity: 1;
    }
}

@keyframes mergeAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* Visual Studio Code Lines */
.vs-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-icon {
    font-size: 2.5rem;
    color: var(--unity-blue);
    z-index: 3;
}

.code-outline {
    position: absolute;
    height: 2px;
    background: var(--unity-orange);
    opacity: 0;
}

.outline1 {
    top: 25%;
    left: 20%;
    width: 35px;
}

.outline2 {
    top: 45%;
    left: 25%;
    width: 25px;
}

.outline3 {
    top: 65%;
    left: 30%;
    width: 20px;
}

.skill-item:hover .code-outline {
    animation: outlineDraw 1.5s ease-out;
}

.skill-item:hover .outline1 {
    animation-delay: 0s;
}
.skill-item:hover .outline2 {
    animation-delay: 0.3s;
}
.skill-item:hover .outline3 {
    animation-delay: 0.6s;
}

@keyframes outlineDraw {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Figma Design Petals */
.figma-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.figma-petals {
    position: relative;
    width: 60px;
    height: 60px;
}

.petal {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50% 0;
    transform-origin: bottom right;
}

.petal1 {
    background: #ff7262;
    top: 0;
    left: 0;
    transform: rotate(0deg);
}

.petal2 {
    background: #1abcfe;
    top: 0;
    right: 0;
    transform: rotate(90deg);
}

.petal3 {
    background: #0acf83;
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

.petal4 {
    background: #a259ff;
    bottom: 0;
    left: 0;
    transform: rotate(270deg);
}

.skill-item:hover .petal {
    animation: petalSpin 2s ease-in-out;
}

.skill-item:hover .petal1 {
    animation-delay: 0s;
}
.skill-item:hover .petal2 {
    animation-delay: 0.2s;
}
.skill-item:hover .petal3 {
    animation-delay: 0.4s;
}
.skill-item:hover .petal4 {
    animation-delay: 0.6s;
}

@keyframes petalSpin {
    0%,
    100% {
        transform: rotate(var(--initial-rotation, 0deg)) scale(1);
    }
    50% {
        transform: rotate(calc(var(--initial-rotation, 0deg) + 180deg)) scale(1.2);
    }
}

/* PHP Server Wave */
.php-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.php-icon {
    font-size: 2.5rem;
    color: var(--unity-blue);
    z-index: 2;
}

.server-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
}

.skill-item:hover .server-wave {
    animation: serverPulse 1.5s ease-in-out;
}

@keyframes serverPulse {
    0%,
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

/* After Effects Flash & Wave */
.ae-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ae-text {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(45deg, #00005b, #9a4cff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 3;
}

.motion-flash {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0;
}

.motion-ripple {
    position: absolute;
    width: 120%;
    height: 120%;
    border: 2px solid rgba(154, 76, 255, 0.4);
    border-radius: 50%;
    opacity: 0;
}

.skill-item:hover .motion-flash {
    animation: aeFlash 2s ease-in-out;
}

.skill-item:hover .motion-ripple {
    animation: aeRipple 2s ease-in-out;
}

@keyframes aeFlash {
    0%,
    90%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
    5%,
    15% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes aeRipple {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Premiere Pro Frame Sequence */
.premiere-animated {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premiere-text {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(45deg, #00005b, #ea77ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 3;
}

.timeline-frames {
    position: absolute;
    width: 100%;
    height: 20%;
    top: 15%;
    display: flex;
    justify-content: space-between;
    padding: 0 15%;
}

.frame {
    width: 12px;
    height: 8px;
    background: var(--unity-orange);
    opacity: 0;
}

.skill-item:hover .frame {
    animation: frameFlash 0.8s linear infinite;
}

.skill-item:hover .frame1 {
    animation-delay: 0s;
}
.skill-item:hover .frame2 {
    animation-delay: 0.1s;
}
.skill-item:hover .frame3 {
    animation-delay: 0.2s;
}
.skill-item:hover .frame4 {
    animation-delay: 0.3s;
}

@keyframes frameFlash {
    0%,
    60%,
    100% {
        opacity: 0;
    }
    20%,
    40% {
        opacity: 1;
    }
}

/* ===============================
   TECHNICAL SKILLS SECTION
   =============================== */
.technical-skills {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.tech-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.tech-category {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.tech-category:hover {
    border-color: var(--unity-blue);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.1);
    transform: translateY(-5px);
}

.tech-category-title {
    color: var(--unity-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tech-skills-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tech-skill-item {
    display: grid;
    grid-template-columns: 50px 1fr 120px;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(42, 42, 42, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.tech-skill-item:hover {
    background: rgba(0, 212, 255, 0.1);
    transform: translateX(5px);
}

.tech-skill-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--gradient-unity);
    color: white;
    transition: all 0.3s ease;
}

/* Specific icon styles */
.kotlin-icon {
    background: linear-gradient(135deg, #7f52ff, #ff6b35);
}
.sql-icon {
    background: linear-gradient(135deg, #00d4ff, #4caf50);
}
.dotnet-icon {
    background: linear-gradient(135deg, #512bd4, #00d4ff);
}
.aspnet-icon {
    background: linear-gradient(135deg, #512bd4, #4caf50);
}
.wpf-icon {
    background: linear-gradient(135deg, #0078d4, #00d4ff);
}
.unity-icon {
    background: linear-gradient(135deg, #000000, #ffffff);
}
.dotween-icon {
    background: linear-gradient(135deg, #ff6b35, #4caf50);
}
.blender-icon {
    background: linear-gradient(135deg, #f5792a, #00d4ff);
}
.postgresql-icon {
    background: linear-gradient(135deg, #336791, #4caf50);
}
.mysql-icon {
    background: linear-gradient(135deg, #00618a, #ff6b35);
}
.linq-icon {
    background: linear-gradient(135deg, #512bd4, #00d4ff);
}
.git-icon {
    background: linear-gradient(135deg, #f1502f, #4caf50);
}
.vs-icon {
    background: linear-gradient(135deg, #5c2d91, #00d4ff);
}
.figma-icon {
    background: linear-gradient(135deg, #f24e1e, #a259ff);
}
.php-icon {
    background: linear-gradient(135deg, #777bb4, #4caf50);
}
.ae-icon {
    background: linear-gradient(135deg, #9999ff, #ff6b35);
}

.tech-skill-item:hover .tech-skill-icon {
    animation: iconPulse 0.6s ease-in-out;
    transform: scale(1.1);
}

.tech-skill-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.tech-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.tech-progress {
    height: 100%;
    background: var(--gradient-unity);
    border-radius: 3px;
    transition: width 0.8s ease-in-out;
    position: relative;
}

.tech-progress::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: progressShine 2s infinite;
}

/* Tooltip */
.tech-skill-item[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--unity-blue);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.tech-skill-item[data-tooltip]:hover::after {
    content: '';
    position: absolute;
    bottom: 108%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--unity-blue);
    z-index: 1000;
}

/* Animations */
@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.3);
    }
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(300%);
    }
}

/* Responsive Design */
@media (max-width: 968px) {
    .tech-skills-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tech-skill-item {
        grid-template-columns: 40px 1fr 100px;
        gap: 0.8rem;
        padding: 0.8rem;
    }

    .tech-skill-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .tech-skill-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }

    .tech-skill-icon {
        margin: 0 auto;
    }
}

/* ===============================
   GITHUB ACTIVITY STYLES - REDESIGNED
   =============================== */
.github-activity {
    padding: 6rem 0;
    background: var(--bg-secondary);
}

/* GitHub Stats Grid */
.github-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.github-stat-card {
    background: rgba(26, 26, 40, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.github-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--unity-blue);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

.stat-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.2rem;
    font-weight: 700;
}

.repos-icon {
    background: linear-gradient(135deg, #00d4ff, #4caf50);
    color: white;
}

.update-icon {
    background: linear-gradient(135deg, #4caf50, #00d4ff);
    color: white;
    font-size: 0.9rem;
}

.commits-icon {
    background: linear-gradient(135deg, #ff6b35, #00d4ff);
    color: white;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: lowercase;
}

/* Activity Toggle */
.github-activity-toggle {
    text-align: center;
    margin-bottom: 3rem;
}

.activity-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.activity-checkbox input[type='checkbox'] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    background: var(--unity-blue);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.checkbox-label {
    color: var(--unity-blue);
    font-weight: 500;
}

/* GitHub Stats Section */
.github-stats-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    background: rgba(26, 26, 40, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    padding: 2rem;
}

.xedanler-stats h4 {
    color: var(--unity-blue);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stats-icon {
    width: 20px;
    text-align: center;
}

.stats-value {
    margin-left: auto;
    color: var(--unity-blue);
    font-weight: 600;
}

/* Contribution Chart */
.contribution-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.chart-item {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.chart-circle {
    width: 100px;
    height: 100px;
    border: 4px solid var(--unity-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
}

.chart-letter {
    font-size: 2rem;
    font-weight: 900;
    color: var(--unity-blue);
}

.chart-stats {
    text-align: left;
}

.chart-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--unity-blue);
    line-height: 1;
}

.chart-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.chart-period {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Streak Info */
.streak-info {
    display: flex;
    gap: 3rem;
}

.current-streak,
.longest-streak {
    text-align: center;
}

.streak-number {
    width: 60px;
    height: 60px;
    border: 3px solid var(--unity-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--unity-green);
    margin: 0 auto 0.5rem auto;
}

.streak-label {
    color: var(--unity-blue);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.streak-date {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.longest-streak .streak-number {
    border-color: var(--unity-orange);
    color: var(--unity-orange);
}

/* GitHub Button */
.github-button {
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .github-stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .github-stats-section {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .chart-item {
        flex-direction: column;
        gap: 1rem;
    }

    .streak-info {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* Make GitHub stats transparent */
.github-stats-img {
    filter: opacity(0.9);
    backdrop-filter: blur(10px);
}

.github-streak-img {
    filter: opacity(0.9);
    backdrop-filter: blur(10px);
}

/* Enhanced project card animations */
.project-card {
    transition: transform 0.4s ease-in-out, border-color 0.4s ease, box-shadow 0.4s ease;
    transform: translateY(0) scale(1);
  }
  
  .project-card:hover {
    transform: translateY(-5px) scale(1.02);
  }
  
  /* чтобы кнопки не блокировали hover на всю карту */
  .project-card a,
  .project-card button {
    pointer-events: auto;
    z-index: 2;
  }

.project-card:hover .project-content h3 {
    color: var(--unity-orange);
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}

/* Active navigation link styles */
.nav-link.active {
    color: var(--unity-blue) !important;
    text-shadow: var(--glow-primary);
}

.nav-link.active::after {
    width: 100%;
    background: var(--unity-blue);
    box-shadow: var(--glow-primary);
}

/* Responsive Design for Animated Skills */
@media (max-width: 768px) {
    .animated-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 2rem;
    }

    .skill-icon-container {
        width: 100px;
        height: 100px;
    }

    .skill-tooltip {
        min-width: 120px;
        padding: 0.8rem;
    }

    .unity-cube-3d {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .animated-skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .skill-icon-container {
        width: 80px;
        height: 80px;
    }

    .unity-cube-3d {
        width: 40px;
        height: 40px;
    }

    .csharp-logo,
    .dotnet-logo,
    .ae-logo,
    .premiere-logo {
        font-size: 1.8rem;
    }

    .database-icon,
    .git-logo,
    .vs-logo,
    .php-logo,
    .figma-logo {
        font-size: 2.2rem;
    }
}

/* ========================================
   SECTION DIVIDERS & SEPARATORS
   ======================================== */

.section-divider {
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--unity-blue),
        var(--unity-orange),
        var(--unity-blue),
        transparent
    );
    margin: 5rem auto;
    width: 90%;
    max-width: 800px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.section-separator {
    margin: 6rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-separator::before,
.section-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--unity-blue), transparent);
    margin: 0 2rem;
}

.section-separator-icon {
    background: var(--bg-secondary);
    border: 2px solid var(--unity-blue);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--unity-blue);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

.section-separator-icon:hover {
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

/* ========================================
   TOOLTIPS FOR TECHNICAL SKILLS
   ======================================== */

.tech-skill-item {
    position: relative;
    cursor: pointer;
}

.tech-skill-item::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(26, 26, 40, 0.95);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid var(--unity-blue);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.tech-skill-item::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--unity-blue);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.tech-skill-item:hover::before,
.tech-skill-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Enhanced tech skill animations */
.tech-skill-item:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

.tech-skill-item:hover .tech-skill-icon {
    transform: scale(1.1) rotate(5deg);
    color: var(--unity-blue);
    text-shadow: 0 0 15px var(--unity-blue);
}

.tech-skill-item:hover .tech-progress {
    animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    }
}

/* Improved tech category styling */
.tech-category {
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(26, 26, 40, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.tech-category:hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.1);
}

.tech-category-title {
    color: var(--unity-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
}

.tech-category-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-orange));
    border-radius: 2px;
}

/* Section spacing improvements */
section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

section + section {
    position: relative;
}

section + section::before {
    content: '';
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent);
}

/* Modern section backgrounds */
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(168, 85, 247, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Enhanced section titles */
.section-title {
    position: relative;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes titleUnderline {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        width: 100px;
        opacity: 0.7;
    }
    100% {
        width: 100px;
        opacity: 1;
    }
}

/* Modern card hover effects */
.project-card,
.tech-category,
.about-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card:hover,
.tech-category:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ========================================
   ENHANCED BUTTON STYLES
   ======================================== */

.btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-demo {
    background: linear-gradient(135deg, var(--unity-orange), #e53e3e);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.btn-demo:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* ========================================
   IMPROVED ANIMATIONS
   ======================================== */

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

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

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

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInFromRight 0.8s ease-out;
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-card {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(168, 85, 247, 0.1);
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 15px;
}

.skeleton-status {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-self: flex-start;
}

.skeleton-title {
    width: 70%;
    height: 24px;
    border-radius: 4px;
}

.skeleton-text {
    width: 90%;
    height: 16px;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.skeleton-tag {
    width: 60px;
    height: 24px;
    border-radius: 12px;
}

.skeleton-buttons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.skeleton-button {
    width: 80px;
    height: 36px;
    border-radius: 8px;
}

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

/* Lazy Loading States */
.project-image {
    transition: opacity 0.3s ease;
    opacity: 0;
}

.project-image.loaded {
    opacity: 1;
}

.project-image.loading {
    background: var(--skeleton);
}

/* Projects Grid Loading State */
.projects-grid.loading .project-card {
    display: none;
}

.projects-grid.loading .skeleton-card {
    display: flex;
}

/* Modal Styles */
.modal-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-portal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-container {
    background: var(--bg-secondary);
    border-radius: 20px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: var(--shadow-card), var(--glow-purple);
    max-width: 900px;
    max-height: 90vh;
    width: 100%;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-portal.active .modal-container {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--unity-orange);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-close:hover,
.modal-close:focus {
    background: rgba(255, 107, 53, 0.2);
    transform: scale(1.1);
    outline: none;
}

.modal-content {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

.modal-title {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.modal-status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.modal-status-badge.released {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.modal-status-badge.development {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.modal-status-badge.concept {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.modal-status-badge.completed {
    background: rgba(0, 212, 255, 0.2);
    color: var(--unity-blue);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.modal-demo-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden;
}

.modal-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
}

.skeleton-demo {
    flex: 1;
    border-radius: 8px;
}

.modal-skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-demo-iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-demo-iframe.loaded {
    opacity: 1;
}

.modal-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
}

.modal-fallback.hidden {
    display: none;
}

.fallback-content {
    text-align: center;
    padding: 40px 20px;
}

.fallback-content i {
    font-size: 3rem;
    color: var(--unity-orange);
    margin-bottom: 20px;
}

.fallback-content p {
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.btn-retry {
    background: linear-gradient(135deg, var(--unity-orange), var(--unity-blue));
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}

.modal-description {
    margin-bottom: 25px;
}

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

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-tags .tag {
    background: rgba(168, 85, 247, 0.1);
    color: var(--unity-blue);
    border: 1px solid rgba(168, 85, 247, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.modal-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.modal-actions .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
}

/* Focus Trap Styles */
.modal-portal.active .modal-container:focus {
    outline: 2px solid var(--unity-blue);
    outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 10px;
    }

    .modal-content {
        padding: 20px;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-demo-container {
        height: 250px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

/* Animation for modal entrance */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-container.animate-in {
    animation: modalFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.scroll-progress-bar.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple), var(--unity-orange));
    width: 0%;
    transition: width 0.1s ease-out;
    position: relative;
}

.scroll-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    50% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}

/* Hide progress bar on very small screens */
@media (max-width: 480px) {
    .scroll-progress-bar {
        height: 2px;
    }
}

/* ============================
   BOT CARDS STYLING - Screenshot 2 Style
   ============================ */

.bot-card {
    background: linear-gradient(135deg, rgba(26, 26, 40, 0.9) 0%, rgba(42, 42, 58, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
}

.bot-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
}

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

.bot-card:hover::before {
    left: 100%;
}

.bot-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    position: relative;
    z-index: 2;
}

.bot-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.bot-avatar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
}

.bot-card:hover .bot-avatar::before {
    transform: rotate(45deg) translate(100%, 100%);
}

.bot-info {
    flex: 1;
    min-width: 0;
}

.bot-info h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bot-info p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.bot-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bot-tag {
    background: rgba(0, 212, 255, 0.15);
    color: var(--unity-blue);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

.bot-tag:hover {
    background: rgba(0, 212, 255, 0.25);
    border-color: rgba(0, 212, 255, 0.5);
    transform: translateY(-2px);
}

.bot-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.bot-btn {
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
    min-width: 80px;
    text-align: center;
}

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

.bot-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

.bot-btn:hover::before {
    left: 100%;
}

.bot-btn i {
    margin-right: 6px;
}

/* Responsive Bot Cards */
@media (max-width: 768px) {
    .bot-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .bot-actions {
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .bot-info h3 {
        font-size: 1.2rem;
    }

    .bot-info p {
        font-size: 0.9rem;
    }
}

/* ============================
   MODERN SKILLS SECTION - Screenshot 3 Style
   ============================ */

.modern-skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.skill-category-modern {
    background: linear-gradient(135deg, rgba(26, 26, 40, 0.9) 0%, rgba(42, 42, 58, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skill-category-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple), var(--unity-orange));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skill-category-modern:hover::before {
    opacity: 1;
}

.skill-category-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
}

.skill-category-title {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.skill-category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple));
    border-radius: 1px;
}

.skills-grid-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.modern-skill-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(26, 26, 40, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.modern-skill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.05), transparent);
    transition: left 0.6s ease;
}

.modern-skill-item:hover {
    transform: translateX(5px);
    background: rgba(0, 212, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
}

.modern-skill-item:hover::before {
    left: 100%;
}

.skill-icon-modern {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    border-radius: 12px;
    font-size: 20px;
    color: white;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.skill-icon-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
}

.modern-skill-item:hover .skill-icon-modern::before {
    transform: rotate(45deg) translate(100%, 100%);
}

/* Special icons for Adobe products */
.skill-icon-modern.ae-icon,
.skill-icon-modern.pr-icon {
    background: linear-gradient(135deg, #ff6b35, #ff0066);
    font-weight: 900;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
}

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

.skill-name-modern {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.skill-progress-modern {
    width: 100%;
    height: 8px;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar-modern {
    height: 100%;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple));
    border-radius: 4px;
    position: relative;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.progress-bar-modern::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
    animation: progressShimmer 2s infinite;
}

/* Initialize progress bars with data attributes */
.progress-bar-modern[data-progress='60'] {
    width: 60%;
}
.progress-bar-modern[data-progress='65'] {
    width: 65%;
}
.progress-bar-modern[data-progress='70'] {
    width: 70%;
}
.progress-bar-modern[data-progress='75'] {
    width: 75%;
}
.progress-bar-modern[data-progress='80'] {
    width: 80%;
}
.progress-bar-modern[data-progress='85'] {
    width: 85%;
}
.progress-bar-modern[data-progress='90'] {
    width: 90%;
}

/* Animation for progress bars when they come into view */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width);
    }
}

/* Responsive Modern Skills */
@media (max-width: 768px) {
    .modern-skills-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .skill-category-modern {
        padding: 25px 20px;
    }

    .modern-skill-item {
        padding: 16px;
        gap: 15px;
    }

    .skill-icon-modern {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .skill-name-modern {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .modern-skills-container {
        gap: 25px;
    }

    .skill-category-modern {
        padding: 20px 15px;
    }

    .skill-category-title {
        font-size: 1.2rem;
    }

    .modern-skill-item {
        padding: 14px;
        gap: 12px;
    }

    .skill-icon-modern {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .skill-name-modern {
        font-size: 0.95rem;
    }

    .skill-progress-modern {
        height: 6px;
    }
}

/* ============================
   SKELETON LOADERS STYLING
   ============================ */

.skeleton {
    background: linear-gradient(90deg, rgba(26, 26, 40, 0.8) 0%, rgba(42, 42, 58, 0.9) 50%, rgba(26, 26, 40, 0.8) 100%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

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

/* Project Card Skeleton */
.skeleton-project-card {
    background: rgba(26, 26, 40, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
}

.skeleton-title {
    width: 70%;
    height: 24px;
    margin-bottom: 12px;
}

.skeleton-text {
    width: 100%;
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-tags {
    display: flex;
    gap: 8px;
    margin: 15px 0;
}

.skeleton-tag {
    width: 60px;
    height: 24px;
    border-radius: 12px;
}

.skeleton-button {
    width: 100px;
    height: 36px;
    border-radius: 8px;
}

/* Skill Item Skeleton */
.skeleton-skill-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(26, 26, 40, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 16px;
    margin-bottom: 15px;
}

.skeleton-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

.skeleton-skill-content {
    flex: 1;
}

.skeleton-skill-name {
    width: 120px;
    height: 20px;
    margin-bottom: 8px;
}

.skeleton-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
}

/* Bot Card Skeleton */
.skeleton-bot-card {
    background: rgba(26, 26, 40, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.skeleton-bot-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.skeleton-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.skeleton-bot-info {
    flex: 1;
}

.skeleton-bot-title {
    width: 150px;
    height: 22px;
    margin-bottom: 8px;
}

.skeleton-bot-desc {
    width: 100%;
    height: 16px;
    margin-bottom: 12px;
}

.skeleton-bot-tags {
    display: flex;
    gap: 8px;
}

/* Navigation Skeleton */
.skeleton-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.skeleton-logo {
    width: 60px;
    height: 40px;
}

.skeleton-nav-items {
    display: flex;
    gap: 30px;
}

.skeleton-nav-item {
    width: 80px;
    height: 20px;
}

/* Hero Skeleton */
.skeleton-hero {
    text-align: center;
    padding: 100px 0;
}

.skeleton-hero-title {
    width: 400px;
    height: 48px;
    margin: 0 auto 20px;
}

.skeleton-hero-subtitle {
    width: 300px;
    height: 24px;
    margin: 0 auto 20px;
}

.skeleton-hero-desc {
    width: 500px;
    height: 18px;
    margin: 0 auto 30px;
}

.skeleton-hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.skeleton-stat {
    width: 80px;
    height: 60px;
}

/* Profile Skeleton */
.skeleton-profile {
    text-align: center;
    padding: 30px;
}

.skeleton-profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.skeleton-profile-name {
    width: 180px;
    height: 24px;
    margin: 0 auto 10px;
}

.skeleton-profile-title {
    width: 120px;
    height: 18px;
    margin: 0 auto 20px;
}

.skeleton-profile-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.skeleton-profile-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Video Skeleton */
.skeleton-video {
    background: rgba(26, 26, 40, 0.4);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.skeleton-video-thumb {
    width: 100%;
    height: 180px;
}

.skeleton-video-info {
    padding: 15px;
}

.skeleton-video-title {
    width: 200px;
    height: 20px;
    margin-bottom: 8px;
}

.skeleton-video-desc {
    width: 150px;
    height: 16px;
}

/* GitHub Skeleton */
.skeleton-github {
    background: rgba(26, 26, 40, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

.skeleton-github-header {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
}

.skeleton-github-repos {
    display: grid;
    gap: 15px;
}

.skeleton-repo {
    width: 100%;
    height: 80px;
    border-radius: 8px;
}

/* Skeleton Container */
.skeleton-container {
    pointer-events: none;
    user-select: none;
}


/* Mobile Modal Styles */
@media (max-width: 768px) {
    .modal-container {
        margin: 10px;
        max-height: 95vh;
    }

    .modal-content {
        padding: 30px 20px;
    }

    .modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-demo-iframe {
        height: 250px;
    }

    .modal-actions {
        flex-direction: column;
    }
}

/* ============================
   LAZY LOADING STYLING
   ============================ */

img.loading {
    filter: blur(5px);
    opacity: 0.7;
    transition: all 0.3s ease;
}

img.loaded {
    filter: blur(0);
    opacity: 1;
    animation: imageLoad 0.5s ease-out;
}

img.error {
    opacity: 0.5;
    filter: grayscale(100%);
}

@keyframes imageLoad {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================
   GITHUB ACTIVITY SECTION
   ============================ */

.github-activity {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.8) 0%, rgba(26, 26, 40, 0.6) 100%);
    position: relative;
}

/* GitHub Stats Cards */
.github-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    background: rgba(26, 26, 40, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--unity-blue);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    color: white;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
    position: relative;
    z-index: 2;
}

.stat-info {
    position: relative;
    z-index: 2;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--unity-blue);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* GitHub Actions */
.github-actions {
    text-align: center;
    margin-top: 2rem;
}

.github-activity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"><path d="M0,100 C150,200 350,0 500,100 C650,200 850,0 1000,100 V200 H0 Z" fill="rgba(0,212,255,0.02)"/></svg>')
        repeat-x;
    background-size: 1000px 200px;
    animation: waveMove 20s linear infinite;
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1000px);
    }
}

/* ============================
   GITHUB WIDGET STYLING
   ============================ */

.github-widget {
    background: linear-gradient(135deg, rgba(26, 26, 40, 0.9) 0%, rgba(42, 42, 58, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    margin: 30px 0;
}

.github-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    position: relative;
}

.github-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--unity-blue);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.github-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.github-info {
    flex: 1;
}

.github-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--unity-blue), var(--unity-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
}

.github-info p {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.github-stats {
    display: flex;
    gap: 20px;
}

.github-stats span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.github-stats i {
    color: var(--unity-blue);
    margin-right: 5px;
}

.github-refresh {
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--unity-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.github-refresh:hover {
    background: rgba(0, 212, 255, 0.3);
    transform: rotate(180deg);
}

.github-repos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.github-repo {
    background: rgba(26, 26, 40, 0.6);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.github-repo:hover {
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
}

.github-repo a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: inherit;
}

.github-repo h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--unity-blue);
    margin-bottom: 8px;
}

.github-repo p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 0;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repo-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
}

.repo-stats span {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.repo-stats i {
    color: var(--unity-blue);
}

.repo-language {
    background: rgba(0, 212, 255, 0.2);
    color: var(--unity-blue);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-left: auto;
}

.github-widget.error {
    text-align: center;
    padding: 50px;
}

.github-error {
    color: var(--text-secondary);
}

.github-error i {
    font-size: 3rem;
    color: var(--unity-orange);
    margin-bottom: 15px;
}

/* ============================
   OPTIMIZED FILTERS STYLING
   ============================ */

.project-search {
    background: rgba(26, 26, 40, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 25px;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 200px;
    transition: all 0.3s ease;
    margin-left: 20px;
}

.project-search:focus {
    outline: none;
    border-color: var(--unity-blue);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    width: 250px;
}

.project-search::placeholder {
    color: var(--text-muted);
}

/* Animation for filtered projects */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .github-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stat-card {
        padding: 1.5rem 1rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .github-header {
        flex-direction: column;
        text-align: center;
    }

    .github-repos {
        grid-template-columns: 1fr;
    }

    .project-search {
        width: 100%;
        margin: 15px 0 0 0;
    }

    .project-search:focus {
        width: 100%;
    }
}

/* ================================
   ENHANCED SKILL ICONS WITH LUCIDE
   ================================ */

.skill-icon i[data-lucide] {
    width: 48px;
    height: 48px;
    color: var(--unity-blue);
    transition: all 0.3s ease;
}

.skill-item:hover .skill-icon i[data-lucide] {
    color: var(--unity-orange);
    transform: scale(1.1);
}

/* Kotlin Icon Specific Styles */
.kotlin-icon {
    width: 48px;
    height: 48px;
}

.kotlin-part {
    transform-origin: center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.skill-item[data-skill='kotlin']:hover .kotlin-part {
    animation: kotlinPulse 0.9s ease-in-out;
}

@keyframes kotlinPulse {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    33% {
        transform: translate(-15px, -15px) rotate(-15deg);
        opacity: 0.7;
    }
    66% {
        transform: translate(15px, 15px) rotate(15deg);
        opacity: 0.7;
    }
}

/* Skill Category Improvements */
.skill-category {
    margin-bottom: 3rem;
}

.skill-category h3 {
    font-size: 1.3rem;
    color: var(--unity-blue);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.skills-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.skill-item {
    background: rgba(26, 26, 40, 0.6);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-item:hover {
    transform: translateY(-5px);
    border-color: var(--unity-blue);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
}

.skill-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.skill-item span {
    display: block;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.skill-level {
    width: 100%;
    height: 6px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.skill-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--unity-blue), var(--unity-purple));
    border-radius: 3px;
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* ================================
   FLIP CARD TECH SKILLS SECTION
   ================================ */

.tech-flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
    perspective: 1000px;
}

@media (max-width: 768px) {
    .tech-flip-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tech-flip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.tech-flip-card {
    background: transparent;
    height: 280px;
    perspective: 1000px;
    cursor: pointer;
}

.tech-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.tech-flip-card:hover .tech-flip-inner {
    transform: rotateY(180deg);
}

.tech-flip-front,
.tech-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.tech-flip-front {
    background: radial-gradient(circle at 30% 30%, #1a1f3c, #0c0f1a);
    border: 6px solid #000;
    box-shadow: 12px 12px 0 #000;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.tech-flip-card:hover .tech-flip-front {
    transform: translate(-3px, -3px);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    border-color: rgba(0, 255, 255, 0.5);
}

.tech-flip-back.frontend {
    --glow-color: #00e0ff;
    --glow-inner: rgba(0, 224, 255, 0.25);
}

.tech-flip-back.backend {
    --glow-color: #9d4edd;
    --glow-inner: rgba(157, 78, 221, 0.25);
}

.tech-flip-back.design {
    --glow-color: #43cea2;
    --glow-inner: rgba(67, 206, 162, 0.25);
}

.tech-flip-back {
    background: radial-gradient(circle at 20% 20%, #1b1f3a, #0a0c1a 80%);
    border: 1px solid rgba(0, 255, 255, 0.15);
    color: #e0f2ff;
    transform: rotateY(180deg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.15);
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.tech-flip-card:hover .tech-flip-back {
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(0, 255, 255, 0.25);
    border-color: rgba(0, 255, 255, 0.4);
}

.tech-icon-wrapper {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tech-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.tech-flip-card:hover .tech-icon {
    transform: scale(1.1);
}

.tech-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #e0f2ff;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-family: 'Orbitron', sans-serif;
}

.tech-level-badge {
    background: #e0f2ff;
    color: #1a2332;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-flip-back h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tech-flip-back p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.tech-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.tech-stats span {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Tech Skill Bars */
.tech-skill-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
    position: relative;
}

.skill-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
    border-radius: 10px;
    transition: width 1s ease-out;
    width: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tech-flip-card:hover .skill-bar-fill {
    width: attr(data-level);
}

.tech-stats span {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* ================================
   UNIQUE TECH ANIMATIONS
   ================================ */

/* Unity - Rotating Cube */
@keyframes unity-cube-rotate {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(1, 1, 0, 360deg);
    }
}

.tech-flip-card[data-tech='unity']:hover .tech-icon {
    animation: unity-cube-rotate 2s ease-in-out infinite;
}

/* C# - Pulse Glow */
@keyframes csharp-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(128, 0, 128, 0.4));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(128, 0, 128, 0.8));
        transform: scale(1.1);
    }
}

.tech-flip-card[data-tech='csharp']:hover .tech-icon {
    animation: csharp-pulse 1.5s ease-in-out infinite;
}

/* Kotlin - Diagonal Triangle Rise */
@keyframes kotlin-triangles {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    50% {
        transform: translateY(-5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-12px) rotate(3deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.tech-flip-card[data-tech='kotlin']:hover .tech-icon {
    animation: kotlin-triangles 1.2s ease-in-out infinite;
}

/* .NET - Spin & Scale */
@keyframes dotnet-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.15);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.tech-flip-card[data-tech='dotnet']:hover .tech-icon {
    animation: dotnet-spin 2s linear infinite;
}

/* HTML - Bounce */
@keyframes html-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(-8px);
    }
    75% {
        transform: translateY(-12px);
    }
}

.tech-flip-card[data-tech='html']:hover .tech-icon {
    animation: html-bounce 1s ease-in-out infinite;
}

/* CSS - Wave */
@keyframes css-wave {
    0%,
    100% {
        transform: rotate(0deg) translateX(0);
    }
    25% {
        transform: rotate(5deg) translateX(3px);
    }
    75% {
        transform: rotate(-5deg) translateX(-3px);
    }
}

.tech-flip-card[data-tech='css']:hover .tech-icon {
    animation: css-wave 0.8s ease-in-out infinite;
}

/* JavaScript - Jiggle */
@keyframes js-jiggle {
    0%,
    100% {
        transform: rotate(0deg);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-3deg);
    }
    20%,
    40%,
    60%,
    80% {
        transform: rotate(3deg);
    }
}

.tech-flip-card[data-tech='javascript']:hover .tech-icon {
    animation: js-jiggle 0.6s ease-in-out infinite;
}

/* React - Orbit */
@keyframes react-orbit {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.tech-flip-card[data-tech='react']:hover .tech-icon {
    animation: react-orbit 3s linear infinite;
}

/* SQL - Database Pulse */
@keyframes sql-pulse {
    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(0, 100, 200, 0.3));
    }
    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 15px rgba(0, 100, 200, 0.7));
    }
}

.tech-flip-card[data-tech='sql']:hover .tech-icon {
    animation: sql-pulse 1.3s ease-in-out infinite;
}

/* Git - Branch Shake */
@keyframes git-shake {
    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-4px) rotate(-2deg);
    }
    75% {
        transform: translateX(4px) rotate(2deg);
    }
}

.tech-flip-card[data-tech='git']:hover .tech-icon {
    animation: git-shake 0.5s ease-in-out infinite;
}

/* Blender - 3D Rotate */
@keyframes blender-3d {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    50% {
        transform: rotateY(180deg) rotateX(10deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(0deg);
    }
}

.tech-flip-card[data-tech='blender']:hover .tech-icon {
    animation: blender-3d 2.5s ease-in-out infinite;
}

/* Figma - Float */
@keyframes figma-float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.tech-flip-card[data-tech='figma']:hover .tech-icon {
    animation: figma-float 2s ease-in-out infinite;
}

/* ================================
   3D SPRING BUTTONS (BRUTAL STYLE)
   ================================ */

.btn-spring {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #382b22;
    text-transform: uppercase;
    padding: 1.25em 2em;
    background: #fff0f0;
    border: 2px solid #b18597;
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition:
        transform 150ms cubic-bezier(0, 0, 0.58, 1),
        background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-spring::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9c4d2;
    border-radius: inherit;
    box-shadow:
        0 0 0 2px #b18597,
        0 0.625em 0 0 #ffe3e2;
    transform: translate3d(0, 0.75em, -1em);
    transition:
        transform 150ms cubic-bezier(0, 0, 0.58, 1),
        box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-spring:hover {
    background: #ffe9e9;
    transform: translate(0, 0.25em);
}

.btn-spring:hover::before {
    box-shadow:
        0 0 0 2px #b18597,
        0 0.5em 0 0 #ffe3e2;
    transform: translate3d(0, 0.5em, -1em);
}

.btn-spring:active {
    background: #ffe9e9;
    transform: translate(0em, 0.75em);
}

.btn-spring:active::before {
    box-shadow:
        0 0 0 2px #b18597,
        0 0 #ffe3e2;
    transform: translate3d(0, 0, -1em);
}

/* Alternative Spring Button - Blue */
.btn-spring-blue {
    color: #1a2332;
    background: #e0f2ff;
    border: 2px solid #3b82f6;
}

.btn-spring-blue::before {
    background: #60a5fa;
    box-shadow:
        0 0 0 2px #3b82f6,
        0 0.625em 0 0 #dbeafe;
}

.btn-spring-blue:hover {
    background: #dbeafe;
}

.btn-spring-blue:hover::before {
    box-shadow:
        0 0 0 2px #3b82f6,
        0 0.5em 0 0 #dbeafe;
}

.btn-spring-blue:active::before {
    box-shadow:
        0 0 0 2px #3b82f6,
        0 0 #dbeafe;
}

/* Alternative Spring Button - Green */
.btn-spring-green {
    color: #1e3a1e;
    background: #dcfce7;
    border: 2px solid #22c55e;
}

.btn-spring-green::before {
    background: #4ade80;
    box-shadow:
        0 0 0 2px #22c55e,
        0 0.625em 0 0 #bbf7d0;
}

.btn-spring-green:hover {
    background: #bbf7d0;
}

.btn-spring-green:hover::before {
    box-shadow:
        0 0 0 2px #22c55e,
        0 0.5em 0 0 #bbf7d0;
}

.btn-spring-green:active::before {
    box-shadow:
        0 0 0 2px #22c55e,
        0 0 #bbf7d0;
}

/* Alternative Spring Button - Orange (for itch.io) */
.btn-spring-orange {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #2d1810;
    text-transform: uppercase;
    padding: 1.25em 2em;
    background: #ffe8dc;
    border: 2px solid var(--unity-orange);
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition:
        transform 150ms cubic-bezier(0, 0, 0.58, 1),
        background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-spring-orange::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffb088;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--unity-orange);
    transform: translate3d(0, 0.75em, -1em);
    transition:
        transform 150ms cubic-bezier(0, 0, 0.58, 1),
        box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

.btn-spring-orange:hover {
    background: #ffd4bd;
    transform: translate(0, 0.25em);
}

.btn-spring-orange:hover::before {
    box-shadow: 0 0 0 2px var(--unity-orange);
    transform: translate3d(0, 0.5em, -1em);
}

.btn-spring-orange:active {
    background: #ffd4bd;
    transform: translate(0em, 0.75em);
}

.btn-spring-orange:active::before {
    box-shadow: 0 0 0 2px var(--unity-orange);
    transform: translate3d(0, 0, -1em);
}

/* ================================
   BRUTAL/NEOBRUTALISM PROJECT CARDS
   ================================ */

.project-card-brutal {
    width: 300px;
    padding: 20px;
    background: #fff;
    border: 6px solid #000;
    box-shadow: 12px 12px 0 #000;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.project-card-brutal:hover {
    transform: translate(-5px, -5px);
    box-shadow: 17px 17px 0 #000;
}

.project-card-brutal__title {
    font-size: 32px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
    position: relative;
    overflow: hidden;
}

.project-card-brutal__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%;
    height: 3px;
    background-color: #000;
    transform: translateX(-100%);
    transition: transform 0.3s;
}

.project-card-brutal:hover .project-card-brutal__title::after {
    transform: translateX(0);
}

.project-card-brutal__content {
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 20px;
}

.project-card-brutal__form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.project-card-brutal__form input {
    padding: 10px;
    border: 3px solid #000;
    font-size: 16px;
    font-family: inherit;
    transition: transform 0.3s;
    width: calc(100% - 26px);
}

.project-card-brutal__form input:focus {
    outline: none;
    transform: scale(1.05);
    background-color: #000;
    color: #ffffff;
}

.project-card-brutal__button {
    border: 3px solid #000;
    background: #000;
    color: #fff;
    padding: 10px;
    font-size: 18px;
    left: 20%;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
    width: 50%;
    height: 100%;
}

.project-card-brutal__button::before {
    content: 'Sure?';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-color: #5ad641;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.project-card-brutal__button:hover::before {
    transform: translateY(0);
}

.project-card-brutal__button:active {
    transform: scale(0.95);
}

@keyframes glitch-brutal {
    0% {
        transform: translate(2px, 2px);
    }
    25% {
        transform: translate(-2px, -2px);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    75% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(2px, 2px);
    }
}

.glitch-brutal {
    animation: glitch-brutal 0.3s infinite;
}

/* Update existing project cards with brutal style option */
.project-card.brutal-mode {
    background: #fff;
    border: 6px solid #000;
    box-shadow: 12px 12px 0 #000;
    border-radius: 0;
}

.project-card.brutal-mode:hover {
    transform: translate(-5px, -5px);
    box-shadow: 17px 17px 0 #000;
}

.project-card.brutal-mode .project-content h3 {
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
}


.project-card:nth-child(1) .project-preview img {
    object-position: center top;
  }
  
.project-card:nth-child(2) .project-preview img {
    object-position: center 10%;
  }
  
.project-card:nth-child(3) .project-preview img {
    object-position: center 5%;
  }
  
.project-card:nth-child(4) .project-preview img {
    object-position: center bottom;
  }

.project-card:nth-child(5) .project-preview img {
    object-position: center 10%;
  }

.project-card:nth-child(8) .project-preview img {

    object-position: center 30%;
  }

.project-card:nth-child(13) .project-preview img {

    object-position: center top;
  } 

.project-card:nth-child(14) .project-preview img {

    object-position: center top;
  }