/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  overflow-x: hidden;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.28em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  color: var(--text-primary);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 1rem;
  text-wrap: balance;
}

.section {
  padding: var(--space-section) var(--space-gutter);
}

.section--surface { background: var(--bg-surface); }

/* Branded keyboard ring for text links that otherwise fall back to the UA
   default. Buttons/CTAs carry their own :focus-visible language; this gives
   the inline links the same red ring at a consistent offset. */
.nav__link:focus-visible,
.mobile-nav__link:focus-visible,
.about__link:focus-visible,
.contact__email:focus-visible,
.footer__links a:focus-visible,
.footer__impressum:focus-visible,
.credentials__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--space-gutter);
  background: transparent;
  transition: background var(--duration-mid) var(--ease-cinematic),
              backdrop-filter var(--duration-mid) var(--ease-cinematic),
              border-color var(--duration-mid) var(--ease-cinematic);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.nav__brand {
  font-family: var(--font-display);
  /* tiny all-caps mark — heavier weight keeps Bodoni's hairlines from
     dropping out on small / low-DPI screens (hero name stays delicate) */
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.19em;
  color: var(--text-primary);
}

.nav__links {
  display: none;
  gap: 2.5rem;
}

.nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-cinematic);
  padding: 0.5rem 0;
}

.nav__link:hover,
.nav__link.is-active { color: var(--accent-text); }

.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* mobile overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--bg-overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility delays on close so opacity fade finishes before the layer
     is removed from the compositor — prevents the backdrop-filter flash at
     page load and mid-session when the overlay is behind the hero stack */
  transition: opacity var(--duration-mid) var(--ease-cinematic),
              visibility 0s var(--duration-mid);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-mid) var(--ease-cinematic),
              visibility 0s;
}

.mobile-nav__close {
  position: absolute;
  top: 1.25rem;
  right: var(--space-gutter);
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.mobile-nav__link:hover { color: var(--accent); }

body.no-scroll { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--space-gutter);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #14111a 0%, #0c0c0d 60%, #0a0a0c 100%);
  z-index: 0;
}

/* the red glow lives on its own layer so it can breathe */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 100%, rgba(168, 37, 47, 0.18) 0%, transparent 55%);
  animation: glow-breathe 12s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg::after { animation: none; }
}

.hero__portrait {
  position: absolute;
  right: var(--space-gutter);
  bottom: 0;
  width: 45%;
  max-width: 600px;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}

@media (max-width: 767px) {
  .hero__portrait {
    width: 70%;
    right: 5%;
    opacity: 0.25;
  }
}

@media (max-width: 479px) {
  .hero__portrait { display: none; }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-hero);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-wrap: balance;
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  color: var(--accent-text);
  margin-top: 1.25rem;
  letter-spacing: -0.005em;
}

.hero__credits-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3rem;
}

.hero__credits {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  color: var(--text-primary);
  list-style: none;
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  line-height: 1.5;
  max-width: 38ch;
  letter-spacing: -0.005em;
}

.hero__credits li {
  position: relative;
}

.hero__credits li::after {
  content: "·";
  display: inline-block;
  margin-left: 0.6rem;
  color: var(--accent);
  font-style: normal;
}

.hero__credits li:last-child::after { content: ""; margin-left: 0; }

.hero__cta {
  margin-top: 3rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: transparent;
  border: 1px solid var(--accent);
  padding: 0.85rem 2rem;
  transition: background var(--duration-mid) var(--ease-out-quart),
              color var(--duration-mid) var(--ease-out-quart),
              box-shadow var(--duration-mid) var(--ease-out-quart);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--accent-glow);
  outline: none;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-muted);
  font-size: 1.5rem;
  animation: bounceDown 2s var(--ease-cinematic) infinite;
  transition: opacity var(--duration-mid) var(--ease-cinematic);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bounceDown {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
  }
}

