:root{
    /* Backgrounds */
    --bg: #FCF8F4;
    --secondary: #F7EFE7;
    --cream: #FFFDF9;

    /* Accent Colors */
    --lavender: #E9DDF6;
    --soft-lilac: #D8C6E8;
    --rose-beige: #F3E4DD;

    /* Luxury Gold */
    --champagne-gold: #D9B76A;
    --deep-gold: #B78C38;

    /* Typography */
    --text: #2F2A28;
    --muted: #7A706A;

    /* Extras */
    --white: #FFFFFF;
    --shadow: rgba(47,42,40,.08);
    --shadow-lg: rgba(47,42,40,.15);

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;

    /* Transition */
    --transition: .35s ease;
}

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

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

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{

    min-height:100vh;

    overflow-x:hidden;

    background:var(--bg);

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

}

/* ===========================
   LOADER
=========================== */

.loader{

    position:fixed;
    inset:0;

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

    overflow:hidden;

    background:
    radial-gradient(circle at top,var(--lavender),transparent 45%),
    radial-gradient(circle at bottom,var(--rose-beige),transparent 45%),
    var(--bg);

}

.loader-bg{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(233,221,246,.25),
    rgba(255,253,249,.1),
    rgba(243,228,221,.18)
    );

}

.loader-content{

    position:relative;

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

    z-index:5;

}

.logo{

    width:120px;

    margin-bottom:25px;

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

}

.loader h1{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    color:var(--text);

    letter-spacing:5px;

    font-weight:600;

}

.loader p{

    margin-top:10px;

    color:var(--muted);

    font-size:1rem;

    letter-spacing:4px;

    text-transform:uppercase;

}

/* ===========================
   PROGRESS
=========================== */

.progress{

    margin-top:45px;

    width:280px;
    height:2px;

    background:#e6ddd4;

    overflow:hidden;

    border-radius:20px;

}

.progress-fill{

    display:block;

    width:0%;

    height:100%;

    background:linear-gradient(
    90deg,
    var(--champagne-gold),
    var(--deep-gold)
    );

}

/* ===========================
   PERFUME MIST
=========================== */

.mist{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.45;

}

.mist-1{

    width:420px;
    height:420px;

    background:var(--lavender);

    left:-120px;
    top:-100px;

    animation:floating 9s ease-in-out infinite;

}

.mist-2{

    width:360px;
    height:360px;

    background:var(--rose-beige);

    right:-120px;
    bottom:-120px;

    animation:floating 10s ease-in-out infinite reverse;

}

.mist-3{

    width:260px;
    height:260px;

    background:var(--soft-lilac);

    bottom:120px;
    left:45%;

    animation:floating 8s ease-in-out infinite;

}

/* ===========================
   ANIMATIONS
=========================== */

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes floating{

0%{

transform:translate(0,0);

}

50%{

transform:translate(40px,-30px);

}

100%{

transform:translate(0,0);

}

}