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

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

html{
    scroll-behavior:smooth;
}

html,
body{
    overflow-x:hidden;
}

body{
    scrollbar-width:none;
}

body::-webkit-scrollbar{
    display:none;
}

body{
    background:
    linear-gradient(
    135deg,
    #F6F4EF 0%,
    #EEF4F1 35%,
    #F7F1EB 70%,
    #FFFFFF 100%
    );

    color:#2B2B2B;

    font-family:'Inter', sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    position:relative;
}

/* =========================
BACKGROUND EFFECTS
========================= */

.bg-blur{
    position:fixed;

    width:600px;
    height:600px;

    background:#8FAF9B;

    filter:blur(180px);

    opacity:0.15;

    border-radius:50%;

    top:-200px;
    right:-150px;

    z-index:-1;
}

.particles{
    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:0.3;

    background-image:
    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:40px 40px;
}

/* =========================
HEADER
========================= */

.main-header{
    width:100%;

    padding:30px 60px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:relative;

    z-index:100;
}

.logo img{
    width:  100px;
    height: 100px;

    object-fit:cover;

    border-radius:50%;

    box-shadow:
    0 10px 30px rgba(143,175,155,0.20);

    transition:0.4s;
}

.logo img:hover{
    transform:scale(1.05);
}

.navbar{
    display:flex;
    align-items:center;
    gap:18px;

    padding:14px 25px;

    border-radius:60px;

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.3);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);
}

.navbar a{
    text-decoration:none;

    color:#2B2B2B;

    font-size:15px;
    font-weight:500;

    padding:12px 22px;

    border-radius:30px;

    transition:0.4s;
}

.navbar a:hover{
    background:#8FAF9B;

    color:white;

    transform:translateY(-2px);
}

/* =========================
MAIN
========================= */

main{
    width:100%;

    padding:40px 60px;
}

/* =========================
FOOTER
========================= */

.main-footer{
    width:100%;

    margin-top:100px;

    padding:30px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    background:rgba(255,255,255,0.25);

    backdrop-filter:blur(12px);

    border-top:
    1px solid rgba(255,255,255,0.3);
}

.main-footer p{
    font-size:14px;

    color:#555;
}

.main-footer span{
    color:#8FAF9B;

    font-weight:700;
}

.main-footer a{
    text-decoration:none;

    color:#2B2B2B;

    transition:0.3s;
}

.main-footer a:hover{
    color:#8FAF9B;
}

/* =========================
HOME
========================= */

.home-container{
    width:100%;

    min-height:80vh;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
}

.home-left{
    flex:1;
}

.home-left h1{
    font-size:70px;

    line-height:1.1;

    font-family:
    'Cormorant Garamond', serif;

    margin-bottom:20px;
}

.home-left p{
    font-size:18px;

    color:#666;

    max-width:500px;

    line-height:1.7;

    margin-bottom:30px;
}

.home-buttons{
    display:flex;
    gap:15px;
}

.btn-primary{
    padding:15px 30px;

    border:none;

    border-radius:40px;

    background:#8FAF9B;

    color:white;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:0.4s;

    box-shadow:
    0 10px 30px rgba(143,175,155,0.25);
}

.btn-primary:hover{
    transform:translateY(-4px);

    background:#7BA08B;
}

.btn-secondary{
    padding:15px 30px;

    border-radius:40px;

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.3);

    color:#2B2B2B;

    text-decoration:none;

    transition:0.4s;
}

.btn-secondary:hover{
    transform:translateY(-4px);
}

.home-right{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

.main-perfume{
    width:420px;

    animation:
    floating 5s ease-in-out infinite;
}

.main-perfume img{
    width:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.12));
}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =========================
RESPONSIVO
========================= */

@media(max-width:980px){

    .main-header{
        padding:20px;
        flex-direction:column;
        gap:20px;
    }

    main{
        padding:20px;
    }

    .home-container{
        flex-direction:column;
        text-align:center;
    }

    .home-left h1{
        font-size:48px;
    }

    .main-perfume{
        width:300px;
    }

}

/* =========================
RESPONSIVO - TABLET
========================= */

@media(max-width:1024px){

    .main-header{
        padding:22px 28px;
    }

    .navbar{
        gap:8px;
        padding:10px 16px;
    }

    .navbar a{
        padding:10px 14px;
        font-size:14px;
    }

    main{
        padding:25px;
    }

    .home-container{
        flex-direction:column;
        text-align:center;
        min-height:auto;
        gap:10px;
    }

    .home-left h1{
        font-size:62px;
    }

    .home-left p{
        margin:auto;
        margin-bottom:26px;
    }

    .home-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .home-right{
        width:100%;
        min-height:600px;
    }

    .main-perfume-container{
        width:420px;
        height:520px;
    }

    .main-perfume-img{
        width:330px;
    }

    .mini-perfumes{
        right:20px;
    }

    .mini-perfume{
        width:100px;
        height:100px;
        border-radius:28px;
    }

    .mini-perfume img{
        width:62px;
        height:62px;
    }

}


