/* ===========================================================
   Personal Site — v1
   Black, minimal, beat-driven shell. Three files only.
   =========================================================== */

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

html, body {
  height: 100%;
  background: #000;                /* full black base */
  color: #fff;
  overflow: hidden;                /* it's a single full-screen canvas, no scroll */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* one clean system face, no web fonts */
  -webkit-font-smoothing: antialiased;
}

/* ---- The cross-fading photo stage (fills the whole screen) ---- */
#stage {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 0;
}

.layer {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-size: cover;           /* full-bleed, no distortion */
  background-position: center;
  opacity: 0;                       /* JS fades these in/out */
  /* --fade is set from script.js so the swap speed is one knob in code */
  transition: opacity var(--fade, 70ms) linear;
  will-change: opacity;
}

/* A faint vignette/wash to keep the type legible over any photo. */
#scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  pointer-events: none;
}

/* ---- Minimal UI on top ---- */
#ui {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  text-align: center;
  padding: 6vw;
}

.artist {
  font-size: clamp(1.4rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.35em;            /* generous negative space, gallery feel */
  text-indent: 0.35em;               /* re-centre after the letter-spacing */
  text-transform: uppercase;
  opacity: 0.92;
}

/* The play control: a small circle + the track title. The whole thing is the button. */
#play {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 3.2vw, 0.95rem);
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
#play:hover { opacity: 1; }

.dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.2s ease, transform 0.2s ease;
}
/* When playing, the circle fills in — the only state cue. */
body.playing .dot {
  background: #fff;
  transform: scale(0.85);
}

/* On a phone, push the type toward the lower third so photos breathe. */
@media (max-width: 600px) {
  #ui { justify-content: flex-end; padding-bottom: 14vh; gap: 1.6rem; }
}