/*==================================================
  WAYANGPLAY PREMIUM LANDING PAGE
  Version : 1.0
==================================================*/

:root{

--gold:#ffd54f;
--gold2:#ffb300;
--green:#89d329;
--green2:#58b82f;
--blue:#2d8cff;
--purple:#8c46ff;
--red:#ff3b63;

--white:#ffffff;
--text:#e6e6e6;

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

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#000;

overflow:hidden;

color:#fff;

height:100vh;

}

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

.background{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-image:url("../img/background.jpg");

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

transform:scale(1.08);

filter:blur(8px);

animation:bgMove 20s linear infinite alternate;

z-index:-5;

}

.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(

180deg,

rgba(0,0,0,.35),

rgba(0,0,0,.72)

);

z-index:-4;

}

/*==========================
PARTICLES
==========================*/

#particles{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

pointer-events:none;

overflow:hidden;

z-index:-3;

}

#particles::before{

content:"";

position:absolute;

width:3px;
height:3px;

background:#fff;

border-radius:50%;

box-shadow:

100px 100px #fff,

200px 300px rgba(255,255,255,.6),

300px 500px #fff,

450px 120px rgba(255,255,255,.7),

600px 200px #fff,

760px 450px rgba(255,255,255,.5),

900px 300px #fff,

1100px 500px rgba(255,255,255,.7),

1300px 100px #fff,

1500px 600px rgba(255,255,255,.6);

animation:particleMove 18s linear infinite;

}

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

.wrapper{

width:100%;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

position:relative;

z-index:2;

}

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

.card{

width:470px;

max-width:100%;

padding:42px;

border-radius:30px;

background:rgba(18,18,18,.65);

backdrop-filter:blur(22px);

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

box-shadow:

0 25px 60px rgba(0,0,0,.6),

0 0 60px rgba(255,215,0,.15);

text-align:center;

animation:fadeUp .8s ease;

}

/*==========================
LOGO
==========================*/

.logo{

width:190px;

display:block;

margin:auto;

margin-bottom:20px;

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

filter:drop-shadow(0 0 20px rgba(255,215,0,.35));

}

.card h1{

font-size:40px;

font-weight:800;

letter-spacing:3px;

color:var(--gold);

text-shadow:

0 0 20px rgba(255,210,60,.5);

}

.subtitle{

margin-top:8px;

margin-bottom:25px;

color:#ddd;

font-size:15px;

font-weight:400;

}

/*==========================
COUNTER
==========================*/

.stats{

display:flex;

justify-content:space-between;

margin-bottom:30px;

gap:10px;

}

.stats div{

flex:1;

padding:14px;

border-radius:16px;

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

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

}

.stats span{

display:block;

font-size:22px;

font-weight:700;

color:#fff;

}

.stats small{

display:block;

margin-top:5px;

font-size:11px;

letter-spacing:1px;

color:#bbb;

text-transform:uppercase;

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

.btn{

display:block;

width:100%;

padding:16px;

margin-top:15px;

border-radius:14px;

font-size:15px;

font-weight:700;

text-decoration:none;

color:#fff;

position:relative;

overflow:hidden;

transition:.35s;

letter-spacing:.5px;

box-shadow:

0 12px 25px rgba(0,0,0,.35);

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-130%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn:hover::before{

left:150%;

}

.btn:hover{

transform:

translateY(-4px)

scale(1.02);

box-shadow:

0 18px 35px rgba(0,0,0,.45);

}

.green{

background:

linear-gradient(

90deg,

#9ACD32,

#4CAF50

);

}

.lime{

background:

linear-gradient(

90deg,

#B7D61B,

#82B822

);

}

.blue{

background:

linear-gradient(

90deg,

#2088ff,

#1565d8

);

}

.purple{

background:

linear-gradient(

90deg,

#8d4dff,

#5b26d9

);

}

.red{

background:

linear-gradient(

90deg,

#ff365b,

#a9155f

);

}

/*====================================
MARQUEE
====================================*/

.marquee{

margin-top:28px;

width:100%;

overflow:hidden;

border-radius:10px;

background:

rgba(255,255,255,.05);

padding:10px 0;

border:

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

}

.marquee div{

display:inline-block;

white-space:nowrap;

padding-left:100%;

animation:marqueeMove 18s linear infinite;

font-size:13px;

color:#ffd54f;

}

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

.floating{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:28px;

text-decoration:none;

background:

linear-gradient(

135deg,

#ffb300,

#ff5722

);

color:#fff;

box-shadow:

0 0 30px rgba(255,170,0,.45);

z-index:999;

transition:.3s;

}

.floating:hover{

transform:

scale(1.12)

rotate(8deg);

}

/*====================================
LOADING
====================================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

transition:.6s;

}

.loader-logo{

text-align:center;

}

.loader-logo img{

width:150px;

margin-bottom:20px;

animation:floating 2.8s infinite;

}

.loader-logo h2{

color:#ffd54f;

letter-spacing:2px;

margin-bottom:8px;

}

.loader-logo span{

color:#aaa;

font-size:14px;

}

/*====================================
COPYRIGHT
====================================*/

.copyright{

margin-top:25px;

font-size:13px;

color:#bfbfbf;

opacity:.75;

}
/*==================================
ANIMATION
==================================*/

@keyframes floating{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

@keyframes fadeUp{

0%{

opacity:0;

transform:
translateY(40px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes bgMove{

0%{

transform:
scale(1.08);

}

100%{

transform:
scale(1.18);

}

}

@keyframes marqueeMove{

0%{

transform:
translateX(0);

}

100%{

transform:
translateX(-100%);

}

}

@keyframes particleMove{

0%{

transform:
translateY(0px);

opacity:.3;

}

50%{

opacity:1;

}

100%{

transform:
translateY(-900px);

opacity:0;

}

}

/*==================================
SCROLLBAR
==================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#444;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#111;

}

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

@media(max-width:991px){

.card{

width:430px;

padding:35px;

}

.logo{

width:170px;

}

.card h1{

font-size:34px;

}

.stats span{

font-size:20px;

}

}

@media(max-width:768px){

body{

overflow:auto;

}

.wrapper{

padding:20px;

}

.card{

width:100%;

padding:28px;

border-radius:22px;

}

.logo{

width:145px;

}

.card h1{

font-size:30px;

}

.subtitle{

font-size:14px;

}

.stats{

flex-direction:column;

gap:12px;

}

.stats div{

padding:12px;

}

.btn{

font-size:14px;

padding:14px;

}

.floating{

width:58px;

height:58px;

font-size:24px;

right:18px;

bottom:18px;

}

.loader-logo img{

width:120px;

}

}

@media(max-width:480px){

.card{

padding:22px;

}

.logo{

width:125px;

}

.card h1{

font-size:26px;

letter-spacing:1px;

}

.subtitle{

font-size:13px;

}

.stats span{

font-size:18px;

}

.stats small{

font-size:10px;

}

.btn{

padding:13px;

font-size:13px;

}

.marquee{

font-size:12px;

}

.copyright{

font-size:12px;

}

}
.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

animation:ripple .6s linear;

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

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}