/* ============================================================
   hud.css — AAA character-select plates (angled tags, index
   tabs, big name plates, hover-expand dossier) + CTA buttons,
   corner reticles, roster strip, button legend.
   ============================================================ */

/* ---------- angled index tabs (top corners) ---------- */
.idxtab {
  position: absolute;
  top: clamp(4.6rem, 9vh, 6rem);
  z-index: 9;
  font-family: var(--font-art);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  padding: 0.35rem 1.1rem;
  color: var(--ink-100);
  pointer-events: none;
  background: rgba(8, 7, 12, 0.55);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  transition: opacity 0.5s var(--ease-out);
}
.idxtab--l {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  padding-left: var(--gutter);
  border-left: none;
}
.idxtab--r {
  right: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  padding-right: var(--gutter);
  border-right: none;
  text-align: right;
}
.stage[data-hover="mihai"] .idxtab--l {
  color: var(--orange-500);
  border-color: rgb(var(--orange-glow) / 0.6);
}
.stage[data-hover="codezero"] .idxtab--r {
  color: var(--acid-500);
  border-color: rgb(var(--acid-glow) / 0.6);
}
.stage[data-phase="activating"] .idxtab,
.stage[data-phase="office"] .idxtab {
  opacity: 0;
}

/* ---------- plate container ---------- */
.plate {
  position: absolute;
  top: auto;
  bottom: clamp(2rem, 7vh, 4.4rem);
  z-index: 8;
  width: min(44vw, 40rem);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--ease-out),
    filter 0.5s var(--ease-out);
}
.plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26rem -2.4rem -3rem -2.4rem;
  background: radial-gradient(
    125% 78% at 0% 100%,
    rgba(6, 5, 9, 0.97) 0%,
    rgba(6, 5, 9, 0.82) 38%,
    rgba(6, 5, 9, 0.45) 62%,
    rgba(6, 5, 9, 0) 84%
  );
}
.plate--mihai {
  left: var(--gutter);
}
.plate--cz {
  right: var(--gutter);
  text-align: right;
  align-items: flex-end;
}
.plate--cz::before {
  background: radial-gradient(
    125% 78% at 100% 100%,
    rgba(6, 5, 9, 0.97) 0%,
    rgba(6, 5, 9, 0.82) 38%,
    rgba(6, 5, 9, 0.45) 62%,
    rgba(6, 5, 9, 0) 84%
  );
}
/* the inactive (CodeZero) plate sits compact + dimmed until hovered */
.plate--cz {
  filter: grayscale(0.35) brightness(0.9);
}
.stage[data-hover="codezero"] .plate--cz {
  filter: none;
}
.stage[data-hover="codezero"] .plate--mihai {
  opacity: 0.45;
}
.stage[data-phase="activating"] .plate,
.stage[data-phase="office"] .plate {
  opacity: 0;
  transform: translateY(18px);
}

/* head (tags + name) stays pinned at the bottom; dossier expands above it */
.plate__head {
  order: 2;
}
.plate__tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.plate--cz .plate__tags {
  justify-content: flex-end;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.34rem 0.85rem;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.tag--active {
  background: var(--orange-500);
  color: #1a0f04;
}
.tag--role {
  background: rgba(244, 241, 234, 0.08);
  color: var(--ink-100);
  border: 1px solid var(--line-strong);
}
.tag--locked {
  background: var(--acid-500);
  color: #11140a;
}
.tag--layer {
  background: rgba(244, 241, 234, 0.06);
  color: var(--acid-400);
  border: 1px solid rgb(var(--acid-glow) / 0.35);
}
.tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a0f04;
  animation: dot-pulse 1.6s var(--ease-inout) infinite;
}
@keyframes dot-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- big name plate (blends with art via screen) ---------- */
.plate__name {
  position: relative;
  margin: 0;
  font-family: var(--font-art);
  white-space: nowrap;
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--ink-100);
  padding-left: 0.9rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.plate__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 6px;
  background: var(--orange-500);
  transform: skewX(-12deg);
}
.plate--mihai .plate__name {
  font-family: var(--font-mihai);
  letter-spacing: -0.01em;
}
.plate--cz .plate__name {
  font-family: var(--font-cz);
  padding-left: 0;
  padding-right: 0.9rem;
  letter-spacing: 0.01em;
  background: linear-gradient(
    100deg,
    #2e1065 0%,
    #5b21b6 34%,
    #7c3aed 56%,
    var(--acid-500) 96%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.plate--cz .plate__name::before {
  left: auto;
  right: 0;
  background: var(--acid-500);
}
.plate__name .z0 {
  color: var(--acid-500);
  position: relative;
}
.plate--cz .plate__name .z0 {
  --slash-color: #0e1206;
}
.plate__name .z0::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 2px;
  translate: -50% 0;
  background: var(--slash-color, currentColor);
  transform: rotate(28deg);
}

/* ---------- dossier (floats ABOVE the name; reveal via opacity/transform) ---------- */
.dossier {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.7rem);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.55s var(--ease-out);
}
.dossier__inner {
  padding-top: 0.1rem;
}
.plate--cz .dossier__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.plate.is-open .dossier {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.plate.is-dim {
  opacity: 0.4;
}

/* ---------- dossier inner ---------- */
.dossier__role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-100);
  margin: 0.2rem 0 0.6rem;
  text-shadow: 0 1px 12px rgba(6, 5, 9, 0.9);
}
.plate--cz .dossier__role {
  color: var(--acid-400);
}
.dossier__bio {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-100);
  max-width: 30rem;
  text-wrap: pretty;
  text-shadow:
    0 1px 14px rgba(6, 5, 9, 0.92),
    0 0 3px rgba(6, 5, 9, 0.7);
}
.plate--cz .dossier__bio {
  margin-left: auto;
}

