/* =========================================================
   BRAWL SCHOOL
   GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {

    /* BRAND */

    --primary: #9B7BFF;
    --primary-light: #C4B5FD;
    --primary-dark: #7457E8;

    --gold: #FFD84D;
    --gold-light: #FFE88A;
    --gold-dark: #FFB82E;

    --coral: #FF654F;
    --success: #42E89F;


    /* BACKGROUNDS */

    --background: #060608;
    --background-soft: #0A0A0E;

    --surface: #101014;
    --surface-2: #141419;
    --surface-hover: #18181F;
    --surface-light: #202029;


    /* TEXT */

    --text: #F8F8FB;
    --text-muted: #AAAAB5;
    --text-soft: #74747F;


    /* BORDERS */

    --border:
        rgba(255,255,255,.075);

    --border-strong:
        rgba(255,255,255,.13);

    --border-purple:
        rgba(155,123,255,.30);

    --border-gold:
        rgba(255,216,77,.24);


    /* LAYOUT */

    --container: 1560px;

    --radius-xs: 8px;
    --radius-sm: 11px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;


    /* MOTION */

    --ease:
        cubic-bezier(.22,.61,.36,1);

    --ease-premium:
        cubic-bezier(.16,1,.3,1);


    /* SHADOWS */

    --shadow-sm:
        0 12px 35px
        rgba(0,0,0,.20);

    --shadow-md:
        0 24px 70px
        rgba(0,0,0,.32);

    --purple-glow:
        0 18px 48px
        rgba(116,87,232,.20);

    --gold-glow:
        0 18px 50px
        rgba(255,184,46,.12);
}


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

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


html {
    min-height: 100%;

    background:
        var(--background);

    scroll-behavior: smooth;
}


body {
    position: relative;

    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(155,123,255,.045),
            transparent 25%
        ),
        radial-gradient(
            circle at 86% 18%,
            rgba(255,216,77,.025),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            #060608,
            #08080B 45%,
            #060608
        );

    color:
        var(--text);

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

    font-size: 16px;

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* subtle texture */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(255,255,255,.009) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.009) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            transparent 82%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            transparent 82%
        );
}


body,
button,
input,
textarea,
select {
    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
}


img,
svg,
video {
    display: block;

    max-width: 100%;
}


h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}


::selection {
    background:
        var(--primary);

    color:
        #fff;
}


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

.container {
    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin-inline: auto;
}


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

.button {
    position: relative;

    min-height: 52px;

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

    gap: 9px;

    padding:
        0
        22px;

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius:
        12px;

    text-decoration: none;

    font-size: .88rem;
    font-weight: 850;

    transition:
        transform .42s var(--ease-premium),
        background .42s var(--ease),
        color .42s var(--ease),
        border-color .42s var(--ease),
        box-shadow .48s var(--ease);
}


.button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 52%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .85s
        var(--ease);

    pointer-events: none;
}


.button:hover::before {
    left: 145%;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button i {
    transition:
        transform .4s
        var(--ease);
}


.button:hover i.fa-arrow-right {
    transform:
        translateX(3px);
}


.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary)
        );

    color:
        #0A0910;

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


.button-primary:hover {
    box-shadow:
        0 20px 55px
        rgba(116,87,232,.34);
}


.button-secondary {
    background:
        rgba(255,255,255,.025);

    color:
        var(--text);

    border-color:
        var(--border-strong);
}


.button-secondary:hover {
    background:
        var(--surface-hover);

    border-color:
        var(--border-purple);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .container {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }

}