:root {
  --wood-dark: #1f1108;
  --wood-medium: #3c2415;
  --wood-light: #704728;
  --vintage-red: #5e1916;
  --brass: #b87333;
  --brass-light: #d4a373;
  --gold: #c5a059;
  --leather: #2b1b12;
  --text-sepia: #e3d2b5;
  --bg-color: #0f0a07;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-sepia);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  background-image: url('vyshyvanka-pattern.svg');
  background-size: 80px 80px;
  background-repeat: repeat;
  z-index: -1;
  opacity: 0.8;
  filter: sepia(0.5) contrast(1.2) brightness(0.8);
}

/* Audio Visualizer CSS Fake Beat Pulse */
@keyframes beatPulse {
  0% { opacity: 0; }
  25% { opacity: 0.25; } /* Soft, gentle main swell */
  50% { opacity: 0; }
  75% { opacity: 0.1; }  /* Very subtle secondary echo */
  100% { opacity: 0; }
}

.background-overlay::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #8b1100; /* Deep, muted rusty red/amber */
  mix-blend-mode: soft-light; /* Extremely gentle integration */
  opacity: 0; /* Default invisible */
  pointer-events: none;
  transition: opacity 0.5s ease-out; 
}

.background-overlay.visualizer-active::after {
  /* Play continuous smooth rhythmic breathing pattern */
  animation: beatPulse 1.4s infinite ease-in-out;
}

/* Poster Background */
.poster-background {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  max-width: 900px;
  min-width: 400px;
  z-index: 0;
  box-shadow: 0 30px 60px rgba(0,0,0,0.9);
  border-radius: 4px;
}

.poster-background img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 2px solid #5a3a22;
  filter: sepia(0.7) contrast(1.15) brightness(0.85);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.5); /* extra vintage look */
  opacity: 0.85; /* slight blend into background */
}

/* Nails for the poster */
.nail {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #888, #333 50%, #111 90%);
  border-radius: 50%;
  box-shadow: 3px 5px 8px rgba(0,0,0,0.9), inset -1px -1px 3px rgba(0,0,0,0.8);
  z-index: 10;
}
.nail::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: #111;
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px #000;
}
.nail.top-left { top: 3%; left: 3%; }
.nail.top-right { top: 2.5%; right: 3.5%; transform: rotate(45deg); }
.nail.bottom-left { bottom: 3.5%; left: 2.5%; transform: rotate(-20deg); }
.nail.bottom-right { bottom: 3%; right: 3%; transform: rotate(70deg); }

/* Side Vintage Photos (Polaroids) */
.side-photo {
  position: fixed;
  z-index: 5;
  width: 16vw;
  max-width: 220px;
  min-width: 140px;
  padding: 6px 6px 30px 6px; /* Reduced white margins */
  background: #eaddcc; /* Aged polaroid paper color */
  background-image: linear-gradient(120deg, rgba(255,255,255,0.6), rgba(0,0,0,0.05));
  box-shadow: 4px 8px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(139, 90, 43, 0.2);
  border: 1px solid rgba(139, 90, 43, 0.4);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--leather);
  filter: sepia(0.6) contrast(1.1) brightness(0.8);
}

/* Handwritten ink captions on the bottom polaroid margin */
.photo-caption {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%); /* Made the text perfectly straight */
  width: 95%;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem; /* Adjusted for the new smaller margin */
  font-weight: 600; /* Pen ink thickness */
  color: #0d0905; /* Deep rich ink color */
  text-align: center;
  opacity: 0.95;
  text-shadow: 0px 0px 2px rgba(13, 9, 5, 0.3); /* Slight ink bleed effect */
  line-height: 1;
  pointer-events: none;
}

.side-photo.pos-1 { left: 4%; top: 22%; transform: rotate(-8deg); z-index: 6; }
.side-photo.pos-1:hover { transform: rotate(-3deg) scale(1.15); z-index: 100; }

