/* ────────────────────────────────────────────────────────────
   Internship — open positions as JRPG royalty cards.
   ────────────────────────────────────────────────────────────

   One card per row so every role lands with the weight of a
   character sheet. Inside each card a two-column grid:

     [ Mask stage        ]  [ Identity + blurb + charter ]
     [ — Mask of The X — ]  [ Touchstones (radar+tooltip) ]
     [ Clients you'll    ]  [ Niche specializations       ]
     [   help (reticles) ]  [ Apply →                     ]

   The mask SVG is rendered by js/masks.js (shared with the admin
   preview), and gets a per-emotion CSS animation class so the
   silhouette has a subtle, character-driven idle motion.
*/

/* ── Page shell ──────────────────────────────────────────── */

.internship-page {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(140px, 18vh, 200px) clamp(20px, 4vw, 56px) 120px;
}

/* Gate state — fully hidden until JS confirms it's both enabled and
   has at least one position. visibility + opacity (not display:none)
   so the empty list can still accept layout from the JS render
   without flicker. */
.internship-page.is-gated {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  min-height: 60vh;
}

.internship-page__header {
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 80px);
}

.internship-page__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.internship-page__title em {
  color: var(--accent);
  font-style: italic;
  font-weight: 300;
}

.internship-page__lede {
  margin: 18px auto 0;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  max-width: 56ch;
  line-height: 1.55;
}

.internship-page__list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

.internship-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
}

/* ── Closing footer ───────────────────────────────────── */

.internship-page__footer {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.internship-page__closing {
  margin: 0 0 22px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
}
.internship-page__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.internship-page__cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ── Gated fallback ──────────────────────────────────── */

.internship-gated-fallback {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(140px, 18vh, 200px) clamp(20px, 4vw, 56px) 100px;
  text-align: center;
}
.internship-gated-fallback__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 14px 0 16px;
}
.internship-gated-fallback__sub {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  margin: 0 0 28px;
  line-height: 1.55;
}

/* ── The card ─────────────────────────────────────────── */

.role-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 36%) 1fr;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.65), rgba(10, 8, 7, 0.55));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(236, 231, 221, 0.04),
    0 28px 70px -32px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-soft),
    transform 700ms var(--ease-soft),
    border-color 280ms var(--ease-soft),
    box-shadow 280ms var(--ease-soft);
}
.role-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Rarity gradient glows ────────────────────────────── */
/* Three distinct treatments using only the brand palette so the
   tier reads at a glance: hairline (common) → oxblood (rare) →
   gold (legendary). Echoes the vault's "most chosen" pattern, but
   with a different hue per rarity instead of a single highlight. */

