/* =====================================================

   DAVID & MÍRA 40 + 40

   Main stylesheet

   ===================================================== */





/* =====================================================

   CSS VARIABLES

   ===================================================== */



:root {



    --color-bg: #08111F;

    --color-bg-secondary: #0F172A;

    --color-bg-card: rgba(255, 255, 255, 0.06);



    --color-text: #F8FAFC;

    --color-text-muted: #CBD5E1;



    --color-gold: #D4AF37;

    --color-gold-light: #E7C55B;



    --color-border: rgba(255, 255, 255, 0.12);



    --shadow-soft:

        0 20px 50px rgba(0, 0, 0, 0.25);



    --shadow-card:

        0 15px 40px rgba(0, 0, 0, 0.2);





    --font-heading: "Outfit", sans-serif;

    --font-body: "Manrope", sans-serif;





    --container-width: 1200px;

    --container-narrow: 800px;





    --transition:

        300ms ease;



}







/* =====================================================

   RESET

   ===================================================== */





*,

*::before,

*::after {



    box-sizing: border-box;



}





html {



    scroll-behavior: smooth;



    font-size: 16px;



}





body {



    margin: 0;



    min-height: 100vh;



    background:

        var(--color-bg);



    color:

        var(--color-text);



    font-family:

        var(--font-body);



    line-height:

        1.7;



}





img {



    max-width: 100%;



    display: block;



}





a {



    color: inherit;



    text-decoration: none;



}





button {



    font-family: inherit;



}







/* =====================================================

   GLOBAL LAYOUT

   ===================================================== */





.page-background {



    position: fixed;



    inset: 0;



    z-index: -2;



    background:

        radial-gradient(

            circle at top right,

            rgba(212, 175, 55, 0.08),

            transparent 40%

        ),

        linear-gradient(

            180deg,

            #08111F,

            #0F172A

        );



}







.container {



    width: min(

        calc(100% - 40px),

        var(--container-width)

    );



    margin-inline: auto;



}







.container--narrow {



    max-width:

        var(--container-narrow);



}







.container--wide {



    width:

        min(

            calc(100% - 40px),

            1400px

        );



}







.section {



    position: relative;



    padding:

        120px 0;



}







.section--accent {



    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(255,255,255,0.02),

            transparent

        );



}







.section-heading {



    text-align:

        center;



    margin-bottom:

        70px;



}







.section-heading__subtitle {



    display:

        block;



    margin-bottom:

        15px;



    color:

        var(--color-gold);



    font-size:

        0.8rem;



    letter-spacing:

        0.25em;



    font-weight:

        700;



}







.section-heading h2 {



    margin:

        0;



    font-family:

        var(--font-heading);



    font-size:

        clamp(2.2rem, 5vw, 3.8rem);



    line-height:

        1.1;



    font-weight:

        700;



}







.section-heading h2::after {



    content:

        "";



    display:

        block;



    width:

        60px;



    height:

        2px;



    margin:

        25px auto 0;



    background:

        var(--color-gold);



}







/* =====================================================

   HEADER / NAVIGATION

   ===================================================== */





.header {



    position:

        fixed;



    top:

        0;



    left:

        0;



    width:

        100%;



    z-index:

        100;



    padding:

        25px 0;



    transition:

        var(--transition);



}







.header .container {



    display:

        flex;



    align-items:

        center;



    justify-content:

        space-between;



}







.logo {



    font-family:

        var(--font-heading);



    font-size:

        1.4rem;



    font-weight:

        700;



    letter-spacing:

        0.08em;



}







.navigation ul {



    display:

        flex;



    align-items:

        center;



    gap:

        35px;



    margin:

        0;



    padding:

        0;



    list-style:

        none;



}







.navigation a {



    position:

        relative;



    color:

        var(--color-text-muted);



    font-size:

        0.95rem;



    transition:

        var(--transition);



}







.navigation a:hover {



    color:

        var(--color-text);



}