/* stat lines */
.stats {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}
.stats li {
  display: flex;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.plate--cz .stats li {
  flex-direction: row-reverse;
}
.stats b {
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.56rem;
  font-weight: 600;
  min-width: 3.2rem;
  padding-top: 0.1rem;
}
.plate--cz .stats b {
  text-align: right;
}
.stats span {
  color: var(--ink-100);
}

/* ---------- CTA buttons w/ key hints ---------- */
.cta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.7rem;
  pointer-events: auto;
}
.plate--cz .cta-row {
  justify-content: flex-end;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.8rem 1.15rem;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  border: 1px solid var(--line-strong);
  background: rgba(244, 241, 234, 0.04);
  color: var(--ink-100);
  text-decoration: none;
  transition:
    transform 0.35s var(--ease-spring),
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--orange-500);
  color: #1c1107;
  border-color: var(--orange-500);
  box-shadow: 0 10px 30px rgb(var(--orange-glow) / 0.34);
}
.btn--primary:hover {
  box-shadow: 0 14px 42px rgb(var(--orange-glow) / 0.5);
}
.btn--ghost.is-locked {
  color: var(--acid-400);
  border-color: rgb(var(--acid-glow) / 0.35);
  background: rgb(var(--acid-glow) / 0.06);
  cursor: default;
}
.btn--ghost.is-locked:hover {
  transform: none;
}
.btn kbd {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.btn:not(.btn--primary) kbd {
  background: rgba(244, 241, 234, 0.08);
  border-color: var(--line);
}

/* ---------- refined entrance: plates rise in after the intro hands off ---------- */
@keyframes plate-rise {
  from {
    transform: translateY(34px);
    filter: blur(6px);
  }
  to {
    transform: none;
    filter: blur(0);
  }
}
@keyframes tab-slide-l {
  from {
    opacity: 0.001;
    transform: translateX(-26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tab-slide-r {
  from {
    opacity: 0.001;
    transform: translateX(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tag-pop {
  from {
    opacity: 0.001;
    transform: translateY(8px) scaleX(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .stage[data-intro="done"] .plate--mihai {
    animation: plate-rise 0.85s var(--ease-out) 0.1s backwards;
  }
  .stage[data-intro="done"] .plate--cz {
    animation: plate-rise 0.85s var(--ease-out) 0.26s backwards;
  }
  .stage[data-intro="done"] .idxtab--l {
    animation: tab-slide-l 0.7s var(--ease-out) 0.32s backwards;
  }
  .stage[data-intro="done"] .idxtab--r {
    animation: tab-slide-r 0.7s var(--ease-out) 0.42s backwards;
  }
  .stage[data-intro="done"] .plate__tags .tag {
    animation: tag-pop 0.6s var(--ease-spring) backwards;
  }
  .stage[data-intro="done"] .plate__tags .tag:nth-child(2) {
    animation-delay: 0.12s;
  }
}
/* refined name accent: the side bar grows on hover/active */
.plate__name::before {
  transition:
    top 0.45s var(--ease-out),
    bottom 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
.plate.is-open .plate__name::before {
  top: 2%;
  bottom: 2%;
  box-shadow: 0 0 16px var(--orange-500);
}
.plate--cz.is-open .plate__name::before {
  box-shadow: 0 0 16px var(--acid-500);
}

/* ---------- corner reticles ---------- */
.reticle {
  position: absolute;
  z-index: 19;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border-color: var(--line-strong);
  border-style: solid;
  opacity: 0.8;
}
.reticle--tl {
  top: 84px;
  left: 18px;
  border-width: 1px 0 0 1px;
}
.reticle--tr {
  top: 84px;
  right: 18px;
  border-width: 1px 1px 0 0;
}
.reticle--bl {
  bottom: 18px;
  left: 18px;
  border-width: 0 0 1px 1px;
}
.reticle--br {
  bottom: 18px;
  right: 18px;
  border-width: 0 1px 1px 0;
}
.stage[data-phase="activating"] .reticle {
  opacity: 0;
}

/* ---------- center emblem + button legend (bottom center) ---------- */
.legend {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  z-index: 19;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.legend b {
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-300);
  font-size: 0.58rem;
}
.emblem {
  width: 18px;
  height: 18px;
  color: var(--orange-500);
  animation: emblem-spin 14s linear infinite;
}
@keyframes emblem-spin {
  to {
    transform: rotate(360deg);
  }
}
.stage[data-phase="activating"] .legend,
.stage[data-phase="office"] .legend {
  opacity: 0;
}

/* ---------- roster strip (top center) ---------- */
.roster {
  position: absolute;
  top: 26px;
  left: 50%;
  translate: -50% 0;
  z-index: 20;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  transition: opacity 0.4s var(--ease-out);
}
.roster i {
  width: 30px;
  height: 20px;
  border: 1px solid var(--line);
  display: block;
  background: rgba(244, 241, 234, 0.03);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}
.roster i.is-on {
  border-color: var(--orange-500);
  background: rgb(var(--orange-glow) / 0.18);
}
.roster i.is-cz {
  border-color: rgb(var(--acid-glow) / 0.5);
}
.stage[data-phase="activating"] .roster {
  opacity: 0;
}
@media (max-width: 760px) {
  .roster,
  .legend,
  .idxtab {
    display: none;
  }
}
@media (max-width: 680px) {
  .plate {
    width: min(80vw, 24rem);
  }
  .plate--cz {
    display: none;
  }
}

/* === polish 2026-06-12 === */

/* 1. focus-visible: accent ring for the CTAs. the btn clip-path clips its own
   outline, so the offset ring is backed by an inset box-shadow ring that stays
   visible inside the angled shape. no layout impact. */
.btn:focus-visible {
  outline: 2px solid var(--warm-500, #e8a868);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px var(--warm-500, #e8a868);
}
.plate--cz .btn:focus-visible {
  outline-color: var(--acid-500, #c6f135);
  box-shadow: inset 0 0 0 2px var(--acid-500, #c6f135);
}

/* 2. brand selection color: dark plum behind ivory text */
::selection {
  background: #15101d;
  color: #f4f1ea;
}

/* 3a. btn glow fades out gracefully: same transition list as the base rule
   (timings unchanged), with filter appended */
.btn {
  transition:
    transform 0.35s var(--ease-spring),
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    filter 0.3s;
}
/* 3b. hover micro-polish: quick 150ms ease lift-in (hover-out keeps the base
   spring), soft silhouette glow via drop-shadow (box-shadow would be clipped
   by the clip-path). locked ghost keeps its look (transform: none still wins
   on specificity) and gets a faint acid pulse instead. */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 5px 12px rgb(var(--warm-glow) / 0.3));
    transition:
      transform 150ms ease,
      filter 150ms ease,
      background 0.3s,
      border-color 0.3s,
      box-shadow 0.3s;
  }
  .plate--cz .btn:hover {
    filter: drop-shadow(0 5px 12px rgb(var(--acid-glow) / 0.26));
  }
  .btn--ghost.is-locked:hover {
    animation: hud-locked-pulse 1.5s var(--ease-inout) infinite;
  }
}
@keyframes hud-locked-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgb(var(--acid-glow) / 0));
  }
  50% {
    filter: drop-shadow(0 0 7px rgb(var(--acid-glow) / 0.4));
  }
}

/* 4. dossier legibility scrim: faint radial backdrop behind the dossier text
   via its own ::before. paints behind the text (z-index -1), rides the
   existing dossier fade (no new animation), absolutely positioned (no new
   layout), and never intercepts pointer events. */
.dossier::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -1.2rem -1.8rem -1.2rem -1.8rem;
  background: radial-gradient(
    115% 105% at 0% 55%,
    rgba(6, 5, 9, 0.5) 0%,
    rgba(6, 5, 9, 0.26) 55%,
    rgba(6, 5, 9, 0) 82%
  );
}
.dossier--cz::before {
  background: radial-gradient(
    115% 105% at 100% 55%,
    rgba(6, 5, 9, 0.5) 0%,
    rgba(6, 5, 9, 0.26) 55%,
    rgba(6, 5, 9, 0) 82%
  );
}

/* === art-pass 2026-06-12 === */
/* display-type ligatures; orphan-free dossier bios */
.plate__name,
.idxtab {
  font-feature-settings: "liga" 1, "calt" 1, "dlig" 1;
}
.dossier__bio {
  text-wrap: pretty;
}