/* ==========================
   RESET
========================== */

:root {

    --bg: #090909;

    --paper: #efe8dc;

    --red: #b44b37;

    --gray: #8f8f8f;

    --line: #222;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

::selection{

    background:#8c2323;

    color:white;

}

body {

    background: var(--bg);

    color: var(--paper);

    font-family: "Averia Serif Libre", serif;

    overflow-x: hidden;

}

/* ==========================
   LINKS
========================== */

a {

    color: inherit;

    text-decoration: none;

}

/* ==========================
   IMAGENS
========================== */

img {

    display: block;

    width: 100%;

}

/* ==========================
NAVBAR
========================== */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 30px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 1000;

    background: rgba(0, 0, 0, .25);

    backdrop-filter: blur(12px);

}

.navbar ul {

    display: flex;

    gap: 40px;

    list-style: none;

}

.navbar a {

    letter-spacing: 2px;

    font-size: 13px;

    text-transform: uppercase;

}

.logo {

    display: flex;

    align-items: center;

}

.logo img {

    height: 45px;

    width: auto;

}

/* ==========================
HERO
========================== */

.hero {

    position: relative;

    height: 100vh;

    overflow: hidden;

}

.hero-background {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.05);

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(rgba(0, 0, 0, .25),
            rgba(0, 0, 0, .85));

}

.hero-content {

    .album-logo {

        width: 295%;

        max-width: 650px;

        margin: 25px 0 35px;

    }

    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 10vw;

    max-width: 620px;

}

.hero p {

    font-size: 20px;

    line-height: 1.8;

    max-width: 550px;

}

.eyebrow {

    color: #cb563e;

    letter-spacing: 4px;

    text-transform: uppercase;

}

.hero-buttons {

    display: flex;

    gap: 24px;

    margin-top: 40px;

}

.button {

    padding: 18px 34px;

    border: 1px solid var(--paper);

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: .35s;

}

.button:hover {

    background: var(--paper);

    color: var(--bg);

}

.button.secondary {

    border-color: transparent;

    color: var(--gray);

}

section {

    padding: 140px 120px;

}

.section-title {

    margin-bottom: 70px;

}

.section-title h2 {

    font-size: 52px;

}

.streaming {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}

.spotify,
.youtube {

    background: #151515;

    border: 1px solid #222;

    min-height: 420px;

    border-radius: 8px;

}

.tour-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 40px;

}

.show-card {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 50px;

    align-items: center;

}

.show-card img {

    width: 100%;

    border-radius: 4px;

}

.show-info h3 {

    font-size: 42px;

    margin-bottom: 15px;

}

.show-info p {

    margin-bottom: 8px;

}

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}

#about {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.about-text p {

    margin-top: 25px;

    line-height: 1.8;

    text-align: justify;

    hyphens: auto;

}

footer {

    padding: 70px;

    text-align: center;

    border-top: 1px solid #222;

}

h1,
h2,
h3 {

    font-family: "Averia Serif Libre", serif;

}

h2 {

    text-align: center;

}

/* ==========================
ANIMAÇÕES HERO
========================== */

@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(35px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

.fade-delay-1,
.fade-delay-2,
.fade-delay-3,
.fade-delay-4 {

    opacity: 0;

    animation: fadeUp 1s ease forwards;

}

.fade-delay-1 {

    animation-delay: .3s;

}

.fade-delay-2 {

    animation-delay: .8s;

}

.fade-delay-3 {

    animation-delay: 1.2s;

}

.fade-delay-4 {

    animation-delay: 1.6s;

}

#mobile-button {

    background: none;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}

#mobile-button img {

    width: 75px;

    height: auto;

    animation: breathe 4s ease-in-out infinite;

}

@keyframes breathe {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.08);

    }

    100% {

        transform: scale(1);

    }

}

.contact-links {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 48px;

    flex-wrap: wrap;

}

.contact-links a {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: var(--paper);

    transition: .3s;

}

.contact-links a:hover {

    color: var(--red);

    transform: translateY(-2px);

}

.contact-links i {

    font-size: 22px;

}

.contact-links svg {

    width: 22px;

    height: 22px;

}

.copyright {

    margin-bottom: 32px;

}