.role-card--common {
  background:
    radial-gradient(circle at 50% 0%, rgba(236, 231, 221, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(20, 17, 14, 0.65), rgba(10, 8, 7, 0.55));
}

.role-card--rare {
  border-color: rgba(91, 42, 46, 0.7);
  background:
    radial-gradient(circle at 50% 0%, rgba(149, 73, 78, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(28, 18, 19, 0.72), rgba(10, 8, 7, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(236, 231, 221, 0.05),
    0 28px 70px -28px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(149, 73, 78, 0.18);
}

.role-card--legendary {
  /* Locally-scoped amethyst palette — keeps the gem theme self-
     contained so the rest of the page can keep its gold identity
     while this tier reads as a different stone. */
  --legend:      #8B6FB5;
  --legend-deep: #5C3F8A;
  --legend-glow: rgba(139, 111, 181, 0.24);

  border-color: var(--legend);
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 111, 181, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(22, 18, 28, 0.78), rgba(10, 8, 7, 0.65));
  box-shadow:
    inset 0 1px 0 rgba(236, 231, 221, 0.06),
    0 28px 70px -28px rgba(0, 0, 0, 0.9),
    0 0 32px var(--legend-glow);
}

/* Flag pill — sits on the top-right corner of the card. Each rarity
   gets its own treatment so the tier reads even before the eye
   scans the radial. Common stays unflagged (unmarked is its own
   signal). */
.role-card__flag {
  position: absolute;
  top: -10px;
  right: clamp(16px, 2vw, 28px);
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.role-card--rare .role-card__flag {
  color: #c8848a;
  box-shadow: 0 0 14px rgba(149, 73, 78, 0.4);
}
.role-card--legendary .role-card__flag {
  color: var(--legend);
  box-shadow: 0 0 18px var(--legend-glow);
}

/* ── Stage column (left) ──────────────────────────────── */

.role-card__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

.role-card__mask {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 181, 140, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(10, 8, 7, 0.85), rgba(20, 17, 14, 0.9));
  color: var(--text-faint); /* drives the bust silhouette's currentColor */
  transition: transform 320ms var(--ease-soft);
}
.role-card:hover .role-card__mask {
  transform: translateY(-2px);
}

/* Corner reticles on the mask, echoing the operators lock-on motif. */
.role-card__mask::before,
.role-card__mask::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent-soft);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
}
.role-card__mask::before {
  top: 10px;
  left: 10px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.role-card__mask::after {
  bottom: 10px;
  right: 10px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.role-card--legendary .role-card__mask::before,
.role-card--legendary .role-card__mask::after {
  border-color: var(--legend);
}
.role-card--rare .role-card__mask::before,
.role-card--rare .role-card__mask::after {
  border-color: rgba(200, 132, 138, 0.7);
}

.role-card__mask svg.pz-mask {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* ── "The Mask of The X" — luxurious label ────────────── */
/* Two hairline flanks frame a Cormorant Garamond italic line with
   the codename in --accent italic. Reads as engraved type rather
   than UI text. */
.role-card__mask-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 4px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.01em;
  color: var(--text-dim);
  text-align: center;
}
.role-card__mask-label::before,
.role-card__mask-label::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  max-width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  opacity: 0.75;
}
.role-card__mask-label-codename {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px var(--accent-glow);
  white-space: nowrap;
}
.role-card__mask-label-codename::before {
  content: "✦ ";
  color: var(--accent-soft);
  font-size: 0.75em;
  vertical-align: 0.12em;
  letter-spacing: 0;
}
.role-card__mask-label-codename::after {
  content: " ✦";
  color: var(--accent-soft);
  font-size: 0.75em;
  vertical-align: 0.12em;
  letter-spacing: 0;
}

/* ── Clients you'll help (reticle tiles) ──────────────── */

.role-card__clients {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: rgba(10, 8, 7, 0.45);
}
.role-card__clients-label {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.role-card__clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 10px;
}

/* A client tile mirrors the operators-bar reticle: four L-bracket
   corners that fly inward on hover, plus the logo washed to
   grayscale and brightening on hover. */
.role-client {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(201, 181, 140, 0.04);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 280ms var(--ease-soft),
    background 280ms var(--ease-soft),
    transform 280ms var(--ease-soft);
}
.role-client:hover {
  border-color: var(--accent-soft);
  background: rgba(201, 181, 140, 0.10);
  transform: translateY(-2px);
}
.role-client img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4);
  opacity: 0.72;
  transition: filter 280ms var(--ease-soft), opacity 280ms var(--ease-soft);
}
.role-client:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
.role-client__fallback {
  font-size: 18px;
  color: var(--accent);
}

/* Reticle corners — translated outward in the resting state, fly
   inward on hover and pulse the glow when locked on. */
