@font-face {
    font-family: 'BeoSans';
    src: url('assets/fonts/BeoSans_R13_Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.artist-card, .ticket-card, .onde-ficar-card, .como-chegar-card, .band-image, .band-video {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    opacity: 0;
}

.artist-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(91, 108, 129, 0.2);
}

.artist-card img,
.band-image img,
.onde-ficar-card img {
    border: 4px solid;
    border-image: linear-gradient(45deg, rgba(255, 78, 31, 0.6), rgba(63, 105, 193, 0.6));
    border-image-slice: 1;
    transition: opacity 0.3s ease-out;
}

.artist-card:hover img {
    opacity: 0.8;
}

.ticket-card:hover {
    box-shadow: 0 10px 15px rgba(91, 108, 129, 0.2);
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

body {
    font-family: 'BeoSans', Arial, sans-serif;
}



header {
    transition: transform 0.4s ease-in-out;
    transform: translateY(0);
}

.hide-header {
    transform: translateY(-100%);
}

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

/* Mobile navigation styles */
@media (max-width: 767px) {
    #nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 1rem;
        background-color: rgba(0, 0, 0, 0.85);
        padding: 1rem;
        border-radius: 0.5rem;
        width: fit-content;
        text-align: right;
    }

    #nav-menu.show {
        display: flex;
        align-items: flex-end;
    }

    #nav-menu li {
        margin: 0.3rem 0;
    }
}