.side-photo.pos-2 { left: 6%; bottom: 12%; transform: rotate(12deg); }
.side-photo.pos-2:hover { transform: rotate(5deg) scale(1.15); z-index: 100; }

.side-photo.pos-3 { right: 5%; top: 8%; transform: rotate(6deg); }
.side-photo.pos-3:hover { transform: rotate(2deg) scale(1.15); z-index: 100; }

.side-photo.pos-4 { right: 1%; top: 40%; transform: rotate(-5deg); }
.side-photo.pos-4:hover { transform: rotate(0deg) scale(1.15); z-index: 100; }

.side-photo.pos-5 { right: 8%; bottom: 10%; transform: rotate(9deg); }
.side-photo.pos-5:hover { transform: rotate(4deg) scale(1.15); z-index: 100; }

.side-photo.pos-6 { left: 2%; top: 50%; transform: rotate(4deg); }
.side-photo.pos-6:hover { transform: rotate(-2deg) scale(1.15); z-index: 100; }

.side-photo.pos-7 { right: 4%; top: 25%; transform: rotate(-7deg); z-index: 6; }
.side-photo.pos-7:hover { transform: rotate(-2deg) scale(1.15); z-index: 100; }

.side-photo.pos-8 { left: 7%; top: 3%; transform: rotate(5deg); z-index: 7; text-decoration: none; display: block; }
.side-photo.pos-8:hover { 
  transform: rotate(2deg) scale(1.15); 
  z-index: 100; 
  box-shadow: 0 0 35px rgba(212, 163, 115, 0.9), inset 0 0 15px rgba(184, 115, 51, 0.6) !important; /* Golden glow */
  border-color: var(--gold);
}

.reward-tag {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--vintage-red);
  color: #eaddcc;
  padding: 4px 12px;
  font-family: 'Rye', cursive;
  font-size: 1.15rem;
  letter-spacing: 1px;
  border: 1px solid #111;
  box-shadow: 2px 3px 5px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 20;
}

/* Rusty Nails for Side Photos */
.rusty-nail {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #8b3a3a, #5c2c16 50%, #1f1108 90%);
  border-radius: 50%;
  box-shadow: 
    2px 3px 5px rgba(0,0,0,0.9), 
    inset -1px -1px 3px rgba(0,0,0,0.9),
    0 0 8px rgba(139, 58, 58, 0.8); /* vivid rust bleed */
  z-index: 10;
}
.rusty-nail::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  background: #111;
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px #000;
}

.top-left-nail { top: 6px; left: 8px; }
.top-right-nail { top: 6px; right: 8px; }
.top-center-nail { top: -2px; left: 50%; transform: translateX(-50%); }

/* Steampunk Credits Banner (Old Typewriter Memos) */
.credits-banner {
  position: fixed;
  bottom: 12px;
  left: 2%; 
  width: 96%;
  padding: 15px 35px;
  background-color: #eaddcc; /* Aged paper from vintage polaroids */
  background-image: linear-gradient(120deg, rgba(255,255,255,0.4), rgba(0,0,0,0.1));
  border: 1px solid rgba(139, 90, 43, 0.6);
  box-shadow: 
    4px 10px 20px rgba(0,0,0,0.9), 
    inset 0 0 40px rgba(139, 90, 43, 0.5), /* Dirty brown vignette edges */
    inset 0 0 100px rgba(0,0,0,0.15); 
  border-radius: 2px;
  z-index: 3; /* Behind the photos (z-index: 5) */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Courier New', Courier, monospace; /* Authentic Typewriter */
  color: #1c1109; /* Faded dark ink */
  opacity: 0; /* Completely hidden easter egg */
  transition: opacity 0.6s ease; /* Smooth slow fade */
}

/* Appears only when hovered over the very bottom edge */
.credits-banner:hover {
  opacity: 0.95; 
  z-index: 100; /* Bring forward to click the link */
}