.role-client__reticle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 280ms var(--ease-soft), transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.role-client__reticle--tl { top: 4px;    left: 4px;   border-top-width: 1px; border-left-width: 1px;   transform: translate(-6px, -6px); }
.role-client__reticle--tr { top: 4px;    right: 4px;  border-top-width: 1px; border-right-width: 1px;  transform: translate(6px, -6px); }
.role-client__reticle--bl { bottom: 4px; left: 4px;   border-bottom-width: 1px; border-left-width: 1px;  transform: translate(-6px, 6px); }
.role-client__reticle--br { bottom: 4px; right: 4px;  border-bottom-width: 1px; border-right-width: 1px; transform: translate(6px, 6px); }
.role-client:hover .role-client__reticle,
.role-client:focus-visible .role-client__reticle {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Body column (right) ───────────────────────────────── */

.role-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.role-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.role-card__eyebrow-sep {
  color: var(--text-faint);
  opacity: 0.4;
}
.role-card__codename {
  color: var(--accent);
}

.role-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.role-card--legendary .role-card__title {
  text-shadow: 0 0 26px var(--legend-glow);
}

.role-card__blurb {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
}

.role-card__charter {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  max-width: 64ch;
}

/* ── Touchstones panel + tooltip ───────────────────────── */
/* Ports the team page's pattern: a glass-paneled radar that
   reveals an intro paragraph + cited-source pills on hover or
   focus. On mobile the panel becomes a tap target that promotes
   the tooltip into a full-viewport modal (same JS as team). */
.role-card__touchstones {
  position: relative;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.role-touchstones {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 18px;
  align-items: center;
}

.role-touchstones__panel {
  position: relative;
  padding: 10px 10px 4px;
  background: rgba(10, 8, 7, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: help;
  transition: border-color 220ms var(--ease-soft);
}
.role-touchstones__panel:hover,
.role-touchstones__panel:focus-visible {
  border-color: var(--accent-soft);
  outline: none;
}
.role-touchstones__panel-label {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.role-card__radar {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.role-card__radar-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  fill: var(--text-faint);
}

/* Tooltip — flies in from the right of the radar (next to it on
   desktop). Holds the intro + cited sources, same copy as the
   team page so the language stays one voice. */
.role-touchstones__tooltip {
  position: relative;
  padding: 16px 18px;
  background: rgba(10, 8, 7, 0.92);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  box-shadow:
    0 18px 50px -18px rgba(0, 0, 0, 0.95),
    0 0 22px var(--accent-glow);
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    opacity 240ms var(--ease-soft) 120ms,
    transform 240ms var(--ease-soft) 120ms;
}
.role-touchstones:hover .role-touchstones__tooltip,
.role-touchstones:focus-within .role-touchstones__tooltip {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition:
    opacity 240ms var(--ease-soft) 0ms,
    transform 240ms var(--ease-soft) 0ms;
}

.role-touchstones__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.role-touchstones__intro {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.role-touchstones__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.role-touchstones__source {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-decoration: none;
  transition: border-color 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.role-touchstones__source:hover {
  border-color: var(--accent-soft);
  color: var(--accent);
}
.role-touchstones__source--inert { cursor: default; }

/* Mobile modal close button — hidden on desktop. */
.role-touchstones__modal-close {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  background: rgba(10, 8, 7, 0.65);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 220ms var(--ease-soft), border-color 220ms var(--ease-soft), color 220ms var(--ease-soft);
}
.role-touchstones__card { display: contents; }

/* ── Niche specializations ─────────────────────────────── */

.role-card__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.role-card__specs-label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.role-spec { display: flex; flex-direction: column; gap: 4px; }
.role-spec__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.role-spec__diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  transform: rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  vertical-align: middle;
}
.role-spec__line { display: flex; align-items: center; gap: 14px; }
.role-spec__bar {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 4px;
  transform: skewX(-20deg);
  transform-origin: 50% 50%;
}
.role-spec__seg {
  display: block;
  flex: 1 1 auto;
  min-width: 5px;
  max-width: 22px;
  height: 7px;
  border: 1px solid var(--hairline-2);
  background: transparent;
  transition:
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
}
.role-spec__seg.is-filled {
  background: var(--accent);
  border-color: var(--accent);
}
.role-spec__seg.is-cap {
  box-shadow:
    0 0 6px var(--accent-glow),
    0 0 0 1px rgba(236, 231, 221, 0.15) inset;
}
.role-spec__value {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  min-width: 22px;
  text-align: right;
}
.role-spec--missing .role-spec__label {
  color: var(--text-faint);
  font-style: italic;
}

/* ── Apply CTA ─────────────────────────────────────────── */

.role-card__apply-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.role-card__apply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  background: rgba(10, 8, 7, 0.6);
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition:
    background 220ms var(--ease-soft),
    color 220ms var(--ease-soft),
    border-color 220ms var(--ease-soft),
    transform 220ms var(--ease-soft);
}
.role-card__apply:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.role-card--legendary .role-card__apply {
  border-color: var(--legend);
  color: var(--legend);
  background: rgba(139, 111, 181, 0.08);
}
.role-card--legendary .role-card__apply:hover {
  background: var(--legend);
  color: var(--bg);
  border-color: var(--legend);
}

/* ── Rarity badge in the eyebrow ──────────────────────── */

.role-card__rarity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
}
.role-card--rare .role-card__rarity {
  border-color: rgba(200, 132, 138, 0.6);
  color: #c8848a;
}
.role-card--legendary .role-card__rarity {
  border-color: var(--legend);
  color: var(--legend);
  background: rgba(139, 111, 181, 0.08);
}
.role-card__rarity::before {
  content: "";
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: currentColor;
}

/* ── Mask idle animations — one per emotion ──────────── */
/* Each animation is intentionally subtle (≤4px movement, ≤1deg
   rotation, ≤2.5% scale, slow timing). Only applied inside the
   public card so the admin preview list stays still. */
.role-card__mask .pz-mask {
  transform-origin: 50% 60%;
  will-change: transform, filter;
}

.role-card__mask .pz-mask--joyous     { animation: pz-mask-bob       3.6s ease-in-out infinite; }
.role-card__mask .pz-mask--forlorn    { animation: pz-mask-dip       5.5s ease-in-out infinite; }
.role-card__mask .pz-mask--wrathful   { animation: pz-mask-tremor    5s   ease-in-out infinite; }
.role-card__mask .pz-mask--fearful    { animation: pz-mask-jitter    2.6s ease-in-out infinite; }
.role-card__mask .pz-mask--anxious    { animation: pz-mask-sway      4.4s ease-in-out infinite; }
.role-card__mask .pz-mask--serene     { animation: pz-mask-breathe   6.5s ease-in-out infinite; }
.role-card__mask .pz-mask--cunning    { animation: pz-mask-tilt      6s   ease-in-out infinite; }
.role-card__mask .pz-mask--stoic      { animation: pz-mask-still     8s   ease-in-out infinite; }
/* vacant: deliberately no animation — the lifelessness is the point. */
.role-card__mask .pz-mask--awed       { animation: pz-mask-zoom      4.8s ease-in-out infinite; }
.role-card__mask .pz-mask--disdainful { animation: pz-mask-lean      7s   ease-in-out infinite; }
.role-card__mask .pz-mask--resolute   { animation: pz-mask-pulse     4s   ease-in-out infinite; }

@keyframes pz-mask-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes pz-mask-dip {
  0%, 100% { transform: translateY(0); }
  60%      { transform: translateY(3px); }
}
@keyframes pz-mask-tremor {
  0%, 88%, 100% { transform: translateX(0); }
  90%  { transform: translateX(-1px); }
  92%  { transform: translateX(1.4px); }
  94%  { transform: translateX(-1.2px); }
  96%  { transform: translateX(0.6px); }
}
@keyframes pz-mask-jitter {
  0%, 100% { transform: translate(0, 0); }
  20%  { transform: translate(-0.6px, 0.5px); }
  40%  { transform: translate(0.6px, -0.4px); }
  60%  { transform: translate(-0.4px, -0.4px); }
  80%  { transform: translate(0.4px, 0.5px); }
}
@keyframes pz-mask-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(0.5deg); }
}
@keyframes pz-mask-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@keyframes pz-mask-tilt {
  0%, 35%, 100% { transform: rotate(0deg); }
  50%, 60%      { transform: rotate(-0.9deg); }
}
@keyframes pz-mask-still {
  0%, 92%, 100% { transform: translateY(0); }
  94%, 96%      { transform: translateY(-0.6px); }
}
@keyframes pz-mask-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes pz-mask-lean {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  50%      { transform: rotate(0.7deg) translateX(1px); }
}
@keyframes pz-mask-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 8px var(--accent-glow)); transform: scale(1.01); }
}

