:root {
  --glitch-color-1: rgba(255,0,128,0.8);
  --glitch-color-2: rgba(0,255,200,0.8);
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family: 'Inter', sans-serif; background:#000; color:#fff; }

/* Background */
.page-bg {
  position: fixed;
  inset: 0;
  background: url('background2.png') center/cover no-repeat;
  z-index: 0;
  filter: saturate(0.9) blur(0.5px);
}

/* Stage */
.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Glitch text */
.glitch {
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 900;
  position: relative;
  color: #fff;
}

.glitch::before,
.glitch::after {
  content: "Fake Money";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
}

.glitch::before {
  color: var(--glitch-color-1);
  animation: glitch1 2.6s infinite linear;
  filter: blur(0.4px);
}
.glitch::after {
  color: var(--glitch-color-2);
  animation: glitch2 3.1s infinite linear;
  filter: blur(0.6px);
}

/* Orbit container */
.orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dollar bills */
.bill {
  --size: 150px; /* smaller */
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: calc(var(--size)*0.56);
  margin-left: calc(-1*var(--size)/2);
  margin-top: calc(-1*var(--size)/2);
  background-image: url('dollar.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: auto; /* make hover detectable */
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover animation for bills */
.bill:hover {
  transform: scale(1.3) rotate(15deg);
  filter: drop-shadow(0 10px 20px rgba(255,255,0,0.7));
  z-index: 10;
}

/* Hover effect for text */
.interactive {
  cursor:pointer;
  transition: transform 0.2s, text-shadow 0.2s;
}
.interactive:hover {
  transform: translateY(-6px);
  text-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* X logo */
.x-link {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  z-index:3;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.x-link:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 0 20px cyan);
}
.x-link img { width:100%; height:100%; object-fit:contain; }

/* Glitch animations */
@keyframes glitch1 {
  0% { transform: translate(-4px,-2px); clip-path: inset(0); opacity:.9; }
  10% { transform: translate(-8px,-4px); clip-path: inset(10% 0 60% 0); opacity:.65; }
  20% { transform: translate(-2px,0); clip-path: inset(40% 0 20% 0); opacity:.9; }
  30% { transform: translate(-6px,-1px); clip-path: inset(5% 0 80% 0); opacity:.8; }
  100% { transform: translate(-4px,-2px); clip-path: inset(0); opacity:.9; }
}
@keyframes glitch2 {
  0% { transform: translate(4px,2px); clip-path: inset(0); opacity:.9; }
  10% { transform: translate(8px,6px); clip-path: inset(60% 0 10% 0); opacity:.6; }
  20% { transform: translate(2px,0); clip-path: inset(20% 0 40% 0); opacity:.95; }
  30% { transform: translate(6px,1px); clip-path: inset(80% 0 5% 0); opacity:.8; }
  100% { transform: translate(4px,2px); clip-path: inset(0); opacity:.9; }
}