/* ============================================================
   you hurt me — live lyric video
   Black type on a pure white void, DOM-rendered, synced to the
   audio clock. The video's own faces via Adobe Fonts + Bodoni.
   ============================================================ */

:root {
  --bg: #fff;
  --fg: #000;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --sans: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --sansCond: "helvetica-neue-lt-pro-cond", "Arial Narrow", "Helvetica Neue", sans-serif;
  --didone: "Bodoni Moda", "Bodoni 72", Didot, "Playfair Display", serif;
  --clar: "clarendon-urw", "Bitter", "Georgia", serif;
  --round: "arial-rounded-mt-pro", "Arial Rounded MT Bold", "Baloo 2", sans-serif;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;   /* the whole video lives on white — seamless 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;
  opacity: 0;
  transition: opacity .25s ease;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.stage.is-live { opacity: 1; }
body.playing { overscroll-behavior: none; touch-action: none; }

.cue-layer { position: absolute; inset: 0; z-index: 3; }

/* 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;
  user-select: none;
  letter-spacing: 0;
}

/* image cues (the Webdings/Wingdings art, 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;
}

/* per-char spans for the arch warp */
.cue .ch { display: inline-block; }

/* type roles ---------------------------------------------- */
.cue.r-sans     { font-family: var(--sans); font-weight: 400; }
.cue.r-cond     { font-family: var(--sansCond); font-weight: 700; }
.cue.r-serif    { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.cue.r-serifIt  { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.cue.r-didone   { font-family: var(--didone); font-weight: 600; }
.cue.r-didoneIt { font-family: var(--didone); font-style: italic; font-weight: 600; }
.cue.r-clar     { font-family: var(--clar); font-weight: 700; }
.cue.r-round    { font-family: var(--round); font-weight: 700; }
.cue.r-mono     { font-family: var(--mono); font-weight: 700; }

/* outline flash (the double-line "CAUSE IT FEELS" step) */
.cue.is-outline {
  color: transparent;
  -webkit-text-stroke: 0.035em var(--fg);
}

/* ---------------- THE GAME ----------------
   The cursor becomes a weapon; the lyrics take the damage.
   Everything monochrome — wounds are displacement, bites and cracks. */
@media (pointer: fine) {
  body.gaming, body.gaming .cue { cursor: none; }
}
#weapon {
  position: fixed;
  left: -100px; top: -100px;
  z-index: 60;
  font-size: 37px;
  line-height: 1;
  transform: translate(-30%, -72%) rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  will-change: left, top;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.16));
  transition: font-size .25s ease;
}
#weapon.is-here { opacity: 1; }
#weapon.is-swing  { animation: gswing .16s ease; }
#weapon.is-stab   { animation: gstab .14s ease; }     /* thrust toward the strike */
#weapon.is-sawing { animation: gsawing .2s ease; }    /* back and forth along the blade */
@keyframes gswing  { 40% { transform: translate(-30%,-72%) rotate(-56deg) scale(1.14); } }
@keyframes gstab   { 35% { transform: translate(calc(-30% - 12px), calc(-72% - 13px)) rotate(-8deg); } }
@keyframes gsawing {
  25% { transform: translate(calc(-30% - 8px), calc(-72% - 8px)) rotate(-8deg); }
  75% { transform: translate(calc(-30% + 8px), calc(-72% + 8px)) rotate(-8deg); }
}
/* TOUCH: there's no hover on a finger, so the weapon appears the instant you touch
   down, rides your finger while you slash, and fades away when you let go — that's
   what makes it obvious you're holding something. `body.wtouch` is added by the game
   only after a real touch event, so a mouse never sees any of this. */
body.wtouch #weapon { transition: opacity .42s ease .06s, font-size .25s ease; }
body.wtouch #weapon.is-here { opacity: 0; }                                  /* hover reveals nothing */
body.wtouch #weapon.is-touch { opacity: 1; transition: opacity .06s ease; }  /* snaps into your hand */

/* The damage sits ABOVE the lyrics and inverts whatever it crosses (difference blend,
   painted in white — see scar() ). On the white page it reads as black soot and cracks
   exactly as before; where it crosses black type the type turns white instead of being
   swallowed, so the lyrics stay readable no matter how black the background gets. */
#scars { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: difference; }

.gch { display: inline-block; }               /* letters take wounds one by one */
.g-dead { transition: transform .35s ease-in, opacity .3s ease-in; transform: scale(.86) rotate(5deg); opacity: 0 !important; }
.g-jolt { animation: gjolt .16s ease; }
@keyframes gjolt { 50% { opacity: .55; } }

#weapon .wimg { height: 1.05em; width: auto; display: block; }
.g-boxe .wimg { height: 30px; width: auto; display: block; }

#lvlup {
  position: fixed;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  z-index: 45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#lvlup.is-on { opacity: 1; pointer-events: auto; }
.g-lvltext { font-family: var(--mono); font-size: 13px; letter-spacing: .34em; margin-bottom: 10px; color: #000; }
.g-boxes { display: flex; gap: 12px; justify-content: center; }
.g-box {
  width: 76px;
  padding: 9px 6px 7px;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--mono);
  color: #000;
}
.g-box:hover { background: #000; color: #fff; }
.g-boxe { font-size: 30px; line-height: 1.15; }
.g-boxn { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

#verdict {
  font-family: var(--mono);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: .2em;
  color: #111;
  margin-bottom: .6rem;
  opacity: 0;
  transition: opacity .5s ease .3s;
}
.endcard.is-visible #verdict { opacity: 1; }

/* ---------------- LANDING ---------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  transition: opacity .5s ease;
}
.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: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .005em;
  font-size: clamp(40px, 9.5vw, 128px);
  line-height: .98;
  color: #111;
  margin-bottom: 2.6rem;
}
.playbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: none; border: none; cursor: pointer;
  transition: transform .18s ease, opacity .3s ease;
}
.playbtn:hover { transform: scale(1.08); }
.playbtn:active { transform: scale(0.96); }
.playbtn:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 4px; }
/* clicking play is the first hit — the arrow bleeds and recoils */
.playbtn.is-hit { animation: phit .32s ease; }
.playbtn.is-hit .playbtn__tri .tri-o { stroke: #c40000; }
.playbtn.is-hit .playbtn__tri .tri-f { fill: #c40000; }
@keyframes phit {
  25% { transform: translate(9px, -3px) rotate(10deg) scale(.9); }
  60% { transform: translate(-3px, 2px) rotate(-4deg) scale(1.02); }
}
.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) ---------------- */
.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;
}
.endcard.is-visible { background: rgba(255,255,255,.55); }   /* the damage you did shows through */
.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; }