/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT» (dark)
   pages/work-detail.css — a single production "file".
   Ported from the anamorphot reference project page: full-bleed
   2.39:1 hero, logline + facts, sticky-label sections, awards on
   1px lines, cinematic prev/next. Turquoise accent -> Ata Dala red.
   Load AFTER tokens.css, base.css, layout.css. No #hex, no raw
   duration — reference a token. (2px accent rules mirror the
   foundation's own .progress / .lb hairlines.)
   ============================================================ */

.wd {
  --wd-accent: var(--c-accent);
  display: block;
}

/* ============================================================
   1. HERO — full-bleed cinemascope frame, head pinned bottom-left
   ============================================================ */

.wd-hero {
  position: relative;
  width: 100%;
}

.wd-hero__stage {
  width: 100%;
  z-index: var(--z-frame);
}

/* The frame pans: <img> / watermark travels scale(1.12) -> 1 on
   scroll while the mask holds still — differential motion. */
.wd-hero__img,
.wd-hero__plate {
  transform-origin: 50% 42%;
}

@supports (animation-timeline: scroll(root block)) {
  @media not (prefers-reduced-motion: reduce) {
    .wd-hero__img,
    .wd-hero__plate {
      animation: wd-hero-pan var(--e-linear) both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
    .wd-hero__line {
      animation: wd-hero-run var(--e-linear) both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
  }
}

@keyframes wd-hero-pan {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

@keyframes wd-hero-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Typographic plate for films with no key art on file — an honest
   dark card, never a fake still. Giant year watermark, top-right. */
.wd-hero__plate {
  position: absolute;
  inset: 0;
  background: var(--g-frame);
  overflow: hidden;
}
.wd-hero__watermark {
  position: absolute;
  top: -0.14em;
  right: var(--gutter);
  font-size: var(--fs-num);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-flat);
  color: var(--c-surface-2);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.wd-hero__plate-tag {
  position: absolute;
  top: var(--sp-8);
  left: var(--gutter);
  color: var(--c-muted);
}

/* Thin red rule along the bottom edge of the frame — "the reel runs" */
.wd-hero__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--wd-accent);
  transform-origin: left;
  z-index: var(--z-content);
}

/* Honest caption for a real production still, bottom-right of frame */
.wd-hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-5);
  z-index: var(--z-content);
  color: var(--c-text);
  max-width: min(38ch, 70vw);
  text-align: right;
}

.wd-hero__body {
  position: absolute;
  left: 0;
  bottom: var(--sp-8);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.wd-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.wd-hero__catalogue {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.wd-hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  max-width: var(--measure-wide);
  text-wrap: balance;
}

.wd-hero__meta {
  max-width: var(--measure-wide);
}

/* ============================================================
   2. KEY — logline (left) + facts table (right)
   ============================================================ */

.wd-key__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-10) var(--sp-8);
  align-items: start;
}

.wd-logline {
  max-width: var(--measure-wide);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

/* Facts — not a card, a vertical table on 1px lines */
.wd-facts {
  border-top: var(--border);
  width: 100%;
}
.wd-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: var(--border);
}
.wd-facts__k { color: var(--c-muted); }
.wd-facts__v {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-body);
  color: var(--c-text);
  line-height: 1.4;
}

/* ============================================================
   3. SECTION — service label sticky-left, content right
   ============================================================ */

.wd-sec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--sp-8);
  align-items: start;
}
.wd-sec__head {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  color: var(--c-muted);
  padding-top: var(--sp-2);
}
.wd-sec__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
}

/* --- Synopsis --- */
.wd-synopsis {
  width: 100%;
  max-width: var(--measure);
}

/* --- Awards & festivals — a list on 1px lines, red square markers --- */
.wd-awards {
  list-style: none;
  width: 100%;
  max-width: var(--measure-wide);
  border-top: var(--border);
}
.wd-awards__item {
  position: relative;
  padding-left: var(--sp-6);
  padding-block: var(--sp-4);
  border-bottom: var(--border);
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.4;
}
.wd-awards__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--sp-4) + 0.55em);
  width: var(--sp-2);
  height: 2px;
  background: var(--wd-accent);
}

/* ============================================================
   4. PREV / NEXT — cinematic rows, backdrop frame irises in
   ============================================================ */