.hero__scroll.is-hidden { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------
   HERO — load sequence
   The scene pulls back from a slight zoom while eyebrow → name →
   tagline slide in one after another; the rest follows.
   Every animated initial state is scoped under `.hero-intro` (set
   on <html> before first paint by an inline head script, only when
   motion is allowed) — so without JS, or with reduced motion, the
   hero renders in its final, fully visible state with no flash.
   ------------------------------------------------------------ */

/* Vignette — a soft edge-darkening that grounds the composition. */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(0, 0, 0, 0.5) 100%);
}

/* Film grain — a whisper at rest (~5%), drifting subtly. The texture
   the flat gradient was missing; never loud enough to read as "effect". */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 1.4s steps(4) infinite;
  will-change: transform;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1.5%, -1.5%); }
  100% { transform: translate(2%, 1.5%); }
}

/* --- The choreography, gated via `.hero-intro` on <html> --- */

/* The scene — gradient + portrait — is fully visible from the very first
   frame, slightly zoomed, and pulls back to its final scale: a slow
   cinematic establishing move behind the headline. The portrait scales
   only on desktop (below 768px it's a faint backdrop or hidden). */
.hero-intro .hero__bg { animation: hero-zoom 2600ms var(--ease-out-quart) both; }
@media (min-width: 768px) {
  .hero-intro .hero__portrait {
    transform-origin: center bottom;
    animation: hero-zoom 2600ms var(--ease-out-quart) both;
  }
}

/* Eyebrow → name → tagline slide up one after another. The explicit
   hidden state (not just the animation's backwards-fill) guarantees they
   are invisible the instant the class applies — no first-frame flash. */
.hero-intro .hero__eyebrow,
.hero-intro .hero__name,
.hero-intro .hero__tagline { opacity: 0; }
.hero-intro .hero__eyebrow { animation: hero-slide 800ms var(--ease-out-quart) 250ms both; }
.hero-intro .hero__name    { animation: hero-slide 900ms cubic-bezier(0.16, 1, 0.3, 1) 550ms both; }
.hero-intro .hero__tagline { animation: hero-slide 800ms var(--ease-out-quart) 950ms both; }

/* The collaborations + CTA follow the headline. */
.hero-intro .hero__credits-label { animation: hero-rise 700ms var(--ease-out-quart) 1350ms both; }
.hero-intro .hero__cta           { animation: hero-rise 700ms var(--ease-out-quart) 1950ms both; }

.hero-intro .hero__credits li {
  opacity: 0;
  transform: translateY(8px);
  animation: hero-rise 600ms var(--ease-out-quart) both;
}
.hero-intro .hero__credits li:nth-child(1) { animation-delay: 1450ms; }
.hero-intro .hero__credits li:nth-child(2) { animation-delay: 1520ms; }
.hero-intro .hero__credits li:nth-child(3) { animation-delay: 1590ms; }
.hero-intro .hero__credits li:nth-child(4) { animation-delay: 1660ms; }
.hero-intro .hero__credits li:nth-child(5) { animation-delay: 1730ms; }
.hero-intro .hero__credits li:nth-child(6) { animation-delay: 1800ms; }
.hero-intro .hero__credits li:nth-child(7) { animation-delay: 1870ms; }

/* Grain pulses a touch stronger during the load, then settles to a whisper. */
.hero-intro .hero__grain {
  animation: grain-drift 1.4s steps(4) infinite, grain-settle 2.2s ease-out both;
}
@keyframes grain-settle {
  0%, 65% { opacity: 0.1; }
  100%    { opacity: 0.05; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-slide {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* The always-on grain drift holds still under reduced motion; the intro
   class is never added there either, so the hero is simply visible. */
@media (prefers-reduced-motion: reduce) {
  .hero__grain { animation: none; }
}

/* ============================================================
   SHOWREEL — full-bleed autoplay reel (caps at 1920px)
   ============================================================ */
.section--showreel {
  padding-left: 0;
  padding-right: 0;
}

.showreel {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.showreel__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 817;
  background: #08080a;
  overflow: hidden;
}

.showreel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* shown only when the browser refuses autoplay (Low Power Mode, data
   saver, reduced motion) — same blurred-pill language as the credits
   controls, so the fallback still reads as designed, not broken */
.showreel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px; /* optical centering of the triangle */
  font-size: 1.4rem;
  color: var(--text-primary);
  background: rgba(12, 12, 13, 0.72);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart),
              background var(--duration-fast) var(--ease-out-quart);
}

.showreel__play:hover,
.showreel__play:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
}

