/* Import Bifurk-style fonts */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Creepster&family=Nosifer&display=swap');

/* Font Face for Bifurk */
@font-face {
    font-family: 'Bifurk';
    src: url('../fonts/bifurk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables for Themes */
:root {
    --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-secondary: rgba(255, 255, 255, 0.98);
    --section-bg: rgba(255, 255, 255, 0.98);
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-accent: #4c51bf;
    --accent-color: #4c51bf;
    --border-color: rgba(0, 0, 0, 0.15);
    --card-bg: rgba(255, 255, 255, 0.98);
    --nav-bg: rgba(255, 255, 255, 0.98);
    --hover-overlay: rgba(0, 0, 0, 0.06);
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
    --bg-primary: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    --bg-secondary: rgba(13, 17, 23, 0.98);
    --section-bg: rgba(22, 27, 34, 0.98);
    --text-primary: #ffffff;
    --text-secondary: #e6edf3;
    --text-accent: #79c0ff;
    --accent-color: #79c0ff;
    --border-color: rgba(240, 246, 252, 0.2);
    --card-bg: rgba(22, 27, 34, 0.98);
    --nav-bg: rgba(13, 17, 23, 0.98);
    --hover-overlay: rgba(240, 246, 252, 0.08);
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-medium: rgba(0, 0, 0, 0.6);
    --shadow-heavy: rgba(0, 0, 0, 0.8);
}

[data-theme="vampire"] {
    --bg-primary: linear-gradient(135deg, #282a36 0%, #44475a 100%);
    --bg-secondary: rgba(40, 42, 54, 0.98);
    --section-bg: rgba(68, 71, 90, 0.95);
    --text-primary: #f8f8f2;
    --text-secondary: #f8f8f2;
    --text-accent: #ff79c6;
    --accent-color: #ff79c6;
    --border-color: rgba(189, 147, 249, 0.5);
    --card-bg: rgba(68, 71, 90, 0.95);
    --nav-bg: rgba(40, 42, 54, 0.98);
    --hover-overlay: rgba(255, 121, 198, 0.15);
    --shadow-light: rgba(255, 121, 198, 0.2);
    --shadow-medium: rgba(255, 121, 198, 0.4);
    --shadow-heavy: rgba(255, 121, 198, 0.6);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 80px;
    transition: all 0.3s ease;
}

/* Modern Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: transform 0.3s ease, background 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.nav-gradient-orb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff0080, #00ff80, #0080ff, #ff8000, #8000ff, #ffff00);
    background-size: 300% 300%;
    position: relative;
    animation: navOrbPulse 3s ease-in-out infinite, navGradientShift 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.4)) 
            drop-shadow(0 0 25px rgba(0, 255, 128, 0.3)) 
            drop-shadow(0 0 35px rgba(0, 128, 255, 0.3));
}

.nav-gradient-orb::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff0080, #00ff80, #0080ff, #ff8000, #8000ff, #ffff00);
    background-size: 300% 300%;
    animation: navGradientShift 4s ease-in-out infinite reverse;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.6;
}

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

@keyframes navGradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 200% 50%;
    }
    75% {
        background-position: 300% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #667eea;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

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

.nav-link.active {
    color: #667eea;
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}

.nav-hamburger .bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 3px;
}

.nav-hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.nav-hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Theme Selector */
.theme-selector {
    position: relative;
    margin-left: 20px;
}

.theme-toggle {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.theme-icon {
    font-size: 1.2rem;
}

.theme-dropdown {
    position: absolute;
    top: 55px;
    right: 0;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.theme-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    gap: 10px;
}

.theme-option:hover {
    background: var(--border-color);
    transform: translateX(3px);
}

.theme-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.light-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dark-preview {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.vampire-preview {
    background: linear-gradient(135deg, #2d1b69 0%, #11001c 100%);
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: var(--nav-bg);
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
        border-bottom: 1px solid var(--border-color);
    }

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

    .nav-hamburger {
        display: flex;
    }

    .nav-link {
        padding: 1rem;
        display: block;
        font-size: 1.2rem;
    }
    
    .theme-selector {
        margin-left: 10px;
    }
    
    .theme-toggle {
        width: 40px;
        height: 40px;
    }
    
    .theme-dropdown {
        right: -10px;
    }
}

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

/* Hero Section with Animated Background */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.8), rgba(255, 69, 0, 0.6));
    box-shadow: 0 0 40px rgba(255, 20, 147, 0.6), 0 0 60px rgba(255, 69, 0, 0.4);
    animation-delay: 0s;
}

.shape-2 {
    width: 120px;
    height: 120px;
    top: 60%;
    right: 10%;
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.8), rgba(0, 191, 255, 0.6));
    box-shadow: 0 0 50px rgba(0, 255, 127, 0.6), 0 0 70px rgba(0, 191, 255, 0.4);
    animation-delay: 1s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    top: 10%;
    right: 30%;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.6));
    box-shadow: 0 0 35px rgba(138, 43, 226, 0.6), 0 0 55px rgba(75, 0, 130, 0.4);
    animation-delay: 2s;
}

.shape-4 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.6));
    box-shadow: 0 0 45px rgba(255, 215, 0, 0.6), 0 0 65px rgba(255, 140, 0, 0.4);
    animation-delay: 3s;
}

.shape-5 {
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
    box-shadow: 0 0 55px rgba(255, 0, 255, 0.6), 0 0 75px rgba(0, 255, 255, 0.4);
    animation-delay: 4s;
    transform: translate(-50%, -50%);
}

.shape-6 {
    width: 90px;
    height: 90px;
    top: 30%;
    left: 70%;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.8), rgba(255, 20, 147, 0.6));
    box-shadow: 0 0 42px rgba(255, 165, 0, 0.6), 0 0 58px rgba(255, 20, 147, 0.4);
    animation-delay: 0.5s;
}

.shape-7 {
    width: 70px;
    height: 70px;
    bottom: 15%;
    right: 25%;
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.8), rgba(0, 250, 154, 0.6));
    box-shadow: 0 0 38px rgba(50, 205, 50, 0.6), 0 0 52px rgba(0, 250, 154, 0.4);
    animation-delay: 1.5s;
}

.shape-8 {
    width: 110px;
    height: 110px;
    top: 70%;
    left: 5%;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.8), rgba(255, 140, 0, 0.6));
    box-shadow: 0 0 48px rgba(255, 69, 0, 0.6), 0 0 68px rgba(255, 140, 0, 0.4);
    animation-delay: 2.5s;
}

.shape-9 {
    width: 85px;
    height: 85px;
    top: 5%;
    left: 45%;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(147, 0, 211, 0.6));
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.6), 0 0 56px rgba(147, 0, 211, 0.4);
    animation-delay: 3.5s;
}

.shape-10 {
    width: 95px;
    height: 95px;
    bottom: 40%;
    right: 5%;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.8), rgba(0, 191, 255, 0.6));
    box-shadow: 0 0 44px rgba(30, 144, 255, 0.6), 0 0 62px rgba(0, 191, 255, 0.4);
    animation-delay: 4.5s;
}

.shape-11 {
    width: 75px;
    height: 75px;
    top: 85%;
    left: 80%;
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(255, 182, 193, 0.6));
    box-shadow: 0 0 36px rgba(255, 105, 180, 0.6), 0 0 50px rgba(255, 182, 193, 0.4);
    animation-delay: 5.5s;
}

.shape-12 {
    width: 65px;
    height: 65px;
    top: 25%;
    left: 25%;
    background: linear-gradient(135deg, rgba(154, 205, 50, 0.8), rgba(173, 255, 47, 0.6));
    box-shadow: 0 0 34px rgba(154, 205, 50, 0.6), 0 0 48px rgba(173, 255, 47, 0.4);
    animation-delay: 0.8s;
}

.shape-13 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    left: 60%;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(255, 99, 71, 0.6));
    box-shadow: 0 0 52px rgba(255, 0, 0, 0.6), 0 0 72px rgba(255, 99, 71, 0.4);
    animation-delay: 1.8s;
}

.shape-14 {
    width: 80px;
    height: 80px;
    top: 60%;
    left: 85%;
    background: linear-gradient(135deg, rgba(64, 224, 208, 0.8), rgba(72, 209, 204, 0.6));
    box-shadow: 0 0 38px rgba(64, 224, 208, 0.6), 0 0 54px rgba(72, 209, 204, 0.4);
    animation-delay: 2.8s;
}