/* Nails pinning the banner to the wall */
.banner-nail {
  position: absolute;
  width: 12px;
  height: 12px;
}
.banner-nail.top-left { top: 6px; left: 12px; }
.banner-nail.top-right { top: 6px; right: 12px; }
.banner-nail.bottom-left { bottom: 6px; left: 12px; }
.banner-nail.bottom-right { bottom: 6px; right: 12px; }

.credits-block {
  flex: 1;
  text-align: left;
  line-height: 1.4;
  font-size: 1.1rem;
  /* Typewriter ink bleed effect */
  text-shadow: 0px 0px 1px rgba(28, 17, 9, 0.4); 
}

.credits-block:last-child {
  text-align: right;
}

.credits-divider {
  width: 2px;
  height: 50px;
  background: rgba(139, 90, 43, 0.4);
  margin: 0 25px;
  box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.6); 
  border-radius: 50%;
}

.credits-block strong {
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: #000; /* Darker ink for titles */
}

.credits-banner .pitch {
  font-size: 0.95rem;
  opacity: 0.85;
  font-style: normal; /* Typewriters don't do nice italics */
  display: block;
  margin-top: 4px;
}

.credits-banner a {
  color: #5e1916; /* Faded rusty blood ink for the email */
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dashed rgba(94, 25, 22, 0.5);
  transition: all 0.3s ease;
  padding-bottom: 1px;
}

.credits-banner a:hover {
  color: #000;
  border-bottom-color: #000;
}

/* Playing State for Photos */
.side-photo.playing {
  box-shadow: 0 0 40px rgba(200, 50, 50, 0.9), inset 0 0 20px rgba(139, 90, 43, 0.6) !important;
  transform: rotate(0deg) scale(1.15) !important;
  border-color: rgba(255, 100, 100, 0.8);
  z-index: 200;
}

/* Responsive */
@media (max-width: 860px) {
  .poster-background {
    width: 90vw;
  }
}

.container {
  max-width: 1000px;
  width: 100%;
  padding: 2rem;
  z-index: 1; /* Above the poster */
  position: relative;
}

/* Header & Signboard */
.hero {
  text-align: center;
  margin-bottom: 4rem;
  animation: fadeInDown 1s ease-out;
  transition: transform 0.8s cubic-bezier(0.5, -0.2, 0.2, 1.2), opacity 0.8s ease;
  transform-origin: top center;
}
.hero.off-screen {
  transform: translateY(-200%);
  opacity: 0;
}

.signboard {
  display: inline-block;
  background: transparent;
  padding: 2rem 4rem;
  border: 3px solid rgba(184, 115, 51, 0.6);
  border-radius: 4px;
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.5),
    0 10px 30px rgba(0,0,0,0.6);
  position: relative;
}

.signboard::before, .signboard::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--brass);
  border-radius: 50%;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.5), 1px 1px 2px rgba(255,255,255,0.2);
}
.signboard::before { top: 10px; left: 10px; }
.signboard::after { top: 10px; right: 10px; }

.signboard h1 {
  font-family: 'Rye', cursive;
  font-size: 4.5rem;
  color: var(--text-sepia);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0px rgba(31, 17, 8, 0.8), 5px 5px 0px rgba(94, 25, 22, 0.8);
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--brass-light);
  letter-spacing: 4px;
  font-weight: 300;
  text-transform: uppercase;
  font-family: 'Rye', cursive;
  text-shadow: 1px 1px 2px #000;
}

/* Player Section */
.player-wrapper {
  transition: transform 0.8s cubic-bezier(0.5, -0.2, 0.2, 1.2), opacity 0.8s ease;
  width: 100%;
}
.player-wrapper.off-screen {
  transform: translateY(150vh);
  opacity: 0;
}

.player-section {
  display: flex;
  gap: 4rem;
  background: transparent;
  padding: 3rem;
  border-radius: 8px;
  border: 1px solid rgba(184, 115, 51, 0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.5);
  animation: fadeInUp 1s ease-out 0.3s backwards;
  position: relative;
  overflow: hidden;
}

