/* Header Modern CSS */

/* Header styles */
.header {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Space station animated icons */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* Hosting Server Icon */
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        /* Web Browser Icon */
        radial-gradient(circle at 60% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        /* Software Gear Icon */
        radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.09) 0%, transparent 50%);
    background-size: 800px 100px;
    background-repeat: no-repeat;
    animation: space-drift 40s linear infinite, stars-twinkle 3s ease-in-out infinite alternate;
}

.header::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 15%;
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.3;
    animation: icon-rotate 15s linear infinite, float-up-down 6s ease-in-out infinite;
}

.header .space-icon-web {
    position: absolute;
    top: 15px;
    right: 20%;
    width: 35px;
    height: 35px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.25;
    animation: icon-bounce 18s ease-in-out infinite, drift-right 12s ease-in-out infinite;
}

.header .space-icon-software {
    position: absolute;
    bottom: 10px;
    left: 25%;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.2;
    animation: icon-spin 25s linear infinite, orbit 20s linear infinite;
}

.header .space-icon-satellite {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 25px;
    height: 25px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.15;
    animation: satellite-orbit 30s linear infinite;
}

.header .space-icon-code {
    position: absolute;
    bottom: 20px;
    right: 30%;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.18;
    animation: code-pulse 8s ease-in-out infinite, drift-left 14s ease-in-out infinite;
}

.header .space-icon-hosting,
.header .space-icon-web,
.header .space-icon-software,
.header .space-icon-satellite,
.header .space-icon-code,
.header .shooting-star {
    pointer-events: none;
}

/* Shooting Stars */
.header .shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: shooting-star 8s linear infinite;
}

.header .shooting-star:nth-child(1) {
    top: 20%;
    left: -5px;
    animation-delay: 0s;
}

.header .shooting-star:nth-child(2) {
    top: 40%;
    left: -5px;
    animation-delay: 2s;
}

.header .shooting-star:nth-child(3) {
    top: 60%;
    left: -5px;
    animation-delay: 4s;
}

.header .shooting-star:nth-child(4) {
    top: 80%;
    left: -5px;
    animation-delay: 6s;
}

/* Animations for space station effect */
@keyframes space-drift {
    from { transform: translateX(0px); }
    to { transform: translateX(-800px); }
}

@keyframes stars-twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}

@keyframes shooting-star {
    0% {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(800px) translateY(100px);
        opacity: 0;
    }
}

@keyframes float-up-down {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes drift-right {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(20px); }
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes satellite-orbit {
    from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

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

@keyframes drift-left {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(-25px); }
}

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

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

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

@keyframes icon-spin {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.1); }
}