.shape-15 {
    width: 100px;
    height: 100px;
    bottom: 5%;
    left: 35%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 255, 0, 0.6));
    box-shadow: 0 0 46px rgba(255, 215, 0, 0.6), 0 0 64px rgba(255, 255, 0, 0.4);
    animation-delay: 3.8s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-40px) rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) rotate(180deg) scale(0.9);
        opacity: 1;
    }
    75% {
        transform: translateY(20px) rotate(270deg) scale(1.05);
        opacity: 0.7;
    }
}

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

/* Bright Electric Title Effect */
.glitch-text {
    font-family: 'Bifurk', 'Creepster', 'Black Ops One', 'Impact', 'Arial Black', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    position: relative;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(45deg, #ff0080, #00ff80, #0080ff, #ff8000, #8000ff, #ffff00);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 20px rgba(255, 0, 128, 0.6)) 
            drop-shadow(0 0 30px rgba(0, 255, 128, 0.6))
            drop-shadow(0 0 40px rgba(0, 128, 255, 0.6));
    animation: rainbowShift 3s ease-in-out infinite, brightPulse 2s ease-in-out infinite;
}

.glitch-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff0080);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translate(3px, 3px);
    filter: blur(2px);
    opacity: 0.8;
    animation: brightShadowDance 3s ease-in-out infinite;
    z-index: -1;
}

.glitch-text::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 0, 128, 0.2) 0%,
        rgba(0, 255, 128, 0.15) 30%,
        rgba(0, 128, 255, 0.15) 60%,
        transparent 100%);
    border-radius: 20px;
    animation: staticGlow 3s ease-in-out infinite;
    z-index: -3;
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 200% 50%;
    }
    75% {
        background-position: 300% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes brightPulse {
    0%, 100% {
        transform: scale(1) rotateZ(0deg);
        letter-spacing: 3px;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) 
                drop-shadow(0 0 20px rgba(255, 0, 128, 0.6)) 
                drop-shadow(0 0 30px rgba(0, 255, 128, 0.6))
                drop-shadow(0 0 40px rgba(0, 128, 255, 0.6));
    }
    50% {
        transform: scale(1.08) rotateZ(1deg);
        letter-spacing: 6px;
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) 
                drop-shadow(0 0 30px rgba(255, 0, 128, 0.8)) 
                drop-shadow(0 0 40px rgba(0, 255, 128, 0.8))
                drop-shadow(0 0 50px rgba(0, 128, 255, 0.8));
    }
}

@keyframes brightShadowDance {
    0%, 100% {
        background-position: 0% 50%;
        transform: translate(3px, 3px) scale(1);
        opacity: 0.8;
    }
    33% {
        background-position: 100% 50%;
        transform: translate(5px, 1px) scale(1.02);
        opacity: 0.6;
    }
    66% {
        background-position: 200% 50%;
        transform: translate(1px, 5px) scale(0.98);
        opacity: 0.9;
    }
}

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

.hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease-out 0.5s both;
}

.intro-statement {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    letter-spacing: 1px;
    animation: fadeInUp 1s ease-out 0.7s both;
    font-weight: 300;
}

/* Pulse Dot Animation */
.pulse-dot {
    font-size: 3rem;
    margin: 2rem auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: ufoFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.pulse-dot::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: ufoRing 3s ease-in-out infinite;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: ufoRing 3s ease-in-out infinite 0.5s;
}

@keyframes ufoFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
    }
    25% {
        transform: translateY(-8px) rotate(2deg);
        filter: drop-shadow(0 0 15px rgba(0, 255, 128, 0.8));
    }
    50% {
        transform: translateY(-4px) rotate(0deg);
        filter: drop-shadow(0 0 20px rgba(0, 128, 255, 0.8));
    }
    75% {
        transform: translateY(-12px) rotate(-2deg);
        filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.8));
    }
}

@keyframes ufoRing {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

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

/* Main Content */
.main-content {
    background: #fff;
    border-radius: 20px 20px 0 0;
    margin-top: -50px;
    position: relative;
    z-index: 3;
    padding: 80px 40px 40px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

.project-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 2rem;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 480px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(10px);
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.pokedex-card:hover {
    border-color: #ff6b6b;
}

.crypto-card:hover {
    border-color: #4ecdc4;
}

.picnest-card:hover {
    border-color: #f39c12;
}

.shadowtap-card:hover {
    border-color: #e74c3c;
}

.card-content {
    flex: 0 1 auto;
    z-index: 2;
    position: relative;
    padding-bottom: 1.5rem;
}

.project-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.project-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.project-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.tech-tag {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 1rem 2rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.project-card:hover .card-overlay {
    transform: translateY(0);
}

.view-project {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Coming Soon Badge */
.coming-soon-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    display: inline-block;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Placeholder Card Styling */
.placeholder-card {
    opacity: 0.7;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px dashed #dee2e6;
}

.placeholder-card:hover {
    opacity: 0.9;
    transform: translateY(-5px);
    border-color: #adb5bd;
}

.placeholder-card .project-icon {
    opacity: 0.6;
}

.placeholder-card h3,
.placeholder-card p {
    color: #6c757d;
}

/* GitHub Projects Section */
.github-projects-section {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid #f1f1f1;
}

/* About Section */
.about-section {
    text-align: center;
    margin: 4rem 0;
}

.about-content h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

[data-theme="dark"] .about-content h2 {
    color: #000000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

[data-theme="vampire"] .about-content h2 {
    color: #000000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

.about-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    background: #f8f9fa;
}

/* Responsive Design */
@media (max-width: 480px) {
    .glitch-text {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .project-card {
        min-height: auto;
        padding: 1.5rem;
    }
    
    .main-content {
        padding: 40px 20px 20px;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .glitch-text {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* Scale down floating shapes for mobile */
    .floating-shapes .shape {
        transform: scale(0.6);
        opacity: 0.4;
    }
    
    .shape-1 { width: 40px; height: 40px; top: 15%; left: 5%; }
    .shape-2 { width: 60px; height: 60px; top: 65%; right: 5%; }
    .shape-3 { width: 30px; height: 30px; top: 8%; right: 25%; }
    .shape-4 { width: 50px; height: 50px; bottom: 25%; left: 15%; }
    .shape-5 { width: 70px; height: 70px; top: 45%; left: 45%; }
    .shape-6 { width: 45px; height: 45px; top: 25%; left: 75%; }
    .shape-7 { width: 35px; height: 35px; bottom: 20%; right: 20%; }
    .shape-8 { width: 55px; height: 55px; top: 75%; left: 8%; }
    .shape-9 { width: 40px; height: 40px; top: 5%; left: 40%; }
    .shape-10 { width: 45px; height: 45px; bottom: 45%; right: 8%; }
    /* Hide some shapes to reduce clutter on small screens */
    .shape-11, .shape-12, .shape-13, .shape-14, .shape-15 { display: none; }
}

/* Additional Animation Classes */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

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

.slide-up {
    transform: translateY(50px);
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

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

/* Dynamic Project Card Backgrounds */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%);
    z-index: 1;
    transition: all 0.3s ease;
}

.pokedex-card::before {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(255, 107, 107, 0.08) 100%);
    animation: pokemonFloat 4s ease-in-out infinite;
}

.crypto-card::before {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.03) 0%, rgba(78, 205, 196, 0.08) 100%);
    animation: cryptoFloat 3.5s ease-in-out infinite;
}

.picnest-card::before {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.03) 0%, rgba(243, 156, 18, 0.08) 100%);
    animation: cloudFloat 4.2s ease-in-out infinite;
}

.python-card::before {
    background: linear-gradient(135deg, rgba(61, 174, 233, 0.03) 0%, rgba(255, 212, 59, 0.05) 100%);
    animation: pythonFloat 3.8s ease-in-out infinite;
}

.ansible-card::before {
    background: linear-gradient(135deg, rgba(238, 41, 41, 0.03) 0%, rgba(238, 41, 41, 0.08) 100%);
    animation: automationFloat 4.1s ease-in-out infinite;
}

.k8s-card::before {
    background: linear-gradient(135deg, rgba(50, 108, 229, 0.03) 0%, rgba(50, 108, 229, 0.08) 100%);
    animation: kubernetesFloat 3.7s ease-in-out infinite;
}

.docker-card::before {
    background: linear-gradient(135deg, rgba(9, 132, 227, 0.03) 0%, rgba(9, 132, 227, 0.08) 100%);
    animation: containerFloat 4.3s ease-in-out infinite;
}

.aoc-card::before {
    background: linear-gradient(135deg, rgba(0, 153, 0, 0.03) 0%, rgba(255, 215, 0, 0.05) 100%);
    animation: challengeFloat 3.9s ease-in-out infinite;
}

.portfolio-card::before {
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.03) 0%, rgba(0, 255, 128, 0.03) 50%, rgba(0, 128, 255, 0.03) 100%);
    animation: portfolioFloat 4s ease-in-out infinite;
}

