/* NOW (Phil / Into The Sky)
   - Cover as background
   - New butterfly overlay
   - Big "N O W" with Home-style flicker
   - Scroll restored (no overflow hidden)
*/

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Make sure the 3-dot menu stays above */
.menu-toggle {
  z-index: 9999;
}
.side-menu {
  z-index: 9998;
}

.now-scroll {
  position: relative;
  min-height: 260vh; /* ensures actual scroll */
}

.now-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.now-cover {
  position: absolute;
  inset: 0;
  /* CONTAIN so the cover never crops on mobile (S of SKYLINE / E of ARCHIVE stay visible) */
  background: url('assets/dj/into_the_sky_cover.png') center center / contain no-repeat;
  background-color: #000;
  transform: translate3d(0, 0, 0) scale(1);
  filter: saturate(1.02) contrast(1.02);
}

/* Dark vignette like the banner template */
.now-cover::after {
  content: '';
  position: absolute;
  inset: -5%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.70) 85%, rgba(0,0,0,0.92) 100%);
}

.now-bfly-wrap {
  position: absolute;
  left: 50%;
  /* Start centered; JS eases it into place near the top */
  top: 50vh;
  transform: translate(-50%, -50%);
  width: min(46vw, 420px);
  max-width: 72vw;
  pointer-events: none;
  z-index: 3;
}

.now-bfly {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
}

/* BIG NOW: same vibe as Home (caps + large letter-spacing) */
.now-title {
  position: absolute;
  left: 50%;
  /* Place it between the track title and the artist (like the cover layout) */
  bottom: 20vh;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  /* Slightly tighter for better readability */
  letter-spacing: 0.40em;
  text-indent: 0.40em; /* keep centered visually even with letter-spacing */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(56px, 8.5vw, 140px);
  line-height: 1;
  text-shadow:
    0 0 12px rgba(255,255,255,0.18),
    0 0 28px rgba(255,255,255,0.10);
  z-index: 4;
  pointer-events: none;
  will-change: opacity, transform;
  animation: nowNeonFlicker 20s infinite;
}

@keyframes nowNeonFlicker {
  0%, 78% { opacity: 0.88; }
  79% { opacity: 0.16; }
  79.5% { opacity: 0.88; }
  80% { opacity: 0.40; }
  80.7% { opacity: 0.88; }
  81.2% { opacity: 0.10; }
  81.6% { opacity: 0.88; }
  100% { opacity: 0.88; }
}

.now-spacer {
  height: 160vh;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .now-bfly-wrap {
    top: 50vh;
    width: min(62vw, 360px);
  }

  .now-title {
    bottom: 22vh;
    letter-spacing: 0.36em;
    text-indent: 0.36em;
  }
}