/* =========================
RESPONSIVO - CELULAR
========================= */

@media(max-width:600px){

    .main-header{

        padding:20px 14px;

        display:flex;
        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:18px;
    }

    /* LOGO */

    .logo{

        width:100%;

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .logo img{

        width:95px;
        height:auto;

        object-fit:contain;

        border-radius:0;

        box-shadow:none;
    }

    /* NAVBAR */

    .navbar{

        width:100%;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:12px;

        padding:12px;

        border-radius:30px;

        flex-wrap:nowrap;
    }

    .navbar a{

        padding:10px 14px;

        font-size:14px;

        white-space:nowrap;
    }

    /* REMOVE ESPAÇO DOS ÍCONES */

    .navbar a i{

        margin:0;
    }

}


/* =========================
CELULAR PEQUENO
========================= */

@media(max-width:380px){

    .home-left h1{
        font-size:39px;
    }

    .main-perfume-img{
        width:225px;
    }

    .mini-perfume{
        width:76px;
        height:76px;
    }

    .mini-perfume img{
        width:48px;
        height:48px;
    }

}

/* =========================
HOME PREMIUM
========================= */

.home-badge{
    display:inline-flex;

    padding:10px 18px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.45);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.3);

    margin-bottom:25px;

    font-size:14px;

    color:#666;
}

.perfume-glow{
    position:absolute;

    width:420px;
    height:420px;

    background:#8FAF9B;

    opacity:0.18;

    filter:blur(100px);

    border-radius:50%;

    z-index:-1;
}

.mini-perfumes{
    position:absolute;

    right:-20px;

    display:flex;
    flex-direction:column;

    gap:20px;
}

.mini-perfume{
    width:90px;
    height:90px;

    border-radius:25px;

    background:
    rgba(255,255,255,0.45);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.3);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:0.4s;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.05);
}

.mini-perfume img{
    width:60px;
    height:60px;

    object-fit:contain;
}

.mini-perfume:hover{
    transform:
    translateY(-6px)
    scale(1.05);

    box-shadow:
    0 15px 35px rgba(143,175,155,0.18);
}

.mini-perfume.active{
    border:
    2px solid #8FAF9B;
}

/* =========================
ANIMAÇÃO TROCA PERFUME
========================= */

.perfume-changing{
    animation:
    perfumeChange 0.8s ease;
}

@keyframes perfumeChange{

    0%{
        opacity:0;
        transform:
        translateY(80px)
        rotate(-15deg)
        scale(0.8);
    }

    100%{
        opacity:1;
        transform:
        translateY(0)
        rotate(0)
        scale(1);
    }

}

/* =========================
ROULETTE PERFUMES
========================= */

:root{
    --bg-1:#F8F3EA;
    --bg-2:#F3E2C6;
    --bg-3:#FFFFFF;

    --primary-color:#D8C3A5;
    --secondary-color:#B98F5A;

    --text-color:#2B2B2B;
}

body{
    background:
    radial-gradient(circle at 80% 20%, var(--bg-2) 0%, transparent 35%),
    radial-gradient(circle at 20% 80%, var(--bg-1) 0%, transparent 35%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 55%, var(--bg-2) 100%);

    color:var(--text-color);

    font-family:'Inter', sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

    transition:
    background 1s ease,
    color 0.5s ease;
}

/* =========================
HOME RIGHT
========================= */

.home-right{

    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    min-height:700px;
}

/* =========================
PERFUME PRINCIPAL
========================= */

.main-perfume-container{

    position:relative;

    width:420px;
    height:420px;

    display:flex;
    align-items:center;
    justify-content:center;

}

.main-circle{

    position:absolute;

    width:380px;
    height:380px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.35);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.4);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.08);

}

.main-perfume-img{

    width:260px;

    object-fit:contain;

    position:relative;

    z-index:2;

    animation:
    floating 5s ease-in-out infinite;
}

/* =========================
MINI PERFUMES
========================= */

.mini-perfumes{

    position:absolute;

    right:0;

    display:flex;
    flex-direction:column;

    gap:25px;
}

.mini-perfume{

    width:120px;
    height:120px;

    border-radius:35px;

    background:
    rgba(255,255,255,0.35);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.4);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:0.5s;

    box-shadow:
    0 20px 40px rgba(0,0,0,0.06);
}

.mini-perfume img{

    width:70px;
    height:70px;

    object-fit:contain;

}

.mini-perfume:hover{

    transform:
    translateY(-8px)
    scale(1.05);

}

.mini-perfume.active{

    border:
    2px solid var(--primary-color);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.10);

}

/* =========================
TÍTULO
========================= */

.home-left h1{

    font-size:90px;

    color:#2B2B2B;

    transition:0.5s;

}

.home-left p{

    transition:0.5s;

}

/* =========================
GLOW
========================= */

.perfume-glow{

    position:absolute;

    width:500px;
    height:500px;

    background:var(--primary-color);

    opacity:0.20;

    filter:blur(120px);

    border-radius:50%;

    transition:1s;

}

