/* Redeploy Band — Custom styles beyond Tailwind CDN
   Dark, gritty, high-impact aesthetic inspired by Linkin Park + supplied assets.
*/

:root {
  --accent: #ff3d00;
  --accent-blue: #00b4ff;
}

/* Base tweaks */
html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "tnum";
}

/* Nav active state */
.nav-link.active,
.mobile-nav-link.active {
  color: #fff;
  position: relative;
}
.nav-link.active:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #ff3d00, transparent);
}

/* Hero subtle effects */
#hero {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(10,10,10,0.65)),
    radial-gradient(circle at 50% 30%, rgba(255,61,0,0.06) 0%, transparent 60%);
}

/* Poster & image polish */
#crew > .mb-12 img {
  image-rendering: crisp-edges;
}

/* Member cards + poster-style ribbons */
.crew-card {
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.2s;
  position: relative;
}
.crew-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.crew-card .role-ribbon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 2px 12px 2px 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.6);
  z-index: 2;
  white-space: nowrap;
  transform: skewX(-10deg);
}
.crew-card .role-ribbon span {
  display: inline-block;
  transform: skewX(10deg);
}

/* Color variants for ribbons (pulled from poster) */
.ribbon-lead { background: #ff3d00; color: #111; }
.ribbon-vocal { background: #facc15; color: #111; }
.ribbon-bass { background: #0ea5e9; color: #111; }
.ribbon-keys { background: #a78bfa; color: #111; }
.ribbon-drums { background: #fb7185; color: #111; }
.ribbon-guitar { background: #f97316; color: #111; }

/* Track rows */
.track-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.1s;
  background: transparent;
}
.track-row:hover {
  background: rgba(255,255,255,0.035);
}
.track-row.playing {
  background: rgba(255, 61, 0, 0.08);
  border-left: 3px solid #ff3d00;
}
.track-row .play-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9999px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.track-row:hover .play-btn {
  border-color: #ff3d00;
  color: #ff3d00;
}
.track-row.playing .play-btn {
  background: #ff3d00;
  color: #111;
  border-color: #ff3d00;
}

/* Player bar */
#player-bar {
  box-shadow: 0 -8px 20px -10px rgb(0 0 0 / 0.6);
}
#player-progress-container {
  height: 3px;
  position: relative;
}
#player-progress-bar {
  height: 3px;
  background: #ff3d00;
  transition: width 80ms linear;
}
#player-progress-handle {
  width: 11px;
  height: 11px;
  background: #fff;
  border: 2px solid #ff3d00;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#player-progress-container:hover #player-progress-handle {
  display: block !important;
}

/* Modals */
#modal {
  animation: modalFade 120ms ease forwards;
}
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
#modal > div {
  animation: modalPop 160ms cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes modalPop {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Grunge / noise texture utility (subtle) */
.grunge {
  background-image: 
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%223%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%22 height=%22100%22 filter=%22url(%23n)%22 opacity=%220.06%"/></svg>');
  background-size: 140px;
  pointer-events: none;
}

/* Tour date rows */
.tour-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 16px 22px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color .15s, transform .15s;
}
.tour-row:hover {
  border-color: rgba(255,61,0,0.5);
  transform: translateX(2px);
}
.tour-date {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: #ff3d00;
  font-weight: 600;
}
.tour-venue {
  font-size: 15px;
  line-height: 1.15;
}
.tour-support {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.5px;
}

/* Buttons with arrow motif */
.cta-arrow {
  transition: transform 0.2s;
}
.group:hover .cta-arrow {
  transform: translateX(3px);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  border: 1px solid #ff3d00;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 1.5px;
  z-index: 80;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

/* Accessibility + focus */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #ff3d00;
  outline-offset: 2px;
}

/* Mobile specific */
@media (max-width: 640px) {
  .tour-row {
    grid-template-columns: 92px 1fr;
    gap: 0.5rem 1rem;
  }
  .tour-row > *:last-child {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Hero logo cycle: video + png with fade */
.logo-container {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.logo-container video {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 2s ease;
}

.logo-container #hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 2s ease;
}