@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #000;
  --border: rgba(255, 255, 255, 0.08);
  --text: #fff;
  --text-dim: rgba(255, 255, 255, 0.35);
  --text-mid: rgba(255, 255, 255, 0.6);
  --header-h: 64px;
  --gap: 2px;
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── START GATE ─────────────────────────────────────── */

/* Shown only on touch devices — JS adds .visible. Fades out on tap, mirroring
   the roster site's splash exit. */
#start-gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 1.4s ease;
}

#start-gate.visible { display: flex; }
#start-gate.exiting { opacity: 0; }

#tap-start {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  padding: 14px 0;
  /* Trailing letter-space again — pull it back so the label reads centred. */
  margin-right: -0.34em;
  animation: tap-btn-in 0.9s ease both;
  -webkit-tap-highlight-color: transparent;
}

#tap-start:active {
  color: rgba(255, 255, 255, 0.6);
}

@keyframes tap-btn-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #tap-start  { animation: none; }
  #start-gate { transition: none; }
}

/* ── HEADER ─────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 36px 22px;
  background: transparent;
  pointer-events: none;
}

/* The artist name is the masthead — same restrained treatment as the old nav
   tab (Inter 300, uppercase, wide tracking) scaled up, with no rule under it. */
.site-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  /* Tracking is applied to the right of every glyph, including the last one.
     Negative margin removes that trailing gap from the box so the centring
     container sees the true glyph width and the title sits optically centred. */
  margin-right: -0.36em;
  color: var(--text);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* ── SITE MAIN ──────────────────────────────────────── */

.site-main {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.site-main.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── SECTIONS ───────────────────────────────────────── */

.roster-section {
  display: none;
  position: absolute;
  inset: 0;
}

.roster-section.active {
  display: block;
}

/* ── SWIPER ─────────────────────────────────────────── */

.roster-swiper {
  position: absolute;
  inset: 0;
}

.roster-swiper .swiper-slide {
  height: 100%;
}

/* Navigation arrows */
.swiper-button-prev,
.swiper-button-next {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover { color: #fff; }
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 18px; }

/* Pagination dots */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
  width: 5px;
  height: 5px;
}
.swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-pagination {
  bottom: 20px;
}

/* Hide arrows on touch devices */
@media (hover: none) {
  .swiper-button-prev,
  .swiper-button-next { display: none; }
}

/* ── ARTIST CARD ────────────────────────────────────── */

.artist-card {
  position: relative;
  width: 100%;
  height: 100%; /* must fill the swiper-slide — all children are absolute */
  overflow: hidden;
  background: #0a0a0a;
  cursor: default;
}

.artist-card:hover .card-media-wrapper video,
.artist-card:hover .card-media-wrapper img {
  filter: brightness(1.08);
}

.card-media-wrapper {
  position: absolute;
  inset: 0;
}

.card-media-wrapper video,
.card-media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

/* ── LOADING SHIMMER ────────────────────────────────── */

@keyframes card-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.artist-card.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0)    100%
  );
  background-size: 200% 100%;
  animation: card-shimmer 1.8s ease-in-out infinite;
}

/* ── CARD OVERLAY ───────────────────────────────────── */

.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
}

.overlay-zone {
  display: flex;
  align-items: center;
  transition: background 0.25s ease;
}

.zone-prev,
.zone-next {
  width: 28%;
  cursor: pointer;
}

.zone-prev {
  justify-content: flex-start;
  padding-left: 28px;
}

.zone-next {
  justify-content: flex-end;
  padding-right: 28px;
}

.zone-more {
  flex: 1;
  justify-content: center;
  cursor: default;
}

/* Only clickable when the clip actually carries a link. */
.zone-more.has-link { cursor: pointer; }
.zone-more.has-link:hover span { color: rgba(255, 255, 255, 0.8); }

.overlay-zone span {
  font-family: var(--font);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease, opacity 0.5s ease;
  pointer-events: none;
  user-select: none;
}

.hints-dismissed .overlay-zone span {
  opacity: 0;
}

.zone-prev:hover {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}
.zone-prev:hover span,
.zone-next:hover span {
  color: rgba(255, 255, 255, 0.8);
}
.zone-next:hover {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
}

@media (hover: none) and (pointer: coarse) {
  .overlay-zone span {
    color: rgba(255, 255, 255, 0.45);
  }
  .zone-prev:active {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent);
  }
  .zone-next:active {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
  }
}

/* ── CLIP PROGRESS BAR ──────────────────────────────── */

.clip-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.clip-progress-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  width: 0%;
}

/* ── EMPTY STATE ────────────────────────────────────── */

.empty-state {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.empty-state.visible { display: flex; }

/* ── MODAL ──────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  min-width: 320px;
  max-width: 520px;
  width: 90%;
  padding: 44px 48px 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.95);
}

.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  display: flex;
}

.modal-close:hover { opacity: 1; }

.modal-name {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.modal-project {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 24px;
  min-height: 1em;
}

.modal-credits {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  line-height: 1.9;
  white-space: pre-line;
  min-height: 1em;
}

@media (max-width: 640px) {
  .site-header {
    padding: 20px 20px 16px;
  }

  .site-title {
    font-size: 13px;
    letter-spacing: 0.30em;
    margin-right: -0.30em;
  }

  /* Modal */
  .modal-panel {
    width: 94%;
    padding: 36px 24px 38px;
  }
}

@media (max-width: 390px) {
  .site-title {
    font-size: 11px;
    letter-spacing: 0.24em;
    margin-right: -0.24em;
  }

  .modal-name  { font-size: 18px; }
  .modal-panel { padding: 28px 18px 30px; }
}