/* =========================
EFEITO ROLETA
========================= */

.rotate-effect{

    animation:
    rotatePerfume 0.9s ease;
}

@keyframes rotatePerfume{

    0%{

        opacity:0;

        transform:
        rotate(-180deg)
        scale(0.5);

    }

    100%{

        opacity:1;

        transform:
        rotate(0deg)
        scale(1);

    }

}

/* PERFUME PRINCIPAL SEM CÍRCULO */

.main-perfume-container{
    position:relative;
    width:520px;
    height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.main-circle{
    display:none;
}

.main-perfume-img{
    width:430px;
    max-height:600px;
    object-fit:contain;
    position:relative;
    z-index:2;
    animation:floating 5s ease-in-out infinite;
    filter:drop-shadow(0 35px 45px rgba(0,0,0,0.14));
}

/* MINI PERFUMES COM EFEITO ROLETA */

.mini-perfumes{
    position:absolute;
    right:0;
    display:flex;
    flex-direction:column;
    gap:26px;
}

.mini-perfume{
    width:118px;
    height:118px;
    border-radius:34px;
    background:rgba(255,255,255,0.42);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:0.45s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.06);
}

.mini-perfume::before{
    content:"";
    position:absolute;
    width:160%;
    height:160%;
    background:conic-gradient(
        from 0deg,
        transparent,
        var(--primary-color),
        transparent,
        transparent
    );
    opacity:0;
    transition:0.4s;
    animation:spinBorder 3s linear infinite;
}

.mini-perfume::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:31px;
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(10px);
}

.mini-perfume img{
    width:72px;
    height:72px;
    object-fit:contain;
    position:relative;
    z-index:2;
    transition:0.45s ease;
}

.mini-perfume:hover{
    transform:translateX(-12px) scale(1.06);
}

.mini-perfume:hover::before,
.mini-perfume.active::before{
    opacity:1;
}

.mini-perfume.active{
    transform:translateX(-28px) scale(1.12);
    box-shadow:0 25px 55px rgba(0,0,0,0.10);
}

.mini-perfume.active img{
    transform:scale(1.08) rotate(-6deg);
}

@keyframes spinBorder{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* EFEITO GIRANDO DO PERFUME PRINCIPAL */

.rotate-effect{
    animation:rotatePerfume 0.9s ease;
}

@keyframes rotatePerfume{
    0%{
        opacity:0;
        transform:translateY(70px) rotate(-160deg) scale(0.65);
    }

    60%{
        opacity:1;
        transform:translateY(-10px) rotate(15deg) scale(1.05);
    }

    100%{
        opacity:1;
        transform:translateY(0) rotate(0deg) scale(1);
    }
}

/* =========================
MENU MOBILE
========================= */

.menu-toggle{

    width:58px;
    height:58px;

    border:none;

    border-radius:18px;

    background:
    rgba(255,255,255,0.45);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.4);

    display:none;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    transition:0.4s;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.06);
}

.menu-toggle span{

    width:24px;
    height:2px;

    background:#2B2B2B;

    border-radius:10px;

    transition:0.4s;
}

/* =========================
MENU ABERTO
========================= */

.mobile-menu{

    position:absolute;

    top:110px;
    left:50%;

    transform:
    translateX(-50%)
    translateY(-30px);

    width:90%;

    padding:25px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.55);

    backdrop-filter:blur(20px);

    border:
    1px solid rgba(255,255,255,0.4);

    display:flex;
    flex-direction:column;

    gap:16px;

    opacity:0;
    visibility:hidden;

    transition:0.5s;

    z-index:999;

    box-shadow:
    0 30px 60px rgba(0,0,0,0.08);
}

.mobile-menu a{

    text-decoration:none;

    color:#2B2B2B;

    font-size:16px;
    font-weight:500;

    padding:14px 18px;

    border-radius:18px;

    transition:0.4s;
}

.mobile-menu a:hover{

    background:var(--primary-color);

    color:white;
}

.mobile-menu.active{

    opacity:1;
    visibility:visible;

    transform:
    translateX(-50%)
    translateY(0);
}

/* =========================
ANIMAÇÃO HAMBÚRGUER
========================= */

.menu-toggle.active span:nth-child(1){

    transform:
    rotate(45deg)
    translate(6px, 6px);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;
}

.menu-toggle.active span:nth-child(3){

    transform:
    rotate(-45deg)
    translate(5px, -5px);

}

/* =========================
RESPONSIVO MOBILE
========================= */

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .navbar{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .main-header{

        width:100%;

        display:flex;
        align-items:center;
        justify-content:space-between;

        flex-direction:row;

        padding:20px 18px;
    }

    /* LOGO MAIS À ESQUERDA */

    .logo{

        display:flex;
        align-items:center;

        margin-left:-150px;
    }

    .logo img{

        width:82px;

        object-fit:contain;
    }

    /* BOTÃO MAIS À DIREITA */

    .menu-toggle{

        margin-right:-2px;
    }

}