.navigation a::after {



    content:

        "";



    position:

        absolute;



    left:

        0;



    bottom:

        -8px;



    width:

        0;



    height:

        2px;



    background:

        var(--color-gold);



    transition:

        var(--transition);



}







.navigation a:hover::after {



    width:

        100%;



}







/* =====================================================

   MOBILE MENU BUTTON

   ===================================================== */





.nav-toggle {



    display:

        none;



    background:

        none;



    border:

        0;



    cursor:

        pointer;



}





.nav-toggle span {



    display:

        block;



    width:

        28px;



    height:

        2px;



    margin:

        6px;



    background:

        var(--color-text);



}



/* =====================================================

   HERO SECTION

   ===================================================== */





.hero {



    position:

        relative;



    min-height:

        100vh;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    overflow:

        hidden;



}







.hero__image {



    position:

        absolute;



    inset:

        0;



    z-index:

        -2;



}







.hero__image img {



    width:

        100%;



    height:

        100%;



    object-fit:

        cover;



    animation:

        heroZoom 20s infinite alternate ease-in-out;



}







@keyframes heroZoom {



    from {



        transform:

            scale(1);



    }



    to {



        transform:

            scale(1.08);



    }



}







.hero__overlay {



    position:

        absolute;



    inset:

        0;



    z-index:

        -1;



    background:



        linear-gradient(

            180deg,

            rgba(8,17,31,0.75),

            rgba(8,17,31,0.55),

            rgba(8,17,31,0.95)

        ),



        radial-gradient(

            circle at center,

            rgba(212,175,55,0.18),

            transparent 45%

        );



}







.hero__content {



    width:

        min(

            100% - 40px,

            900px

        );



    text-align:

        center;



    padding-top:

        60px;



}







.hero__eyebrow {



    color:

        var(--color-gold);



    text-transform:

        uppercase;



    letter-spacing:

        0.25em;



    font-size:

        0.85rem;



    font-weight:

        700;



    margin-bottom:

        35px;



    animation:

        fadeUp 1s ease forwards;



}







.hero__title {



    margin:

        0;



    font-family:

        var(--font-heading);



    font-size:

        clamp(3rem, 8vw, 6.5rem);



    line-height:

        0.95;



    font-weight:

        700;



    letter-spacing:

        -0.03em;



    animation:

        fadeUp 1s ease 0.15s forwards;



    opacity:

        0;



}







.hero__lead {



    max-width:

        600px;



    margin:

        40px auto 0;



    color:

        var(--color-text-muted);



    font-size:

        clamp(1rem, 2vw, 1.3rem);



    animation:

        fadeUp 1s ease 0.3s forwards;



    opacity:

        0;



}







.hero__buttons {



    margin-top:

        50px;



    animation:

        fadeUp 1s ease 0.45s forwards;



    opacity:

        0;



}







.button {



    display:

        inline-flex;



    align-items:

        center;



    justify-content:

        center;



    min-height:

        55px;



    padding:

        0 35px;



    border-radius:

        100px;



    font-weight:

        600;



    transition:

        var(--transition);



}







.button--primary {



    background:

        var(--color-gold);



    color:

        #111827;



}







.button--primary:hover {



    background:

        var(--color-gold-light);



    transform:

        translateY(-3px);



    box-shadow:

        0 15px 30px rgba(212,175,55,0.25);



}







.scroll-indicator {



    position:

        absolute;



    bottom:

        35px;



    left:

        50%;



    transform:

        translateX(-50%);



    width:

        30px;



    height:

        50px;



    border:

        2px solid rgba(255,255,255,0.5);



    border-radius:

        20px;



}







.scroll-indicator span {



    position:

        absolute;



    top:

        10px;



    left:

        50%;



    width:

        6px;



    height:

        6px;



    margin-left:

        -3px;



    background:

        var(--color-gold);



    border-radius:

        50%;



    animation:

        scrollMove 2s infinite;



}