.showreel__play[hidden] { display: none; }

.showreel__caption {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1.5rem;
  padding: 0 var(--space-gutter);
}

/* ============================================================
   FEATURED + LIBRARY shared
   ============================================================ */
.section-header { margin-bottom: 3rem; max-width: 56rem; }

.section-header--with-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.section-meta {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-small);
  color: var(--text-secondary);
  letter-spacing: 0;
  margin-top: 0;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--library {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid--library { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid--library { grid-template-columns: repeat(4, 1fr); }
}

/* card base */
.card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-mid) var(--ease-cinematic),
              border-color var(--duration-mid) var(--ease-cinematic),
              opacity 250ms var(--ease-cinematic);
  text-align: left;
  width: 100%;
  color: inherit;
}

.card:hover { border-color: var(--border-strong); }

.card__poster {
  width: 100%;
  background: var(--bg-raised);
  object-fit: cover;
  object-position: center;
}

/* library card — full-bleed poster, year revealed on hover/focus */
.card--library { aspect-ratio: 1 / 1.414; background: var(--bg-raised); }

.card--library .card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card--library .card__year-badge,
.card--library .card__status-badge {
  position: absolute;
  top: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  color: var(--text-primary);
  background: rgba(12, 12, 13, 0.6);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart);
  pointer-events: none;
}

.card--library .card__year-badge { right: 0.6rem; }

.card--library .card__status-badge {
  left: 0.6rem;
  color: var(--accent-text);
  border-color: var(--accent);
  text-transform: uppercase;
}

.card--library:hover .card__year-badge,
.card--library:focus-visible .card__year-badge,
.card--library:hover .card__status-badge,
.card--library:focus-visible .card__status-badge {
  opacity: 1;
  transform: translateY(0);
}

.card--library:hover { transform: translateY(-4px); }
.card--library.is-hidden { display: none; }

/* poster failed to load — the card becomes typographic */
.card--no-art::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* no-JS fallback note where the rendered grids would be */
.nojs-note {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 60ch;
}

.nojs-note a {
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .card--library .card__year-badge,
  .card--library .card__status-badge { transition: none; }
}

/* ============================================================
   FEATURED — lead feature + 2×2 lobby cards
   Title + year set ON the still, over a bottom scrim.
   ============================================================ */
.featured {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
}

.feat {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-raised);
  cursor: pointer;
  color: inherit;
  text-align: left;
  isolation: isolate;
  transition: border-color var(--duration-mid) var(--ease-cinematic);
}

.feat:hover { border-color: var(--border-strong); }

/* Ken Burns drift on the lead — a frame of film never fully stands still.
   The drift owns the lead image's transform, so the hover zoom only
   applies to tiles. */
.feat--lead .feat__img {
  animation: lead-drift 30s linear infinite alternate;
}

@keyframes lead-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.feat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

.feat:hover .feat__img { transform: scale(1.04); }

/* hover preview video — sits above the still, below the scrim/overlay so the
   title stays legible. Faded in by JS only once playback actually starts. */
.feat__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-mid) var(--ease-cinematic);
}

.feat.is-previewing .feat__video { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .feat__video { display: none; }
}

.feat__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(6, 6, 8, 0.94) 0%,
    rgba(6, 6, 8, 0.80) 26%,
    rgba(6, 6, 8, 0.42) 50%,
    rgba(6, 6, 8, 0) 82%);
}

