/* VHS Scanlines Overlay */
.vhs-overlay {
  position: relative;
}

.vhs-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 2;
}

.vhs-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(212, 168, 83, 0.05) 0%,
    transparent 30%,
    transparent 70%,
    rgba(198, 125, 58, 0.08) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Film grain on images */
.film-grain {
  position: relative;
}

.film-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Polaroid frame */
.polaroid {
  background: #f8f4eb;
  padding: 12px 12px 48px 12px;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.15),
    0 8px 24px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(0,0,0,0.05);
  transform: rotate(-0.5deg);
  transition: transform 0.3s ease;
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.01);
}

.polaroid-mini {
  background: #f8f4eb;
  padding: 4px 4px 20px 4px;
  box-shadow: 
    0 1px 4px rgba(0,0,0,0.15),
    0 4px 12px rgba(0,0,0,0.08);
}

/* Shutter button */
.shutter-btn {
  position: relative;
  background: radial-gradient(circle at 40% 35%, #e85d4a, #c0392b 60%, #962d22);
  border: 4px solid #888;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,255,255,0.2),
    0 0 0 3px #666,
    0 0 0 6px #444;
  transition: all 0.15s ease;
  cursor: pointer;
}

.shutter-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    0 6px 16px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.2),
    0 0 0 3px #666,
    0 0 0 6px #444;
}

.shutter-btn:active {
  transform: scale(0.95);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 0 0 3px #666,
    0 0 0 6px #444;
}

.shutter-btn.loading {
  animation: pulse-shutter 1.5s ease-in-out infinite;
}

@keyframes pulse-shutter {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 0 3px #666, 0 0 0 6px #444; }
  50% { box-shadow: 0 4px 12px rgba(232,93,74,0.5), inset 0 2px 4px rgba(255,255,255,0.2), 0 0 0 3px #888, 0 0 0 6px #666, 0 0 20px rgba(232,93,74,0.3); }
}

/* Developing animation */
@keyframes develop {
  0% { opacity: 0; filter: sepia(1) brightness(2) blur(8px); }
  30% { opacity: 0.4; filter: sepia(0.8) brightness(1.5) blur(4px); }
  60% { opacity: 0.7; filter: sepia(0.4) brightness(1.2) blur(2px); }
  100% { opacity: 1; filter: sepia(0.15) brightness(1.02) blur(0); }
}

.developing {
  animation: develop 3s ease-out forwards;
}

/* Warm sepia filter for generated images */
.warm-photo {
  filter: sepia(0.12) saturate(1.1) brightness(1.02) contrast(1.03);
}

/* Scene card hover */
.scene-card {
  transition: all 0.25s ease;
  cursor: pointer;
}

.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.scene-card.selected {
  ring: 3px solid #D4A853;
  box-shadow: 0 0 0 3px #D4A853, 0 8px 24px rgba(0,0,0,0.2);
}

/* Ticker animation */
@keyframes ticker-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.ticker-text {
  animation: ticker-scroll 30s linear infinite;
  white-space: nowrap;
}

/* Gallery scroll */
.gallery-scroll {
  scrollbar-width: thin;
  scrollbar-color: #D4A853 #3A2E20;
}

.gallery-scroll::-webkit-scrollbar {
  height: 6px;
}

.gallery-scroll::-webkit-scrollbar-track {
  background: #3A2E20;
  border-radius: 3px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
  background: #D4A853;
  border-radius: 3px;
}

/* Lightbox */
.lightbox-overlay {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Body scrollbar */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: #3A2E20;
}

body::-webkit-scrollbar-thumb {
  background: #5B7EA1;
  border-radius: 4px;
}

/* Error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.error-shake {
  animation: shake 0.3s ease;
}