/* File: assets/css/portfolio-hero.css */
.hero-visual {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, #0A1929 0%, #1A2536 100%);
    overflow: hidden;
}

.portfolio-visual {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-visual {
        height: 400px;
    }
    
    .project-card {
        width: 80px !important;
        height: 110px !important;
        padding: 10px !important;
    }
    
    .project-icon {
        font-size: 18px !important;
    }
    
    .project-title {
        font-size: 9px !important;
    }
    
    .project-category {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }
    
    .tech-badge {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .hero-visual {
        background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
    }
}

/* Loading state */
.portfolio-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid rgba(46, 204, 113, 0.3);
    border-top-color: #2ECC71;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
    display: none;
}

.portfolio-visual.loading::before {
    display: block;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Smooth transitions */
.portfolio-visual * {
    will-change: transform, opacity;
}