@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;
}

/* ── SPLASH ─────────────────────────────────────────── */

#splash {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Phase 3 — whole splash fades out */
  transition: opacity 1.4s ease;
}

#splash.exiting {
  opacity: 0;
}

#splash-inner {
  display: flex;
  align-items: center;
  gap: 0;
  /* Master size for the whole welcome logo. Capped at 104px on wide screens
     (desktop unchanged) but scales with viewport width on narrow screens so the
     opened viewfinder frame always fits with clean side margins. */
  --sl-box: min(104px, 12vw);
  /* transform/transition injected by JS */
}

/* Animated viewfinder G — the "clean" focus-in (no HUD), plays once.
   JS scrubs the focus keyframes (below) and rotates .sl-logo for the sway. */
.sl-anim {
  position: relative;
  width: var(--sl-box);
  height: var(--sl-box);
  flex-shrink: 0;
  /* Source art is black on transparent — whiten it for the dark splash.
     Child blur (from the keyframes) composes underneath this group filter. */
  filter: brightness(0) invert(1);
}

.sl-logo {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%; /* rotation pivot for the viewfinder sway */
  will-change: transform;
}

.sl-anim img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1; /* always visible — focus is conveyed by blur, never by fading out */
  will-change: transform, filter;
}

/* Single thin G (glogo_gee.png). It focuses in with the brackets and then holds
   — no weight swap. Focus is conveyed by blur only; the glyph stays opaque. */

/* The animations are attached paused and scrubbed by JS (currentTime),
   so they define the focus pull without auto-playing. Focus is shown with a
   light blur only; the logo stays fully opaque throughout. */
.sl-logo.sl-scrub .sl-mark {
  animation: sl-focusMark 2.6s cubic-bezier(.18,.72,.16,1) both;
}
.sl-logo.sl-scrub .sl-gee {
  animation: sl-focusGee 2.6s cubic-bezier(.18,.72,.16,1) .05s both;
}

@keyframes sl-focusMark {
  0%   { transform: translate(calc(var(--sx)*7.5%),  calc(var(--sy)*7.5%))  scale(1);     filter: blur(5px); }
  38%  { transform: translate(calc(var(--sx)*3.6%),  calc(var(--sy)*3.6%))  scale(1.005); filter: blur(3px); }
  60%  { transform: translate(calc(var(--sx)*-2.7%), calc(var(--sy)*-2.7%)) scale(1.022); filter: blur(1.2px); }
  76%  { transform: translate(calc(var(--sx)*.95%),  calc(var(--sy)*.95%))  scale(.997);  filter: blur(.4px); }
  100% { transform: translate(0,0) scale(1); filter: blur(0); }
}
@keyframes sl-focusGee {
  0%   { filter: blur(6px);   transform: scale(1.04); }
  45%  { filter: blur(3px);   transform: scale(1.02); }
  62%  { filter: blur(1px);   transform: scale(.997); }
  100% { filter: blur(0); transform: scale(1); }
}

/* "for Burberry" slides out from behind the right wall of the viewfinder box
   (the imaginary line joining the two right brackets). The reveal clip is butted
   against the box's right edge and hides everything to its left, so the text
   emerges out of the wall as it slides right — it never fades in. Width is set
   by JS after measuring the text group so the clip hides it fully to start. */
.sl-reveal {
  flex-shrink: 0;
  overflow: hidden;
  /* width injected by JS = text-group width */
}

.sl-text-group {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-left: 30px;            /* gap between box right wall and "for" */
  flex-shrink: 0;
  transform: translateX(calc(-100% - 4px));  /* tucked behind the wall (+4px buffer so sub-pixel reveal-width rounding can't leak a sliver past the right bracket); JS animates to 0 */
}

.sl-burberry {
  height: calc(var(--sl-box) * 0.76);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.sl-for {
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: lowercase;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sl-anim img  { opacity: 1; animation: none !important; filter: none; }
  .sl-text-group { transform: none; }
}

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

#header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  pointer-events: none;
}

.hb-logo {
  height: 22px;
  width: auto;
  display: block;
}

.hb-burberry {
  height: 15px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.hb-for {
  font-family: var(--font);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: lowercase;
  flex-shrink: 0;
}

/* ── 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;
  gap: 13px;
  padding: 18px 36px 16px;
  background: transparent;
  pointer-events: none;
}

.site-nav {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 36px;
}

/* ── NAV TABS ───────────────────────────────────────── */

.nav-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 0;
  position: relative;
  transition: color 0.2s ease;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-tab:hover  { color: var(--text-mid); }
.nav-tab.active { color: var(--text); }
.nav-tab.active::after { transform: scaleX(1); }

/* Anchor tab (links to a separate page, e.g. Authenticity) — match button tabs */
a.nav-tab { text-decoration: none; display: inline-block; }

/* ── 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;
}

/* ── ARTIST NAME OVERLAY ────────────────────────────── */

.card-name {
  position: absolute;
  bottom: 28px;
  left: 24px;
  z-index: 3;
  font-family: var(--font);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* ── 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;
}

.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;
}

/* ── TAP TO START ───────────────────────────────────── */

#tap-start {
  display: none;
  position: absolute;
  bottom: 11vh;
  left: 50%;
  white-space: nowrap;
  pointer-events: all;
  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: 10px 0;
}

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

#tap-start.visible {
  display: block;
  animation: tap-btn-in 0.9s ease both;
}

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

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

  .site-nav { gap: 24px; }

  /* Touch-friendly tap targets */
  .nav-tab {
    padding: 6px 0;
    font-size: 9px;
    letter-spacing: 0.18em;
  }

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

  /* Splash logo scales via --sl-box (min(104px, 12vw)) — no fixed overrides. */
}

@media (max-width: 390px) {
  .site-nav { gap: 16px; }
  .nav-tab  { font-size: 8px; letter-spacing: 0.14em; }

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