/* Film Strip Component Styles */

.film-wrapper {
  display: flex;
  gap: 15px;
  filter: drop-shadow(0 0 15px #999);
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.film-strip {
  position: relative;
  width: 220px;
  height: 560px;
  overflow: hidden;
  background: #222;
  border-left: 12px solid #111;
  border-right: 12px solid #111;
  box-shadow: inset 0 0 10px #000, 0 0 20px rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.film-strip.left {
  margin-top: 100px;
}

.film-strip.right {
  margin-bottom: 50px;
}

.film-strip.reverse .reel {
  animation: scrollDown 20s linear infinite;
}

.film-strip::before,
.film-strip::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #000 0,
    #000 12px,
    #555 12px,
    #555 24px
  );
  z-index: 2;
}

.film-strip::before { left: 0; }
.film-strip::after { right: 0; }

.reel {
  display: flex;
  flex-direction: column;
  animation: scrollUp 20s linear infinite;
}

.frame {
  height: 180px;
  width: 196px;
  margin: 12px auto;
  position: relative;
  overflow: hidden;
  border: 2px solid #444;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  transition: transform 0.3s ease;
  z-index: 1;
}

.frame:hover {
  transform: scale(1.05);
  z-index: 3;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.15) contrast(1.2) saturate(1.3);
}

@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

@media (max-width: 768px) {
  .film-wrapper {
    gap: 15px;
    max-width: 500px;
  }
  .film-strip {
    height: 400px;
    width: 200px;
  }
  .frame {
    width: 176px;
    height: 170px;
  }
}

@media (max-width: 576px) {
  .film-wrapper {
    gap: 1px;
    max-width: 450px;
  }
  .film-strip {
    width: 180px;
    height: 350px;
  }
  .frame {
    width: 156px;
    height: 160px;
  }
}