@keyframes scrollMove {



    0% {



        opacity:

            0;



        transform:

            translateY(0);



    }





    40% {



        opacity:

            1;



    }





    100% {



        opacity:

            0;



        transform:

            translateY(20px);



    }



}







@keyframes fadeUp {



    from {



        opacity:

            0;



        transform:

            translateY(30px);



    }





    to {



        opacity:

            1;



        transform:

            translateY(0);



    }



}







/* =====================================================

   INTRO SECTION

   ===================================================== */





.section--intro {



    background:

        linear-gradient(

            180deg,

            var(--color-bg),

            var(--color-bg-secondary)

        );



}







.intro-text {



    text-align:

        center;



    color:

        var(--color-text-muted);



    font-size:

        1.15rem;



    max-width:

        750px;



    margin:

        0 auto 25px;



}







.quote {



    margin:

        60px auto 0;



    padding:

        35px;



    max-width:

        750px;



    border-left:

        2px solid var(--color-gold);



    background:

        rgba(255,255,255,0.03);



    color:

        var(--color-text);



    font-style:

        italic;



    font-size:

        1.1rem;



}







/* =====================================================

   INFORMATION CARDS

   ===================================================== */





.info-grid {



    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap:

        25px;



}







.info-card {



    padding:

        35px 25px;



    text-align:

        center;



    background:

        var(--color-bg-card);



    border:

        1px solid var(--color-border);



    border-radius:

        20px;



    backdrop-filter:

        blur(15px);



    box-shadow:

        var(--shadow-card);



    transition:

        var(--transition);



}







.info-card:hover {



    transform:

        translateY(-8px);



    border-color:

        rgba(212,175,55,0.4);



}







.info-card__icon {



    font-size:

        2rem;



    margin-bottom:

        20px;



}







.info-card h3 {



    margin:

        0 0 15px;



    font-family:

        var(--font-heading);



    font-size:

        1.25rem;



}







.info-card p {



    margin:

        0;



    color:

        var(--color-text-muted);



}



/* =====================================================

   EXPERIENCE / WHAT TO EXPECT

   ===================================================== */





.experience-grid {



    display:

        grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap:

        30px;



}







.experience-card {



    position:

        relative;



    padding:

        45px 40px;



    background:

        rgba(255,255,255,0.04);



    border:

        1px solid var(--color-border);



    border-radius:

        25px;



    overflow:

        hidden;



    transition:

        var(--transition);



}







.experience-card::before {



    content:

        "";



    position:

        absolute;



    top:

        0;



    left:

        0;



    width:

        100%;



    height:

        3px;



    background:

        linear-gradient(

            90deg,

            transparent,

            var(--color-gold),

            transparent

        );



    opacity:

        0;



    transition:

        var(--transition);



}







.experience-card:hover {



    transform:

        translateY(-8px);



    background:

        rgba(255,255,255,0.07);



}







.experience-card:hover::before {



    opacity:

        1;



}







.experience-card__number {



    font-family:

        var(--font-heading);



    font-size:

        3rem;



    font-weight:

        700;



    color:

        rgba(212,175,55,0.25);



    line-height:

        1;



    margin-bottom:

        25px;



}







.experience-card h3 {



    margin:

        0 0 20px;



    font-family:

        var(--font-heading);



    font-size:

        1.6rem;



}







.experience-card p {



    margin:

        0;



    color:

        var(--color-text-muted);



}







/* =====================================================

   MUSIC SECTION

   ===================================================== */





.section--music {



    background:

        linear-gradient(

            180deg,

            var(--color-bg-secondary),

            var(--color-bg)

        );



}







.music-layout {



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        70px;



    align-items:

        center;



}







.music-layout__content h2 {



    margin:

        20px 0 30px;



    font-family:

        var(--font-heading);



    font-size:

        clamp(2.2rem, 4vw, 3.5rem);



    line-height:

        1.1;



}







