:root{
  --bg: url("1.png");
  --ink: rgba(244, 246, 255, 0.96);
  --hot: rgba(255, 70, 90, 0.95);
  --cold: rgba(130, 180, 255, 0.95);
  --shadow: rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  overflow:hidden;
  font-family: system-ui, Arial, sans-serif;
  background:
    linear-gradient(120deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2)),
    var(--bg) center/cover no-repeat fixed;
  color:var(--ink);
}

#fx{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.overlay{
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(130,180,255,0.15), transparent),
    radial-gradient(900px 600px at 80% 90%, rgba(255,70,90,0.15), transparent),
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.65));
  animation: drift 10s ease-in-out infinite;
}

@keyframes drift{
  50%{ transform: translate(-1%,1%); }
}

.stage{
  height:100%;
  display:grid;
  place-items:center;
}

.badge{
  position:absolute;
  top:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(0,0,0,0.4);
}

.badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--hot);
  animation:pulse 1.2s infinite;
}

@keyframes pulse{
  50%{ transform:scale(1.3); }
}

.title{
  font-size:clamp(40px,6vw,96px);
  font-weight:900;
  padding:28px 40px;
  border-radius:28px;
  background:rgba(0,0,0,0.45);
  box-shadow:0 30px 80px var(--shadow);
  animation: rage 0.45s infinite;
}

@keyframes rage{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(6px,-4px) rotate(0.8deg); }
  50%{ transform:translate(-6px,4px) rotate(-0.8deg); }
  75%{ transform:translate(4px,-2px) rotate(0.4deg); }
  100%{ transform:translate(0,0) rotate(0); }
}

#type{
  background:linear-gradient(90deg,var(--hot),#fff,var(--cold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.caret{
  animation:blink 0.8s steps(2,end) infinite;
}

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

.credit{
  position:fixed;
  bottom:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.55);
  pointer-events:auto;
}

.credit a{
  color:rgba(255,255,255,0.75);
  text-decoration:none;
}

.credit a:hover{
  text-decoration:underline;
}