/* ============ CREDITS CRAWL — a career as an end-title sequence ============ */
/*
   Signature palette: darkroom (#0c0c0c / #eeeeea / #ff4d00).
   Grammar:
   • Black screen. Centred column. The user is the projector — scroll-driven,
     never auto-scrolling.
   • Small-caps role lines (sans, wide tracking) over Cormorant Garamond
     title-case credits.
   • Poster cluster bands + one big montage wall as visual breaks — 2:3 slots,
     mediums only, no layout shift.
   • Film grain + gentle vignette; scroll-linked reveals as progressive
     enhancement via animation-timeline: view().
   All selectors scoped to .pg-creditscrawl. Tokens only.
*/

.pg-creditscrawl {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: center;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* film grain over everything — inline SVG, no external assets */
.pg-creditscrawl::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ── shared card scaffolding ───────────────────────────────────────────── */

.pg-creditscrawl .cc-card {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(4rem, 14cqh, 8rem) clamp(1.4rem, 6cqw, 3rem);
}

/* the recurring small-caps role line */
.pg-creditscrawl .cc-role {
  margin: 0 0 1.4rem;
  font-family: var(--font-sans);
  font-size: clamp(.6rem, 1.1cqw, .72rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em; /* optically recentre tracked caps */
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, var(--bg));
}

/* ── 01 · opener — the first title card ────────────────────────────────── */

.pg-creditscrawl .cc-open {
  min-height: clamp(520px, 100cqh, 1400px);
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6cqh, 4rem) clamp(1.4rem, 6cqw, 3rem);
  background: radial-gradient(120% 90% at 50% 42%,
    color-mix(in srgb, var(--ink) 4%, var(--bg)) 0%,
    var(--bg) 62%);
}

.pg-creditscrawl .cc-logo {
  position: absolute;
  top: clamp(1.4rem, 4cqh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  max-height: 44px;
  max-width: 140px;
  object-fit: contain;
  opacity: .85;
}

.pg-creditscrawl .cc-open-center { animation: cc-fadein 1.6s ease-out both; }

.pg-creditscrawl .cc-open-role { animation: cc-fadein 1.2s ease-out both .2s; }

.pg-creditscrawl .cc-name {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 7cqw, 4.8rem);
  line-height: 1.1;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  text-wrap: balance;
  animation: cc-fadein 1.8s ease-out both .35s;
}

.pg-creditscrawl .cc-tagline {
  margin: 1.6rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(.66rem, 1.3cqw, .8rem);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, var(--bg));
  animation: cc-fadein 1.8s ease-out both .7s;
}

.pg-creditscrawl .cc-cue {
  position: absolute;
  bottom: clamp(1.2rem, 4cqh, 2.4rem);
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, var(--bg));
  animation: cc-fadein 1.6s ease-out both 1.4s;
}
.pg-creditscrawl .cc-cue-tri {
  display: inline-block;
  color: var(--accent);
  animation: cc-pulse 2.6s ease-in-out infinite 2s;
}

@keyframes cc-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-pulse  { 0%, 100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

/* ── 02 · dedication (bio) ─────────────────────────────────────────────── */

.pg-creditscrawl .cc-bio {
  margin: 0 auto;
  max-width: 34rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.1cqw, 1.45rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 86%, var(--bg));
}

/* ── 03 · the credits sequence ─────────────────────────────────────────── */

.pg-creditscrawl .cc-seq-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1rem, 4cqh, 2.4rem) clamp(1.4rem, 6cqw, 3rem) 0;
}
.pg-creditscrawl .cc-seq-head .cc-role { margin: 0; }
.pg-creditscrawl .cc-rule {
  flex: 1;
  height: 1px;
  max-width: 72px;
  background: var(--line);
}

.pg-creditscrawl .cc-reel {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 10cqh, 5.5rem) clamp(1.4rem, 6cqw, 3rem);
}

.pg-creditscrawl .cc-reelmark {
  margin: 0 0 2.2rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 30%, var(--bg));
}

.pg-creditscrawl .cc-title {
  margin: 0 auto;
  padding: .38em 0;
  max-width: 36rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6cqw, 1.95rem);
  line-height: 1.35;
  text-wrap: balance;
}

/* recurring "Music by —" mini card */
.pg-creditscrawl .cc-musicby {
  padding: clamp(3rem, 10cqh, 5.5rem) clamp(1.4rem, 6cqw, 3rem);
}
.pg-creditscrawl .cc-musicby .cc-role { margin-bottom: .9rem; }
.pg-creditscrawl .cc-musicby-name {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4cqw, 2.4rem);
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
}

/* ── poster cluster bands — 10 slots, 2:3, mediums only ────────────────── */

.pg-creditscrawl .cc-cluster {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(4px, .6cqw, 10px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.6rem, 6cqh, 3.4rem) clamp(1rem, 4cqw, 2.6rem);
}

.pg-creditscrawl .cc-cluster img,
.pg-creditscrawl .cc-wall img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;           /* fixed slots — nothing jumps while loading */
  object-fit: cover;
  background: var(--surface);
  filter: saturate(.8) contrast(.96) brightness(.88);
}

/* ── the montage — one big poster-wall interlude ───────────────────────── */

.pg-creditscrawl .cc-montage {
  padding: clamp(2.4rem, 8cqh, 4.5rem) clamp(1rem, 3cqw, 2.2rem);
}
.pg-creditscrawl .cc-montage-role { margin-bottom: 2rem; }

