/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT» — pages/work.css
   The catalogue. Two dark modes on one page:
     A) FILMS  — a large editorial index. Hovering a film that has
        footage swaps the whole hall backdrop to its still and lights
        a red accent bar; the others dim. Not a cursor preview.
     B) SERVICED — framed cards. Hover crops the 16/9 frame to
        cinemascope: letterbox bars slide in while the image eases
        up in scale. Mask and content move at different speeds.

   No #hex, no px type sizes, no raw durations — tokens only.
   Load AFTER layout.css.
   ============================================================ */

/* ---------- Page layers ---------------------------------
   .cat-bg sits on the floor (--z-base); sections ride above it
   (--z-frame) with no background, so the hall shows through. */

.cat {
  position: relative;
  isolation: isolate;
}

.cat > .section {
  position: relative;
  z-index: var(--z-frame);
}

/* Backdrop swap: a film's still across the whole viewport.
   opacity .26 — the frame reads, the type keeps its contrast. */
.cat-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  opacity: 0;
  pointer-events: none;
  background: none;
  transition: opacity var(--d-slow) var(--e-out);
}

.cat-bg.is-on { opacity: 0.26; }

.cat-bg .xf__img { filter: saturate(0.85); }

/* A drop of scrim so the backdrop never fights the copy */
.cat-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-bg) 40%, transparent),
    color-mix(in srgb, var(--c-bg) 78%, transparent));
  pointer-events: none;
}

/* ============================================================
   CATALOGUE HEAD
   Opens on a black letterbox band — house lights down.
   ============================================================ */

.cat-head {
  --cat-band: clamp(var(--sp-9), 10vh, var(--sp-11));
  padding-top: calc(var(--cat-band) + var(--sp-10));
  padding-bottom: var(--sp-9);
}

.cat-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--cat-band);
  background: var(--c-letterbox);
  z-index: var(--z-base);
  pointer-events: none;
}

.cat-head__kicker { color: var(--c-muted); }

.cat-head__title {
  margin-top: var(--sp-6);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
}

.cat-head__lead {
  margin-top: var(--sp-6);
  color: var(--c-muted);
  max-width: var(--measure-wide);
}

/* ============================================================
   FILTERS
   Service is solved by 600 + uppercase + tracking +0.1em. No
   selects, no radii: these are marks on the cutting table. The
   fill arrives as a cut from the left, it does not fade.
   ============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-9);
  padding-top: var(--sp-7);
  border-top: var(--border);
}

.filters__legend {
  flex: 0 0 auto;
  margin-right: var(--sp-3);
  color: var(--c-muted);
}

.chip {
  position: relative;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border);
  border-radius: var(--r-0);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--d-fast) var(--e-ease),
              border-color var(--d-fast) var(--e-ease);
}

.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-surface);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-fast) var(--e-cut),
              background-color var(--d-fast) var(--e-ease);
}

.chip:hover {
  color: var(--c-text);
  border-color: var(--c-line-strong);
}

.chip:hover::before { transform: scaleX(1); }

.chip[aria-pressed='true'] {
  color: var(--c-accent-ink);
  border-color: var(--c-accent-dim);
}

.chip[aria-pressed='true']::before {
  transform: scaleX(1);
  background: var(--c-accent-ghost);
}

/* The one number set in accent on this page */
.cat-count { margin-top: var(--sp-7); color: var(--c-muted); }
.cat-count b { color: var(--c-accent-ink); font-weight: var(--fw-semi); }

/* ============================================================
   A) FILMS — the index.
   ============================================================ */

.cat-index { padding-top: var(--sp-9); }

.cat-index__eyebrow { margin-bottom: var(--sp-5); }

.cat-index__title { color: var(--c-muted); margin-bottom: var(--sp-8); }

.idx {
  width: 100%;
  list-style: none;
  border-top: var(--border);
}

.idx__item {
  position: relative;
  border-bottom: var(--border);
}

/* Active-row spine — the red accent. With nothing else, this is
   the one place pure red lands on the index. */
.idx__item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--c-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-fast) var(--e-cut);
  pointer-events: none;
  z-index: var(--z-content);
}

.idx__item.is-active::before { transform: scaleY(1); }

.idx__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--gutter);
  transition: background-color var(--d-fast) var(--e-ease);
}

.idx__item.is-active .idx__link { background: var(--c-surface); }

.idx__num {
  flex: 0 0 auto;
  width: 3ch;
  color: var(--c-muted);
  transition: transform var(--d-fast) var(--e-cut),
              color var(--d-fast) var(--e-ease);
}

.idx__item.is-active .idx__num { color: var(--c-accent-ink); }

.idx__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--d-fast) var(--e-cut);
}

/* The row steps forward on hover — number + title shift by the
   accent-bar width. The meta column holds its right edge. */
.idx__item.is-active .idx__num,
.idx__item.is-active .idx__main { transform: translateX(var(--sp-4)); }

.idx__title {
  font-size: var(--fs-list);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-list);
  color: var(--c-text);
  overflow-wrap: break-word;
  transition: color var(--d-fast) var(--e-ease);
}

.idx__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

.idx__role {
  font-size: var(--fs-body);
  color: var(--c-muted);
  line-height: 1.4;
}

/* Footage flag — set only on rows that have a cover still */
.idx__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--d-fast) var(--e-ease);
}
.idx__flag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
}
.idx__item.is-active .idx__flag { color: var(--c-accent-ink); }

.idx__festivals {
  font-size: var(--fs-small);
  color: var(--c-muted);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.5;
}

/* Dim the non-active rows — a cinematic pull of focus, not opacity
   on the hovered one. */
.idx.is-hovering .idx__item:not(.is-active) .idx__title { color: var(--c-muted); }
.idx.is-hovering .idx__item:not(.is-active) .idx__aside { opacity: 0.45; }

