/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT»
   layout.css — grain, letterbox bars, crossfade, reel, ticker,
   header, mobile menu, footer, buttons, tags, badges.
   Load AFTER base.css, BEFORE pages/<page>.css.
   ============================================================ */

/* ============================================================
   GRAIN — film grain via feTurbulence. Injected once by app.js
   (an SVG filter + a fixed .grain layer). A subtle cinematic
   texture, not a grey wash.
   ============================================================ */

.grain {
  position: fixed;
  inset: -6%;
  pointer-events: none;
  z-index: var(--z-grain);
  filter: url('#ata-grain');
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
  will-change: transform;
  contain: layout style;
}

@media not (prefers-reduced-motion: reduce) {
  @media (min-width: 768px) {
    .grain { animation: grain-jitter var(--d-grain) steps(8) infinite; }
  }
}

@keyframes grain-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  12.5%{ transform: translate3d(-2%, 1%, 0); }
  25%  { transform: translate3d(1%, -2%, 0); }
  37.5%{ transform: translate3d(-1%, -1%, 0); }
  50%  { transform: translate3d(2%, 1%, 0); }
  62.5%{ transform: translate3d(-2%, 2%, 0); }
  75%  { transform: translate3d(1%, 2%, 0); }
  87.5%{ transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
  .grain { opacity: calc(var(--grain-opacity) * 0.6); }
}

/* ============================================================
   LETTERBOX BARS — the 2.39:1 cropping primitive.
   Two <div>s with scaleY(), origin top/bottom, driven by
   app.js (--lb-p 0 -> 1 on scroll). GPU-composited, always
   interpolates. p = 0 open (full-bleed), p = 1 closed (scope).
   ============================================================ */

.lb {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--letterbox-h);
  background: var(--c-letterbox);
  z-index: var(--z-letterbox);
  pointer-events: none;
  transform: scaleY(var(--lb-p, 1));
}
.lb--top    { top: 0;    transform-origin: top; }
.lb--bottom { bottom: 0; transform-origin: bottom; }

/* ============================================================
   FRAME CROSSFADE — container for ADP.crossfade().
   A frame change is an editing cut, not a dissolve. Layers stack;
   the top one fades in over 220ms, the lower ones are removed.
   ============================================================ */

.xf {
  position: relative;
  overflow: hidden;
  background: var(--g-frame);
  isolation: isolate;
}
.xf__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity var(--d-cut) var(--e-out);
}

/* ============================================================
   REEL — horizontal travel. A real scroll container: trackpad,
   swipe, Tab, arrows, ‹ › buttons. The body never scrolls
   horizontally.
   ============================================================ */

.reel {
  display: flex;
  gap: var(--grid-gap);
  width: 100%;
  padding-inline: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 4rem, var(--mask-opaque) calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 4rem, var(--mask-opaque) calc(100% - 4rem), transparent);
}
.reel::-webkit-scrollbar { display: none; }

.reel__item {
  flex: 0 0 clamp(18rem, 42vw, 34rem);
  scroll-snap-align: center;
}

@media (max-width: 768px) {
  .reel {
    mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 1.5rem, var(--mask-opaque) calc(100% - 1.5rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 1.5rem, var(--mask-opaque) calc(100% - 1.5rem), transparent);
  }
  .reel__item { flex: 0 0 82vw; }
}
@media (max-width: 480px) {
  .reel__item { flex: 0 0 88vw; }
}

/* Reel progress bar — the one place, with the active row, where a
   project's own accent may live. */
.progress {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--c-line);
  overflow: hidden;
}
.progress__bar {
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--c-accent);
}

@supports (animation-timeline: scroll(self inline)) {
  @media not (prefers-reduced-motion: reduce) {
    [data-reel-scope] { timeline-scope: --reel; }
    .reel { scroll-timeline: --reel inline; }
    .progress__bar {
      animation: progress-run var(--e-linear) both;
      animation-timeline: --reel;
    }
  }
}
@keyframes progress-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip,
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface-2);
  color: var(--c-text);
  border: var(--border-strong);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus-visible,
.skip-link:focus-visible { transform: translateY(0); }

/* ============================================================
   HEADER
   Left: red Ata Dala logo + wordmark. Right: nav / MENU.
   Edge-hugged, no solid background — it floats over the frame.
   ============================================================ */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(var(--sp-4), 2vw, var(--sp-6)) var(--gutter);
  background: linear-gradient(
    180deg,
    var(--c-scrim-hdr) 0%,
    var(--c-scrim-soft) 62%,
    transparent 100%
  );
  transition: background var(--d-cut) var(--e-out),
              border-color var(--d-cut) var(--e-out),
              transform var(--d-cut) var(--e-cut);
  border-bottom: var(--bw) solid transparent;
}