.vinyl-container {
  flex: 0 0 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vinyl-record {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: #111;
  background-image: 
    radial-gradient(transparent 30%, rgba(184, 115, 51, 0.1) 30%, transparent 32%),
    radial-gradient(transparent 40%, rgba(184, 115, 51, 0.1) 40%, transparent 42%),
    radial-gradient(transparent 50%, rgba(184, 115, 51, 0.1) 50%, transparent 52%),
    radial-gradient(transparent 60%, rgba(184, 115, 51, 0.1) 60%, transparent 62%),
    radial-gradient(transparent 70%, rgba(184, 115, 51, 0.1) 70%, transparent 72%);
  box-shadow: inset 0 0 20px #000, 0 10px 30px rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.vinyl-record.playing {
  animation: spin 3s linear infinite;
  box-shadow: 0 0 40px rgba(184, 115, 51, 0.3);
}

.vinyl-label {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--vintage-red);
  border: 3px solid var(--brass);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.vinyl-label::after {
  content: '';
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  border: 2px solid var(--brass-light);
}

/* Tracklist */
.tracklist {
  flex: 1;
  z-index: 3;
}

.tracklist h2 {
  font-family: 'Rye', cursive;
  font-size: 2.2rem;
  color: var(--brass-light);
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(184, 115, 51, 0.5);
  padding-bottom: 0.5rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}

.track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  background: transparent;
  border: 1px solid rgba(31, 17, 8, 0.5);
  border-left: 4px solid rgba(112, 71, 40, 0.6);
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.track:hover {
  background: rgba(184, 115, 51, 0.15);
  border-color: rgba(184, 115, 51, 0.5);
  border-left-color: var(--brass-light);
  transform: translateX(10px);
}

.track.active {
  background: rgba(94, 25, 22, 0.4);
  border-color: var(--brass);
  border-left-color: var(--vintage-red);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

.track-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.track-number {
  font-family: 'Rye', cursive;
  font-size: 1.5rem;
  color: var(--text-sepia);
  opacity: 0.5;
}

.track.active .track-number {
  color: var(--brass-light);
  opacity: 1;
}

.track-titles {
  display: flex;
  flex-direction: column;
}

.track-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-sepia);
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.track-translation {
  font-size: 0.95rem;
  color: var(--brass);
  font-style: italic;
  margin-top: 0.2rem;
}

.play-btn {
  background: rgba(43, 27, 18, 0.7);
  border: 2px solid rgba(112, 71, 40, 0.6);
  color: var(--wood-light);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.track:hover .play-btn {
  border-color: var(--brass-light);
  color: var(--brass-light);
}

.track.active .play-btn {
  background: var(--vintage-red);
  border-color: var(--brass-light);
  color: var(--text-sepia);
  box-shadow: 0 0 15px rgba(184, 115, 51, 0.4);
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Steampunk Controls */
.steampunk-controls {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: rgba(43, 27, 18, 0.8);
  padding: 15px 10px;
  border: 3px solid var(--wood-dark);
  border-radius: 40px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.9);
  z-index: 100;
  border-right: 5px solid var(--brass);
  border-left: 5px solid var(--brass);
}

.control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--leather);
  border: 3px solid var(--wood-medium);
  color: var(--wood-light);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.8), inset 0 0 5px rgba(0,0,0,0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-btn.active {
  background: var(--vintage-red);
  border-color: var(--brass);
  color: var(--brass-light);
  box-shadow: 0 2px 5px rgba(0,0,0,0.8), inset 0 0 15px rgba(184, 115, 51, 0.5);
  transform: translateY(2px);
}

.control-btn:hover {
  border-color: var(--brass-light);
  color: var(--text-sepia);
}

/* Responsive */
@media (max-width: 860px) {
  .player-section {
    flex-direction: column;
    align-items: center;
  }
  
  .poster-background {
    width: 90vw;
  }
  
  .vinyl-record {
    width: 240px;
    height: 240px;
  }
  
  .signboard h1 {
    font-size: 2.5rem;
  }
}