/* ============================================================
   i miss you — live lyric video
   Black type + big Apple emojis on a pure white void,
   DOM-rendered, synced to the audio clock. Fills any viewport.
   ============================================================ */

:root {
  --bg: #fff;
  --fg: #000;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;   /* the whole video lives on white — and it fades in seamlessly from the hub */
  color: #111;
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- THE STAGE ---------------- */
.stage {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
  /* the show is hidden until play is pressed */
  opacity: 0;
  transition: opacity .25s ease;
  /* MOBILE: a finger on the stage drags words — it must NOT scroll or zoom the page */
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.stage.is-live { opacity: 1; }
/* stop pull-to-refresh / rubber-band while the show owns the screen */
body.playing { overscroll-behavior: none; touch-action: none; }

/* holds all cues — always in front of the viewer's drawing, so the
   lyrics and the big center emojis stay readable over the trail */
.cue-layer { position: absolute; inset: 0; z-index: 3; }

/* ---------------- THE EMOJI CURSOR ----------------
   During the show the real cursor is hidden; the video's emoji —
   ringed in a thin circle — follows the pointer instead. */
/* hide the real cursor everywhere during the show — the universal rule + !important
   beats any child override AND survives the pointer leaving and re-entering the window */
body.playing, body.playing *, body.playing *::before, body.playing *::after { cursor: none !important; }
.emoji-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;         /* centered on the pointer */
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 60;
  opacity: 0;                       /* cuts in and out WITH the video — no fade */
  will-change: left, top;
}
.emoji-cursor.is-on { opacity: 1; }
.emoji-cursor.is-down img { filter: brightness(.92); }
.emoji-cursor img {
  width: 68px; height: 68px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;           /* beat pulse + sample-pop set scale from JS */
}
/* no persistent cursor on touch devices */
@media (pointer: coarse) { .emoji-cursor { display: none !important; } }


/* Each rendered lyric line. Positioned + transformed by the engine. */
.cue {
  position: absolute;
  color: var(--fg);
  white-space: pre;           /* honour \n only; never auto-wrap */
  line-height: 0.98;
  will-change: transform, opacity;
  transform-origin: center center;
  pointer-events: none;         /* the stage is a drawing surface — cues are untouchable */
  user-select: none;
  letter-spacing: 0;
  /* font-size is set inline (vh) or overridden to a crisp px for fit-scaling */
}

/* ---------------- THE TRAIL (drag-to-draw) ----------------
   Drag while an emoji is live and it echoes behind the pointer —
   the classic '80s video-delay trail. Strokes fade away slowly,
   then everything you ever drew returns through the last chorus. */
.trail-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.trail-stamp {
  position: absolute;
  pointer-events: none;
  will-change: opacity, transform;
  opacity: .92;
  transition: opacity 3s ease-in, transform 3s ease-in;
}
.trail-stamp.is-fading { opacity: 0; transform: translate(-50%,-50%) rotate(var(--r,0deg)) scale(.84) translateY(6px); }
.trail-stamp.is-back { opacity: .92; transition: opacity .18s ease-out; }

/* emoji / image cues — the big Apple emojis, cropped from the 4K master */
.cue.cue-img { line-height: 0; }
.cue.cue-img img {
  display: block;
  height: 100%;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* type roles ---------------------------------------------- */
.cue.r-sans   { font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif; font-weight: 400; }
.cue.r-serif  { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.cue.r-serifIt{ font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.cue.r-didone { font-family: "Playfair Display", Georgia, serif; font-weight: 900; }
.cue.r-mono   { font-family: var(--mono), monospace; font-weight: 700; }

/* ---------------- LANDING ---------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  transition: opacity .5s ease;
  /* dragging the play arrow must not select the title / raise the iOS callout */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.landing.is-gone { opacity: 0; pointer-events: none; }

.landing__mark { text-align: center; padding: 6vw; }
.landing__eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: clamp(11px, 1.4vw, 15px);
  color: #111;
  margin-left: .34em;
  margin-bottom: 2.2rem;
}
.landing__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: .01em;
  font-size: clamp(52px, 14vw, 180px);
  line-height: .95;
  color: #111;
  margin-bottom: 3rem;
}

.playbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: none;            /* press-and-hold drag must not scroll the page */
  transition: transform .18s ease, opacity .3s ease;
}
.playbtn:hover { transform: scale(1.08); }
.playbtn:active { transform: scale(0.96); }
.playbtn.is-holding { transition: none; }
.playbtn.is-holding:hover, .playbtn.is-holding:active { transform: none; }  /* JS owns the transform mid-hold */
.playbtn:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 4px; }

/* the charge ring that sweeps as you hold (2s → the show begins) */
.playbtn__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(104px, 17vw, 168px);
  height: clamp(104px, 17vw, 168px);
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.playbtn.is-holding .playbtn__ring { opacity: 1; }
.playbtn__ring circle {
  fill: none;
  stroke: #111;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 289.03;      /* 2·π·46 */
  stroke-dashoffset: 289.03;     /* empty; JS sweeps it to 0 over the hold */
}

/* '80s video-delay ghosts left behind as the arrow trails the finger */
.play-echo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.play-echo .echo {
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  border-width: clamp(22px, 3.6vw, 40px) 0 clamp(22px, 3.6vw, 40px) clamp(34px, 5.6vw, 62px);
  border-color: transparent transparent transparent #111;
  transform: translate(-64%, -50%) scale(1);
  opacity: .34;
  transition: opacity .62s ease, transform .62s ease;
}
.play-echo .echo.go { opacity: 0; transform: translate(-64%, -50%) scale(.66); }

.landing__hint {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(9px, 1.1vw, 12px);
  color: #8b8b8b;
  margin-top: 2.4rem;
  transition: color .2s ease, transform .2s ease;
}
.landing__hint.nudge { color: #111; transform: scale(1.06); }
.playbtn__tri {
  width: clamp(34px, 5.6vw, 62px);
  height: auto;
  display: block;
  overflow: visible;
}
.playbtn__tri .tri-o { fill: none; stroke: #111; stroke-width: 2; stroke-linejoin: round; }
.playbtn__tri .tri-f { fill: #111; }
/* while it loads the button can't be clicked — the triangle filling in IS the progress bar */
.playbtn.is-loading { pointer-events: none; cursor: default; }
.playbtn.is-ready .playbtn__tri { animation: triPop .55s cubic-bezier(.22, 1.61, .36, 1); }
@keyframes triPop { 0% { transform: scale(1); } 38% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* transient sync-nudge readout */
.toast {
  position: fixed;
  left: 50%; bottom: 64px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 8px 14px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.toast.is-on { opacity: 1; }

/* ---------------- END CARD ----------------
   This video ends on white — the card stays white, black type. */
.endcard {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: rgba(255,255,255,0);
  transition: background .6s ease;
}
/* soft veil — the viewer's finished drawing stays visible underneath */
.endcard.is-visible { background: rgba(255,255,255,.45); }
.endcard__link, .endcard__btn {
  background: none; border: none; color: #111;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(14px, 2vw, 20px);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease .3s, color .18s ease;
}
.endcard__link:hover, .endcard__btn:hover { color: #777; }
.endcard.is-visible .endcard__link,
.endcard.is-visible .endcard__btn { opacity: 1; }

[hidden] { display: none !important; }