/* Scrolled — the header sits on a solid surface (set by app.js) */
.hdr.is-stuck {
  background: var(--c-bg);
  border-bottom-color: var(--c-line);
}
/* Gone down — the header leaves as a cut, not a fade */
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.is-open   { transform: none; }

/* --- Logo + wordmark ------------------------------------ */

.hdr__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}
.hdr__logo {
  /* Крупнее: 28px терялись в шапке высотой 72px */
  height: 3.25rem;
  width: auto;
  background: none;      /* the logo PNG is transparent, no frame plate */
  flex: 0 0 auto;
}
.hdr__word {
  font-size: 1.125rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-ease);
}
.hdr__mark:hover .hdr__word { color: var(--c-accent-ink); }

/* --- Nav >= 900px --------------------------------------- */

.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-5), 2vw, var(--sp-8));
}

.hdr__link {
  position: relative;
  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);
  padding-block: var(--sp-2);
  transition: color var(--d-fast) var(--e-ease);
}
.hdr__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: var(--bw);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-fast) var(--e-cut);
}
.hdr__link:hover { color: var(--c-text); }
.hdr__link:hover::after { transform: scaleX(1); }

/* Over a frame all items read light; the active one is marked by
   the red underline, not colour. Once stuck, the colour hierarchy
   returns. */
.hdr:not(.is-stuck) .hdr__link { color: var(--c-text); }

.hdr__link.is-active,
.hdr__link[aria-current='page'] { color: var(--c-text); }
.hdr__link.is-active::after,
.hdr__link[aria-current='page']::after {
  transform: scaleX(1);
  background: var(--c-accent);
}

/* --- MENU button ---------------------------------------- */

.hdr__toggle {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  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-text);
  padding: var(--sp-2);
  margin: calc(var(--sp-2) * -1);
}
.hdr__toggle-bars {
  position: relative;
  display: block;
  width: 20px; height: 8px;
  flex: 0 0 auto;
}
.hdr__toggle-bars::before,
.hdr__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; height: var(--bw);
  background: currentColor;
  transition: transform var(--d-cut) var(--e-cut);
}
.hdr__toggle-bars::before { top: 0; }
.hdr__toggle-bars::after  { bottom: 0; }
/* Open — the two bars close into a cross */
.hdr__toggle[aria-expanded='true'] .hdr__toggle-bars::before { transform: translateY(3.5px) rotate(45deg); }
.hdr__toggle[aria-expanded='true'] .hdr__toggle-bars::after  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__toggle { display: inline-flex; }
}

/* ============================================================
   MOBILE MENU
   Not a drawer — a cut: the panel overwrites the screen via
   clip-path inset(100% 0 0 0) -> inset(0).
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-8);
  padding: calc(var(--sp-12) + var(--sp-4)) var(--gutter) var(--sp-9);
  background: var(--c-bg);
  clip-path: inset(100% 0 0 0);
  visibility: hidden;
  transition: clip-path var(--d-cut) var(--e-cut),
              visibility 0s linear var(--d-cut);
}
.menu.is-open {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path var(--d-cut) var(--e-cut), visibility 0s;
}

/* Letterbox bars on the panel edges — the menu is a frame too */
.menu::before,
.menu::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; height: var(--sp-6);
  background: var(--c-letterbox);
  pointer-events: none;
}
.menu::before { top: 0; }
.menu::after  { bottom: 0; }

.menu__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.menu__link {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-list);
  color: var(--c-muted);
  transition: color var(--d-fast) var(--e-ease);
}
.menu__link:hover,
.menu__link:focus-visible { color: var(--c-text); }
.menu__link.is-active,
.menu__link[aria-current='page'] { color: var(--c-accent-ink); }

.menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-6);
  border-top: var(--border);
}
.menu__mail {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h3);
  color: var(--c-accent-ink);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: var(--border-strong);
  border-radius: var(--r-0);
  background: transparent;
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--d-fast) var(--e-ease),
              border-color var(--d-fast) var(--e-ease),
              color var(--d-fast) var(--e-ease);
}
.btn:hover {
  background: var(--c-surface);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}
.btn__arrow { transition: transform var(--d-fast) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Solid red CTA. Label is bold/uppercase — allowed on red (4:1). */
.btn--red,
.btn--accent {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--on-accent);
}
.btn--red:hover,
.btn--accent:hover {
  background: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
  color: var(--c-text);
}

.btn--ghost {
  border-color: transparent;
  padding-inline: 0;
  color: var(--c-muted);
}
.btn--ghost:hover { background: transparent; color: var(--c-text); }

/* Square ‹ › reel buttons */
.btn--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--fs-h3);
  letter-spacing: 0;
}
.btn[disabled],
.btn[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }

