/*=========================================================
  DRAGON LANDING PAGE v2.0
=========================================================*/

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

:root{

    --gold1:#fff2b5;
    --gold2:#ffd45a;
    --gold3:#d58b00;

    --glass:rgba(18,18,26,.38);

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

}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

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

    background:#000;

    color:#fff;

}

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

#bg{

    position:fixed;

    inset:0;

    z-index:0;

    background-image:url("assets/bg.webp");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

    transform:scale(1.06);

    transition:
    transform .35s ease,
    filter .15s linear;
    
}

#bg.flash{

    filter:
        brightness(1.35)
        contrast(1.18);

}

/* Mobile Background */

@media (max-width:768px){

#bg{

    background-image:url("assets/bg-mobile.webp");

    background-size:cover;

    background-position:center center;

}

}

/*=========================================================
  DARK OVERLAY
=========================================================*/

#bg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(0,0,0,.15),

    rgba(0,0,0,.45),

    rgba(0,0,0,.72)

    );

}

#bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(255,70,0,.08),

    transparent 42%);

}

/*=========================================================
  FOG
=========================================================*/

#fog{

    position:fixed;

    inset:0;

    z-index:1;

    opacity:.18;

    background:

    radial-gradient(circle at 20% 70%,
    rgba(255,255,255,.08),
    transparent 30%),

    radial-gradient(circle at 80% 40%,
    rgba(255,255,255,.06),
    transparent 35%),

    radial-gradient(circle at 50% 100%,
    rgba(255,255,255,.04),
    transparent 40%);

    filter:blur(45px);

    animation:fogFloat 18s ease-in-out infinite alternate;

}

@keyframes fogFloat{

from{

transform:translateX(-20px);

}

to{

transform:translateX(20px);

}

}

/*=========================================================
  NOISE
=========================================================*/

#noise{

    position:fixed;

    inset:0;

    z-index:8;

    pointer-events:none;

    opacity:.035;

    background:url("assets/noise.webp") repeat;

    mix-blend-mode:soft-light;

}

/*=========================================================
  EMBERS
=========================================================*/

#embers{

    position:fixed;

    inset:0;

    z-index:2;

    pointer-events:none;

}

/*=========================================================
  VIGNETTE
=========================================================*/

#vignette{

    position:fixed;

    inset:0;

    z-index:4;

    pointer-events:none;

    background:

    radial-gradient(circle,

    transparent 45%,

    rgba(0,0,0,.82));

}

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

.mouse-light{

    position:fixed;

    width:380px;

    height:380px;

    border-radius:50%;

    z-index:6;

    pointer-events:none;

    filter:blur(40px);

    background:

    radial-gradient(circle,

    rgba(255,170,60,.18),

    transparent 70%);

}
/*=========================================================
  MAIN LAYOUT
=========================================================*/

.wrapper{

    position:relative;

    z-index:20;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/*=========================================================
  GLASS PANEL
=========================================================*/

.glass{

    position:relative;

    width:min(560px,92vw);

    padding:60px 55px;

    border-radius:34px;

    overflow:hidden;

    background:rgba(18,18,30,.38);

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

    backdrop-filter:blur(22px);

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

    box-shadow:

    0 40px 120px rgba(0,0,0,.55),

    inset 0 1px 0 rgba(255,255,255,.08),

    inset 0 -1px 0 rgba(255,255,255,.04),

    0 0 80px rgba(255,170,50,.08);

}

/*=========================================================
  TOP LIGHT
=========================================================*/

.glass::before{

    content:"";

    position:absolute;

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,215,120,.20),

    transparent 70%);

    filter:blur(30px);

}

/*=========================================================
  BOTTOM SHADOW
=========================================================*/

.glass::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-80px;

    margin:auto;

    width:75%;

    height:120px;

    background:

    radial-gradient(circle,

    rgba(0,0,0,.45),

    transparent 70%);

    filter:blur(35px);

}

/*=========================================================
  ORNAMENT
=========================================================*/

.ornament{

    position:relative;

    width:140px;

    height:5px;

    margin:0 auto 35px;

    border-radius:50px;

    background:

    linear-gradient(90deg,

    transparent,

    #b77d00,

    #ffe08a,

    #b77d00,

    transparent);

}

.ornament::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:210px;

    height:1px;

    background:

    linear-gradient(90deg,

    transparent,

    rgba(255,220,120,.45),

    transparent);

}

/*=========================================================
  TITLE
=========================================================*/

.glass h1{

    font-size:48px;

    line-height:1.2;

    font-weight:800;

    text-align:center;

    color:#ffffff;

    letter-spacing:.5px;

    text-shadow:

    0 4px 15px rgba(0,0,0,.45),

    0 0 15px rgba(255,255,255,.08);

}

/*=========================================================
  OPTIONAL SUBTITLE
=========================================================*/

.glass p{

    margin-top:18px;

    text-align:center;

    font-size:17px;

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

    line-height:1.7;

}

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

.glass .btn{

    margin:42px auto 0;

}

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

@media (max-width:768px){

.wrapper{

    padding:20px;

}

.glass{

    width:92%;

    padding:36px 26px;

    border-radius:28px;

}

.glass h1{

    font-size:32px;

    line-height:1.3;

}

.glass p{

    font-size:15px;

    margin-top:12px;

}

.ornament{

    width:90px;

    margin-bottom:25px;

}

}

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

