/* ===========================================================
   Lucky Roll - Global Styles
   Rent-A-Game
   =========================================================== */

/*==============================
    Google Fonts
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

/*==============================
    CSS Variables
==============================*/
:root{

    --primary:#1e3c72;
    --secondary:#2a5298;

    --accent:#ff5722;
    --accent-hover:#e64a19;

    --success:#28a745;
    --danger:#dc3545;

    --white:#ffffff;
    --text:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.70);

    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.12);

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

    --radius:18px;

    --transition:.30s ease;

    --container:1180px;

    --header-height:82px;

    --space-sm:24px;
    --space-md:40px;
    --space-lg:70px;
    --space-xl:110px;

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:30px;
}

/*==============================
    Reset
==============================*/

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

html{

    scroll-behavior:smooth;
}

body{

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

    color:var(--text);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    overflow-x:hidden;

    min-height:100vh;

    position:relative;
}

/*==============================
    Animated Background
==============================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(255,87,34,.15),
        transparent 35%),

        radial-gradient(circle at 85% 10%,
        rgba(255,255,255,.08),
        transparent 30%),

        radial-gradient(circle at 60% 80%,
        rgba(42,82,152,.35),
        transparent 40%);

    z-index:-2;
}

/*==============================
    Floating Glow
==============================*/

body::after{

    content:"";

    position:fixed;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(255,87,34,.08);

    filter:blur(80px);

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

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

    z-index:-1;
}

/*==============================
    Selection
==============================*/

::selection{

    background:var(--accent);

    color:#fff;
}

/*==============================
    Scrollbar
==============================*/

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#17315f;
}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-hover);
}

/*==============================
    Typography
==============================*/

h1,h2,h3,h4,h5{

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

    color:#fff;

    font-weight:700;

    line-height:1.15;
}

h1{

    font-size:64px;
}

h2{

    font-size:46px;
}

h3{

    font-size:28px;
}

p{

    color:var(--muted);

    line-height:1.8;

    font-size:17px;
}

/*==============================
    Links
==============================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);
}

img{

    max-width:100%;

    display:block;

    user-select:none;

    -webkit-user-drag:none;
}

/*==============================
    Layout
==============================*/

.container{

    width:min(var(--container),92%);

    margin:auto;
}

section{

    padding:110px 0;

    position:relative;
}

/*==============================
    Glass Card
==============================*/

.glass{

    background:var(--glass);

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

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

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

/*==============================
    Buttons
==============================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:56px;

    padding:0 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

    border:none;

    font-size:16px;
}

.btn-primary{

    background:var(--accent);

    color:#fff;
}

.btn-primary:hover{

    background:var(--accent-hover);

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(255,87,34,.35);
}

.btn-secondary{

    color:#fff;

    border:1px solid rgba(255,255,255,.15);

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

    backdrop-filter:blur(10px);
}

.btn-secondary:hover{

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

    transform:translateY(-3px);
}

/*==============================
    Section Title
==============================*/

.section-title{

    text-align:center;

    margin-bottom:70px;
}

.section-title span{

    display:inline-block;

    color:var(--accent);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

    font-size:13px;
}

.section-title p{

    max-width:700px;

    margin:20px auto 0;
}

/*==============================
    Utilities
==============================*/

.text-center{

    text-align:center;
}

.mt-30{

    margin-top:30px;
}

.mb-30{

    margin-bottom:30px;
}

.hidden{

    display:none;
}

/*==============================
    Animation Helpers
==============================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{

    opacity:1;

    transform:none;
}

/*==============================
    Keyframes
==============================*/

@keyframes floatGlow{

    0%{

        transform:
        translateY(0px)
        scale(1);
    }

    50%{

        transform:
        translateY(40px)
        scale(1.1);
    }

    100%{

        transform:
        translateY(0px)
        scale(1);
    }
}