/* styles.css */
:root{
  --bg:#000;
  --matrix-green: #33ff6b;
  --dim-green: rgba(51,255,107,0.15);
  --glass: rgba(0,0,0,0.35);
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  overflow:hidden;
  font-family: "Courier New", monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--matrix-green);
}

/* full-screen canvas */
#matrix{
  display:block;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.85));
}

/* Welcome overlay */
#welcome{
  position:fixed;
  z-index:5;
  inset:0;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:none; /* don't block clicks on canvas */
  opacity:0;
  transform:translateY(8px);
  transition:opacity 900ms cubic-bezier(.2,.9,.25,1), transform 700ms cubic-bezier(.2,.9,.25,1);
  text-align:center;
  padding:20px;
}

#welcome.show{
  opacity:1;
  transform:none;
}

#welcome h1{
  margin:0;
  font-weight:700;
  letter-spacing:4px;
  font-size:clamp(20px,6vw,56px);
  color:var(--matrix-green);
  text-shadow:
    0 0 8px rgba(51,255,107,0.15),
    0 0 18px rgba(51,255,107,0.06);
  background: linear-gradient(180deg, #b7ffd1, var(--matrix-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* hint text */
#welcome .hint{
  margin:8px 0 0 0;
  font-size:13px;
  color:rgba(180,255,190,0.65);
  pointer-events:none;
}

/* floating words (spawned on mouse) */
.spawn-word{
  position:fixed;
  z-index:10;
  user-select:none;
  font-weight:700;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  white-space:nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
  animation:floatUp 900ms forwards;
}

/* ripple effect for clicks */
.ripple {
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:6;
  transform:translate(-50%,-50%) scale(0.02);
  opacity:0.65;
  animation:rippleAnim 700ms ease-out forwards;
  mix-blend-mode:screen;
}

@keyframes floatUp{
  0% { transform:translate(-50%,-50%) translateY(0) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) translateY(-80px) scale(1.05); opacity:0; }
}

@keyframes rippleAnim{
  0% { transform:translate(-50%,-50%) scale(0.02); opacity:0.7; }
  100% { transform:translate(-50%,-50%) scale(20); opacity:0; }
}

/* small credit text */
#credit{
  position:fixed;
  right:10px;
  bottom:6px;
  z-index:7;
  font-size:12px;
  color:rgba(180,255,190,0.12);
  pointer-events:none;
}