/* "▶ Watch" pill — the one backdrop layer per screen */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw) solid var(--c-accent);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-accent-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  transition: background var(--d-fast) var(--e-ease),
              color var(--d-fast) var(--e-ease);
}
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .pill {
    background: var(--c-accent-ghost);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}
.pill:hover {
  background: var(--c-accent);
  color: var(--on-accent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   TAGS & BADGES
   Not radiused chips — a 1px border, caps, weight 600, +0.1em.
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  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: 1.4;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}
.tag--accent { border-color: var(--c-accent-dim); color: var(--c-accent-ink); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }

/* Solid status badge on a photo (over a frame) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw) solid var(--c-line-strong);
  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--red {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--on-accent);
}
.badge--dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
}

/* Status: a dot + text, no border */
.status {
  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);
  line-height: var(--lh-flat);
  text-transform: uppercase;
  color: var(--c-muted);
}
.status::before {
  content: '';
  width: 5px; height: 5px;
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: var(--c-accent);
}

/* Eyebrow — a small label with a short red rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow::before {
  content: '';
  width: var(--sp-7);
  height: var(--bw);
  background: var(--c-accent);
}

/* ============================================================
   TICKER — press / festival marquee.
   Duplicated content, the copy is aria-hidden. Pauses on hover/focus.
   ============================================================ */

.ticker {
  position: relative;
  width: 100%;
  height: 48px;
  overflow: hidden;
  border-top: var(--border);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 4rem, var(--mask-opaque) calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-opaque) 4rem, var(--mask-opaque) calc(100% - 4rem), transparent);
}
.ticker__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
  white-space: nowrap;
  will-change: transform;
}
@media not (prefers-reduced-motion: reduce) {
  .ticker__track { animation: ticker-run var(--d-ticker) var(--e-linear) infinite; }
  .ticker:hover .ticker__track,
  .ticker:focus-within .ticker__track { animation-play-state: paused; }
}
@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ticker__item {
  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);
  font-variant-numeric: tabular-nums;
}
.ticker__item::after { content: '·'; margin-left: var(--sp-8); color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .ticker { height: auto; padding-block: var(--sp-4); mask-image: none; -webkit-mask-image: none; }
  .ticker__track { flex-wrap: wrap; white-space: normal; padding-inline: var(--gutter); gap: var(--sp-4); }
  .ticker__track[aria-hidden='true'] { display: none; }
  .ticker__item:nth-child(n + 4) { display: none; }
  .ticker__item::after { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.ftr {
  position: relative;
  width: 100%;
  padding: var(--sp-10) 0 var(--sp-7);
  background: var(--c-bg);
  border-top: var(--border);
}
/* A thin letterbox strip above the footer — the screening is over */
.ftr::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: var(--sp-2);
  background: var(--c-letterbox);
}

.ftr__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--grid-gap);
  padding-bottom: var(--sp-9);
}

.ftr__brand { min-width: 0; }
.ftr__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.ftr__logo { height: 4rem; width: auto; background: none; }
.ftr__word {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: var(--lh-flat);
  color: var(--c-text);
}
.ftr__emblem {
  font-size: var(--fs-small);
  color: var(--c-accent-ink);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums;
}
.ftr__tagline {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.5;
  max-width: 32ch;
  letter-spacing: var(--tr-body);
  text-transform: none;
}

.ftr__col { min-width: 0; }
.ftr__head {
  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);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: var(--border);
}
.ftr__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  list-style: none;
}
.ftr__item {
  font-size: var(--fs-body);
  color: var(--c-muted);
  line-height: 1.4;
  transition: color var(--d-fast) var(--e-ease);
}
a.ftr__item:hover,
.ftr__item a:hover { color: var(--c-text); }

.ftr__mail {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h3);
  color: var(--c-accent-ink);
  transition: opacity var(--d-fast) var(--e-ease);
}
.ftr__mail:hover { opacity: 0.75; }

.ftr__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: var(--border);
}
.ftr__legal {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ftr__socials { display: flex; gap: var(--sp-6); list-style: none; }
.ftr__social {
  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);
}
.ftr__social:hover { color: var(--c-accent-ink); }

/* Footer grid uses the container for gutters */
.ftr .container { padding-inline: var(--gutter); }

@media (max-width: 900px) {
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ftr__top { grid-template-columns: 1fr; gap: var(--sp-7); }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
}

/* Соцсеть в мобильном меню — рядом с почтой */
.menu__social {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  transition: color var(--d-fast) var(--e-ease);
}
.menu__social:hover { color: var(--c-text); }

/* Пометка WhatsApp в подвале */
.ftr__wa {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: var(--bw) solid var(--c-line-strong);
  color: var(--c-accent-ink);
  font-size: 0.75em;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  vertical-align: middle;
}