.music-layout__content p {



    color:

        var(--color-text-muted);



    font-size:

        1.1rem;



}







.music-highlight {



    margin-top:

        35px;



    padding:

        25px;



    border-left:

        2px solid var(--color-gold);



    background:

        rgba(212,175,55,0.06);



    color:

        var(--color-text) !important;



}







.music-layout__image {



    position:

        relative;



}







.music-layout__image::after {



    content:

        "";



    position:

        absolute;



    inset:

        20px;



    border:

        1px solid var(--color-gold);



    border-radius:

        25px;



    transform:

        rotate(3deg);



    z-index:

        -1;



}







.music-layout__image img {



    width:

        100%;



    aspect-ratio:

        4 / 5;



    object-fit:

        cover;



    border-radius:

        25px;



    box-shadow:

        var(--shadow-soft);



}







/* =====================================================

   COUNTDOWN

   ===================================================== */





.countdown {



    text-align:

        center;



}







.countdown h2 {



    margin:

        20px 0 50px;



    font-family:

        var(--font-heading);



    font-size:

        clamp(2rem, 4vw, 3rem);



}







.countdown-grid {



    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap:

        25px;



}







.countdown-item {



    padding:

        35px 20px;



    background:

        rgba(255,255,255,0.05);



    border:

        1px solid var(--color-border);



    border-radius:

        20px;



}







.countdown-item span {



    display:

        block;



    font-family:

        var(--font-heading);



    font-size:

        clamp(2.5rem, 5vw, 4rem);



    font-weight:

        700;



    color:

        var(--color-gold);



    line-height:

        1;



}







.countdown-item small {



    display:

        block;



    margin-top:

        15px;



    color:

        var(--color-text-muted);



    text-transform:

        uppercase;



    letter-spacing:

        0.15em;



    font-size:

        0.75rem;



}







/* =====================================================

   PRACTICAL INFORMATION

   ===================================================== */





.practical-grid {



    display:

        grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap:

        30px;



}







.practical-grid article {



    padding:

        35px;



    background:

        rgba(255,255,255,0.04);



    border:

        1px solid var(--color-border);



    border-radius:

        20px;



}







.practical-grid h3 {



    margin:

        0 0 15px;



    font-family:

        var(--font-heading);



    font-size:

        1.4rem;



}







.practical-grid p {



    margin:

        0;



    color:

        var(--color-text-muted);



}



/* =====================================================

   LOCATION SECTION

   ===================================================== */





.section--location {



    background:

        linear-gradient(

            180deg,

            var(--color-bg),

            var(--color-bg-secondary)

        );



}







.location-card {



    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        0;



    overflow:

        hidden;



    border-radius:

        30px;



    border:

        1px solid var(--color-border);



    background:

        rgba(255,255,255,0.04);



    box-shadow:

        var(--shadow-card);



}







.location-card__content {



    padding:

        60px;



}







.location-card__content h3 {



    margin:

        0 0 25px;



    font-family:

        var(--font-heading);



    font-size:

        2rem;



}







.location-card__content p {



    color:

        var(--color-text-muted);



    font-size:

        1.1rem;



    margin-bottom:

        25px;



}







.button--secondary {



    border:

        1px solid var(--color-gold);



    color:

        var(--color-gold);



}







.button--secondary:hover {



    background:

        var(--color-gold);



    color:

        #111827;



    transform:

        translateY(-3px);



}







.location-card__map {



    min-height:

        400px;



    background:

        linear-gradient(

            135deg,

            #111827,

            #172554

        );



}







.map-placeholder {



    height:

        100%;



    display:

        flex;



    flex-direction:

        column;



    align-items:

        center;



    justify-content:

        center;



    text-align:

        center;



}







.map-placeholder span {



    font-size:

        3rem;



}







.map-placeholder p {



    margin:

        15px 0 0;



    color:

        var(--color-text);



    font-family:

        var(--font-heading);



    font-size:

        1.3rem;



}







