/* ==========================================================
   Birthday Website
   Global CSS
   Author : Huy + ChatGPT
   ========================================================== */

/* ==========================================================
   BODY
   ========================================================== */

body{

    font-family: var(--font-body);

    font-size: var(--font-size-md);

    line-height: var(--line-height);

    color: var(--color-text);

    background: var(--gradient-main);

    overflow-x: hidden;

}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family: var(--font-heading);

    font-weight: var(--font-weight-bold);

    line-height: 1.2;

    color: var(--color-white);

}

p{

    color: var(--color-text-light);

}

strong{

    color: var(--color-primary);

}

small{

    color: var(--color-text-muted);

}

/* ==========================================================
   SECTION
   ========================================================== */

section{

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width: min(100% - 48px, var(--container-width));

    margin-inline: auto;

}

/* ==========================================================
   FLEX
   ========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;

}

/* ==========================================================
   BUTTON
   ========================================================== */

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:.75rem;

    padding:14px 28px;

    border-radius:var(--radius-round);

    background:var(--gradient-gold);

    color:#000;

    font-weight:600;

    transition:
        transform var(--transition-normal) var(--ease),
        box-shadow var(--transition-normal) var(--ease),
        opacity var(--transition-normal) var(--ease);

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-glow);

}

.btn:active{

    transform:scale(.96);

}

/* ==========================================================
   GLASS CARD
   ========================================================== */

.glass{

    background:var(--color-glass);

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   IMAGE
   ========================================================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none !important;

}

.opacity-0{

    opacity:0;

}

.pointer-none{

    pointer-events:none;

}

/* ==========================================================
   SCROLL SPACING
   ========================================================== */

.spacer-xs{

    height:40px;

}

.spacer-sm{

    height:80px;

}

.spacer-md{

    height:120px;

}

.spacer-lg{

    height:180px;

}

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

.glow{

    box-shadow:var(--shadow-glow);

}

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

.bg-gradient{

    background:var(--gradient-main);

}

.bg-glass{

    background:var(--color-glass);

}

/* ==========================================================
   TRANSITION
   ========================================================== */

.fade{

    transition:all .6s var(--ease);

}

/* ==========================================================
   CURSOR
   ========================================================== */

.pointer{

    cursor:pointer;

}

/* ==========================================================
   Music Button
   ========================================================== */

.music-button{

    position:fixed;

    right:32px;

    bottom:32px;

    width:64px;

    height:64px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    color:#ffffff;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

    z-index:9999;

}

.music-button:hover{

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

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

}

.music-button:active{

    transform:scale(.95);

}

.music-button.playing{

    animation:musicPulse 2s infinite;

}

@keyframes musicPulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(255,255,255,.45);

    }

    70%{

        box-shadow:
            0 0 0 18px rgba(255,255,255,0);

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(255,255,255,0);

    }

}