/* ============================================================
   experience i am — compact banner for the home / music pages
   White paper, crisp DOM type, inversion spotlight, pollen air.
   Loads instantly: no assets, no models, no post-processing.
   ============================================================ */

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

:root {
  --mono: "Courier Prime", "Courier New", monospace;
  --disc-r: 48px;              /* spotlight radius — mask radius MUST match */
}

html, body {
  width: 100%; height: 100%;
  background: #fff;            /* open on white — no flash inside a light page */
  overflow: hidden;
}

.stage {
  position: absolute;          /* never fixed inside a WP iframe (iOS) */
  inset: 0;
  overflow: hidden;
  /* NOTE: no touch-action:none here — this banner lives mid-page;
     a finger must scroll the page, not get captured. */
}

#gl {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;                            /* DOM paints first; canvas fades in */
  transition: opacity .8s ease;
}
#gl.on { opacity: 1; }

/* ---------------- the words ---------------- */
.mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  z-index: 3;
  pointer-events: none;                  /* only the button is interactive */
}

.mark__eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .34em;
  margin-left: .34em;                    /* optical centering vs tracking */
  font-size: clamp(10px, 1.3vw, 13px);
  color: #111;
}

.mark__title {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(64px, 13vw, 168px);
  line-height: .95;
  color: #111;
  margin: 1.2rem 0 2.1rem;
}

.mark__btn {
  pointer-events: auto;
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: .18em;
  text-transform: lowercase;
  text-decoration: none;
  color: #111;
  border: 1px solid #111;
  padding: .85em 1.6em;
  background: #fff;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.mark__btn:hover,
.mark__btn:focus-visible { background: #111; color: #fff; outline: none; }
.mark__btn:active { transform: scale(.97); }

/* ---------------- inversion spotlight ---------------- */
.disc {
  position: absolute;
  z-index: 4;
  width: calc(var(--disc-r) * 2);
  height: calc(var(--disc-r) * 2);
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;            /* inverts whatever sits beneath */
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: var(--sx, 50%);
  top: var(--sy, 30%);
  opacity: 0;
  transition: opacity .6s ease;
}
.disc.on { opacity: 1; }

/* ---------------- hidden song titles ---------------- */
.egg-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* radius here MUST equal --disc-r so what's revealed == the spotlight */
  -webkit-mask-image: radial-gradient(circle var(--disc-r) at var(--sx, -999px) var(--sy, -999px), #000 72%, transparent 100%);
          mask-image: radial-gradient(circle var(--disc-r) at var(--sx, -999px) var(--sy, -999px), #000 72%, transparent 100%);
}
.egg {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 21px);
  color: #111;
  white-space: nowrap;
}

/* reduced motion: keep everything, still no strobing anywhere */
@media (prefers-reduced-motion: reduce) {
  #gl, .disc { transition: none; }
}