/* West Media credits wall — tokens and states from CREDITS_WALL_BRIEF.md §3, §5, §8 */
@font-face {
  font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-semi-condensed-500.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-400.woff2) format("woff2");
}

.credits-wall {
  --accent: #5CC9FF;
  --zoom: 2.33;
  --pull: 0.9;
  --jitter: 0.5;
  --field-size: 1;
  --fs-k: 1;
  --glow: 0 0 12px var(--accent), 0 0 36px var(--accent);
  position: fixed; inset: 0; z-index: 3; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
}
.credits-wall.is-open { visibility: visible; }
.credits-wall.tier-mid { --fs-k: 0.86; }

.cw-sr, .credits-wall:not(.tier-list) .cw-list {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cw-field { position: absolute; inset: 0; }

/* --- titles ---------------------------------------------------------------- */
.cw-title {
  position: absolute; transform: translate(-50%, -50%);
  font: 500 calc(var(--s) * var(--fs-k) * var(--field-size) * 1px)/1.1 "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .02em; white-space: nowrap; color: #fff; text-decoration: none;
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .15s, opacity .35s, text-shadow .2s;
}
.cw-title.is-in { opacity: var(--o); pointer-events: auto; transition-duration: .24s, .15s, .45s, .2s; }
.cw-field.has-hover .cw-title.is-in { opacity: calc(var(--o) * .4); }
.cw-field.has-hover .cw-title.is-in.is-sib { opacity: min(1, calc(var(--o) + .25)); }
.credits-wall.is-open .cw-field .cw-title.is-in.is-lit,
.credits-wall.is-open .cw-field .cw-title.is-in:focus-visible {
  opacity: 1; color: var(--accent); text-shadow: var(--glow); z-index: 9; outline: none;
}
.cw-title.is-hot { z-index: 10 !important; }
/* family members of the selected title: a small lift out of the dim, no glow */
.cw-field.has-hover .cw-title.is-in.is-kin { opacity: min(1, calc(var(--o) * .4 + .32)); }

/* --- family link lines (node-editor curves) -----------------------------------
   studio: amber · director / production manager: blue · franchise: pale blue */
.cw-links {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  pointer-events: none; transition: opacity .15s;
}
.cw-links.is-out { opacity: 0; }
.cw-links path { fill: none; stroke-linecap: round; }   /* draw-out timing is set per line in credits-wall.js */
.cw-links .cw-ln-s { stroke: rgba(255, 170, 72, .2); stroke-width: .75px; }
.cw-links .cw-ln-p { stroke: rgba(92, 201, 255, .3); stroke-width: .75px; }
.cw-links .cw-ln-f { stroke: rgba(150, 220, 255, .45); stroke-width: 1px; }
.cw-links circle.cw-port { stroke: none; opacity: 0; transition: opacity .18s; }
.cw-links.is-traced circle.cw-port { opacity: 1; }
.cw-links circle.cw-ln-s { fill: rgba(255, 170, 72, .4); }
.cw-links circle.cw-ln-p { fill: rgba(92, 201, 255, .5); }
.cw-links circle.cw-ln-f { fill: rgba(150, 220, 255, .7); }

.cw-detail {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 2px;
  font: 400 8px/1.3 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .06em;
  color: #BFEAFF;
  /* a dark halo keeps the lines readable over the dimmed titles behind them */
  text-shadow: 0 0 2px #000, 0 0 5px #000, 0 0 9px rgba(0, 0, 0, .9), 0 0 6px rgba(92, 201, 255, .35);
  white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.cw-title.is-hot .cw-detail, .cw-title:focus-visible .cw-detail {
  opacity: 1; visibility: visible; transition: opacity .2s;
}
.cw-detail { text-align: center; }
.cw-line { display: block; }
.cw-detail .cw-line + .cw-line { margin-top: 1px; }
/* "DIR", "PM": a quieter label in front of the name */
.cw-label { text-decoration: none; border: 0; cursor: inherit; margin-right: .2em; font-size: .82em; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* --- axis chrome: year labels, decade hairlines -------------------------------- */
.cw-year, .cw-hair, .cw-badge { opacity: 0; transition: opacity .6s; }
.credits-wall.chrome-in .cw-year, .credits-wall.chrome-in .cw-hair, .credits-wall.chrome-in .cw-badge { opacity: 1; }
.cw-year {
  position: absolute; top: 14px; transform: translateX(-50%);
  font: 400 9px/1 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .14em;
  color: #3F7F99; padding: 3px 1px; cursor: default; pointer-events: auto;
  transition: opacity .6s, color .15s, text-shadow .2s;
}
.credits-wall:not(.chrome-in) .cw-year { pointer-events: none; }
.cw-year.is-low { top: 26px; }
.cw-year.is-key { font-weight: 500; color: #4f93ae; }
.cw-year.is-lit { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.tier-mid .cw-year.is-odd:not(.is-key) { display: none; }
.cw-hair {
  position: absolute; top: 36px; bottom: 24px; width: 1px; margin-left: -.5px;
  background: rgba(92, 201, 255, .09); pointer-events: none;
}
.cw-hair.is-centre { background: rgba(92, 201, 255, .16); }

.cw-badge {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font: 500 9px/1 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 186, 92, .55); border: 1px solid rgba(255, 186, 92, .3); padding: 5px 9px 4px;
  pointer-events: none;
}

/* --- phones: the "Strata" list (§7a) -------------------------------------------- */
.tier-list .cw-field { display: none; }
.tier-list .cw-list {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 28px 22px 84px; box-sizing: border-box;
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.tier-list.chrome-in .cw-list { opacity: 1; pointer-events: auto; }
.cw-list-head { text-align: center; margin: 4px 0 26px; }
.cw-list-head img { width: min(300px, 78vw); height: auto; aspect-ratio: 1200 / 520; }
/* a fade under the corner links so the list never runs into them */
.tier-list::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; pointer-events: none;
  background: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity .5s;
}
.tier-list.chrome-in::after { opacity: 1; }
.cw-list-stats {
  margin: 10px 0 0; font: 400 12px/1.4 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .08em;
  color: rgba(191, 234, 255, .82);
}
.cw-list-year { margin: 0 0 18px; }
.cw-list-year h3 {
  margin: 0 0 7px; font: 500 10px/1 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .2em;
  color: #3F7F99; border-bottom: 1px solid rgba(92, 201, 255, .12); padding-bottom: 6px;
}
.cw-list-year ul { list-style: none; margin: 0; padding: 0; }
.cw-list-year li { padding: 4px 0; }
.cw-list-title {
  display: block; font: 500 15px/1.25 "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .02em; color: rgba(255, 255, 255, .82); text-decoration: none;
}
a.cw-list-title:active, a.cw-list-title:focus-visible { color: var(--accent); text-shadow: var(--glow); outline: none; }
.cw-list-detail {
  display: block; font: 400 11px/1.4 "Barlow", ui-sans-serif, sans-serif; letter-spacing: .04em;
  color: rgba(191, 234, 255, .5);
}
.tier-list .cw-badge { bottom: auto; top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cw-title, .cw-title.is-in { transition-property: color, opacity, text-shadow; transition-duration: 0s, .3s, 0s; }
  .cw-detail { transition: none; }
  .cw-links path { transition: none; }
  .cw-links circle.cw-port { opacity: 1; transition: none; }
  .cw-links:not(:empty) { animation: cw-links-in .3s ease-out; }
}
@keyframes cw-links-in { from { opacity: 0; } }