html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

/* Gibson background */
#gibson-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.7) contrast(1.1);
}

/* Joi projection container */
#joi-projection {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  width: 360px;
  aspect-ratio: 9 / 16;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  z-index: 2;

  filter:
    drop-shadow(0 0 55px rgba(0, 180, 255, 0.35))
    blur(0.4px);
}

#joi-projection.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Joi video */
#joi-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.92;

  mask-image: linear-gradient(
    to top,
    transparent 0%,
    rgba(0,0,0,0.4) 12%,
    black 25%,
    black 100%
  );

  animation: hologramShift 6s ease-in-out infinite;
}

/* Subtle hologram drift */
@keyframes hologramShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(4deg) brightness(1.05); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

/* Scanline overlay */
#joi-projection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.25;
}