/* NOW page: hide any global menu / nav elements (must be invisible here) */
body.now-page header,
body.now-page nav,
body.now-page .menu-toggle,
body.now-page .side-menu,
body.now-page .nav-dots,
body.now-page .dots,
body.now-page .top-right,
body.now-page .language-switch,
body.now-page .lang-switch,
body.now-page .menu,
body.now-page .menu-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 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;
  /* Base image WITHOUT the original Melodic butterfly logo */
  background: url('assets/dj/into_the_sky_cover_nologo.png') center center / contain no-repeat;
  background-color: #000;
  /* Slight zoom (requested) while keeping mobile safe */
  transform: translate3d(0, 0, 0) scale(1.06);
  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: 28vh;
  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));
}

/* Ghost look (no "solid" butterfly on the page) */
.now-bfly-ghost {
  /* Signature should be clearly present (more visible than the “ghost” test) */
  opacity: 0.45;
}

/*
  The cover image already contains the full typography.
  We keep ONLY the large "NOW" overlay for coherence with the Home page.
*/
.now-overlay {
  /* Must be visible: NOW is a key signature element on this page */
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.now-brand {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  font-size: clamp(22px, 4.2vw, 52px);
  white-space: nowrap;
}

.now-rule {
  height: 1px;
  width: min(86vw, 820px);
  margin: 14px auto 18px;
  background: rgba(255,255,255,0.55);
}

.now-track {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--skyline-green, #6bd200);
  font-size: clamp(34px, 6.4vw, 84px);
  line-height: 1.05;
  margin-bottom: 10px;
}

/* NOW: same flicker as Home, but MUCH bigger + tighter tracking */
.now-now {
  position: absolute;
  left: 50%;
  /* Place NOW in the bottom black area (anchor/socle) */
  top: 86%;
  transform: translate(-50%, -50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  font-size: clamp(72px, 10vw, 168px);
  /* Slightly tighter tracking */
  letter-spacing: 0.035em;
  text-indent: 0.11em;
  line-height: 1;
  margin: 0;
  text-shadow:
    0 0 12px rgba(255,255,255,0.18),
    0 0 28px rgba(255,255,255,0.10);
  animation: nowNeonFlicker 3400ms linear infinite;
  z-index: 6;
}

.now-artist {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  font-size: clamp(18px, 3.2vw, 40px);
  white-space: nowrap;
}

.now-spacer {
  height: 160vh;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .now-bfly-wrap {
    top: 36vh;
    width: min(58vw, 360px);
  }
  .now-now {
    top: 88%;
    font-size: clamp(68px, 15vw, 150px);
  }
}