/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  --black: #050505;
  --white: #f2f2ee;
  --grey: #8a8a86;
  --grey-bright: rgba(242,242,238,0.62);
  --grey-dark: #3a3a38;
  --grey-line: rgba(242,242,238,0.16);

  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --header-h: 72px;
  --hero-logo-max: 560px;
  --header-logo-width: 160px;
}

* { box-sizing: border-box; }

@font-face {
  font-family: 'MatrixType';
  src: url('assets/fonts/MatrixType-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'MatrixType';
  src: url('assets/fonts/MatrixType-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Applied only during the scroll-lock intro's captured-input phase (see
   setupLogoFly in script.js) — makes the page briefly non-scrollable so
   captured wheel/touch input can drive the logo's shrink instead. */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   FIXED HEADER + FLYING LOGO
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 400;
  background: rgba(5,5,5, var(--header-bg-opacity, 0));
  pointer-events: none;
}

.header-logo-slot {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--header-logo-width);
  height: 1px;
}

.logo-fly {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(72vw, var(--hero-logo-max));
  transform: translate(-50%, -50%);
  z-index: 500;
  will-change: transform;
  cursor: pointer;
  transition: opacity 45ms ease, filter 150ms ease;
  /* Subtle, muted greenish-blue glow — two soft layers (tight + wide)
     for a gentle falloff rather than a hard-edged halo. */
  filter: drop-shadow(0 0 6px rgba(81, 163, 201, 0.45)) drop-shadow(0 0 19px rgba(81, 163, 201, 0.22));
}
/* filter, not opacity — opacity is already driven by the flicker effect
   in script.js, and inline styles would otherwise fight a CSS opacity
   rule here. filter composes independently, no conflict. Includes the
   same glow as above since :hover fully replaces (not adds to) filter —
   omitting it here would make the glow vanish on hover. */
.logo-fly:hover {
  filter: brightness(0.8) drop-shadow(0 0 6px rgba(81, 163, 201, 0.45)) drop-shadow(0 0 19px rgba(81, 163, 201, 0.22));
}

.hero-logo-slot {
  visibility: hidden;
  width: min(72vw, var(--hero-logo-max));
  height: auto;
  display: block;
}

/* Wide desktop monitors only — MacBooks and typical laptop screens
   already hit the 760px cap above and are untouched here. Past this
   point the logo kept getting proportionally smaller on bigger
   displays, so let it keep growing instead. */
@media (min-width: 1800px) {
  .hero-logo-slot,
  .logo-fly {
    width: min(50vw, 1100px);
  }
}
@media (min-width: 2400px) {
  .hero-logo-slot,
  .logo-fly {
    width: min(46vw, 1400px);
  }
}

/* ==========================================================================
   SECTIONS — everything stays on black
   ========================================================================== */
.section { padding: clamp(4rem, 10vw, 7rem) var(--gap); }

#tour {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(3.25rem, 7vw, 4.75rem);
}
#tour::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--tour-bg-image, url("assets/tour-bg.jpg"));
  background-size: cover;
  background-position: var(--tour-bg-position, center 38%);
  filter: brightness(0.3);
  transform: scale(1.12); /* slightly cropped in beyond the natural cover fit */
}
#tour .section-inner {
  position: relative;
  z-index: 1;
}
.tour-bg-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #949490;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease;
}
.tour-bg-arrow:hover { background: rgba(0, 0, 0, 0.65); }
.tour-bg-arrow--prev { left: 1rem; }
.tour-bg-arrow--next { right: 1rem; }
@media (max-width: 640px) {
  .tour-bg-arrow {
    width: 26px; height: 26px; font-size: 1rem;
    top: auto;
    bottom: 1rem;
    transform: none;
  }
  .tour-bg-arrow--prev { left: 0.5rem; }
  .tour-bg-arrow--next { right: 0.5rem; }
}

#contact {
  padding-top: clamp(2.25rem, 5.5vw, 3.25rem);
}

#releases {
  min-height: 620px;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
  background-color: #e1e1e0;
  background-image: url("assets/releases-bg.jpg");
  background-size: cover;
  background-position: 30% 42%;
}
#releases .section-heading {
  color: #840000;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 641px) {
  #releases {
    padding-top: clamp(1.5rem, 4vw, 2.75rem);
  }
}
#releases .release-grid {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.section-inner { max-width: 780px; margin: 0 auto; }
.section-inner--narrow { max-width: 520px; }

.section-heading {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: var(--hero-vh, 100svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--black);
  padding: var(--gap);
  text-align: center;
  overflow: hidden;
}

