/* ===== Base ===== */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Futura', sans-serif;

  background: radial-gradient(
    circle at center,
    #12001a,
    #09000f 60%,
    #020006
  );
  background-attachment: fixed;
}

/* Arcade carpet overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(circle, rgba(255,0,100,0.4) 2px, transparent 2px),
    radial-gradient(circle, rgba(0,255,200,0.4) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,0,0.4) 2px, transparent 2px);

  background-size: 120px 120px, 150px 150px, 180px 180px;
  animation: carpetMove 20s linear infinite;
  opacity: 0.35;
}

@keyframes carpetMove {
  from { background-position: 0 0, 40px 60px, -30px -50px; }
  to   { background-position: 200px 400px, 140px 260px, 130px 150px; }
}

/* ===== Navigation ===== */
#film-nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 25px 0;
  z-index: 1000;
}

.reel {
  width: 90px;
  height: 90px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/35mm_film_reel.svg/512px-35mm_film_reel.svg.png');
  background-size: cover;
  filter: drop-shadow(0 0 10px #ff0099);
  transition: transform 0.2s ease;
}

.reel:hover {
  transform: rotate(12deg) scale(1.15);
}

.reel-label {
  text-align: center;
  color: #ff66cc;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 1px;
}

/* ===== Polaroids ===== */
.polaroid {
  position: fixed;
  top: -200px;
  width: 160px;
  height: 190px;

  background-size: cover;
  background-position: center;

  border: 12px solid white;
  border-bottom: 35px solid white;

  filter: drop-shadow(0 0 8px #ff00ff);
  animation: drop 6s linear forwards;
}

@keyframes drop {
  0%   { opacity: 0; transform: translateY(-200px) rotate(var(--rot)); }
  10%  { opacity: 1; }
  80%  { transform: translateY(80vh) rotate(calc(var(--rot) * 3)); }
  100% { transform: translateY(100vh) scale(0) rotate(calc(var(--rot) * 8)); opacity: 0; }
}

/* ===== Mute button ===== */
#muteBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 20px;
}