/* ============================================================
   copy.css - the name block and profile copy, set straight onto
              the diagonal scrim instead of into a floating panel.
   ============================================================ */

/* Anchored by its TOP-LEFT corner and turned onto the scrim's own
   angle, so every row runs parallel to the leading edge and each row
   below steps further into the dark.
   The top is solved from the scrim's own geometry rather than guessed:
   the edge sits --sheen-top below the top-right corner and drops by
   tan(30deg) for every pixel it travels left, so this lands the block
   exactly --copy-gap under the edge whatever shape the window is. */
.stage-copy {
  --copy-gap: 34px;
  /* how far under the leading edge it sits */

  position: absolute;
  left: var(--copy-x);
  top: calc(var(--sheen-top) + (100vw - var(--copy-x)) * var(--sheen-tan) + var(--copy-gap));
  transform-origin: 0 0;
  transform: rotate(var(--sheen-angle, -30deg));
  pointer-events: auto;
  white-space: nowrap;
  /* every line is placed, never wrapped */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  z-index: var(--z-panel);
}

/* Each row carries its own indent, measured along the diagonal, so the
   stack reads as a composition rather than a flush-left paragraph.
   These are the numbers to nudge when rebalancing the block. */
.copy-romaji {
  margin-left: 0.8em;
}

.copy-name {
  margin-left: 0;
}

.copy-type {
  margin-left: 0.4em;
}

.lead-line:nth-child(1) {
  margin-left: 2.6em;
}

.lead-line:nth-child(2) {
  margin-left: 1.9em;
}

.lead-line:nth-child(3) {
  margin-left: 1.2em;
}

.lead-line:nth-child(4) {
  margin-left: 0.5em;
}

/* ---------- name ---------- */
.copy-romaji {
  margin-top: 0;
  margin-bottom: 0.35em;
  font-size: clamp(9px, 1.05vw, 14px);
  letter-spacing: 0.42em;
  color: var(--sky);
  opacity: 0.85;
}

.copy-name {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 72px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #fff 8%, var(--gold) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* The gradient is painted as this element's background and then
     clipped to the glyphs, which puts it UNDER the text-shadow layer -
     and the glyph fill itself is transparent, so the inherited shadow
     would sit on top of the letters as a dark smudge instead of behind
     them. It has to be dropped here and re-made with drop-shadow(),
     which works off the rendered silhouette. */
  text-shadow: none;
  filter:
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9))
    drop-shadow(0 3px 16px rgba(255, 180, 60, 0.4));
}

/* ---------- MBTI + enneagram ---------- */
.copy-type {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 1.8vw, 30px);
  margin-top: 0.45em;
  margin-bottom: 0;
}

.type-item {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.type-label {
  font-size: clamp(7.5px, 0.72vw, 9.5px);
  letter-spacing: 0.24em;
  opacity: 0.6;
  margin-bottom: 0.35em;
}

.type-value {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.3vw, 44px);
  color: var(--sky);
  letter-spacing: 0.02em;
}

/* ---------- lead ---------- */
.copy-lead {
  margin-top: 0.95em;
  margin-bottom: 0;
  margin-left: 0;
  font-size: clamp(11px, 1.15vw, 15px);
  line-height: 1.5;
  opacity: 0.95;
}

.lead-line {
  display: block;
  margin-bottom: 0.34em;
}

.lead-line b {
  color: var(--gold);
  font-weight: 700;
}