.hero-bg-video,
.hero-bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 3500ms ease;
}
.hero-bg-video.is-visible,
.hero-bg-poster.is-visible {
  opacity: 1;
}
.hero-bg-video { object-fit: cover; }
.hero-bg-poster {
  background-image: url("assets/hero-bg-poster.jpg");
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(5,5,5,0.25) 0%, rgba(5,5,5,0.55) 55%, rgba(5,5,5,0.92) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero-content-wrap.is-visible {
  opacity: 1;
}

.social-row {
  position: absolute;
  z-index: 2;
  bottom: clamp(4.5rem, 10vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1rem;
}

.social-row a, .footer-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white);
  transition: opacity 150ms ease, transform 150ms ease;
  text-decoration: none;
}
.social-row a:hover, .footer-social-row a:hover { opacity: 0.65; transform: translateY(-2px); }
.social-row a svg, .footer-social-row a svg { width: 21px; height: 21px; display: block; }

.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.5rem, 4vh, 2.25rem);
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  color: var(--white);
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 32px;
  background: var(--grey-line);
  position: relative;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  90% { opacity: 0; }
  100% { top: 26px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span::after { animation: none; opacity: 1; top: 26px; }
}

@media (max-width: 640px) {
  #releases {
    min-height: 0;
    background-position: 46% center;
    padding-top: 1.2rem;
    padding-bottom: 1.5rem;
  }
  #releases .release-grid {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-logo-slot,
  .logo-fly {
    width: min(78vw, var(--hero-logo-max));
  }

  .social-row {
    /* top: 57% puts this just under the (now bigger) mobile logo, which
       sits vertically centered at 50%. Nudge this % up/down to taste. */
    bottom: auto;
    top: 57%;
    gap: 0.55rem;
    flex-wrap: nowrap;
  }
  .social-row a {
    width: 26px;
    height: 26px;
  }
  .social-row a svg {
    width: 14px;
    height: 14px;
  }

  .footer-social-row {
    margin-top: 1.6rem;
  }
  .footer-social-row a {
    width: 26px;
    height: 26px;
  }
  .footer-social-row a svg {
    width: 14px;
    height: 14px;
  }

  /* The fixed header bar has a hard-edged bottom on desktop, which reads
     fine there — on a small screen, scrolling content visibly passes
     behind that flat edge and it shows as an abrupt seam. Fading the
     bottom of the bar into transparency instead removes that edge. */
  .site-header {
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, var(--header-bg-opacity, 0)) 0%,
      rgba(5, 5, 5, var(--header-bg-opacity, 0)) 55%,
      rgba(5, 5, 5, 0) 100%
    );
  }
}

/* ==========================================================================
   TOUR DATES
   ========================================================================== */
.tour-list { list-style: none; margin: 0; padding: 0; }

.tour-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0.9rem;
  margin: 0 -0.9rem;
  background-color: rgba(0, 0, 0, 0.62);
  border-bottom: 1px solid var(--grey-line);
  border-radius: 4px;
  transition: background-color 200ms ease;
}
.tour-row:first-child { border-top: 1px solid var(--grey-line); }
.tour-row:hover { background-color: rgba(242, 242, 238, 0.035); }

.tour-date {
  font-variant-numeric: tabular-nums;
  font-family: var(--font);
  font-weight: 700;
  color: #949490;
  position: relative;
  display: inline-block;
  transition: transform 220ms ease;
}
.tour-date::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 3px;
  height: 60%;
  background: var(--grey-line);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 220ms ease;
}
.tour-row:hover .tour-date { transform: translateX(8px); }
.tour-row:hover .tour-date::before { opacity: 1; }
.tour-place strong { display: block; font-weight: 700; }
.tour-place span { color: #949490; font-size: 0.9rem; }

.tour-ticket {
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.tour-ticket--pending {
  color: var(--grey);
  font-weight: 400;
  border-bottom: none;
}

.empty-state {
  color: var(--grey);
  padding: 1.5rem 0;
  border-top: 1px solid var(--grey-line);
}

@media (max-width: 560px) {
  .tour-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .tour-ticket { justify-self: start; }
}

/* ==========================================================================
   RELEASES
   ========================================================================== */
.spotify-embed { line-height: 0; }

.release-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(0.6rem, 3vw, 1.5rem);
  row-gap: clamp(0.6rem, 3vw, 1.5rem);
}
.release-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.release-tile-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111;
  border-radius: 6px;
  display: block;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), 0 0 0 1.6px rgba(255, 255, 255, 0.12);
  transition: filter 150ms ease;
}
.release-tile:hover .release-tile-art { filter: brightness(0.75); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-footer {
  margin-top: 1.75rem;
  text-align: center;
}
#contact .contact-footer {
  margin-top: 1.1rem;
}
#contact .contact-footer-label {
  font-size: 0.8rem;
}
#contact .contact-footer-email {
  font-size: 1.1rem;
}
@media (max-width: 640px) {
  .contact-footer { margin-top: 0.9rem; }
}
.contact-footer-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(242, 242, 238, 0.75);
  margin-bottom: 0.4rem;
}
.contact-footer-email {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 150ms ease;
}
.contact-footer-email--second {
  display: block;
  margin-top: 0.35rem;
}
.contact-footer-email:hover { filter: brightness(0.8); }