.wd-navwrap {
  border-top: var(--border);
  padding-block: 0 var(--sp-10);
}
.wd-nav { list-style: none; }
.wd-nav__row { border-bottom: var(--border); }

.wd-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-9) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* The still bleeds up behind the row on hover — not a cursor preview */
.wd-nav__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--d-slow) var(--e-out),
              clip-path var(--d-slow) var(--e-cut);
  pointer-events: none;
}
.wd-nav__bg > .xf__img { filter: grayscale(1); }
.wd-nav__link:hover .wd-nav__bg,
.wd-nav__link:focus-visible .wd-nav__bg {
  opacity: 0.26;
  clip-path: inset(0);
}

.wd-nav__label,
.wd-nav__title,
.wd-nav__meta {
  position: relative;
  z-index: var(--z-content);
}
.wd-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-muted);
  transition: color var(--d-fast) var(--e-ease);
}
.wd-nav__arrow {
  display: inline-block;
  transition: transform var(--d-cut) var(--e-out);
}
.wd-nav__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-h1);
  transition: color var(--d-fast) var(--e-ease);
}
.wd-nav__meta { max-width: var(--measure-wide); }

.wd-nav__link:hover .wd-nav__label,
.wd-nav__link:focus-visible .wd-nav__label { color: var(--c-text); }
.wd-nav__link:hover .wd-nav__title,
.wd-nav__link:focus-visible .wd-nav__title { color: var(--c-accent); }

.wd-nav__row--prev .wd-nav__link:hover .wd-nav__arrow,
.wd-nav__row--prev .wd-nav__link:focus-visible .wd-nav__arrow {
  transform: translateX(calc(var(--sp-2) * -1));
}
.wd-nav__row--next .wd-nav__link:hover .wd-nav__arrow,
.wd-nav__row--next .wd-nav__link:focus-visible .wd-nav__arrow {
  transform: translateX(var(--sp-2));
}

.wd-navwrap__all { padding-top: var(--sp-8); }

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .wd-key__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .wd-sec__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .wd-sec__head { position: static; }

  /* A 2.39:1 frame is too short to carry an H0 on a narrow screen —
     the head drops below the frame, still left-hugged. */
  .wd-hero__body {
    position: static;
    padding: var(--sp-6) var(--gutter) 0;
  }
  .wd-hero__title { max-width: 100%; }
  .wd-hero__watermark { font-size: var(--fs-list); }
}

@media (max-width: 768px) {
  .wd-nav__link { padding-block: var(--sp-8); }
}

@media (max-width: 560px) {
  .wd-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .wd-hero__caption {
    position: static;
    text-align: left;
    padding: var(--sp-4) var(--gutter) 0;
    max-width: 100%;
  }
}

/* ============================================================
   KEY ART — a portrait poster (some films have a poster on file
   instead of a landscape still). Framed at natural aspect, left-
   aligned in the content column, never cropped into the 2.39:1 hero.
   ============================================================ */

.wd-poster { margin: 0; display: inline-block; max-width: 22rem; width: 100%; }

.wd-poster__frame {
  display: block;
  border: var(--border);
  background: var(--g-frame);
  overflow: hidden;
}
.wd-poster__img {
  width: 100%;
  height: auto;
  display: block;
}
.wd-poster__cap {
  margin-top: var(--sp-4);
  color: var(--c-muted);
}

/* ============================================================
   CAST — a quiet vertical list on 1px lines, red square markers
   (mirrors .wd-awards).
   ============================================================ */

.wd-cast {
  list-style: none;
  width: 100%;
  max-width: var(--measure-wide);
  border-top: var(--border);
}
.wd-cast__item {
  position: relative;
  padding-left: var(--sp-6);
  padding-block: var(--sp-4);
  border-bottom: var(--border);
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.4;
}
.wd-cast__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--sp-4) + 0.55em);
  width: var(--sp-2);
  height: 2px;
  background: var(--c-accent);
}

/* Видео вместо кадра — ведёт себя как обложка: заполняет рамку 2.39:1 */
.wd-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Уважаем системную настройку «меньше движения»: показываем постер */
@media (prefers-reduced-motion: reduce) {
  .wd-hero__video { animation: none; }
}