/* Custom styles for DJ Yinka press kit - port from React */

/* Fonts (Anton, Manrope, Oswald loaded via Google Fonts in HTML) */
body { font-family: 'Manrope', sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #FFD700; }

::selection { background: #FFD700; color: black; }

/* Marquee: infinite scroll (two identical blocks, translate by half) */
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation: marquee 25s linear infinite;
  animation: marquee 25s linear infinite;
  will-change: transform;
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  padding: 0 2rem;
  vertical-align: middle;
}
.marquee-inner span {
  margin-right: 4rem;
}
.marquee-inner span:last-child {
  margin-right: 0;
}
@-webkit-keyframes marquee {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}
.bounce-animate {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse-animate {
  animation: pulse 2s ease-in-out infinite;
}

/* Hero background */
.hero-section {
  background-image: linear-gradient(to bottom, rgba(5,5,5,0.3), rgba(5,5,5,1)), url('IMG/YINKA%20-%20HERO%20PHOTO.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .hero-section { background-attachment: scroll; }
}

/* Text stroke for headlines */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  color: transparent;
}

/* Mix cards: play button and icon */
.mix-card .play-btn {
  opacity: 0;
  transition: opacity 0.3s;
}
.mix-card:hover .play-btn {
  opacity: 1;
}
.mix-card .play-icon {
  transform: scale(0.5);
  transition: transform 0.3s;
}
.mix-card:hover .play-icon,
.mix-card.playing .play-icon {
  transform: scale(1);
}

/* Mix embed cards: SoundCloud iframe + credit */
.mix-embed-card iframe {
  display: block;
  border-radius: 4px;
}
.soundcloud-credit {
  font-size: 10px;
  color: #71717a;
  line-break: anywhere;
  word-break: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Manrope, sans-serif;
  font-weight: 100;
  margin-top: 8px;
}
.soundcloud-credit a {
  color: #71717a;
  text-decoration: none;
}
.soundcloud-credit a:hover {
  color: #facc15;
}

/* Gallery: background image positioned on face + parallax */
.gallery-bg {
  background-image: url('IMG/YINKA_AT_CHATTO.png');
  background-position: center 35%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Service cards: description on hover */
.service-card .service-desc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
}
.service-card:hover .service-desc {
  opacity: 1;
  transform: translateY(0);
}