.footer-social-row {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.25rem;
}

.footer-bio-link {
  display: block;
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(160, 160, 156, 0.55);
  text-decoration: underline;
  transition: color 150ms ease;
}
.footer-bio-link:hover { color: var(--white); }
.footer-copyright {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--grey-dark);
}

.field { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; color: var(--grey); }
@media (max-width: 640px) {
  .field { margin-bottom: 0.75rem; }
}

.field input, .field textarea {
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--grey-line);
  background: transparent;
  color: var(--white);
  border-radius: 4px;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--white);
  outline-offset: 1px;
}

.hp-field { position: absolute; left: -9999px; }

.submit-btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.submit-btn:hover { opacity: 0.85; }
.submit-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.form-status { min-height: 1.2rem; margin-top: 0.75rem; font-size: 0.9rem; }
.form-status.ok { color: #4fd177; }
.form-status.err { color: #ff6b60; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ==========================================================================
   LOADING SCREEN
   ========================================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 650ms ease;
}
.loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-video {
  width: min(45vw, 220px);
  height: auto;
  display: block;
}

/* ==========================================================================
   LATEST RELEASE MARQUEE BAR
   ========================================================================== */
.release-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  background: #0047ff; /* perfect blue */
  overflow: hidden;
}
.release-bar-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.release-bar-track-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: release-marquee 20s linear infinite;
}
.release-bar-track-inner:has(.release-bar-text:hover) {
  animation-play-state: paused;
}
@keyframes release-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--marquee-copies, 2))); } /* however many copies JS actually built, so the loop stays seamless regardless of count */
}
.release-bar-text {
  font-family: 'MatrixType', monospace;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--white);
  padding-right: 15rem;
}
.release-bar-text a {
  color: var(--white);
}
@media (max-width: 640px) {
  .release-bar { height: 54px; }
  .release-bar-text { font-size: 0.85rem; padding-right: 10rem; }
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-page { background: var(--black); }

.about-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 5rem) var(--gap);
  background-image: url("assets/about-bg.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.about-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.8) 100%);
}
.about-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-back { display: inline-block; margin-bottom: clamp(2rem, 5vw, 3rem); }
.about-logo { width: min(50vw, 260px); height: auto; display: block; }

.about-photo-link {
  display: block;
  width: min(100%, 430px);
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  transition: filter 150ms ease;
}
.about-photo-link:hover { filter: brightness(0.85); }
.about-photo {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  display: block;
}

.about-bio {
  width: 100%;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.about-contact-footer {
  margin-top: 0;
  margin-bottom: clamp(2rem, 5vw, 2.5rem);
}
.about-contact-footer .contact-footer-label { font-size: 0.9rem; }
.about-contact-footer .contact-footer-email { font-size: 1.3rem; }

.about-social-row {
  position: static;
  transform: none;
  padding: 0;
}

.about-videos { padding: clamp(3rem, 7vw, 5rem) var(--gap); }
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem);
}
.video-tile { display: block; color: inherit; text-decoration: none; }
.video-tile-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
  border-radius: 6px;
  display: block;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: filter 150ms ease;
}
.video-tile:hover .video-tile-thumb { filter: brightness(0.8); }
.video-tile-title {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--grey);
  line-height: 1.3;
}
.video-grid-fallback {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--grey);
  text-decoration: underline;
  font-size: 0.95rem;
}
.video-grid-fallback:hover { color: var(--white); }

@media (max-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .about-bio { font-size: 0.92rem; }
  .about-overlay {
    background-image: linear-gradient(180deg, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0.9) 100%);
  }
  .about-photo-link { margin-bottom: 1.1rem; width: min(100%, 340px); }
  .about-inner { max-width: 600px; }
  .about-contact-footer { margin-top: 0.75rem; }
}