/* BASE */

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#07140c;
    color:white;
    overflow-x:hidden;
}

/* PARALLAX FUNDO */

.parallax-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at 30% 20%, #1c5f3a, #07140c 70%);
    z-index:-2;
}

/* FOLHAS ANIMADAS */

.leaves-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.leaf{
    position:absolute;
    top:-100px;
    opacity:0.35;
    animation:fall linear infinite;
}

@keyframes fall{
    0%{
    transform:translateY(-100px) translateX(0) rotate(0deg);
    }

    50%{
    transform:translateY(50vh) translateX(40px) rotate(180deg);
    }

    100%{
    transform:translateY(110vh) translateX(-40px) rotate(360deg);
    }
}


/* HERO */

header{
    text-align:center;
    padding:120px 20px;
    position:relative;
}

.hero-box{
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,0.08);
    border-radius:20px;
    padding:50px 30px;
    max-width:700px;
    margin:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.hero h1{
    font-size:48px;
    margin-bottom:10px;
}

.hero p{
    font-size:20px;
    opacity:0.9;
    margin-bottom:30px;
}

/* logo fundo */

.hero-logo-bg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:700px;
    opacity:0.08;
    pointer-events:none;
    filter:blur(1px);
    z-index:0;
    animation:logoFloat 12s ease-in-out infinite;
}

@media (max-width:768px){
    .hero-logo-bg{
    width:300px;
    opacity:0.06;
    }
}

@keyframes logoFloat{
    0%{ transform:translate(-50%,-52%) scale(1); }
    50%{ transform:translate(-50%,-48%) scale(1.03); }
    100%{ transform:translate(-50%,-52%) scale(1); }
}

/* CONTADOR */

.countdown{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:40px;
    flex-wrap:wrap;
}

.count-box{
    backdrop-filter: blur(10px);
    background:rgba(255,255,255,0.08);
    padding:18px;
    border-radius:12px;
    min-width:80px;

}

.count-box span{
    display:block;
    font-size:32px;
    font-weight:bold;
}

/* FLYER */

.flyer{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:120px 20px;
}

.flyer-container{
    position:relative;
    width:100%;
    max-width:900px;
    margin:auto;
    transform:translateY(60px);
    opacity:0;
    transition:1s;
}

.flyer-container.show{
    transform:translateY(0);
    opacity:1;
}

.flyer-container img{
    width:100%;
    height:auto;
    border-radius:16px;
    box-shadow:
    0 40px 120px rgba(0,0,0,0.6),
    0 0 60px rgba(46,204,113,0.25);
    display: block;
}

/* .flyer-container:hover img{
    transform:scale(1.03);
    transition:0.4s;
    box-shadow:
    0 50px 140px rgba(0,0,0,0.7),
    0 0 80px rgba(46,204,113,0.35);
} */

/* AREA CLICAVEL */

.cta-area{
    position:absolute;
    bottom:8%;
    left:40%;
    transform:translateX(-50%);
    width:35%;
    height:12%;
    cursor:pointer;
}

/* FOOTER */

footer{
    text-align:center;
    padding:30px;
    opacity:0.6;
}

.scroll-indicator{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    opacity:0.9;
    transition:opacity 0.4s ease;
}

/* formato mouse */

.mouse{
    width:28px;
    height:45px;
    border:2px solid #2ecc71;
    border-radius:20px;
    display:flex;
    justify-content:center;
    padding-top:6px;
}

/* rodinha */

.wheel{
    width:4px;
    height:8px;
    background:#2ecc71;
    border-radius:4px;
    animation:scrollWheel 1.8s infinite;
}

/* animação */

@keyframes scrollWheel{
    0%{
    opacity:0;
    transform:translateY(0);
    }

    40%{
    opacity:1;
    }

    80%{
    opacity:0;
    transform:translateY(12px);
    }

    100%{
    opacity:0;
    }
}

.count-title{
font-size:28px;
font-weight:600;
margin-bottom:15px;
letter-spacing:2px;
color:#8cff9e;
}

.count-sub{
margin-top:15px;
font-size:14px;
opacity:0.8;
}