/* Fix Logo Header Position */
#header h1 {
    line-height: 1;
    margin: 0;
}

#header h1 img {
    width: 60px;
    height: auto;
    vertical-align: middle;
}

/* Menu Hambúrguer Cores */
#menu {
    background: linear-gradient(135deg, #ff5f13, #191a33);
}

#menu ul li a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 95, 19, 0.3);
}

#menu ul li a:hover {
    background: rgba(255, 95, 19, 0.2);
    color: #ff5f13;
}

/* Header Background */
#header {
    background: linear-gradient(135deg, rgba(25, 26, 51, 0.9), rgba(255, 95, 19, 0.1));
    backdrop-filter: blur(10px);
}
/* Fonte Psicodélica para UNDERNIGHT */
#banner h2 {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    text-shadow: 
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 30px #00ff88;
    letter-spacing: 3px;
}
/* Footer Copyright */
#footer .footer-content {
    text-align: center;
    padding: 20px 0;
}

#footer .footer-content p {
    margin: 5px 0;
    color: #999;
    font-size: 14px;
}

#footer .footer-content a {
    color: #1e3a8a;
    text-decoration: none;
}

#footer .footer-content a:hover {
    color: #3b82f6;
}

/* Floating Player CTA */
.play-cta {
    display: block;
    font-size: 11px;
    color: #ff5f13;
    opacity: 0.8;
    margin-top: 2px;
    font-weight: 400;
    animation: pulse 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-cta:hover {
    opacity: 1;
    color: #00ffcc;
}

.play-cta.loading {
    color: #ffff00;
    animation: pulse 0.5s infinite;
}

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

/* Animações de Scroll */
.animate-element {
    opacity: 0;
    transform: translateY(50px) translateZ(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.animate-element.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Animações específicas por tipo */
.spotlight.animate-element {
    transform: translateY(50px) translateZ(0);
}

.spotlight:nth-child(even).animate-element {
    transform: translateY(50px) translateZ(0);
}

.spotlight.animate-in {
    transform: translateY(0) translateZ(0);
}

.features li.animate-element {
    transform: translateY(30px) scale(0.9);
}

.features li.animate-in {
    transform: translateY(0) scale(1);
}

/* Gradientes para seções específicas */
#three.wrapper.style3 {
    background: radial-gradient(circle at center, #1a0033 0%, #050505 100%);
}

#links.wrapper.links-section {
    background: radial-gradient(circle at center, #1a0033 0%, #050505 100%);
}

/* Letter spacing e glow para títulos */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 2px;
}

/* Glow de radiação para títulos das seções */
.major h2 {
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
}

.soundcloud-title, .links-title {
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

#cta h2 {
    text-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
}

/* Efeitos de hover para botões */
.button:hover {
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.6);
}

/* Efeito zoom nas imagens */

.spotlight .image {
    overflow: hidden;
    /* Provide a consistent card height so images don't shift when loading */
    height: 280px;
    min-height: 180px;
    max-height: 420px;
}

@media (min-width: 1280px) {
    .spotlight .image {
        height: 360px;
    }
}

@media (max-width: 980px) {
    .spotlight .image {
        /* On small screens the spotlight stacks, let image adapt but keep overflow hidden */
        height: 220px;
    }
}

/* On small screens cancel horizontal entrance transforms so stacked spotlights stay centered */
@media (max-width: 980px) {
    .spotlight.animate-element,
    .spotlight:nth-child(even).animate-element {
        transform: translateY(50px) translateZ(0) !important;
    }

    .spotlight.animate-in,
    .spotlight:nth-child(even).animate-in {
        transform: translateY(0) translateZ(0) !important;
    }

    /* Ensure image itself is centered inside the stacked card */
    .spotlight .image img {
        object-position: center center !important;
    }
}

.spotlight .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.spotlight .image img:hover {
    transform: scale(1.03);
}

/* Animação de levitação para ícones */
@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.icons.major .icon {
    animation: floating 4s ease-in-out infinite;
}

.icons.major .icon:nth-child(2) {
    animation-delay: 1.3s;
}

.icons.major .icon:nth-child(3) {
    animation-delay: 2.6s;
}

/* Mobile First - Responsividade */
@media (max-width: 768px) {
    .inner {
        padding: 0 20px;
    }
    
    .features li {
        margin: 0 10px 20px 10px;
    }
    
    #soundcloud iframe {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .links-grid {
        padding: 0 10px;
    }
    
    .spotlight .image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
}