/* ── Mobile ──────────────────────────────────────────── */

@media (max-width: 880px) {
  .role-card {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .role-card__stage {
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
  .role-touchstones {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .role-touchstones__panel {
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
  }
  .role-card__apply-row {
    justify-content: stretch;
  }
  .role-card__apply {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 880px) {
  /* MOBILE / TABLET TOUCHSTONES MODE — same approach as the team
     page. Default state: tooltip removed from layout flow entirely
     so it doesn't leave an awkward empty band below the radar panel
     once the grid collapses to one column. Tapping the panel
     promotes the tooltip to a full-viewport luxe modal via the
     `.is-modal-open` class set by the JS. Breakpoint matches the
     880px grid-collapse so tablets in that 720–880 zone also get
     the tap-to-modal behavior instead of an unreachable invisible
     tooltip below the radar. */
  .role-touchstones__panel {
    cursor: pointer;
  }
  .role-touchstones__tooltip,
  .role-touchstones:hover .role-touchstones__tooltip,
  .role-touchstones:focus-within .role-touchstones__tooltip {
    display: none;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 280ms var(--ease-soft);
  }
  .role-touchstones__tooltip.is-modal-open {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 24px;
    border: none;
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 40%, rgba(201, 181, 140, 0.10), transparent 65%),
      rgba(10, 8, 7, 0.6);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .role-touchstones__tooltip.is-modal-open .role-touchstones__card {
    display: block;
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 44px 26px 26px;
    background: linear-gradient(180deg, rgba(20, 17, 14, 0.92), rgba(10, 8, 7, 0.92));
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-md);
    box-shadow:
      0 24px 60px -20px rgba(0, 0, 0, 0.85),
      0 0 30px var(--accent-glow);
  }
  .role-touchstones__tooltip.is-modal-open .role-touchstones__modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .role-touchstones__tooltip.is-modal-open .role-touchstones__label {
    margin: 0 0 12px;
    font-size: 10.5px;
    text-align: center;
  }
  .role-touchstones__tooltip.is-modal-open .role-touchstones__intro {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
  }
  .role-touchstones__tooltip.is-modal-open .role-touchstones__sources {
    padding-top: 14px;
    gap: 6px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-card {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .role-card:hover .role-card__mask {
    transform: none;
  }
  .role-card__mask .pz-mask {
    animation: none !important;
  }
}