/* KYLO Coming Soon - style.css (Part 2A)
   Base styles. Continue with Part 2B for remaining animations.
*/
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#050505;
--card:rgba(255,255,255,.06);
--border:rgba(255,255,255,.12);
--text:#fff;
--muted:#a1a1a1;
--green:#72ff56;
}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
position:relative;
}
.grid-bg{
position:fixed;inset:0;z-index:-5;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:60px 60px;
}
.noise{
position:fixed;inset:0;z-index:-4;opacity:.04;
background-image:radial-gradient(circle,#fff 1px,transparent 1px);
background-size:4px 4px;
pointer-events:none;
}
.gradient{
position:fixed;width:700px;height:700px;border-radius:50%;
filter:blur(180px);opacity:.16;z-index:-3;
}
.gradient.one{top:-250px;left:-180px;background:#72ff56}
.gradient.two{right:-220px;bottom:-220px;background:#16ff7b}
.cursor-glow{
position:fixed;width:380px;height:380px;border-radius:50%;
background:radial-gradient(circle,rgba(114,255,86,.18),transparent 70%);
pointer-events:none;transform:translate(-50%,-50%);z-index:100;
}
#loader{
position:fixed;inset:0;background:#000;display:flex;
align-items:center;justify-content:center;flex-direction:column;
gap:25px;z-index:9999;
}
.loader-ring{
width:90px;height:90px;border-radius:50%;
border:3px solid rgba(255,255,255,.08);
border-top-color:var(--green);
animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loader img{width:180px}
#loader span{color:#ccc;letter-spacing:2px}
.hero{
min-height:100vh;display:flex;align-items:center;
justify-content:center;padding:40px;
}
.glass-card{
width:min(980px,100%);
padding:70px 60px;
border-radius:34px;
background:var(--card);
border:1px solid var(--border);
backdrop-filter:blur(30px);
text-align:center;
box-shadow:0 0 60px rgba(114,255,86,.08);
}
.tag{
display:inline-flex;gap:10px;align-items:center;
padding:10px 20px;border-radius:100px;
border:1px solid rgba(114,255,86,.35);
color:var(--green);
background:rgba(114,255,86,.08);
margin-bottom:30px;
}
.logo img{
width:240px;max-width:90%;
filter:drop-shadow(0 0 20px rgba(114,255,86,.2));
margin-bottom:20px;
}
.glass-card h1{
font-size:54px;
font-weight:800;
margin-bottom:18px;
}
.glass-card p{
max-width:650px;
margin:0 auto 40px;
line-height:1.8;
color:var(--muted);
}
.mystery-container{
position:relative;
width:260px;
height:220px;
margin:20px auto 40px;
}
.mystery-glow{
position:absolute;
left:50%;bottom:20px;
transform:translateX(-50%);
width:180px;height:40px;
background:var(--green);
opacity:.25;
filter:blur(35px);
}
.cloth{
position:absolute;
left:50%;
top:8px;
transform:translateX(-50%);
width:300px;height:200px;
border-radius:14px;
background:linear-gradient(135deg,#222,#101010);
}
.mystery-box img{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);

    width:400px;

    max-width:100%;

    filter:drop-shadow(0 0 35px rgba(114,255,86,.35));


}
.mystery-container h3{
position:absolute;
bottom:-10px;
width:100%;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--green);
}
.countdown{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:25px;
}
.time-box{
padding:25px;
border-radius:22px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
.time-box h2{
font-size:54px;
color:var(--green);
}
.time-box span{
color:var(--muted);
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
}
.launch-date{
margin-top:35px;
color:var(--muted);
}
.launch-date strong{color:#fff}
.socials{
display:flex;
justify-content:center;
gap:16px;
margin-top:30px;
}
.socials a{
width:54px;height:54px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#fff;font-size:24px;text-decoration:none;
transition:.3s;
}
.socials a:hover{
background:var(--green);
color:#000;
transform:translateY(-5px);
}
.bottom-blur{
position:fixed;
bottom:-250px;left:50%;
transform:translateX(-50%);
width:900px;height:450px;
background:var(--green);
opacity:.12;
filter:blur(180px);
z-index:-2;
}
@media(max-width:768px){
.glass-card{padding:40px 24px}
.glass-card h1{font-size:38px}
.countdown{grid-template-columns:repeat(2,1fr)}
.logo img{width:180px}
}
/* KYLO style.css Part 2B - append below Part 2A */

/* Floating chips */
.floating-chips{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.chip{
position:absolute;
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
color:var(--green);
font-size:13px;
animation:float 16s ease-in-out infinite;
}
.chip:nth-child(1){top:10%;left:8%}
.chip:nth-child(2){top:22%;right:10%;animation-duration:18s}
.chip:nth-child(3){bottom:20%;left:18%;animation-duration:14s}
.chip:nth-child(4){bottom:12%;right:12%}
.chip:nth-child(5){top:8%;left:48%}
.chip:nth-child(6){bottom:8%;left:6%}
.chip:nth-child(7){top:60%;right:20%}
.chip:nth-child(8){bottom:30%;left:48%}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-18px)}
}

/* Animated border */
.glass-card{position:relative;overflow:hidden}
.glass-card::before{
content:"";
position:absolute;
inset:-1px;
padding:1px;
border-radius:34px;
background:linear-gradient(135deg,transparent,rgba(114,255,86,.55),transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
animation:borderGlow 6s linear infinite;
pointer-events:none;
}
@keyframes borderGlow{
0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}

/* Glass shine */
.glass-card::after{
content:"";
position:absolute;
top:-120%;
left:-40%;
width:40%;
height:300%;
background:linear-gradient(to right,transparent,rgba(255,255,255,.12),transparent);
transform:rotate(22deg);
animation:shine 8s linear infinite;
pointer-events:none;
}
@keyframes shine{
0%{left:-60%}
100%{left:140%}
}

/* Cloth floating */
.cloth{
animation:clothFloat 3.2s ease-in-out infinite;
box-shadow:0 20px 30px rgba(0,0,0,.45);
}
@keyframes clothFloat{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-10px)}
}

/* Box glow */
.mystery-box img{
filter:drop-shadow(0 0 24px rgba(114,255,86,.28));
animation:boxPulse 2.8s ease-in-out infinite;
}
@keyframes boxPulse{
0%,100%{transform:translateX(-50%) scale(1)}
50%{transform:translateX(-50%) scale(1.03)}
}

/* Countdown hover */
.time-box{
transition:.35s;
}
.time-box:hover{
transform:translateY(-8px);
border-color:rgba(114,255,86,.35);
box-shadow:0 0 24px rgba(114,255,86,.18);
}

/* Logo pulse */
.logo img{
transition:.35s;
animation:logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse{
0%,100%{filter:drop-shadow(0 0 18px rgba(114,255,86,.18))}
50%{filter:drop-shadow(0 0 34px rgba(114,255,86,.45))}
}

/* Social hover */
.socials a i{transition:.3s}
.socials a:hover i{transform:scale(1.15)}

/* Background title */
body::before{
content:"FASHION";
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:180px;
font-weight:900;
letter-spacing:18px;
opacity:.02;
pointer-events:none;
white-space:nowrap;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#090909}
::-webkit-scrollbar-thumb{background:#2d2d2d;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* Mobile */
@media(max-width:768px){
body::before{font-size:82px}
.chip{font-size:11px;padding:8px 14px}
.socials{gap:12px}
.socials a{width:48px;height:48px}
}