.pg-creditscrawl .cc-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  max-width: 1500px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
}

/* ── closure card ──────────────────────────────────────────────────────── */

.pg-creditscrawl .cc-ellipsis {
  margin: 0 0 1.2rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--accent);
}
.pg-creditscrawl .cc-close-line {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2cqw, 2.3rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 80%, var(--bg));
}
.pg-creditscrawl .cc-close-line em {
  font-style: italic;
  color: var(--ink);
}

/* ── a career in numbers — single title-card sentence ──────────────────── */

.pg-creditscrawl .cc-stat-line {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.6cqw, 2rem);
  line-height: 1.7;
  text-wrap: balance;
}
.pg-creditscrawl .cc-stat { white-space: nowrap; }
.pg-creditscrawl .cc-stat-v {
  font-weight: 600;
  font-size: 1.25em;
  color: var(--ink);
}
.pg-creditscrawl .cc-stat-l {
  font-family: var(--font-sans);
  font-size: .42em;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, var(--bg));
}
.pg-creditscrawl .cc-stat-dot { color: var(--accent); }

/* ── original score — selections ───────────────────────────────────────── */

.pg-creditscrawl .cc-score { max-width: 44rem; }
.pg-creditscrawl .cc-tracks {
  margin-top: 2.2rem;
  text-align: left;
  border-top-color: var(--line);
}
.pg-creditscrawl .cc-tracks .track-row { border-bottom-color: var(--line); }
.pg-creditscrawl .cc-tracks strong {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.pg-creditscrawl .cc-tracks .tr-num {
  font-family: var(--font-mono);
  color: color-mix(in srgb, var(--ink) 38%, var(--bg));
}
.pg-creditscrawl .cc-tracks .tr-pub {
  font-family: var(--font-sans);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, var(--bg));
}

/* ── distribution — prose card ─────────────────────────────────────────── */

.pg-creditscrawl .cc-dist { max-width: 40rem; }
.pg-creditscrawl .cc-dist-line {
  margin: 0 0 1.3em;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.2cqw, 1.5rem);
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 62%, var(--bg));
}
.pg-creditscrawl .cc-dist-line:last-child { margin-bottom: 0; }
.pg-creditscrawl .cc-dist-name { color: var(--ink); }

/* ── featurette ────────────────────────────────────────────────────────── */

.pg-creditscrawl .cc-feat { max-width: 52rem; }
.pg-creditscrawl .cc-yt { margin-top: 1.6rem; }

/* ── user sections flex zone ───────────────────────────────────────────── */

.pg-creditscrawl .cc-xsec {
  max-width: 46rem;
  margin: 0 auto;
  text-align: left;
}

/* ── the end ───────────────────────────────────────────────────────────── */

.pg-creditscrawl .cc-end {
  min-height: clamp(480px, 90cqh, 1400px);
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: radial-gradient(120% 90% at 50% 55%,
    color-mix(in srgb, var(--ink) 4%, var(--bg)) 0%,
    var(--bg) 62%);
}

.pg-creditscrawl .cc-end-title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.2rem, 10cqw, 6.4rem);
  line-height: 1.05;
}

.pg-creditscrawl .cc-end-role { margin: 1.2rem 0 0; }
.pg-creditscrawl .cc-end-name { color: var(--ink); }

.pg-creditscrawl .cc-contact {
  margin-top: clamp(2.4rem, 7cqh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.pg-creditscrawl .cc-contact .cc-role { margin-bottom: .4rem; }

.pg-creditscrawl .cc-contact-link {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding-bottom: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.pg-creditscrawl .cc-contact-link:hover { border-bottom-color: var(--accent); color: var(--accent); }

.pg-creditscrawl .cc-soc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .8rem;
}

.pg-creditscrawl .colophon {
  margin-top: clamp(3rem, 9cqh, 5rem);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 30%, var(--bg));
}

/* ── scroll-driven reveals — the user is the projector ─────────────────── */
/* Progressive enhancement only; without support everything is simply visible. */

@supports (animation-timeline: view()) {
  .pg-creditscrawl .cc-title,
  .pg-creditscrawl .cc-reel .cc-role,
  .pg-creditscrawl .cc-reelmark,
  .pg-creditscrawl .cc-musicby,
  .pg-creditscrawl .cc-bio,
  .pg-creditscrawl .cc-close-line,
  .pg-creditscrawl .cc-ellipsis,
  .pg-creditscrawl .cc-stat-line,
  .pg-creditscrawl .cc-dist-line,
  .pg-creditscrawl .cc-cluster img {
    animation: cc-rise linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 42%;
  }
  @keyframes cc-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-creditscrawl * { animation: none !important; }
}

/* ── responsive — container queries only ───────────────────────────────── */

@container page (max-width: 980px) {
  .pg-creditscrawl .cc-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@container page (max-width: 620px) {
  .pg-creditscrawl .cc-cluster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-creditscrawl .cc-cluster img:nth-child(n+6) { display: none; }

  .pg-creditscrawl .cc-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .pg-creditscrawl .cc-wall img:nth-child(n+41) { display: none; }

  .pg-creditscrawl .cc-name { letter-spacing: .1em; text-indent: .1em; }
  /* stack the stat pairs like credit lines — never split a value from its label */
  .pg-creditscrawl .cc-stat { display: block; padding: .18em 0; }
  .pg-creditscrawl .cc-stat-dot { display: none; }
}