/* On wide screens the lead frame is much taller — let its scrim sit lower so
   the still breathes. On mobile the lead is the same height as a tile, so it
   keeps the stronger default scrim for legibility. */
@media (min-width: 768px) {
  .feat--lead .feat__scrim {
    background: linear-gradient(to top,
      rgba(6, 6, 8, 0.92) 0%,
      rgba(6, 6, 8, 0.66) 20%,
      rgba(6, 6, 8, 0.22) 40%,
      rgba(6, 6, 8, 0) 62%);
  }
}

.feat__overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: clamp(1rem, 2.4vw, 2.25rem);
}

.feat__cat {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.feat__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: transform var(--duration-mid) var(--ease-out-quart);
}

.feat--tile .feat__title { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.feat--lead .feat__title { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 18ch; }

.feat:hover .feat__title { transform: translateY(-2px); }

.feat__meta {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feat__year {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.feat__dot { color: var(--accent); }

.feat__rule {
  margin-top: 0.5rem;
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  transition: width var(--duration-mid) var(--ease-out-quart);
}

.feat:hover .feat__rule,
.feat:focus-visible .feat__rule { width: 4.5rem; }

.feat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .feat__img,
  .feat__title,
  .feat__rule { transition: none; }
  .feat:hover .feat__img { transform: none; }
  .feat:hover .feat__title { transform: none; }
  .feat--lead .feat__img { animation: none; }
}

/* ============================================================
   LIBRARY FILTERS
   ============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px; /* prevent focus-ring clip on scroll edge */
    padding-right: 1.5rem; /* breathing room before fade */
    mask-image: linear-gradient(to right, black calc(100% - 3.5rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 3.5rem), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex-shrink: 0; }
}

.filter {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.6rem 1rem;
  border: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-cinematic),
              border-color var(--duration-fast) var(--ease-cinematic);
}

.filter:hover { color: var(--text-primary); }

.filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.filter.is-active {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* "Show more" — reveals the rest of the current filter view */
.library__more {
  display: flex;
  margin: 2.5rem auto 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 0.85rem 2.25rem;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-cinematic),
              border-color var(--duration-fast) var(--ease-cinematic);
}

.library__more:hover,
.library__more:focus-visible {
  color: var(--accent-text);
  border-color: var(--accent);
  outline: none;
}

.library__more[hidden] { display: none; }

/* ============================================================
   SCROLL REVEALS — one-shot rise-in as sections enter the
   viewport. The hidden `.reveal` state is applied by JS only,
   so content is never gated on scripting or animation.
   ============================================================ */
.reveal { opacity: 0; }

.reveal.is-in {
  opacity: 1;
  animation: rise-in 700ms var(--ease-out-quart) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* library cards revealed by "Show more" rise in the same way */
.card--library.is-entering {
  animation: rise-in 600ms var(--ease-out-quart) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.is-in,
  .card--library.is-entering { animation: none; }
}

/* ============================================================
   MODAL
   ============================================================ */
/* registered so the glow color can cross-fade between projects */
@property --modal-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #a8252f;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  --modal-glow: #a8252f;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--space-gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-mid) var(--ease-cinematic),
              --modal-glow 900ms var(--ease-cinematic);
}

/* same breathing glow as the hero, tinted by the open project's poster */
.modal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--modal-glow) 30%, transparent) 0%, transparent 65%);
  animation: glow-breathe 12s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .modal::after { animation: none; }
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 95vw);
  max-height: 90svh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--modal-glow) 16%, transparent) 0%, transparent 60%),
    var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(20px);
  transition: transform var(--duration-mid) var(--ease-cinematic);
}

.modal.is-open .modal__panel { transform: translateY(0); }

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: 50%;
  background: rgba(12, 12, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color var(--duration-fast) var(--ease-cinematic),
              background var(--duration-fast) var(--ease-cinematic);
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}

