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

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

:root {

    --bg-1: #120d22;
    --bg-2: #21143b;
    --bg-3: #35205b;

    --card: rgba(255, 255, 255, .09);
    --card-border: rgba(226, 211, 255, .16);

    --text: #F8FAFC;
    --text-soft: rgba(248, 250, 252, .75);

    --primary: #a879ff;
    --primary-hover: #c2a0ff;

    --secondary: rgba(226, 211, 255, .1);

    --shadow:
        0 24px 64px rgba(8, 4, 20, .42);

    --transition:
        .28s cubic-bezier(.22,.68,.22,1);
}

html {

    font-size:16px;

    -webkit-tap-highlight-color: transparent;

    scroll-behavior:smooth;
}

body{

    overflow:hidden;

    min-height:100vh;

    color:var(--text);

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

    background:
        linear-gradient(
            160deg,
            var(--bg-1),
            var(--bg-2),
            var(--bg-3)
        );

}


/* ===========================================================
   CANVAS
=========================================================== */

#background{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    display:block;

    z-index:-2;
}

#effects-layer{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:1000;
}


/* ===========================================================
   LAYOUT
=========================================================== */

.page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:

        clamp(20px, 5vw, 52px);

}


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

.invite-card{

    position:relative;

    width:min(92vw,520px);

    padding:

        clamp(30px, 6vw, 48px);

    border-radius:30px;

    background:var(--card);

    border:

        1px solid var(--card-border);

    backdrop-filter:

        blur(18px);

    -webkit-backdrop-filter:

        blur(18px);

    box-shadow:

        var(--shadow);

    overflow:hidden;

    isolation:isolate;

    animation:

        fadeUp .8s ease;

}

.invite-card::before{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(168,121,255,.28),

            transparent 70%

        );

    z-index:-1;

}

.invite-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:

        1px solid rgba(255,255,255,.04);

    pointer-events:none;

}

.card-decoration{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}

.card-decoration span{

    width:48px;

    height:5px;

    border-radius:999px;

    background:var(--primary);

    opacity:.8;

}


/* ===========================================================
   HERO
=========================================================== */

.hero{

    text-align:center;

}

.hero-tag{

    display:inline-flex;

    padding:

        .45rem .9rem;

    border-radius:999px;

    background:

        rgba(255,255,255,.08);

    color:

        rgba(255,255,255,.75);

    font-size:.78rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:1.25rem;

}

.hero h1{

    font-family:

        'Playfair Display',
        serif;

    font-size:

        clamp(
            2.2rem,
            6vw,
            3.4rem
        );

    line-height:1.1;

    font-weight:600;

    margin-bottom:1rem;

}

.hero p{

    color:

        var(--text-soft);

    font-size:

        clamp(
            1rem,
            2vw,
            1.1rem
        );

    line-height:1.75;

}


/* ===========================================================
   CONTENT
=========================================================== */

.content{

    margin:

        2.5rem 0;

}

.divider{

    width:64px;

    height:1px;

    background:

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

    margin:

        0 auto 2rem;

}

.description{

    text-align:center;

    color:

        rgba(255,255,255,.82);

    line-height:1.9;

    font-size:

        .98rem;

}


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

.actions{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:

        clamp(2rem, 5vw, 2.75rem);

}

.button{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:16px;

    padding:

        18px;

    cursor:pointer;

    user-select:none;

    transition:

        transform var(--transition),
        background var(--transition),
        opacity var(--transition),
        color var(--transition),
        box-shadow var(--transition);

    font-size:1rem;

    font-weight:600;

    letter-spacing:.01em;

    min-height:60px;

}

.button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px rgba(255,255,255,.14),
        0 0 0 6px rgba(168,121,255,.4);

}

.button-primary{

    color:white;

    background:

        linear-gradient(

            135deg,

            #a879ff,

            #8057db

        );

    box-shadow:

        0 12px 28px rgba(130,83,219,.36);

}

.button-primary:hover{

    transform:

        translateY(-2px);

    background:

        linear-gradient(

            135deg,

            #c2a0ff,

            #a879ff

        );

}

.button-primary:active{

    transform:

        scale(.97);

}

.button-secondary{

    color:

        rgba(255,255,255,.92);

    background:

        rgba(226,211,255,.1);

}

.button-secondary:hover{

    background:

        rgba(226,211,255,.16);

}

.button-secondary:active{

    transform:

        scale(.96);

}

.button-friendship{

    color:#fff;

    background:

        linear-gradient(

            135deg,

            #8f79d0,

            #6954a8

        );

    box-shadow:

        0 10px 24px rgba(105,84,168,.28);

}

.button-friendship:hover{

    background:

        linear-gradient(

            135deg,

            #a18bdc,

            #7862b9

        );

}


/* camada para ripple futuro */

.button-bg{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.button-text{

    position:relative;

    z-index:2;

}


/* ===========================================================
   CLASSES QUE O JAVASCRIPT USARÁ
=========================================================== */

.button-shake{

    animation:

        shake .38s cubic-bezier(.22,.68,.22,1);

}

.button-pop{

    animation:

        pop .32s cubic-bezier(.22,.68,.22,1);

}

.button-success{

    animation:

        success .78s cubic-bezier(.22,.68,.22,1);

}

.text-change{

    animation:

        swapText .32s cubic-bezier(.22,.68,.22,1);

}

.card-pulse{

    animation:

        pulseCard .45s cubic-bezier(.22,.68,.22,1);

}

.fade-out{

    opacity:0;

}

.hidden{

    display:none !important;

}


/* ===========================================================
   DESKTOP
=========================================================== */

/* ===========================================================
   ANIMAÇÕES
=========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(24px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes shake{

    22%{

        transform:

            translateX(-4px);

    }

    52%{

        transform:

            translateX(3px);

    }

    100%{

        transform:

            translateX(0);

    }

}

@keyframes pop{

    45%{

        transform:

            scale(.97);

    }

    72%{

        transform:

            scale(1.025);

    }

}

@keyframes pulseCard{

    30%{

        transform:

            translateY(2px) scale(.988);

    }

    72%{

        transform:

            translateY(-1px) scale(1.004);

    }

}

@keyframes swapText{

    0%{

        opacity:0;

        transform:

            translateY(5px);

    }

    55%{

        opacity:.6;

    }

    100%{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes success{

    28%{

        transform:

            scale(.975);

        box-shadow:

            0 0 0 0 rgba(185,211,255,.5);

    }

    68%{

        transform:

            scale(1.015);

        box-shadow:

            0 0 0 14px rgba(185,211,255,0);

    }

}


/* ===========================================================
   REDUÇÃO DE MOVIMENTO
=========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}