/* credit-page.css — shared styles for credit detail pages */

/* Fade-in on scroll */
.cp-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(.2,.6,.2,1), transform 800ms cubic-bezier(.2,.6,.2,1);
}
.cp-fade.in {
  opacity: 1;
  transform: translateY(0);
}

/* Filmstrip frame around BTS images */
.cp-filmframe {
  position: relative;
  padding: 14px 8px;
  background: #0a0908;
  border: 1px solid var(--hair);
}
.cp-filmframe::before,
.cp-filmframe::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background-image:
    linear-gradient(90deg,
      transparent 0%, transparent 6px,
      #000 6px, #000 14px,
      transparent 14px, transparent 22px);
  background-size: 22px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.cp-filmframe::before { top: 0; }
.cp-filmframe::after { bottom: 0; }
.cp-filmframe-inner {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Buttons */
.cp-btn {
  display: inline-flex;
  align-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 22px;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  background: transparent;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.cp-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* Prev/next nav cards */
.cp-nav-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  border: 1px solid var(--hair);
  background: #0a0a0a;
  transition: background 300ms ease, border-color 300ms ease, transform 400ms cubic-bezier(.2,.6,.2,1);
  text-decoration: none;
}
.cp-nav-card:hover {
  background: #111;
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-3px);
}
.cp-nav-prev:hover { transform: translate(-3px, -3px); }
.cp-nav-next:hover { transform: translate(3px, -3px); }
.cp-nav-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}

/* Mobile */
@media (max-width: 880px) {
  .cp-2col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Key art: portrait poster sits right of the title on desktop, centred above it on mobile */
.cp-keyart-right { padding: 96px 6vw 0 0; }
@media (max-width: 760px) {
  .cp-keyart-right { justify-content: center !important; align-items: flex-start !important; padding: 140px 0 0 0; }
  .cp-keyart-right img.cp-portrait { height: 44% !important; }
  .cp-hero-title { max-width: none !important; font-size: clamp(36px, 10vw, 60px) !important; }
  .cp-keyart-right img.cp-banner, .cp-keyart-right img.cp-framed { width: 86% !important; }
}

/* Phone: compact top bar, single-column sections, tighter rhythm */
@media (max-width: 760px) {
  .cp-top { padding: 10px 16px !important; grid-template-columns: auto 1fr auto !important; gap: 10px; }
  .cp-top img { height: 48px !important; width: auto !important; }
  .cp-top-back { font-size: 9px; justify-self: center; white-space: nowrap; }
  .cp-hero-meta { top: 18px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .cp-hero-titleblock { bottom: 56px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .cp-hero-titleblock .micro { margin-bottom: 12px !important; }
  .cp-scrollcue { bottom: 12px !important; }
  .cp-fade { padding: 48px 0 !important; }
  .cp-fade > .container { padding-left: 16px !important; padding-right: 16px !important; }
  .cp-2col { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .cp-fade > .container > .cp-2col:not(.container) { margin-bottom: 24px !important; }
  .cp-fade h2 { font-size: 28px !important; }
  .cp-synopsis-copy { font-size: 21px !important; }
  .cp-spec-row { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 12px !important; padding: 14px 0 !important; }
  .cp-spec-row dd { font-size: 15px !important; overflow-wrap: anywhere; }
  .cp-collab-row { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 12px !important; padding: 12px 0 !important; }
  .cp-collab-row span:last-child { font-size: 15px !important; }
  .cp-photo-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cp-bts-ph { gap: 8px !important; }
  .cp-prevnext { padding: 40px 0 48px 0 !important; }
  .cp-prevnext > .container { gap: 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .cp-nav-card { padding: 18px 14px; gap: 10px; min-width: 0; }
  .cp-nav-title { font-size: 16px; overflow-wrap: anywhere; }
  .cine-stat__value { font-size: 20px !important; overflow-wrap: anywhere; }
}