/* Lightbox-style prev/next — anchored just outside the panel edges on wide
   screens, hugging the viewport edges on narrow ones. Touch users also get
   swipe (wired in js/modal.js); these stay as the pointer/keyboard path. */
.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--text-primary);
  border-radius: 50%;
  background: rgba(12, 12, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color var(--duration-fast) var(--ease-cinematic),
              background var(--duration-fast) var(--ease-cinematic);
}

.modal__nav[hidden] { display: none; }

.modal__nav--prev { left: max(0.5rem, calc(50vw - min(460px, 47.5vw) - 3.5rem)); }
.modal__nav--next { right: max(0.5rem, calc(50vw - min(460px, 47.5vw) - 3.5rem)); }

.modal__nav:hover,
.modal__nav:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}

/* On narrow screens the panel fills the viewport, so edge arrows would sit on
   top of the content (and over tappable links). Hide them there and let the
   swipe gesture carry navigation instead. */
@media (max-width: 767px) {
  .modal__nav { display: none; }
}

.modal__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.modal__layout > * { min-width: 0; }

@media (min-width: 768px) {
  .modal__layout {
    grid-template-columns: 38% 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.modal__media { min-width: 0; }

@media (min-width: 768px) {
  .modal__media {
    position: sticky;
    top: 0;
  }
}

.modal__poster {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-surface);
}

@media (max-width: 767px) {
  .modal__poster {
    aspect-ratio: 16 / 10;
    object-position: center 30%;
  }
}

/* ---- Trailer facade: the poster doubles as a click-to-play thumbnail.
   No iframe loads until the visitor presses play. ---------------------- */
.modal__trailer {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.modal__trailer .modal__poster {
  transition: transform var(--duration-mid) var(--ease-cinematic);
}

.modal__trailer-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 13, 0) 45%, rgba(12, 12, 13, 0.6) 100%);
  transition: background var(--duration-fast) ease;
}

.modal__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  border: 1.5px solid rgba(240, 237, 232, 0.85);
  background: rgba(12, 12, 13, 0.35);
  transition: transform var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) ease,
              background var(--duration-fast) ease;
}

.modal__play svg { margin-left: 3px; }

.modal__trailer-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-primary);
  pointer-events: none;
}

.modal__trailer:hover .modal__play,
.modal__trailer:focus-visible .modal__play {
  transform: scale(1.08);
  border-color: var(--accent-text);
  background: var(--accent-dim);
}

.modal__trailer:hover .modal__poster {
  transform: scale(1.03);
}

.modal__trailer:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* while playing, the trailer breaks out full-width: the layout collapses to a
   single column so the 16:9 player spans the modal and the details flow below */
.modal__layout.modal__layout--trailer {
  grid-template-columns: 1fr;
}

.modal__layout--trailer .modal__media {
  position: static;
}

