/* ==========================================================
   MAGIC MUG
   BAR & RESTAURANT
========================================================== */

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

:root{

    --bg:#090909;
    --gold:#d4af37;
    --gold-light:#f6d878;
    --white:#f6f6f6;
    --grey:#b7b7b7;
    --glass:rgba(255,255,255,.04);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

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

    overflow:hidden;

    width:100%;

    height:100vh;

}

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

/* ==========================================
      CINEMATIC SILK BACKGROUND
========================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:#080808;

    z-index:-100;

}

/* Layer 1 */

.background::before{

    content:"";

    position:absolute;

    inset:-25%;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(255,255,255,.16),
    transparent 40%),

    radial-gradient(circle at 80% 70%,
    rgba(255,255,255,.10),
    transparent 45%),

    linear-gradient(
        130deg,

        transparent 10%,

        rgba(255,255,255,.05) 30%,

        transparent 55%,

        rgba(255,255,255,.04) 75%,

        transparent 100%

    );

    filter:blur(60px);

    animation:silkOne 22s ease-in-out infinite alternate;

}

/* Layer 2 */

.background::after{

    content:"";

    position:absolute;

    inset:-30%;

    background:

    linear-gradient(

        45deg,

        transparent,

        rgba(255,255,255,.05),

        transparent,

        rgba(255,255,255,.04),

        transparent

    );

    filter:blur(90px);

    opacity:.8;

    animation:silkTwo 30s ease-in-out infinite alternate;

}

/* Dark vignette */

.background .vignette{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle,

        transparent 35%,

        rgba(0,0,0,.25) 75%,

        rgba(0,0,0,.65) 100%

    );

}
/* ==========================================================
   HERO LAYOUT
========================================================== */

.hero{

    min-height:100vh;

    display:grid;

    place-items:center;

    padding:40px;

}

.container{

    width:min(1200px,90vw);

    margin:auto;

    text-align:center;

}
/* ==========================================================
   TOP TITLE
========================================================== */

.top-title{

    font-size:.95rem;

    letter-spacing:12px;

    color:var(--gold);

    text-transform:uppercase;

    margin-bottom:18px;

}

/* ==========================================================
   DIVIDERS
========================================================== */

.top-divider,
.middle-divider,
.since-line{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    color:var(--gold);

}

.top-divider{

    margin-bottom:40px;

}

.middle-divider{

    margin:35px 0;

}

.since-line{

    margin-top:12px;

}

.top-divider span,
.middle-divider span,
.since-line span{

    width:120px;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );

}

/* ==========================================================
   LOGO
========================================================== */

h1{

    font-family:"Cinzel",serif;

    font-size:clamp(4rem,8vw,8rem);

    font-weight:600;

    letter-spacing:8px;

    text-transform:uppercase;

    color:#f6f1e6;

    text-shadow:

        0 0 12px rgba(212,175,55,.15),

        0 0 40px rgba(212,175,55,.08);

}

/* ==========================================================
   TAGLINE
========================================================== */

.tagline{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:60px;

}

.tagline span{

    font-size:1.35rem;

    color:#efefef;

}

.tagline .line{

    width:2px;

    height:24px;

    background:var(--gold);

    opacity:.6;

}

/* ==========================================================
   SINCE
========================================================== */

.since{

    margin-bottom:60px;

}

.since h2{

    font-size:2rem;

    font-weight:500;

    margin-bottom:6px;

}

.since-line{

    font-size:1.35rem;

    color:var(--gold);

}

/* ==========================================================
   WEBSITE
========================================================== */

.launch{

    margin-bottom:45px;

}

.launch p{

    letter-spacing:8px;

    color:#f0f0f0;

    font-size:1.05rem;

    margin-bottom:10px;

}

.launch h3{

    font-family:"Cinzel",serif;

    font-size:3rem;

    font-weight:600;

    letter-spacing:8px;

    color:var(--gold-light);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.description{

    max-width:760px;

    margin:auto;

    color:var(--grey);

    line-height:2;

    font-size:1.15rem;

    margin-bottom:60px;

}

/* ==========================================================
   BUTTONS
========================================================== */

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.social{

    margin-top:10px;

}

.buttons a{

    min-width:170px;

    padding:15px 28px;

    border:1px solid rgba(212,175,55,.35);

    border-radius:999px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(12px);

    color:var(--white);

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:.95rem;

    transition:.35s ease;

}

.buttons a i{

    color:var(--gold);

    transition:.35s;

}

.buttons a:hover{

    background:rgba(212,175,55,.12);

    border-color:var(--gold);

    transform:translateY(-4px);

    box-shadow:

    0 0 20px rgba(212,175,55,.18);

}

.buttons a:hover i{

    transform:scale(1.15);

}

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

footer{

    margin-top:40px;

    padding-bottom:30px;

    position:relative;

}

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    color:#777;

    font-size:.85rem;

    letter-spacing:2px;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes waveOne{

    0%{

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

    }

    100%{

        transform:translate(120px,-70px) rotate(25deg) scale(1.15);

    }

}

@keyframes waveTwo{

    0%{

        transform:translate(0,0) rotate(0deg);

    }

    100%{

        transform:translate(-150px,90px) rotate(-25deg);

    }

}

@keyframes waveThree{

    0%{

        transform:translate(0,0);

    }

    100%{

        transform:translate(70px,-110px);

    }

}

@keyframes particlesMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-300px);

    }

}

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

@media(max-width:900px){

    body{

        overflow:auto;

    }

    .hero{

        height:auto;

        min-height:100vh;

        padding:80px 25px;

    }

    h1{

font-size:clamp(3rem,6vw,5.6rem);

letter-spacing:6px;

line-height:1;

}
    .tagline{

        flex-direction:column;

        gap:10px;

    }

    .tagline .line{

        display:none;

    }

    .since h2{

        font-size:1.4rem;

    }

    .launch h3{

        font-size:2rem;

        letter-spacing:4px;

    }

    .description{

        font-size:1rem;

        line-height:1.8;

    }

    .buttons{

        flex-direction:column;

    }

    .buttons a{

        width:260px;

    }

    footer{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        margin:40px 0 20px;

    }

}