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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow-x:hidden;
background:#020617;
color:#fff;
}

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

.background{

position:fixed;
inset:0;

background:
linear-gradient(
rgba(2,6,23,.45),
rgba(2,6,23,.80)
),

url("background.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

z-index:-10;

}

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

.container{
width:100%;
max-width:520px;
padding:20px;
}

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

.logo{
display:flex;
justify-content:center;
position:relative;
margin-bottom:15px;
}

.logo-img{
width:120px;
}

/* SABETAN KILAT */

.logo::before{

content:"";

position:absolute;

width:220px;
height:14px;

top:45%;
left:-220px;

background:
linear-gradient(
90deg,
transparent,
#ffffff,
#00cfff,
#ffffff,
transparent
);

transform:rotate(-35deg);

filter:
drop-shadow(0 0 10px #00cfff);

animation:
logoSlash 3s infinite;

}

@keyframes logoSlash{

0%{
left:-220px;
opacity:0;
}

30%{
opacity:1;
}

60%{
left:220px;
}

100%{
left:220px;
opacity:0;
}

}

/* ==========================
   TYPING TEXT
========================== */

.typing-box {
    text-align: center;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fffcfc;
    text-shadow:
        0 0 5px #590d0d,
        0 0 15px #00eaff,
        0 0 30px #0066ff;
}

#typing::after{
content:"|";
animation:blink .8s infinite;
}

@keyframes blink{
50%{
opacity:0;
}
}

/* ==========================
   GLASS LIGHTNING CARD
========================== */

.lightning{

position:relative;

overflow:hidden;

border-radius:30px;

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

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

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

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

}

/* REFLEKSI KACA */

.lightning::before{

content:"";

position:absolute;

top:0;
left:-150%;

width:70%;
height:100%;

background:

linear-gradient(
115deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transform:skewX(-25deg);

animation:
glassReflection 7s linear infinite;

pointer-events:none;

}

@keyframes glassReflection{

0%{
left:-150%;
}

50%{
left:150%;
}

100%{
left:150%;
}

}

/* KILAT BORDER */

.lightning::after{

content:"";

position:absolute;

inset:0;

border-radius:30px;

padding:1.5px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.95),
transparent
);

background-size:250% 100%;

animation:
lightningBorder 2.2s linear infinite;

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

pointer-events:none;

}

@keyframes lightningBorder{

0%{
background-position:-250% 0;
}

100%{
background-position:250% 0;
}

}

/* ==========================
   FOTO 1:1
========================== */

.photo-box{

width:100%;
aspect-ratio:1/1;

margin-bottom:20px;

padding:8px;

}

.photo-box img{

width:100%;
height:100%;

border-radius:22px;

object-fit:cover;

display:block;

}

/* ==========================
   MENU
========================== */

.menu{
display:flex;
flex-direction:column;
gap:16px;
}

.item{

display:flex;
align-items:center;
justify-content:space-between;

padding:20px;

}

.item h3{
font-size:18px;
margin-bottom:4px;
}

.item p{
font-size:13px;
opacity:.75;
}

/* ==========================
   BLUE ELECTRIC BUTTON
========================== */

.button{

position:relative;

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

overflow:hidden;

padding:13px 34px;

border-radius:50px;

text-decoration:none;

font-weight:700;
letter-spacing:.5px;

color:#fff;

background:
linear-gradient(
135deg,
#008cff,
#00cfff,
#009dff
);

background-size:300% 300%;

animation:
blueMove 4s linear infinite;

box-shadow:
0 0 12px rgba(0,170,255,.25);

transition:
all .18s ease;

cursor:pointer;

-webkit-tap-highlight-color:transparent;

}

.button span{
position:relative;
z-index:5;
}

@keyframes blueMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* KILAT BUTTON */

.button::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:70%;
height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.95),
transparent
);

transform:skewX(-25deg);

animation:
buttonLightning 2s linear infinite;

z-index:2;

}

@keyframes buttonLightning{

0%{
left:-120%;
}

45%{
left:150%;
}

100%{
left:150%;
}

}

/* RIPPLE */

.button::after{

content:"";

position:absolute;

left:50%;
top:50%;

width:20px;
height:20px;

border-radius:50%;

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

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

opacity:0;

pointer-events:none;

}

/* HOVER */

.button:hover{

transform:
translateY(-3px);

box-shadow:
0 0 18px rgba(0,190,255,.4);

}

/* TOUCH */

.button:active{

transform:
scale(.90)
translateY(2px);

box-shadow:
0 0 28px rgba(0,220,255,.7);

}

.button:active::after{

animation:
ripple .45s ease-out;

}

@keyframes ripple{

0%{

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

opacity:.8;

}

100%{

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

opacity:0;

}

}

/* ==========================
   FOOTER
========================== */

footer{
text-align:center;
margin-top:25px;
font-size:12px;
opacity:.6;
}

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

@media(max-width:480px){

.container{
padding:15px;
}

.logo-img{
width:105px;
}

.item{
padding:18px;
}

}
/* ==========================
   ULTRA SWORD SLASH LOGO
========================== */

.logo{

position:relative;

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

margin-bottom:20px;

overflow:hidden;

}

.logo-img{

width:120px;

position:relative;

z-index:5;

filter:
drop-shadow(0 0 8px rgba(255,255,255,.15));

}



/* TEBASAN UTAMA */

.logo::before{

content:"";

position:absolute;

width:320px;
height:8px;

left:-350px;
top:50%;

background:

linear-gradient(
90deg,
transparent,
#ffffff,
#7fe8ff,
#ffffff,
transparent
);

border-radius:50px;

transform:
translateY(-50%)
rotate(-28deg);

box-shadow:

0 0 10px #ffffff,
0 0 25px #7fe8ff,
0 0 40px #7fe8ff;

animation:
slashMain 1.2s linear infinite;

z-index:10;

}



/* TEBASAN KEDUA */

.logo::after{

content:"";

position:absolute;

width:220px;
height:3px;

left:-280px;
top:50%;

background:

linear-gradient(
90deg,
transparent,
#00d4ff,
#ffffff,
transparent
);

border-radius:50px;

transform:
translateY(-50%)
rotate(-28deg);

box-shadow:

0 0 10px #00d4ff,
0 0 20px #00d4ff;

animation:
slashSecond 1.2s linear infinite;

z-index:9;

}



/* FLASH */

.logo .flash{

position:absolute;

width:140px;
height:140px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.6),
rgba(0,212,255,.25),
transparent 70%
);

opacity:0;

animation:
flashBurst 1.2s linear infinite;

pointer-events:none;

z-index:8;

}



/* ANIMASI */

@keyframes slashMain{

0%{

left:-350px;
opacity:0;

}

15%{

opacity:1;

}

50%{

left:50%;

}

100%{

left:130%;
opacity:0;

}

}



@keyframes slashSecond{

0%{

left:-280px;
opacity:0;

}

20%{

opacity:1;

}

55%{

left:55%;

}

100%{

left:140%;
opacity:0;

}

}



@keyframes flashBurst{

0%,20%{

opacity:0;
transform:scale(.5);

}

35%{

opacity:1;
transform:scale(1);

}

60%{

opacity:.4;
transform:scale(1.6);

}

100%{

opacity:0;
transform:scale(2);

}

}