.modal__trailer-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.modal__trailer-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__trailer-close {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.modal__trailer-close:hover,
.modal__trailer-close:focus-visible {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .modal__trailer .modal__poster,
  .modal__play {
    transition: none;
  }
  .modal__trailer:hover .modal__play,
  .modal__trailer:focus-visible .modal__play,
  .modal__trailer:hover .modal__poster {
    transform: none;
  }
}

.modal__category {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  color: var(--text-primary);
  margin-top: 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.modal__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.3;
  text-wrap: balance;
}

.modal__year-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.modal__year {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.modal__imdb {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-glow);
  padding-bottom: 0.1em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.modal__imdb:hover,
.modal__imdb:focus-visible {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.modal__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.modal__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 600px) {
  .modal__facts { grid-template-columns: max-content 1fr; column-gap: 2rem; row-gap: 1rem; }
}

.modal__label {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.modal__content { min-width: 0; }

.modal__value {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.role-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.role-pill {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent-text);
  border: 1px solid var(--accent-glow);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}

.modal__description {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 60ch;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.modal__stills-label {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.stills {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.stills::-webkit-scrollbar { height: 6px; }
.stills::-webkit-scrollbar-track { background: transparent; }
.stills::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@media (max-width: 767px) {
  .stills { scrollbar-width: none; }
  .stills::-webkit-scrollbar { display: none; }
}

.still {
  height: 120px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .about {
    grid-template-columns: 55% 1fr;
    gap: 4rem;
    align-items: start;
  }
}

.about__title { white-space: pre-line; }

.about__body p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 60ch;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

.about__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
}

.about__link {
  font-size: var(--text-small);
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-cinematic),
              border-color var(--duration-fast) var(--ease-cinematic);
}

.about__link:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.about__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(170deg, #1e1822 0%, #14121a 100%);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.press-strip { margin-top: 2rem; }

.press-strip__label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.press-strip__list {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  letter-spacing: -0.005em;
}

.press-badge {
  display: inline;
  color: inherit;
  border: none;
  padding: 0;
  background: none;
}

.press-badge:not(:last-child)::after {
  content: " · ";
  color: var(--accent);
  font-style: normal;
  margin: 0 0.15rem;
}

/* ============================================================
   CREDITS — "Worked with." as a rolling end-credit screen.
   The stage is tall; the pin stays sticky inside it while scroll
   progress (plus a slow idle drift) drives the roll. Names come
   from js/credits-data.js, rendered by js/credits.js.
   ============================================================ */
.credits { padding: 0; }

.credits__stage {
  /* 100svh of pinned screen + 170vh of scrub distance */
  height: calc(100vh + 170vh);
  height: calc(100svh + 170vh);
}

.credits__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  box-sizing: border-box;
  /* intro pinned to the top, screen to the bottom — this padding also
     clears the fixed nav */
  padding: 6rem 0 1.5rem;
}

@media (max-width: 767px) {
  .credits__pin { padding: 5.5rem 0 1.25rem; }
}

/* ---------- intro ---------- */
.credits__intro {
  /* override .container: with margin:auto + flex's default stretch,
     a flex item without an explicit width shrinks to fit its content
     instead of filling the row — so set width explicitly here */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 var(--space-gutter);
}

.credits__meta {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: 1.7;
  max-width: 38ch;
}

.credits__actions {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .credits__actions { margin-top: 2.5rem; }
}

.credits__all-btn {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-strong);
  padding: 0.8rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart);
}

.credits__all-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.credits__all-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.credits__hint {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .credits__hint { display: block; }
}

/* ---------- the screen — full-bleed letterbox ---------- */
.credits__screen {
  position: relative;
  width: 100%;
  min-height: 160px;
  /* the aspect-ratio height below is a floor — grow to absorb any
     leftover space in the pin so the frame never leaves a dead gap
     under a short intro */
  flex: 1 1 auto;
  background: #0a0a0b;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(217, 53, 69, 0.05),
    0 0 80px rgba(240, 237, 232, 0.03);
  overflow: hidden;
}

/* height follows a cinematic aspect ratio as a minimum, capped by
   viewport height so the pinned screen never overflows on short
   viewports */
@media (max-width: 767px) {
  .credits__screen {
    /* ~4:3 */
    height: min(75vw, 42vh);
    height: min(75vw, 42svh);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .credits__screen {
    /* ~16:9 */
    height: min(56.25vw, 56vh);
    height: min(56.25vw, 56svh);
  }
}

@media (min-width: 1100px) {
  .credits__screen {
    /* ~21:9 — true cinematic letterbox */
    height: min(42.86vw, 62vh);
    height: min(42.86vw, 62svh);
  }
}

/* ambient projection light — large, slow, faint */
.credits__ambient {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  left: 0;
  top: 12%;
  background: radial-gradient(circle at 50% 50%, rgba(217, 53, 69, 0.09), transparent 65%);
  filter: blur(70px);
  animation: credits-ambient 48s ease-in-out infinite alternate;
}

@keyframes credits-ambient {
  0%   { transform: translate(-10%, -8%) scale(0.95); opacity: 0.5; }
  50%  { transform: translate(8%, 12%) scale(1.18); opacity: 0.75; }
  100% { transform: translate(-4%, 22%) scale(1); opacity: 0.55; }
}

.credits__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}

.credits__roll {
  padding: 0 1rem;
  will-change: transform;
}

@media (min-width: 768px) {
  /* pillarbox: keep the roll in a centered column so the wide frame
     reads as black space either side, like a real projected aspect ratio */
  .credits__roll {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
}

@media (min-width: 1100px) {
  .credits__roll { max-width: 40rem; }
}

.credits__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
  align-items: baseline;
  line-height: 2.5rem;
}

.credits__name {
  text-align: right;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 0 9px rgba(240, 237, 232, 0.18);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.credits__prof {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.71875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-shadow: 0 0 8px rgba(240, 237, 232, 0.08);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .credits__row { gap: 0 2rem; line-height: 2.85rem; }
  .credits__name { font-size: 0.9375rem; letter-spacing: 0.13em; }
  .credits__prof { font-size: 0.8125rem; letter-spacing: 0.2em; }
}

@media (hover: hover) {
  .credits__row:hover .credits__name { color: var(--accent-text); }
}

.credits__group-card {
  margin: 3.4rem 0 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.credits__group-card::before,
.credits__group-card::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--border-strong);
}

.credits__group-kicker {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.credits__group-name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* progress filament on the frame's right edge */
.credits__progress {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: var(--border);
}

.credits__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}

/* pause + skip controls */
.credits__controls {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 0.6rem;
}

.credits__ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(12, 12, 13, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  padding: 0.65rem 1.05rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart);
}

.credits__ctrl:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.credits__ctrl:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- "View all" expanded list ---------- */
.credits__all {
  padding: 0 var(--space-gutter) var(--space-section);
}

/* ---------- static fallback (reduced motion / no IO) ---------- */
.credits--static .credits__stage { height: auto; }

.credits--static .credits__pin {
  position: static;
  height: auto;
  padding: var(--space-section) 0 3rem;
}

.credits--static .credits__screen,
.credits--static .credits__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .credits__ambient { animation: none; opacity: 0.5; }
}

