<style>
*{box-sizing:border-box}

body{
margin:0;
min-height:100vh;
overflow:hidden;
font-family:Arial,sans-serif;
background:#000;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

/* BACKGROUND */
.bg-fallback{
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.92)),
url('https://preview.redd.it/send-your-best-dayz-photos-v0-s92v0q382wke1.png?width=1920&format=png&auto=webp&s=027199700d73473d45337b2a767e8ca1aae0ebb5') center/cover no-repeat;
background-size:cover;
transform:scale(1.05);
will-change:transform;
transition:transform 0.2s ease;
z-index:0;
}

/* PARTICLES LAYER */
#particles{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}

.vignette{
position:absolute;
inset:0;
background:radial-gradient(circle at center, transparent 25%, rgba(0,0,0,1));
z-index:2;
pointer-events:none;
}

.scanlines{
position:absolute;
inset:0;
background:repeating-linear-gradient(
0deg,
rgba(255,255,255,0.02) 1px,
transparent 2px,
transparent 4px
);
opacity:.15;
z-index:3;
pointer-events:none;
}

/* LOGO (moved closer to buttons) */
.logo{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:6px; /* почти вплотную к кнопкам */
z-index:10;
}

/* ОБРЕЗКА ЛОГО */
.logo img{
width:250px;
height:100px;
animation:
  logoIn 1.5s ease forwards,
  pulseGlow 3s infinite alternate;

/* магия обрезки */
object-fit:cover;
clip-path:inset(20% 0 20% 0); /* режем верх/низ */

/* убираем лишние отступы */
margin:0;
padding:0;

opacity:0;
transform:scale(0.8);
animation:logoIn 1.5s ease forwards;

/* glow */
filter:
drop-shadow(0 0 10px rgba(255,255,255,0.2))
drop-shadow(0 0 30px rgba(0,255,200,0.25));
}
@keyframes pulseGlow{
0%{
  filter:
  drop-shadow(0 0 10px rgba(255,255,255,0.2))
  drop-shadow(0 0 20px rgba(0,255,200,0.2));
}
100%{
  filter:
  drop-shadow(0 0 20px rgba(255,255,255,0.35))
  drop-shadow(0 0 50px rgba(0,255,200,0.4));
}
}

@keyframes logoIn{
0%{
  opacity:0;
  transform:translateY(-30px) scale(0.7);
  filter:blur(10px);
}
60%{
  opacity:1;
  transform:translateY(5px) scale(1.05);
}
100%{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
}

.wrapper{
position:relative;
z-index:10;
display:flex;
gap:24px;
flex-wrap:wrap;
justify-content:center;
align-items:center;
padding:20px;
}

.panel{
width:220px;
height:240px;
background:rgba(15,15,15,0.01);
border:1px solid rgba(255,255,255,0.1);
border-radius:18px;
backdrop-filter:blur(2px);

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

cursor:pointer;
position:relative;
overflow:hidden;
transition:.25s ease;
box-shadow:0 10px 40px rgba(0,0,0,0.6);
z-index:10;
}

.panel:hover{
transform:translateY(-8px) scale(1.05);
box-shadow:0 0 35px rgba(255,255,255,0.12);
}

.panel:active{transform:scale(0.97)}

.icon{
width:46px;
height:46px;
margin-bottom:12px;
transition:.25s;
filter:grayscale(1);
opacity:.9;
object-fit:contain;
}

.panel:hover .icon{
transform:scale(1.15);
filter:grayscale(0);
opacity:1;
}

.label{
font-size:12px;
letter-spacing:3px;
color:#ccc;
}

.steam:hover{box-shadow:0 0 40px rgba(0,170,255,0.35)}
.youtube:hover{box-shadow:0 0 40px rgba(255,0,0,0.35)}
.github:hover{box-shadow:0 0 40px rgba(255,255,255,0.25)}

.panel::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.12),transparent);
transition:.6s;
}

/* INTRO SCREEN */
#intro{
  position:fixed;
  inset:0;
  background:#000;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  animation: introFade 3.5s ease forwards;
}

/* BIG CINEMATIC LOGO */
.intro-logo{
  font-size:42px;
  letter-spacing:10px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  opacity:0;
  transform:scale(0.8);
  animation:introZoom 4.5s ease forwards;
  text-shadow:
    0 0 20px rgba(0,245,255,0.4),
    0 0 40px rgba(168,85,247,0.3);
}

/* animations */
@keyframes introZoom{
  0%{opacity:0; transform:scale(0.1);}
  40%{opacity:1;}
  100%{opacity:1; transform:scale(1.1);}
}

/* @keyframes introFade{
  0%{opacity:1;}
  70%{opacity:1;}
  100%{opacity:0; visibility:hidden;}
}*/
.panel:hover::after{left:120%}

/* PARTICLES STYLE */
.particle{
position:absolute;
width:3px;
height:3px;
background:rgba(255,255,255,0.6);
border-radius:50%;
opacity:0.6;
animation:float 6s linear infinite;
}

@keyframes float{
0%{transform:translateY(0);opacity:0}
10%{opacity:0.6}
100%{transform:translateY(-120vh);opacity:0}
}

@media (max-width:768px){
.wrapper{flex-direction:column;gap:16px}
.panel{width:85vw;height:140px}
.logo{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important}
}

#sparks{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
}
</style>