@keyframes pokemonFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes cryptoFloat {
    0%, 100% { transform: translateX(0px) scale(1); }
    50% { transform: translateX(5px) scale(1.02); }
}

@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-5px) translateX(3px); }
    66% { transform: translateY(2px) translateX(-2px); }
}

@keyframes pythonFloat {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.01); }
}

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

@keyframes kubernetesFloat {
    0%, 100% { transform: translateX(0px) rotate(0deg); }
    50% { transform: translateX(-4px) rotate(-1deg); }
}

@keyframes containerFloat {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1.01) translateY(-4px); }
}

@keyframes challengeFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(1deg); }
    75% { transform: translateY(3px) rotate(-1deg); }
}

@keyframes portfolioFloat {
    0%, 100% { transform: translateY(0px) scale(1); background-position: 0% 50%; }
    50% { transform: translateY(-5px) scale(1.01); background-position: 100% 50%; }
}

/* Colored Technology Tags */
.tech-tag.react {
    background: linear-gradient(135deg, #61dafb, #21a9c7);
    box-shadow: 0 2px 8px rgba(97, 218, 251, 0.3);
}

.tech-tag.js {
    background: linear-gradient(135deg, #f7df1e, #d4ac0d);
    color: #333;
    box-shadow: 0 2px 8px rgba(247, 223, 30, 0.3);
}

.tech-tag.ts {
    background: linear-gradient(135deg, #3178c6, #235a97);
    box-shadow: 0 2px 8px rgba(49, 120, 198, 0.3);
}

.tech-tag.api {
    background: linear-gradient(135deg, #ff6b35, #e55722);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.tech-tag.css {
    background: linear-gradient(135deg, #1572b6, #0e4a73);
    box-shadow: 0 2px 8px rgba(21, 114, 182, 0.3);
}

.tech-tag.build {
    background: linear-gradient(135deg, #646cff, #4f46e5);
    box-shadow: 0 2px 8px rgba(100, 108, 255, 0.3);
}

.tech-tag.chart {
    background: linear-gradient(135deg, #ff6384, #e84a68);
    box-shadow: 0 2px 8px rgba(255, 99, 132, 0.3);
}

.tech-tag.cloud {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

.tech-tag.web {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.tech-tag.security {
    background: linear-gradient(135deg, #f44336, #c62828);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.tech-tag.ui {
    background: linear-gradient(135deg, #9c27b0, #6a1b9a);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.tech-tag.live {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    animation: livePulse 2s ease-in-out infinite;
}

.tech-tag.python {
    background: linear-gradient(135deg, #3776ab, #ffd43b);
    box-shadow: 0 2px 8px rgba(55, 118, 171, 0.3);
}

.tech-tag.script {
    background: linear-gradient(135deg, #2e3440, #4c566a);
    box-shadow: 0 2px 8px rgba(46, 52, 64, 0.3);
}

.tech-tag.automation {
    background: linear-gradient(135deg, #ff9800, #e65100);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.tech-tag.data {
    background: linear-gradient(135deg, #00bcd4, #0097a7);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

.tech-tag.ansible {
    background: linear-gradient(135deg, #ee0000, #c41e3a);
    box-shadow: 0 2px 8px rgba(238, 0, 0, 0.3);
}

.tech-tag.infra {
    background: linear-gradient(135deg, #607d8b, #37474f);
    box-shadow: 0 2px 8px rgba(96, 125, 139, 0.3);
}

.tech-tag.k8s {
    background: linear-gradient(135deg, #326ce5, #1a4480);
    box-shadow: 0 2px 8px rgba(50, 108, 229, 0.3);
}

.tech-tag.shell {
    background: linear-gradient(135deg, #89e051, #5cb85c);
    box-shadow: 0 2px 8px rgba(137, 224, 81, 0.3);
}

.tech-tag.container {
    background: linear-gradient(135deg, #0db7ed, #0a8cc8);
    box-shadow: 0 2px 8px rgba(13, 183, 237, 0.3);
}

.tech-tag.docker {
    background: linear-gradient(135deg, #0db7ed, #0a8cc8);
    box-shadow: 0 2px 8px rgba(13, 183, 237, 0.3);
}

.tech-tag.compose {
    background: linear-gradient(135deg, #0f1419, #2188ff);
    box-shadow: 0 2px 8px rgba(33, 136, 255, 0.3);
}

.tech-tag.devops {
    background: linear-gradient(135deg, #ff6b35, #764ba2);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.tech-tag.algorithm {
    background: linear-gradient(135deg, #6a4c93, #c06c84);
    box-shadow: 0 2px 8px rgba(106, 76, 147, 0.3);
}

.tech-tag.challenge {
    background: linear-gradient(135deg, #00c851, #00695c);
    box-shadow: 0 2px 8px rgba(0, 200, 81, 0.3);
}

.tech-tag.problem {
    background: linear-gradient(135deg, #ffab00, #ff6f00);
    box-shadow: 0 2px 8px rgba(255, 171, 0, 0.3);
}

.tech-tag.html {
    background: linear-gradient(135deg, #e34f26, #c1410c);
    box-shadow: 0 2px 8px rgba(227, 79, 38, 0.3);
}

.tech-tag.animation {
    background: linear-gradient(135deg, #ff0080, #00ff80, #0080ff);
    background-size: 200% 200%;
    animation: animationShimmer 3s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(255, 0, 128, 0.3);
}

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

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

/* GitHub Grid Specific Styling */
.github-grid {
    grid-template-columns: repeat(auto-fit, 350px);
    justify-content: center;
    gap: 2rem;
}

/* GitHub cards will use the grid sizing */

/* Hover effects for new cards */
.python-card:hover { border-color: #3776ab; }
.ansible-card:hover { border-color: #ee0000; }
.k8s-card:hover { border-color: #326ce5; }
.docker-card:hover { border-color: #0db7ed; }
.aoc-card:hover { border-color: #00c851; }
.portfolio-card:hover { border-color: #ff0080; }
.chess-card:hover { border-color: #d4af37; }
.warnsdorf-card:hover { border-color: #8b4513; }

/* Falling Crypto Tokens Animation */
.crypto-tokens {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.crypto-coin {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.12;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-inner {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.coin-1 {
    left: 10%;
    background: linear-gradient(135deg, #f7931a, #d4750f, #f7931a);
    animation: cryptoFall 8s linear infinite;
    animation-delay: 0s;
}

.coin-2 {
    left: 25%;
    background: linear-gradient(135deg, #627eea, #4c63d2, #627eea);
    animation: cryptoFall 9s linear infinite;
    animation-delay: 1s;
}

.coin-3 {
    left: 40%;
    background: linear-gradient(135deg, #f7931a, #d4750f, #f7931a);
    animation: cryptoFall 7s linear infinite;
    animation-delay: 2s;
}

.coin-4 {
    left: 55%;
    background: linear-gradient(135deg, #627eea, #4c63d2, #627eea);
    animation: cryptoFall 10s linear infinite;
    animation-delay: 3s;
}

.coin-5 {
    left: 70%;
    background: linear-gradient(135deg, #f7931a, #d4750f, #f7931a);
    animation: cryptoFall 8.5s linear infinite;
    animation-delay: 4s;
}

.coin-6 {
    left: 85%;
    background: linear-gradient(135deg, #627eea, #4c63d2, #627eea);
    animation: cryptoFall 9.5s linear infinite;
    animation-delay: 5s;
}

.coin-7 {
    left: 15%;
    background: linear-gradient(135deg, #f7931a, #d4750f, #f7931a);
    animation: cryptoFall 7.5s linear infinite;
    animation-delay: 6s;
}

.coin-8 {
    left: 65%;
    background: linear-gradient(135deg, #627eea, #4c63d2, #627eea);
    animation: cryptoFall 8.8s linear infinite;
    animation-delay: 7s;
}

@keyframes cryptoFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.15;
    }
    90% {
        opacity: 0.05;
    }
    100% {
        transform: translateY(400px) rotate(360deg);
        opacity: 0;
    }
}

.crypto-card:hover .crypto-coin {
    opacity: 0.25;
    animation-duration: 4s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Pokemon Collage Background */
.pokemon-collage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.pokemon-sprite {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.15;
    filter: grayscale(70%) brightness(1.2);
    transition: all 0.3s ease;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Row 1 - Top overlapping layer */
.sprite-1 {
    top: -30%;
    left: -20%;
    animation: pokemonFloat1 8s ease-in-out infinite;
    animation-delay: 0s;
}

.sprite-2 {
    top: -35%;
    left: 5%;
    animation: pokemonFloat2 9s ease-in-out infinite;
    animation-delay: 1s;
}

.sprite-3 {
    top: -28%;
    left: 18%;
    animation: pokemonFloat3 7s ease-in-out infinite;
    animation-delay: 2s;
}

.sprite-4 {
    top: -32%;
    left: 31%;
    animation: pokemonFloat4 8.5s ease-in-out infinite;
    animation-delay: 3s;
}

.sprite-5 {
    top: -26%;
    left: 44%;
    animation: pokemonFloat5 9.5s ease-in-out infinite;
    animation-delay: 4s;
}

.sprite-6 {
    top: -30%;
    left: 57%;
    animation: pokemonFloat6 7.5s ease-in-out infinite;
    animation-delay: 5s;
}

/* Row 2 - Upper middle overlapping */
.sprite-7 {
    top: -5%;
    left: -22%;
    animation: pokemonFloat7 8.8s ease-in-out infinite;
    animation-delay: 6s;
}

.sprite-8 {
    top: -2%;
    left: 2%;
    animation: pokemonFloat8 9.2s ease-in-out infinite;
    animation-delay: 7s;
}

.sprite-9 {
    top: -8%;
    left: 15%;
    animation: pokemonFloat1 8.3s ease-in-out infinite;
    animation-delay: 8s;
}

.sprite-10 {
    top: -4%;
    left: 28%;
    animation: pokemonFloat2 7.8s ease-in-out infinite;
    animation-delay: 9s;
}

.sprite-11 {
    top: -6%;
    left: 41%;
    animation: pokemonFloat3 9.1s ease-in-out infinite;
    animation-delay: 10s;
}

.sprite-12 {
    top: -3%;
    left: 54%;
    animation: pokemonFloat4 8.7s ease-in-out infinite;
    animation-delay: 11s;
}

/* Row 3 - Middle overlapping */
.sprite-13 {
    top: 18%;
    left: -20%;
    animation: pokemonFloat5 7.9s ease-in-out infinite;
    animation-delay: 12s;
}

.sprite-14 {
    top: 20%;
    left: -2%;
    animation: pokemonFloat6 8.4s ease-in-out infinite;
    animation-delay: 13s;
}

.sprite-15 {
    top: 15%;
    left: 12%;
    animation: pokemonFloat7 9.3s ease-in-out infinite;
    animation-delay: 14s;
}

.sprite-16 {
    top: 22%;
    left: 25%;
    animation: pokemonFloat8 8.6s ease-in-out infinite;
    animation-delay: 15s;
}

.sprite-17 {
    top: 18%;
    left: 38%;
    animation: pokemonFloat1 7.7s ease-in-out infinite;
    animation-delay: 16s;
}

.sprite-18 {
    top: 25%;
    left: 51%;
    animation: pokemonFloat2 9.4s ease-in-out infinite;
    animation-delay: 17s;
}

/* Row 4 - Lower middle overlapping */
.sprite-19 {
    top: 40%;
    left: -22%;
    animation: pokemonFloat3 8.1s ease-in-out infinite;
    animation-delay: 18s;
}

.sprite-20 {
    top: 45%;
    left: -5%;
    animation: pokemonFloat4 8.9s ease-in-out infinite;
    animation-delay: 19s;
}

.sprite-21 {
    top: 42%;
    left: 8%;
    animation: pokemonFloat5 7.4s ease-in-out infinite;
    animation-delay: 20s;
}

.sprite-22 {
    top: 48%;
    left: 21%;
    animation: pokemonFloat6 8.8s ease-in-out infinite;
    animation-delay: 21s;
}

.sprite-23 {
    top: 44%;
    left: 34%;
    animation: pokemonFloat7 9.1s ease-in-out infinite;
    animation-delay: 22s;
}

.sprite-24 {
    top: 47%;
    left: 47%;
    animation: pokemonFloat8 7.9s ease-in-out infinite;
    animation-delay: 23s;
}

/* Row 5 - Bottom overlapping layer */
.sprite-25 {
    top: 65%;
    left: -20%;
    animation: pokemonFloat1 8.5s ease-in-out infinite;
    animation-delay: 24s;
}

.sprite-26 {
    top: 70%;
    left: -2%;
    animation: pokemonFloat2 7.6s ease-in-out infinite;
    animation-delay: 25s;
}

.sprite-27 {
    top: 68%;
    left: 11%;
    animation: pokemonFloat3 9.2s ease-in-out infinite;
    animation-delay: 26s;
}

.sprite-28 {
    top: 72%;
    left: 24%;
    animation: pokemonFloat4 8.3s ease-in-out infinite;
    animation-delay: 27s;
}

@keyframes pokemonFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(0.8); }
    50% { transform: translateY(-12px) rotate(5deg) scale(0.9); }
}

@keyframes pokemonFloat2 {
    0%, 100% { transform: translateX(0px) scale(0.8); }
    50% { transform: translateX(-8px) scale(0.85); }
}

@keyframes pokemonFloat3 {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(0.9); }
    50% { transform: translateY(-10px) rotate(-3deg) scale(0.8); }
}

@keyframes pokemonFloat4 {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(0.85); }
    50% { transform: translateY(-8px) translateX(5px) scale(0.9); }
}

@keyframes pokemonFloat5 {
    0%, 100% { transform: rotate(0deg) scale(0.8); }
    50% { transform: rotate(8deg) scale(0.85); }
}

@keyframes pokemonFloat6 {
    0%, 100% { transform: translateY(0px) scale(0.9); }
    50% { transform: translateY(-15px) scale(0.8); }
}

@keyframes pokemonFloat7 {
    0%, 100% { transform: translateX(0px) rotate(0deg) scale(0.8); }
    50% { transform: translateX(-6px) rotate(-5deg) scale(0.9); }
}

@keyframes pokemonFloat8 {
    0%, 100% { transform: translateY(0px) scale(0.85); }
    50% { transform: translateY(-10px) scale(0.8); }
}

.pokedex-card:hover .pokemon-sprite {
    opacity: 0.3;
    filter: grayscale(40%) brightness(1.5);
    animation-duration: 4s;
    transform: scale(1.05);
}

/* Lakitu Cloud Animation for PicNest */
.lakitu-cloud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.lakitu-emoji {
    position: absolute;
    top: 15%;
    right: 10%;
    font-size: 2.5rem;
    opacity: 0.12;
    animation: lakituFloat 6s ease-in-out infinite;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(135, 206, 235, 0.3));
}

@keyframes lakituFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.12;
    }
    25% {
        transform: translateY(-8px) translateX(3px) rotate(2deg);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-15px) translateX(-2px) rotate(0deg);
        opacity: 0.1;
    }
    75% {
        transform: translateY(-5px) translateX(5px) rotate(-1deg);
        opacity: 0.14;
    }
}

.picnest-card:hover .lakitu-emoji {
    opacity: 0.3;
    animation-duration: 3s;
    transform: scale(1.15);
    filter: drop-shadow(0 0 15px rgba(135, 206, 235, 0.6));
}

/* Additional Tech Tags */
.tech-tag.node {
    background: linear-gradient(135deg, #68a063, #4f7942);
    box-shadow: 0 2px 8px rgba(104, 160, 99, 0.3);
}

.tech-tag.express {
    background: linear-gradient(135deg, #2c2c2c, #404040);
    box-shadow: 0 2px 8px rgba(44, 44, 44, 0.3);
}

.tech-tag.mongo {
    background: linear-gradient(135deg, #4db33d, #3e8b30);
    box-shadow: 0 2px 8px rgba(77, 179, 61, 0.3);
}

.tech-tag.aws {
    background: linear-gradient(135deg, #ff9900, #e6880a);
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.tech-tag.nginx {
    background: linear-gradient(135deg, #009639, #007a2e);
    box-shadow: 0 2px 8px rgba(0, 150, 57, 0.3);
}

.tech-tag.redis {
    background: linear-gradient(135deg, #dc382d, #b02e24);
    box-shadow: 0 2px 8px rgba(220, 56, 45, 0.3);
}

.tech-tag.lambda {
    background: linear-gradient(135deg, #ff9900, #ff7700);
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.tech-tag.cloudfront {
    background: linear-gradient(135deg, #ff4444, #cc3333);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.tech-tag.cognito {
    background: linear-gradient(135deg, #ff6600, #e65a00);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3);
}

.tech-tag.dynamodb {
    background: linear-gradient(135deg, #3f48cc, #2d36aa);
    box-shadow: 0 2px 8px rgba(63, 72, 204, 0.3);
}

.tech-tag.terraform {
    background: linear-gradient(135deg, #5c4ee5, #4137d1);
    box-shadow: 0 2px 8px rgba(92, 78, 229, 0.3);
}

.tech-tag.beanstalk {
    background: linear-gradient(135deg, #ff9900, #cc7700);
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.tech-tag.network {
    background: linear-gradient(135deg, #00d4aa, #009688);
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
}

.tech-tag.monitoring {
    background: linear-gradient(135deg, #795548, #5d4037);
    box-shadow: 0 2px 8px rgba(121, 85, 72, 0.3);
}

.tech-tag.threat {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.tech-tag.analysis {
    background: linear-gradient(135deg, #673ab7, #512da6);
    box-shadow: 0 2px 8px rgba(103, 58, 183, 0.3);
}

.tech-tag.alerting {
    background: linear-gradient(135deg, #ff5722, #d84315);
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
}

.tech-tag.filtering {
    background: linear-gradient(135deg, #607d8b, #455a64);
    box-shadow: 0 2px 8px rgba(96, 125, 139, 0.3);
}

.tech-tag.capture {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.tech-tag.timeline {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.tech-tag.rules {
    background: linear-gradient(135deg, #795548, #5d4037);
    box-shadow: 0 2px 8px rgba(121, 85, 72, 0.3);
}

/* Matrix Binary Background for ShadowTap */
.matrix-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 50, 0, 0.05));
}

.binary-stream {
    position: absolute;
    width: 12px;
    height: 100%;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #00ff41;
    opacity: 0.12;
    overflow: hidden;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.binary-stream::before {
    content: '1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 1\00000a 1\00000a 0\00000a 1\00000a 0\00000a 0\00000a 1\00000a 1';
    position: absolute;
    top: -200%;
    left: 0;
    white-space: pre;
    line-height: 1.2;
    letter-spacing: 0;
}

.stream-1 {
    left: 2%;
    animation: matrixFall1 8s linear infinite;
    animation-delay: 0s;
}

.stream-2 {
    left: 12%;
    animation: matrixFall2 9s linear infinite;
    animation-delay: 1s;
}

.stream-3 {
    left: 22%;
    animation: matrixFall3 7s linear infinite;
    animation-delay: 2s;
}

.stream-4 {
    left: 32%;
    animation: matrixFall4 10s linear infinite;
    animation-delay: 3s;
}

.stream-5 {
    left: 42%;
    animation: matrixFall5 8.5s linear infinite;
    animation-delay: 4s;
}

.stream-6 {
    left: 52%;
    animation: matrixFall6 9.5s linear infinite;
    animation-delay: 5s;
}

.stream-7 {
    left: 62%;
    animation: matrixFall7 7.5s linear infinite;
    animation-delay: 6s;
}

.stream-8 {
    left: 72%;
    animation: matrixFall8 8.8s linear infinite;
    animation-delay: 7s;
}

.stream-9 {
    left: 82%;
    animation: matrixFall9 9.2s linear infinite;
    animation-delay: 8s;
}

.stream-10 {
    left: 92%;
    animation: matrixFall10 8.3s linear infinite;
    animation-delay: 9s;
}

@keyframes matrixFall1 {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.05; }
    100% { transform: translateY(400%); opacity: 0; }
}

@keyframes matrixFall2 {
    0% { transform: translateY(-120%); opacity: 0; }
    15% { opacity: 0.12; }
    85% { opacity: 0.08; }
    100% { transform: translateY(420%); opacity: 0; }
}

@keyframes matrixFall3 {
    0% { transform: translateY(-80%); opacity: 0; }
    12% { opacity: 0.18; }
    88% { opacity: 0.06; }
    100% { transform: translateY(380%); opacity: 0; }
}

@keyframes matrixFall4 {
    0% { transform: translateY(-150%); opacity: 0; }
    8% { opacity: 0.14; }
    92% { opacity: 0.04; }
    100% { transform: translateY(450%); opacity: 0; }
}

@keyframes matrixFall5 {
    0% { transform: translateY(-110%); opacity: 0; }
    11% { opacity: 0.16; }
    89% { opacity: 0.07; }
    100% { transform: translateY(410%); opacity: 0; }
}

@keyframes matrixFall6 {
    0% { transform: translateY(-90%); opacity: 0; }
    13% { opacity: 0.13; }
    87% { opacity: 0.09; }
    100% { transform: translateY(390%); opacity: 0; }
}

@keyframes matrixFall7 {
    0% { transform: translateY(-130%); opacity: 0; }
    14% { opacity: 0.17; }
    86% { opacity: 0.05; }
    100% { transform: translateY(430%); opacity: 0; }
}

@keyframes matrixFall8 {
    0% { transform: translateY(-100%); opacity: 0; }
    9% { opacity: 0.11; }
    91% { opacity: 0.08; }
    100% { transform: translateY(400%); opacity: 0; }
}

@keyframes matrixFall9 {
    0% { transform: translateY(-140%); opacity: 0; }
    16% { opacity: 0.19; }
    84% { opacity: 0.06; }
    100% { transform: translateY(440%); opacity: 0; }
}

@keyframes matrixFall10 {
    0% { transform: translateY(-85%); opacity: 0; }
    12% { opacity: 0.15; }
    88% { opacity: 0.07; }
    100% { transform: translateY(385%); opacity: 0; }
}

.shadowtap-card:hover .binary-stream {
    opacity: 0.25;
    color: #00ff00;
    animation-duration: 4s;
}

.shadowtap-card:hover {
    border-color: #00ff41;
    box-shadow: 0 20px 40px rgba(0, 255, 65, 0.15);
}

/* Force dark background for ShadowTap card in all themes */
.shadowtap-card {
    background: #1a1a1a !important;
    border-color: #333 !important;
}

.shadowtap-card h3,
.shadowtap-card p {
    color: #ffffff !important;
}

.shadowtap-card:hover {
    background: #1a1a1a !important;
    border-color: #00ff41 !important;
}

/* Programming Languages Section */
.languages-section {
    margin-top: 3rem;
}

.languages-section h3 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
}

.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.lang-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.lang-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--hover-overlay), transparent);
    transition: left 0.6s ease;
}

.lang-tile:hover::before {
    left: 100%;
}

.lang-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px var(--shadow-medium);
}

.lang-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    transition: transform 0.3s ease;
}

.lang-tile:hover .lang-icon {
    transform: scale(1.1) rotate(5deg);
}

.lang-icon svg {
    width: 100%;
    height: 100%;
}

.lang-tile span {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Language-specific colors */
.html-tile .lang-icon svg { color: #e34f26; }
.css-tile .lang-icon svg { color: #1572b6; }
.python-tile .lang-icon svg { color: #3776ab; }
.java-tile .lang-icon svg { color: #007396; }
.cpp-tile .lang-icon svg { color: #00599c; }
.typescript-tile .lang-icon svg { color: #3178c6; }
.javascript-tile .lang-icon svg { color: #f7df1e; }
.bash-tile .lang-icon svg { color: #4eaa25; }

/* Technologies Section */
.technologies-section {
    padding: 4rem 2rem;
    background: var(--section-bg);
    margin-top: 4rem;
}

.tech-content {
    max-width: 1200px;
    margin: 0 auto;
}

.tech-content h2 {
    color: var(--text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.tech-content h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.tech-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.tech-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, var(--hover-overlay), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech-tile:hover::before {
    opacity: 1;
}

.tech-tile:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 15px 35px var(--shadow-heavy);
}

.tech-logo {
    width: 50px;
    height: 50px;
    margin: 0 auto 1.5rem;
    transition: all 0.4s ease;
    animation: techFloat 3s ease-in-out infinite;
}

.tech-tile:hover .tech-logo {
    transform: scale(1.15) rotate(10deg);
    animation-play-state: paused;
}

.tech-logo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px var(--shadow-light));
    transition: filter 0.3s ease;
}

.tech-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px var(--shadow-light));
    transition: filter 0.3s ease;
    max-width: 50px;
    max-height: 50px;
}

/* Specific scaling fixes for logo images */
.ansible-tech .tech-logo-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.kibana-tech .tech-logo-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.springboot-tech .tech-logo-img {
    width: 180%;
    height: 180%;
    object-fit: contain;
    max-width: 110px;
    max-height: 110px;
    margin: auto;
    display: block;
}

.hadoop-tech .tech-logo-img {
    width: 140%;
    height: 140%;
    object-fit: contain;
    max-width: 90px;
    max-height: 90px;
}

.tux-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tech-tile:hover .tech-logo svg {
    filter: drop-shadow(0 4px 8px var(--shadow-medium));
}

.tech-tile:hover .tech-logo-img {
    filter: drop-shadow(0 4px 8px var(--shadow-medium));
}

.tech-tile span {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.tech-tile:hover span {
    color: var(--accent-color);
}

/* Technology-specific colors - Authentic brand colors */
.ansible-tech .tech-logo svg { color: #ee0000; }
.terraform-tech .tech-logo svg { color: #5c4ee5; }
.java8-tech .tech-logo svg { color: #ed8b00; }
.html5-tech .tech-logo svg { color: #e34f26; }
.css3-tech .tech-logo svg { color: #1572b6; }
.tailwind-tech .tech-logo svg { color: #06b6d4; }
.mui-tech .tech-logo svg { color: #007fff; }
.bootstrap-tech .tech-logo svg { color: #7952b3; }
.react-tech .tech-logo svg { color: #61dafb; }
.express-tech .tech-logo svg { color: #000000; }
.vue-tech .tech-logo svg { color: #4fc08d; }
.elasticsearch-tech .tech-logo svg { color: #005571; }
.kibana-tech .tech-logo svg { color: #e8478b; }
.jenkins-tech .tech-logo svg { color: #d33833; }
.argo-tech .tech-logo svg { color: #ef7b4d; }
.grafana-tech .tech-logo svg { color: #f46800; }
.nginx-tech .tech-logo svg { color: #009639; }
.nodejs-tech .tech-logo svg { color: #339933; }

/* Animations */
@keyframes techFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

/* Theme-specific adjustments for tiles */
[data-theme="dark"] .tech-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-light);
}

[data-theme="dark"] .tech-tile:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 15px 35px var(--shadow-heavy);
    border-color: var(--accent-color);
}

[data-theme="dark"] .lang-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-light);
}

[data-theme="dark"] .lang-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px var(--shadow-medium);
    border-color: var(--accent-color);
}

[data-theme="vampire"] .tech-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-light);
}

[data-theme="vampire"] .tech-tile:hover {
    transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 15px 35px var(--shadow-heavy);
    border-color: var(--accent-color);
}

[data-theme="vampire"] .lang-tile {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-light);
}

[data-theme="vampire"] .lang-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px var(--shadow-medium);
    border-color: var(--accent-color);
}

/* Theme-specific color adjustments for better visibility */
[data-theme="dark"] .express-tech .tech-logo svg,
[data-theme="vampire"] .express-tech .tech-logo svg {
    color: #ffffff;
}

[data-theme="dark"] .javascript-tile .lang-icon svg {
    color: #f7df1e;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

[data-theme="vampire"] .javascript-tile .lang-icon svg {
    color: #f7df1e;
    filter: drop-shadow(0 0 2px rgba(45, 27, 105, 0.8));
}

/* Enhanced visibility for theme selector */
[data-theme="dark"] .theme-dropdown {
    background: #2a2a2a;
    border: 1px solid #444444;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

[data-theme="vampire"] .theme-dropdown {
    background: #1a1a1a;
    border: 1px solid #333333;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9);
    z-index: 9999;
}

/* Navigation improvements for all themes */
[data-theme="dark"] .nav-link,
[data-theme="vampire"] .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="vampire"] .nav-link:hover {
    color: var(--accent-color);
}

/* Ensure floating shapes are visible in all themes */
[data-theme="dark"] .floating-shapes .shape,
[data-theme="vampire"] .floating-shapes .shape {
    opacity: 0.6;
    backdrop-filter: blur(10px);
}

/* Project cards theme adjustments */
[data-theme="dark"] .project-card,
[data-theme="vampire"] .project-card {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 8px 25px var(--shadow-light);
}

[data-theme="dark"] .project-card:hover,
[data-theme="vampire"] .project-card:hover {
    box-shadow: 0 20px 40px var(--shadow-heavy);
    border-color: var(--accent-color);
}

/* Hero section theme adjustments */
[data-theme="dark"] .glitch-text,
[data-theme="vampire"] .glitch-text {
    color: var(--text-primary);
}

[data-theme="dark"] .hero-subtitle,
[data-theme="vampire"] .hero-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .intro-statement,
[data-theme="vampire"] .intro-statement {
    color: var(--text-secondary);
}

/* Section titles theme adjustments */
[data-theme="dark"] .section-title {
    color: #ffffff !important;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
}

[data-theme="vampire"] .section-title {
    color: #ffffff !important;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
}

/* Footer theme adjustments */
[data-theme="dark"] .footer,
[data-theme="vampire"] .footer {
    background: var(--section-bg);
    color: var(--text-secondary);
}

/* Ensure tech stack tags remain visible */
[data-theme="dark"] .tech-tag,
[data-theme="vampire"] .tech-tag {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Additional contrast improvements */
/* Removed duplicate - specific styles below */

[data-theme="dark"] .project-card h3,
[data-theme="vampire"] .project-card h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .project-card p,
[data-theme="vampire"] .project-card p {
    color: var(--text-secondary);
}

/* Theme selector improvements */
[data-theme="dark"] .theme-option {
    color: #ffffff;
    font-weight: 500;
}

[data-theme="vampire"] .theme-option {
    color: #ffffff;
    font-weight: 500;
}

[data-theme="dark"] .theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
}

[data-theme="vampire"] .theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
}

/* Coming soon badge visibility */
[data-theme="dark"] .coming-soon-badge,
[data-theme="vampire"] .coming-soon-badge {
    background: var(--accent-color);
    color: white;
    text-shadow: none;
}

/* Card overlay improvements */
[data-theme="dark"] .card-overlay,
[data-theme="vampire"] .card-overlay {
    background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .view-project,
[data-theme="vampire"] .view-project {
    color: var(--accent-color);
}

/* Better text visibility in all sections */
[data-theme="dark"] .github-projects-section,
[data-theme="vampire"] .github-projects-section {
    background: var(--section-bg);
}

[data-theme="dark"] .projects-section,
[data-theme="vampire"] .projects-section {
    color: var(--text-primary);
}

/* Enhanced Vampire theme readability */
[data-theme="vampire"] .about-content p {
    color: #000000 !important;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
    opacity: 1;
}

[data-theme="vampire"] .languages-section h3,
[data-theme="vampire"] .tech-content h2 {
    color: #000000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

[data-theme="vampire"] .project-card h3 {
    color: #f8f8f2;
    font-weight: 600;
}

[data-theme="vampire"] .project-card p {
    color: #f8f8f2;
    opacity: 0.9;
}

[data-theme="vampire"] .lang-tile span,
[data-theme="vampire"] .tech-tile span {
    color: #f8f8f2;
    font-weight: 600;
}

[data-theme="vampire"] .hero-subtitle {
    color: #f8f8f2;
    opacity: 0.9;
}

[data-theme="vampire"] .intro-statement {
    color: #bd93f9;
    font-weight: 500;
}

/* Removed duplicate - using consistent white styling above */

/* Light Theme Specific Readability */
:root .about-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 400;
}

:root .project-card h3 {
    color: var(--text-primary);
    font-weight: 600;
}

:root .project-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

:root .lang-tile span,
:root .tech-tile span {
    color: var(--text-primary);
    font-weight: 600;
}

:root .section-title {
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark Theme Specific Readability */
[data-theme="dark"] .about-content p {
    color: #000000;
    line-height: 1.8;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .project-card h3 {
    color: var(--text-primary);
    font-weight: 600;
}

[data-theme="dark"] .project-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

[data-theme="dark"] .lang-tile span,
[data-theme="dark"] .tech-tile span {
    color: var(--text-primary);
    font-weight: 600;
}

[data-theme="dark"] .languages-section h3,
[data-theme="dark"] .tech-content h2 {
    color: #000000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary);
    opacity: 1;
}

[data-theme="dark"] .intro-statement {
    color: var(--text-accent);
    font-weight: 500;
}

/* Animation Visibility Improvements */
/* Floating shapes visibility */
:root .floating-shapes .shape {
    opacity: 0.8;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px var(--shadow-light);
}

[data-theme="dark"] .floating-shapes .shape {
    opacity: 0.6;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(88, 166, 255, 0.2);
}

/* Tile animation enhancements */
:root .lang-tile,
:root .tech-tile {
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-light);
}

:root .lang-tile:hover,
:root .tech-tile:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

/* Tech logo visibility improvements */
:root .tech-logo svg,
:root .lang-icon svg {
    filter: drop-shadow(0 1px 3px var(--shadow-light));
}

[data-theme="dark"] .tech-logo svg,
[data-theme="dark"] .lang-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Navigation improvements */
:root .nav-link {
    color: var(--text-primary);
    font-weight: 500;
}

:root .nav-link:hover {
    color: var(--accent-color);
}

[data-theme="dark"] .nav-link {
    color: var(--text-primary);
    font-weight: 500;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--accent-color);
}

/* Theme selector visibility */
:root .theme-dropdown {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

:root .theme-option {
    color: #2c3e50;
    font-weight: 500;
}

:root .theme-option:hover {
    background: #f8f9fa;
    color: #1a1a1a;
    font-weight: 600;
}

/* Project card animations */
:root .project-card {
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-light);
}

:root .project-card:hover {
    box-shadow: 0 12px 30px var(--shadow-medium);
    border-color: var(--accent-color);
}

/* Matrix animation visibility in all themes */
:root .binary-stream {
    color: rgba(0, 255, 65, 0.6);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
    opacity: 0.8;
}

[data-theme="light"] .binary-stream {
    color: rgba(0, 200, 50, 0.7);
    text-shadow: 0 0 10px rgba(0, 200, 50, 0.9);
    opacity: 0.9;
}

[data-theme="dark"] .binary-stream {
    color: rgba(0, 255, 65, 0.9);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}

[data-theme="vampire"] .binary-stream {
    color: rgba(80, 250, 123, 0.9);
    text-shadow: 0 0 8px rgba(80, 250, 123, 0.6);
}

/* Crypto token animation visibility */
:root .crypto-coin {
    opacity: 0.9;
    filter: drop-shadow(0 2px 8px var(--shadow-light));
}

[data-theme="dark"] .crypto-coin {
    opacity: 1;
    filter: drop-shadow(0 3px 10px rgba(88, 166, 255, 0.3));
}

[data-theme="vampire"] .crypto-coin {
    opacity: 1;
    filter: drop-shadow(0 3px 10px rgba(255, 121, 198, 0.4));
}

/* Pokemon sprite visibility */
:root .pokemon-sprite {
    opacity: 0.85;
    filter: drop-shadow(0 1px 3px var(--shadow-light));
}

[data-theme="dark"] .pokemon-sprite {
    opacity: 0.9;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

[data-theme="vampire"] .pokemon-sprite {
    opacity: 0.9;
    filter: drop-shadow(0 2px 5px rgba(40, 42, 54, 0.6));
}

/* Glitch text visibility */
:root .glitch-text {
    color: var(--text-primary);
    text-shadow: 2px 2px 4px var(--shadow-medium);
}

[data-theme="dark"] .glitch-text {
    color: var(--text-primary);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Pulse dot visibility */
:root .pulse-dot {
    filter: drop-shadow(0 0 10px var(--accent-color));
}

[data-theme="dark"] .pulse-dot {
    filter: drop-shadow(0 0 15px var(--accent-color));
}

[data-theme="vampire"] .pulse-dot {
    filter: drop-shadow(0 0 15px var(--accent-color));
}

/* Footer visibility */
:root .footer {
    background: var(--section-bg);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer {
    background: var(--section-bg);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

/* Tech stack tag visibility improvements */
:root .tech-tag {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .tech-tag {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card overlay visibility */
:root .card-overlay {
    background: rgba(255, 255, 255, 0.95);
}

:root .view-project {
    color: var(--accent-color);
    font-weight: 600;
}

[data-theme="dark"] .card-overlay {
    background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .view-project {
    color: var(--accent-color);
    font-weight: 600;
}

/* Coming soon badge */
:root .coming-soon-badge {
    background: var(--accent-color);
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .coming-soon-badge {
    background: var(--accent-color);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Comprehensive Readability Improvements */
/* Light Theme Typography */
:root h1, :root h2, :root h3, :root h4, :root h5, :root h6 {
    color: var(--text-primary);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

:root p, :root span, :root div {
    color: var(--text-secondary);
    font-weight: 400;
}

:root .hero-content h1 {
    color: var(--text-primary);
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

:root .hero-subtitle {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.2rem;
}

:root .intro-statement {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
}

/* Dark Theme Typography */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-primary);
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div {
    color: var(--text-secondary);
    font-weight: 400;
}

[data-theme="dark"] .hero-content h1 {
    color: var(--text-primary);
    font-weight: 800;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.2rem;
}

[data-theme="dark"] .intro-statement {
    color: var(--text-accent);
    font-weight: 600;
    font-size: 1rem;
}

/* Vampire Theme Typography */
[data-theme="vampire"] h1, [data-theme="vampire"] h2, [data-theme="vampire"] h3, 
[data-theme="vampire"] h4, [data-theme="vampire"] h5, [data-theme="vampire"] h6 {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

[data-theme="vampire"] p, [data-theme="vampire"] span, [data-theme="vampire"] div {
    color: #f8f8f2;
    font-weight: 400;
}

[data-theme="vampire"] .hero-content h1 {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

[data-theme="vampire"] .hero-subtitle {
    color: #f8f8f2;
    font-weight: 600;
    font-size: 1.2rem;
}

[data-theme="vampire"] .intro-statement {
    color: #bd93f9;
    font-weight: 600;
    font-size: 1rem;
}

/* Enhanced Project Card Readability */
:root .project-card h3 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

:root .project-card p {
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.6;
    font-size: 0.95rem;
}

[data-theme="dark"] .project-card h3 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .project-card p {
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.6;
    font-size: 0.95rem;
}

[data-theme="vampire"] .project-card h3 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.3rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

[data-theme="vampire"] .project-card p {
    color: #f8f8f2;
    font-weight: 400;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Technology Logo Colors Update */
.elasticsearch-tech .tech-logo svg { color: #00bfb3; }
.kibana-tech .tech-logo svg { color: #e8478b; }
.docker-tech .tech-logo svg { color: #2496ED; }
.kubernetes-tech .tech-logo svg { color: #326CE5; }

/* PicNest Cloud floating animation */
.cloud-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;  
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(135, 206, 250, 0.1), rgba(173, 216, 230, 0.05));
}

.floating-cloud {
    position: absolute;
    font-size: 24px;
    opacity: 0.4;
    animation: cloudFloat 8s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(135, 206, 250, 0.3));
}

.cloud-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.cloud-2 {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 10s;
}

.cloud-3 {
    top: 30%;
    right: 40%;
    animation-delay: 4s;
    animation-duration: 14s;
    font-size: 18px;
}

.cloud-4 {
    bottom: 20%;
    left: 30%;
    animation-delay: 6s;
    animation-duration: 9s;
    font-size: 20px;
}

.picnest-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    opacity: 0.7;
    animation: logoFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.picnest-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes cloudFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-10px) translateX(5px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-5px) translateX(-8px);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-15px) translateX(3px);
        opacity: 0.5;
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }
}

.project-card .picnest-tagline {
    color: #90EE90 !important;
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
    margin: 0.5rem 0 1rem 0;
    letter-spacing: 0.5px;
}

/* Cinema4D Page Styles */
.cinema4d-hero {
    text-align: center;
    padding: 4rem 0 2rem;
    background: linear-gradient(135deg, 
        var(--bg-gradient-start) 0%, 
        var(--bg-gradient-end) 100%);
    min-height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 20px 0;
    box-shadow: var(--shadow-lg);
}

.cinema4d-header {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.cinema4d-logo {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.c4d-logo-img {
    width: 180px;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.cinema4d-header h1 {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.1;
    letter-spacing: 2px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffa726);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite;
}

.cinema4d-description {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 1rem;
    opacity: 0.9;
}

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

.cinema4d-content {
    padding: 2rem 0;
    background: var(--section-bg);
}

.art-gallery {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

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

.art-piece {
    position: relative;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    aspect-ratio: 4/3;
}

.art-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

.art-piece:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-heavy);
}

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

.art-piece:hover .art-image {
    transform: scale(1.02);
}

.art-overlay {
    display: none;
}

.art-overlay h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.art-overlay p {
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Active nav link style */
.nav-link.active {
    color: var(--accent-color);
    font-weight: 600;
}

.nav-link.active::after {
    width: 100%;
    background: var(--accent-color);
}

/* Mobile responsiveness for Cinema4D page */
@media (max-width: 768px) {
    .cinema4d-hero {
        padding: 2.5rem 0 1.5rem;
        min-height: 20vh;
        margin: 10px;
    }
    
    .cinema4d-header h1 {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }
    
    .c4d-logo-img {
        width: 120px;
    }
    
    .cinema4d-description {
        font-size: 0.9rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .art-piece {
        aspect-ratio: 3/2;
    }
    
    .art-overlay {
        position: static;
        transform: none;
        background: var(--card-bg);
        color: var(--text-primary);
        padding: 1rem;
        border-top: 1px solid var(--border-color);
    }
    
    .art-overlay h3 {
        color: var(--text-primary);
        text-shadow: none;
        font-size: 0.9rem;
    }
    
    .art-overlay p {
        color: var(--text-secondary);
        text-shadow: none;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .cinema4d-hero {
        padding: 2rem 0 1rem;
        margin: 5px;
    }
    
    .cinema4d-header h1 {
        font-size: 1.8rem;
        letter-spacing: 0.5px;
    }
    
    .c4d-logo-img {
        width: 80px;
    }
    
    .cinema4d-description {
        font-size: 1rem;
    }
    
    .gallery-grid {
        gap: 0.75rem;
        grid-template-columns: 1fr;
    }
    
    .art-piece {
        aspect-ratio: 4/3;
    }
    
    .art-overlay {
        padding: 0.75rem;
    }
    
    .art-overlay h3 {
        font-size: 0.85rem;
    }
    
    .art-overlay p {
        font-size: 0.7rem;
    }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        height: 90vh;
        padding: 2rem 0;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .intro-statement {
        font-size: 0.9rem;
    }
    
    /* Scale down floating shapes for tablets */
    .floating-shapes .shape {
        transform: scale(0.8);
        opacity: 0.6;
    }
        padding: 0 1rem;
    }
    
    /* Removed projects-grid override - keeping desktop 2-column layout */
    
    .project-card {
        height: 420px;
    }
    
    .languages-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1rem;
    }
    
    .tech-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1.5rem;
    }
    
    .lang-tile {
        padding: 1rem 0.5rem;
    }
    
    .tech-tile {
        padding: 1.5rem 0.5rem;
    }
    
    .tech-logo {
        width: 40px;
        height: 40px;
    }
    
    .lang-icon {
        width: 35px;
        height: 35px;
    }
    
    .about-content {
        padding: 2rem 1rem;
    }
    
    .about-content h2 {
        font-size: 1.8rem;
    }
    
    .about-content p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .tech-stack {
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    
    .tech-tag {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    
    .footer {
        padding: 1.5rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .project-card {
        margin: 0 5px;
        height: 380px;
    }
    
    .languages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .lang-tile, .tech-tile {
        padding: 0.8rem 0.3rem;
        font-size: 0.8rem;
    }
    
    .tech-logo, .lang-icon {
        width: 30px;
        height: 30px;
    }
    
    .about-content p {
        padding: 0;
    }
}

/* Contact Hero Section */
.contact-hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
}

/* Contact Section Styles */
.contact-section {
    padding: 80px 0;
    background: var(--section-bg);
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.contact-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--accent-color), #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-content > p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.contact-item {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: left;
    box-shadow: 0 8px 25px var(--shadow-light);
}

/* Removed ::before element that might interfere with clicks */

/* Removed hover effects that might interfere with links */

.contact-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color), #764ba2);
    border-radius: 15px;
    padding: 15px;
}

.contact-icon svg {
    width: 30px;
    height: 30px;
    color: white;
}

.contact-info h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.contact-info {
    position: relative;
    z-index: 5;
}

.contact-link {
    display: inline-block;
    color: var(--accent-color);
    text-decoration: underline;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
}

.contact-link:hover {
    background: var(--accent-color);
    color: white;
}

.contact-link:last-child {
    margin-bottom: 0;
}

.email-item .contact-icon {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}

.social-item:nth-child(2) .contact-icon {
    background: linear-gradient(135deg, #e1306c, #fd1d1d);
}

.social-item:nth-child(3) .contact-icon {
    background: linear-gradient(135deg, #3b5998, #8b9dc3);
}

.social-item:nth-child(4) .contact-icon {
    background: linear-gradient(135deg, #ff0050, #25f4ee);
}

/* Enhanced Creative Social Media Tiles */
.contact-item {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
}

.contact-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.contact-item:hover::before {
    animation: shimmer 1.5s ease-in-out infinite;
    opacity: 1;
}

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

.contact-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 40px var(--shadow-medium);
    border-color: var(--accent-color);
}

.contact-icon {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    z-index: 2;
}

.contact-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.contact-item:hover .contact-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.contact-item:hover .contact-icon::after {
    width: 100%;
    height: 100%;
}

/* Platform-specific creative enhancements */
.email-item {
    border-left: 4px solid #ff6b6b;
}

.email-item:hover {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05), rgba(238, 90, 36, 0.05));
}

.social-item:nth-child(2) {
    border-left: 4px solid #e1306c;
}

.social-item:nth-child(2):hover {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.05), rgba(253, 29, 29, 0.05));
}

.social-item:nth-child(2):hover .contact-icon {
    animation: pulse-instagram 2s ease-in-out infinite;
}

@keyframes pulse-instagram {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225, 48, 108, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(225, 48, 108, 0); }
}

.social-item:nth-child(3) {
    border-left: 4px solid #3b5998;
}

.social-item:nth-child(3):hover {
    background: linear-gradient(135deg, rgba(59, 89, 152, 0.05), rgba(139, 157, 195, 0.05));
}

.social-item:nth-child(3):hover .contact-icon {
    animation: bounce-facebook 1.5s ease-in-out infinite;
}

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

.social-item:nth-child(4) {
    border-left: 4px solid #ff0050;
}

.social-item:nth-child(4):hover {
    background: linear-gradient(135deg, rgba(255, 0, 80, 0.05), rgba(37, 244, 238, 0.05));
}

.social-item:nth-child(4):hover .contact-icon {
    animation: spin-tiktok 3s linear infinite;
}

@keyframes spin-tiktok {
    0% { transform: scale(1.1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(90deg); }
    50% { transform: scale(1.1) rotate(180deg); }
    75% { transform: scale(1.15) rotate(270deg); }
    100% { transform: scale(1.1) rotate(360deg); }
}

/* Floating particles effect for social items */
.social-item::after {
    content: '✨';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
    z-index: 3;
}

.social-item:hover::after {
    opacity: 1;
    transform: scale(1) rotate(180deg);
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.7; transform: scale(1.2) rotate(180deg); }
}

/* Gradient text effect for contact links */
.contact-link {
    background: linear-gradient(45deg, var(--accent-color), #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    position: relative;
    z-index: 4;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, var(--accent-color), #764ba2);
    transition: width 0.3s ease;
}

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

.contact-link:hover {
    transform: translateX(5px);
}

/* Crypto Dashboard Icons */
.crypto-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.crypto-coin-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.crypto-coin-img:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.crypto-icons:hover .crypto-coin-img:not(:hover) {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Contact Section Responsive Styles */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }
    
    .contact-content {
        padding: 0 20px;
    }
    
    .contact-content h2 {
        font-size: 2.5rem;
    }
    
    .contact-content > p {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }
    
    .contact-item {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 40px 0;
    }
    
    .contact-content h2 {
        font-size: 2rem;
    }
    
    .contact-content > p {
        font-size: 1rem;
    }
    
    .contact-item {
        padding: 1.5rem 1rem;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
        padding: 12px;
    }
    
    .contact-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .contact-info h3 {
        font-size: 1.2rem;
    }
    
    .contact-link {
        font-size: 0.9rem;
    }
}

/* Featured Video Section */
.featured-video {
    padding: 3rem 0;
    background: var(--section-bg);
    text-align: center;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.video-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
    background: linear-gradient(45deg, var(--accent-color), #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cinema4d-video {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--shadow-medium);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--card-bg);
    aspect-ratio: 16/9;
    object-fit: contain;
}

.cinema4d-video:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--shadow-heavy);
}

/* Mobile responsiveness for video */
@media (max-width: 768px) {
    .featured-video {
        padding: 2rem 0;
    }
    
    .video-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .cinema4d-video {
        max-width: 100%;
        border-radius: 8px;
        width: calc(100vw - 40px);
        max-width: calc(100% - 20px);
    }
}

@media (max-width: 480px) {
    .video-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .video-container {
        padding: 0 10px;
        overflow: hidden;
    }
    
    .cinema4d-video {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}