/* Each résumé perspective has a small illustrated world. Materials use the
   same hue as the existing title; the corner fades before the reading track. */
.resume-header {
  --crest-ink: oklch(0.5 clamp(0.14, var(--accent-chroma), 0.2) var(--accent-hue));
  --crest-light: oklch(0.9 0.065 calc(var(--accent-hue) - 22));
  --crest-deep: oklch(0.3 0.08 var(--accent-hue));
  --crest-companion: oklch(0.67 0.14 calc(var(--accent-hue) + 32));
  --crest-face: color-mix(in oklab, var(--color-surface) 86%, var(--crest-ink));
  isolation: isolate;
}
html[data-theme='dark'] .resume-header {
  --crest-ink: oklch(0.78 clamp(0.12, var(--accent-chroma), 0.18) var(--accent-hue));
  --crest-light: oklch(0.95 0.04 calc(var(--accent-hue) - 22));
  --crest-deep: oklch(0.38 0.1 var(--accent-hue));
  --crest-companion: oklch(0.75 0.13 calc(var(--accent-hue) + 32));
  --crest-face: color-mix(in oklab, var(--color-surface) 76%, var(--crest-deep));
}
.perspective-panel {
  position: absolute;
  inset-block-start: -2rem;
  inset-inline-end: -3rem;
  width: clamp(20rem, 48%, 48rem);
  height: calc(100% + 3rem);
  color: var(--crest-ink);
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent, #000 44%), linear-gradient(180deg, #000 45%, transparent 94%);
  mask-composite: intersect;
}
.perspective-panel .panel-scene { display: none; }
html[data-view='general'] .panel-general,
html[data-view='qa'] .panel-qa,
html[data-view='fullstack'] .panel-fullstack,
html[data-view='frontend'] .panel-frontend,
html[data-view='leadership'] .panel-leadership,
html[data-view='builder'] .panel-builder { display: block; }
.panel-field { opacity: 0.42; }
.panel-trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel-highlight { stroke: var(--crest-companion); }
.panel-flow {
  stroke-dasharray: 3 12;
  animation: edgeFlow 24s linear infinite;
}
.panel-wordmark {
  fill: currentColor;
  opacity: 0.13;
  font: 800 48px var(--font-family-display);
  letter-spacing: 0.04em;
}
@media screen {
  .resume-title-row { padding-inline-end: clamp(0rem, 3vw, 2.5rem); }
  .resume-page .resume-header .perspective-viz {
    color: var(--crest-ink);
    opacity: 1;
    z-index: 1;
    filter: drop-shadow(0 5px 4px rgb(15 25 44 / 0.12));
  }
}
/* Medallion: a quiet vertical light on the plate, a hairline rim, four notches and a
   dotted halo drawn in the crest's own coordinates, so it is always concentric with it. */
.crest-plate-top { stop-color: var(--crest-face); }
.crest-plate-bottom { stop-color: color-mix(in oklab, var(--crest-face) 80%, var(--crest-deep)); }
.crest-plate { fill: url(#crest-plate); stroke: url(#crest-metal); stroke-width: 1.1; }
.crest-rim { fill: none; stroke: currentColor; stroke-width: 0.45; opacity: 0.38; }
.crest-notch { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; }
.crest-halo { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; opacity: 0.32; }
.crest-halo path { stroke-width: 0.7; }
.crest-engraving { fill: none; stroke: currentColor; stroke-width: 0.5; stroke-linecap: round; opacity: 0.4; }
.crest-highlight { fill: none; stroke: var(--crest-light); stroke-width: 0.8; stroke-linecap: round; opacity: 0.75; }
.crest-facet { fill: var(--crest-companion); opacity: 0.2; }
.crest-core { fill: var(--crest-light); }
.crest-inlay { fill: var(--crest-deep); opacity: 0.45; }
.crest-surface { fill: url(#about-viz-glass); }
/* Builder nodes pulse in scale; without a fill-box origin they drift toward 0,0. */
.perspective-viz .viz-node { transform-box: fill-box; transform-origin: center; }
html[data-theme='light'] .crest-highlight { stroke: #fff; opacity: 0.85; }
html[data-theme='light'] .crest-halo { opacity: 0.4; }
/* Pattern fields are texture, not illustration: thin, even strokes and small nodes. */
.panel-field { opacity: 0.34; }
.perspective-panel .panel-node { fill: currentColor; stroke: none; }
@media screen and (max-width: 40rem) {
  .perspective-panel {
    width: min(78%, 24rem);
    height: 18rem;
    inset-inline-end: -4rem;
    opacity: 0.28;
    mask-image: linear-gradient(90deg, transparent, #000 65%), linear-gradient(180deg, #000 10%, transparent 90%);
  }
  .panel-wordmark { opacity: 0.08; }
  .crest-halo { display: none; }
  .resume-title-row { padding-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .perspective-panel *, .perspective-viz * { animation: none !important; }
  /* Freeze each symbol at its legible resting state, including the check. */
  .viz-check { stroke-dashoffset: 0; opacity: 1; }
  .viz-line, .viz-node-core { opacity: 0.8; }
}
@media (forced-colors: active) {
  .perspective-panel { display: none; }
  .resume-header .perspective-viz { filter: none; }
}
@media print {
  .perspective-panel, .crest-halo { display: none !important; }
  html .resume-page .resume-header {
    --crest-ink: #787878;
    --crest-light: #aaa;
    --crest-deep: #555;
    --crest-companion: #888;
    --crest-face: #fff;
  }
}
/* The corrected role title is long; when it must wrap beside the crest, balance it so
   "(Level III)" never sits alone on a line. */
.resume-role .role-segment:first-child { text-wrap: balance; }