.btn{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:320px;

    height:72px;

    margin:auto;

    overflow:hidden;

    border-radius:60px;

    text-decoration:none;

    color:#3b2200;

    font-weight:700;

    font-size:20px;

    letter-spacing:2px;

    user-select:none;

    background:
    linear-gradient(
        180deg,
        #fff2bc 0%,
        #ffd75c 35%,
        #f2b321 60%,
        #c97a00 100%
    );

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.55),

        inset 0 -3px 0 rgba(120,70,0,.35),

        0 12px 35px rgba(255,190,50,.30),

        0 0 55px rgba(255,180,40,.15);

    transition:

        transform .30s,

        box-shadow .30s;

}

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

.btn span{

    position:relative;

    z-index:5;

}

/*=========================================================
  SHINE EFFECT
=========================================================*/

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transform:skewX(-20deg);

    animation:shine 3.5s infinite;

}

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

.btn::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:60px;

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

}

/*=========================================================
  HOVER
=========================================================*/

.btn:hover{

    transform:

        translateY(-4px)

        scale(1.03);

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.60),

        0 15px 40px rgba(255,200,40,.45),

        0 0 80px rgba(255,210,80,.28);

}

/*=========================================================
  ACTIVE
=========================================================*/

.btn:active{

    transform:

        scale(.98);

}

/*=========================================================
  RIPPLE
=========================================================*/

.ripple{

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

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

    transform:

    translate(-50%,-50%)

    scale(0);

    animation:ripple .7s ease-out;

}

@keyframes ripple{

to{

transform:

translate(-50%,-50%)

scale(18);

opacity:0;

}

}

/*=========================================================
  PANEL FLOAT
=========================================================*/

.glass{

    animation:

        panelIn .9s ease,

        floating 6s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

/*=========================================================
  PANEL FADE
=========================================================*/

@keyframes panelIn{

from{

opacity:0;

transform:

translateY(45px)

scale(.92);

}

to{

opacity:1;

transform:none;

}

}

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

@keyframes shine{

0%{

left:-120%;

}

30%{

left:150%;

}

100%{

left:150%;

}

}

/*=========================================================
  FADE OUT
=========================================================*/

body{

    transition:

    opacity .45s;

}

.fade-out{

    opacity:0;

}

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

@media(max-width:768px){

.btn{

    width:100%;

    height:60px;

    font-size:18px;

    letter-spacing:1px;

}

}

/*=========================================================
  PREMIUM EFFECTS
=========================================================*/

/* Ambient Glow */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:3;

    background:
    radial-gradient(circle at 50% 20%,
    rgba(255,70,20,.10),
    transparent 40%);

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

}

@keyframes ambientGlow{

0%,100%{

opacity:.45;

}

50%{

opacity:.8;

}

}

/*=========================================================
  LIGHTNING FX
=========================================================*/

#lightning{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:30;

    opacity:0;

    background:
        radial-gradient(circle at center,
        rgba(255,255,255,.95),
        transparent 70%);

}

#lightning.flash1{

    animation:flash1 .22s;

}

#lightning.flash2{

    animation:flash2 .35s;

}

@keyframes flash1{

0%{opacity:0;}

20%{opacity:.55;}

35%{opacity:.10;}

60%{opacity:.40;}

100%{opacity:0;}

}

@keyframes flash2{

0%{opacity:0;}

10%{opacity:.75;}

20%{opacity:.15;}

40%{opacity:.55;}

60%{opacity:.10;}

100%{opacity:0;}

}

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

#bg{

    animation:bgZoom 40s linear infinite alternate;

}

@keyframes bgZoom{

from{

transform:scale(1.05);

}

to{

transform:scale(1.12);

}

}

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

.glass h1{

    animation:titleGlow 4s ease-in-out infinite;

}

@keyframes titleGlow{

0%,100%{

text-shadow:

0 0 15px rgba(255,255,255,.10);

}

50%{

text-shadow:

0 0 28px rgba(255,210,120,.30);

}

}

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

.btn{

    animation:buttonPulse 4s ease infinite;

}

@keyframes buttonPulse{

0%,100%{

box-shadow:

0 10px 35px rgba(255,180,40,.25),

0 0 45px rgba(255,180,0,.15);

}

50%{

box-shadow:

0 16px 45px rgba(255,200,40,.45),

0 0 80px rgba(255,220,100,.30);

}

}

/*=========================================================
  SMOOTH TEXT
=========================================================*/

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

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

@media (max-width:768px){

body{

overflow:hidden;

}

.glass{

width:92%;

padding:34px 24px;

border-radius:26px;

}

.glass h1{

font-size:31px;

}

.btn{

height:58px;

font-size:18px;

}

.mouse-light{

display:none;

}

#noise{

opacity:.02;

}

}

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

#lightningCanvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:26;

}

/*=========================================================
  LARGE MONITOR
=========================================================*/

@media (min-width:1800px){

.glass{

transform:scale(1.08);

}

}

/*=========================================================
  REDUCE MOTION
=========================================================*/

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

*{

animation:none!important;

transition:none!important;

}

}
.shake{

    animation:shake .25s;

}

@keyframes shake{

0%{transform:translate(0);}
20%{transform:translate(-2px,1px);}
40%{transform:translate(2px,-1px);}
60%{transform:translate(-1px,2px);}
80%{transform:translate(2px,1px);}
100%{transform:translate(0);}

}