/* ============================================================
   CREDENTIALS — full name list (inside the credits expander)
   ============================================================ */
.credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .credentials { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.credentials__list {
  columns: 2;
  column-gap: 2rem;
}

@media (max-width: 359px) {
  .credentials__list { columns: 1; }
}

.credentials__item {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-primary);
  line-height: 1.7;
  letter-spacing: -0.005em;
  display: block;
  break-inside: avoid;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.credentials__item:hover {
  color: var(--accent-text);
}

.credentials__col-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  color: var(--accent-text);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  max-width: 700px;
  margin: 0 auto;
}

.contact__title {
  white-space: pre-line;
}

.contact__intro {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 1.5rem;
  max-width: 55ch;
  text-wrap: pretty;
}

.contact__blocks { margin-top: 3rem; }

.contact__block { padding: 1.5rem 0; }

.contact__block + .contact__block { border-top: 1px solid var(--border); }

.contact__label {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.contact__org {
  font-size: var(--text-small);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.contact__email {
  font-size: var(--text-body);
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-glow);
  padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-cinematic);
  display: inline-block;
  overflow-wrap: anywhere;
}

.contact__email:hover { border-bottom-color: var(--accent); }

.contact__website {
  display: block;
  width: fit-content;
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-glow);
  padding-bottom: 2px;
  transition: border-color var(--duration-fast) var(--ease-cinematic);
  overflow-wrap: anywhere;
}

.contact__website:hover { border-bottom-color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 2rem var(--space-gutter);
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__copy,
.footer__links a,
.footer__impressum {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-cinematic);
}

.footer__links {
  display: flex;
  gap: 1.5rem;
}

.footer__links a:hover,
.footer__impressum:hover { color: var(--text-secondary); }