.idx__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  text-align: right;
  transition: opacity var(--d-fast) var(--e-ease);
}

.idx__meta { color: var(--c-muted); }
.idx__meta b { color: var(--c-text); }

.idx__open {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--d-fast) var(--e-ease);
}
.idx__item.is-active .idx__open { color: var(--c-accent-ink); }
.idx__open .idx__arrow {
  display: inline-block;
  transition: transform var(--d-fast) var(--e-out);
}
.idx__item.is-active .idx__arrow { transform: translateX(3px); }

/* ============================================================
   NOTHING FOUND
   Not an empty card — a dead frame: a full-width letterbox strip.
   ============================================================ */

.empty {
  background: var(--c-letterbox);
  border-top: var(--border);
  border-bottom: var(--border);
  margin-top: var(--sp-8);
}

.empty__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-block: var(--sp-11);
}

.empty__kicker { color: var(--c-accent-ink); }

.empty__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  color: var(--c-text);
}

.empty__text { max-width: var(--measure-col); }
.empty .btn { margin-top: var(--sp-3); }

/* ============================================================
   B) SERVICED — framed cards with the letterbox-crop hover.
   ============================================================ */

.cat-serviced__title { color: var(--c-muted); margin: var(--sp-5) 0 var(--sp-6); }
.cat-serviced__intro { color: var(--c-muted); max-width: var(--measure-wide); }

.scard-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
  gap: var(--grid-gap);
  margin-top: var(--sp-8);
}

.scard { position: relative; }

.scard__link {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: var(--border);
  background: var(--c-surface);
  transition: border-color var(--d-fast) var(--e-ease),
              box-shadow var(--d-cut) var(--e-out);
}

.scard__link:hover,
.scard__link:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--sh-lift);
}

.scard__frame {
  --card-crop: 12.8%;   /* (1 − 16:9 ÷ 2.39:1) ÷ 2 — down to cinemascope */
  aspect-ratio: var(--ar-wide);
  isolation: isolate;
}

.scard__frame > img { transform-origin: center; }

/* Local letterbox bars inside the card — same .lb idea, scoped */
.scard__lb {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--card-crop);
  background: var(--c-letterbox);
  z-index: var(--z-letterbox);
  pointer-events: none;
  transform: scaleY(0);
}
.scard__lb--top    { top: 0;    transform-origin: top; }
.scard__lb--bottom { bottom: 0; transform-origin: bottom; }

.scard__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: var(--z-content);
}

.scard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-7);
}

.scard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
}

.scard__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-ease);
}
.scard__link:hover .scard__title,
.scard__link:focus-visible .scard__title { color: var(--c-accent-ink); }

.scard__year {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--c-muted);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums;
}

.scard__role {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.scard__desc {
  color: var(--c-muted);
  line-height: 1.5;
  max-width: 42ch;
}

.scard__open {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.scard__open .idx__arrow {
  display: inline-block;
  transition: transform var(--d-fast) var(--e-out);
}
.scard__link:hover .scard__open .idx__arrow,
.scard__link:focus-visible .scard__open .idx__arrow { transform: translateX(3px); }

/* Hover = event: bars crop in, image eases up, three speeds.
   Declared inside "not reduce": with no motion the bars never
   arrive and the frame stays whole. */
@media not (prefers-reduced-motion: reduce) {
  .scard__lb { transition: transform var(--d-cut) var(--e-cut); }
  .scard__frame > img { transition: transform var(--d-slow) var(--e-out); }

  .scard__link:hover .scard__lb,
  .scard__link:focus-visible .scard__lb { transform: scaleY(1); }

  .scard__link:hover .scard__frame > img,
  .scard__link:focus-visible .scard__frame > img { transform: scale(1.06); }
}

/* ============================================================
   RESPONSIVE. No horizontal scroll at 1440 or 360.
   ============================================================ */

@media (max-width: 900px) {
  .idx__link { flex-wrap: wrap; padding-block: var(--sp-6); }
  .idx__main { flex: 1 1 100%; }
  .idx__aside {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-4);
    text-align: left;
    flex-wrap: wrap;
  }

  .scard__link { grid-template-columns: 1fr; }
  .scard__frame { order: -1; }
}

@media (max-width: 560px) {
  .filters { align-items: flex-start; }
  .filters__legend { flex: 1 0 100%; margin-right: 0; margin-bottom: var(--sp-1); }

  .idx__num { display: none; }
  .idx__item.is-active .idx__main { transform: translateX(var(--sp-2)); }

  .empty__inner { padding-block: var(--sp-10); }
  .scard__body { padding: var(--sp-6); }
}

/* ============================================================
   C) POSTERS — key art в конце каталога. Постеры вертикальные и
   разной пропорции, поэтому карточка задаёт единый кадр 2:3,
   а изображение вписывается по ширине без искажений.
   ============================================================ */

.cat-posters__title { margin-bottom: var(--sp-8); }

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-7);
  list-style: none;
  max-width: 64rem;
}

.poster-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--c-text);
}

.poster-card__frame {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--g-frame);
  border: var(--border);
}

.poster-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform var(--d-slow) var(--e-out),
              filter var(--d-slow) var(--e-out);
}

.poster-card:hover .poster-card__img,
.poster-card:focus-visible .poster-card__img {
  transform: scale(1.03);
  filter: brightness(1.06);
}

.poster-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.poster-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h3);
  overflow-wrap: normal;
}

.poster-card__year {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.poster-card:hover .poster-card__title,
.poster-card:focus-visible .poster-card__title { color: var(--c-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .poster-card__img { transition: none; }
  .poster-card:hover .poster-card__img { transform: none; }
}