/* Estilos customizados complementando o Tailwind CSS */

/* Animação fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Mockup Estilo Glass para vídeos verticais */
.glass-mockup {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-mockup video {
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Xilogravura Pattern com CSS Puro (Estilo Madeira Riscada/Linhas) */
.pattern-xilo {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 2px,
        transparent 2px,
        transparent 8px
    ),
    repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0px,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 10px
    );
    background-size: 15px 15px;
}

/* Glow Shadows Customizadas */
.glow-shadow {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Player Audio Card Container */
.audio-player-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audio-player-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Animações Disco de Vinil */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: spin 3s linear infinite;
}

/* Quando o áudio toca, ajustamos o braço do toca-discos */
.playing-arm {
    transform: rotate(26deg) !important;
}

/* Removendo scrollbar onde não é estéticamente desejado */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0f1d;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}