/* =====================================================

   FINAL MESSAGE

   ===================================================== */





.section--final {



    padding:

        150px 0;



    text-align:

        center;



}







.final-message {



    position:

        relative;



}







.music-symbol {



    color:

        var(--color-gold);



    font-size:

        4rem;



    line-height:

        1;



    margin-bottom:

        30px;



}







.final-message h2 {



    margin:

        0 0 30px;



    font-family:

        var(--font-heading);



    font-size:

        clamp(2.5rem, 6vw, 5rem);



    line-height:

        1;



}







.final-message p {



    max-width:

        650px;



    margin:

        0 auto 50px;



    color:

        var(--color-text-muted);



    font-size:

        1.15rem;



}







.final-names {



    font-family:

        var(--font-heading);



    font-size:

        2rem;



    font-weight:

        700;



}







.final-names span {



    display:

        block;



    margin-top:

        10px;



    color:

        var(--color-gold);



    font-size:

        1rem;



    letter-spacing:

        0.3em;



}







/* =====================================================

   FOOTER

   ===================================================== */





.footer {



    padding:

        50px 0;



    background:

        #050B14;



    border-top:

        1px solid var(--color-border);



}







.footer__content {



    display:

        flex;



    flex-direction:

        column;



    align-items:

        center;



    text-align:

        center;



    gap:

        15px;



}







.footer__logo {



    font-family:

        var(--font-heading);



    font-size:

        2rem;



    font-weight:

        700;



}







.footer p {



    margin:

        0;



    color:

        var(--color-text-muted);



}







.footer__music {



    font-size:

        1.8rem;



    color:

        var(--color-gold);



}







/* =====================================================

   RESPONSIVE DESIGN

   ===================================================== */





@media (max-width: 1000px) {





    .info-grid {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .music-layout {



        grid-template-columns:

            1fr;



        gap:

            50px;



    }





    .music-layout__image {



        max-width:

            500px;



        margin:

            0 auto;



    }





    .practical-grid {



        grid-template-columns:

            1fr;



    }





    .location-card {



        grid-template-columns:

            1fr;



    }





    .location-card__content {



        padding:

            45px;



    }





}







@media (max-width: 768px) {





    .section {



        padding:

            80px 0;



    }





    .container {



        width:

            calc(100% - 30px);



    }





    .navigation {



        position:

            fixed;



        top:

            0;



        right:

            -100%;



        width:

            280px;



        height:

            100vh;



        background:

            #08111F;



        padding:

            100px 40px;



        transition:

            var(--transition);



    }





    .navigation.active {



        right:

            0;



    }





    .navigation ul {



        flex-direction:

            column;



        align-items:

            flex-start;



        gap:

            25px;



    }





    .nav-toggle {



        display:

            block;



    }





    .hero__title {



        font-size:

            clamp(2.8rem, 12vw, 4rem);



    }





    .hero__lead {



        margin-top:

            30px;



    }





    .info-grid {



        grid-template-columns:

            1fr;



    }





    .experience-grid {



        grid-template-columns:

            1fr;



    }





    .countdown-grid {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .location-card__content {



        padding:

            35px 25px;



    }





}







@media (max-width: 480px) {





    .hero__eyebrow {



        font-size:

            0.7rem;



        letter-spacing:

            0.15em;



    }





    .hero__buttons .button {



        width:

            100%;



    }





    .countdown-grid {



        gap:

            15px;



    }





    .countdown-item {



        padding:

            25px 10px;



    }





    .countdown-item span {



        font-size:

            2rem;



    }





    .quote {



        padding:

            25px;



    }





}



/* =====================================================

   SCROLL REVEAL ANIMATION

   ===================================================== */





.reveal {



    opacity:

        0;



    transform:

        translateY(40px);



    transition:

        opacity 700ms ease,

        transform 700ms ease;



}







.reveal.visible {



    opacity:

        1;



    transform:

        translateY(0);



}