/* =========================================================================
   ЭФИР — ОТЛОЖЕННЫЙ CSS
   Всё, что ниже первого экрана: коллекция, фильтры, галерея, подвал, лайтбокс.
   Критическая часть инлайнится в <head> (см. critical.css).
   ========================================================================= */

/* ───────────────────────── КОЛЛЕКЦИЯ / ГОЛОВА ────────────────────────── */
.section-label,.collection__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
}
.collection{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(60px,9vh,110px) var(--gutter) clamp(70px,10vh,130px);
}
.collection__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:34px;
}
.collection__label{ margin-bottom:14px; }
.collection__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,46px); letter-spacing:-.01em; }
.collection__hint{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ───────────────────────── ФИЛЬТРЫ ───────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 40px; }
.chip{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 17px; border-radius:99px; border:1px solid var(--line); color:var(--muted);
  background:var(--surface); position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s, border-color .3s, transform .3s var(--ease-out);
}
.chip:hover{ color:var(--text); border-color:var(--surface-2); transform:translateY(-2px); }
.chip .chip__n{ color:var(--faint); margin-left:7px; font-size:10px; }
.chip[aria-pressed="true"]{ color:#06080c; border-color:transparent; }
.chip[aria-pressed="true"]::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,var(--ice),var(--tide)); }
.chip[aria-pressed="true"] .chip__n{ color:rgba(6,8,12,.6); }

/* ───────────────────────── ГАЛЕРЕЯ (masonry) ─────────────────────────── */
.gallery{ column-gap:clamp(14px,1.6vw,22px); column-count:3; }
@media (max-width:1080px){ .gallery{ column-count:2; } }
@media (max-width:560px){ .gallery{ column-count:1; } }

.card{
  position:relative; display:block; width:100%; break-inside:avoid;
  margin:0 0 clamp(14px,1.6vw,22px);
  opacity:0; transform:translateY(40px) scale(.98);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.card.in{ opacity:1; transform:none; }
.card[hidden]{ display:none; }   /* иначе display:block перебивает [hidden] */

/* Наклон живёт на отдельном слое. Раньше и ревил, и 3D-поворот писались в
   один transform на .card, и transition:.8s перезапускался на каждом
   pointermove — из-за этого наклон тянулся за курсором. */
.card__inner{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-soft);
  transition:transform .45s var(--ease-out), box-shadow .5s var(--ease);
}
.card__inner.tilting{ transition:box-shadow .5s var(--ease); }
.card:hover .card__inner{ box-shadow:var(--shadow); will-change:transform; }

.card__media{
  position:relative; width:100%; overflow:hidden; aspect-ratio:var(--ar);
  background-image:var(--ph);
  background-size:200% 200%; background-position:50% 50%;
  animation:placePulse 6s var(--ease) infinite;
}
@keyframes placePulse{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
/* кадр загрузился и перекрыл градиент — анимировать его дальше незачем */
.card__media.filled{ animation:none; }
.card__media::after{ /* лёгкое верхнее свечение поверх плейсхолдера */
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.12), transparent 45%);
  pointer-events:none;
}
.card picture{ display:block; }
.card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); filter:blur(14px);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease);
}
.card__img.loaded{ opacity:1; transform:scale(1.001); filter:none; }
/* картинка догружена во время фильтрации: blur-up здесь только мешает
   перекладке сетки, движение уже отыгрывает view transition */
.card__img.instant{ transition:none; }
.card:hover .card__img.loaded{ transform:scale(1.05); }
/* файла нет — молча остаёмся на градиенте, без иконки битой картинки */
.card__img.failed{ display:none; }

/* невидимая кнопка на весь кадр: заголовок остаётся заголовком,
   а не содержимым кнопки, как было при <article role="button"> */
.card__open{
  position:absolute; inset:0; z-index:4; width:100%; height:100%;
  background:none; border:0; cursor:pointer;
}
.card__open:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; border-radius:16px; }

/* подпись поверх кадра */
.card__overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px; margin:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,6,10,.78));
  opacity:0; transition:opacity .5s var(--ease);
}
.card:hover .card__overlay,
.card:has(.card__open:focus-visible) .card__overlay{ opacity:1; }
.card__cat{
  align-self:flex-start; font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:#06080c; background:var(--ice);
  padding:4px 9px; border-radius:99px; margin-bottom:auto;
  transform:translateY(-8px); opacity:0; transition:.5s var(--ease) .05s;
}
.card__title{
  font-family:var(--font-display); font-size:22px; font-weight:400; color:#fff; line-height:1.1;
  transform:translateY(10px); opacity:0; transition:.5s var(--ease) .08s;
}
.card__author{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-top:6px;
  transform:translateY(10px); opacity:0; transition:.5s var(--ease) .14s;
}
.card:hover .card__cat, .card:hover .card__title, .card:hover .card__author,
.card:has(.card__open:focus-visible) .card__cat,
.card:has(.card__open:focus-visible) .card__title,
.card:has(.card__open:focus-visible) .card__author{ transform:none; opacity:1; }

/* glare для 3D-наклона */
.card__glare{
  position:absolute; inset:-40%; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 42%);
  transition:opacity .4s var(--ease);
}
.card:hover .card__glare{ opacity:1; }

.empty{ text-align:center; color:var(--faint); font-family:var(--font-mono); letter-spacing:.18em; text-transform:uppercase; padding:80px 0; font-size:12px; }
.empty[hidden]{ display:none; }

/* ───────── РЕВИЛ НА СКРОЛЛ-ТАЙМЛАЙНЕ (мимо главного потока) ─────────── */
@keyframes cardIn{
  from{ opacity:0; transform:translateY(40px) scale(.98) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .js .card{
      animation:cardIn linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 30%;
      transition:none;
    }
    /* карточка уже в кадре после смены фильтра — повторный ревил отключаем */
    .js .card.revealed{ animation:none; }
  }
}
/* работает и для IntersectionObserver-фолбэка */
.card.revealed{ opacity:1; transform:none; }

/* ───────── ПЕРЕХОДЫ МЕЖДУ ФИЛЬТРАМИ (View Transitions API) ──────────── */
::view-transition-old(*),
::view-transition-new(*){ animation-duration:.4s; animation-timing-function:cubic-bezier(.16,1,.3,1); }

/* ───────────────────────── ПОДВАЛ ────────────────────────────────────── */
.site-footer{
  max-width:var(--maxw); margin:0 auto; padding:clamp(50px,8vh,90px) var(--gutter) 50px;
  border-top:1px solid var(--line);
}
.site-footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.site-footer__claim{ font-family:var(--font-display); font-size:clamp(18px,2.4vw,30px); color:var(--muted); text-align:right; line-height:1.3; max-width:22ch; }
.site-footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:50px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.site-footer__bottom a{ transition:color .3s; }
.site-footer__bottom a:hover{ color:var(--accent); }

/* ───────────────────────── ЛАЙТБОКС (<dialog>) ───────────────────────── */
/* нативный dialog даёт ловушку фокуса, Esc и возврат фокуса на карточку */
.lightbox{
  width:100%; max-width:100vw; height:100%; max-height:100dvh;
  inset:0; border:0; padding:clamp(20px,5vw,70px);
  background:transparent; color:var(--text); overflow:visible;
  display:none; place-items:center;
}
.lightbox[open]{ display:grid; }
.lightbox::backdrop{
  background:rgba(4,5,9,.86);
  backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%);
  opacity:0; transition:opacity .5s var(--ease);
}
.lightbox.open::backdrop{ opacity:1; }
[data-theme="light"] .lightbox::backdrop{ background:rgba(244,242,238,.82); }

.lightbox__stage{ display:flex; flex-direction:column; align-items:center; gap:22px; max-width:1100px; width:100%; margin:0; }
.lightbox__frame{
  position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  max-height:72vh;
  transform:scale(.92); opacity:0; transition:transform .6s var(--ease-out), opacity .5s var(--ease);
}
.lightbox.open .lightbox__frame{ transform:none; opacity:1; }
.lightbox__media{ width:100%; height:100%; }
.lightbox__media .ph{
  width:min(80vw,900px); height:min(64vh,640px);
  background-size:cover; background-position:center;
}
.lightbox__media img{ width:auto; max-width:min(86vw,1000px); max-height:72vh; object-fit:contain; }

.lightbox__caption{ text-align:center; }
.lightbox__index{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; color:var(--accent); }
.lightbox__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.4vw,40px); margin:8px 0 4px; }
.lightbox__by{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.lightbox__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.lb-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 22px; border-radius:99px; border:1px solid var(--line); color:var(--text);
  background:var(--surface); cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s var(--ease-out);
}
.lb-btn:hover{ background:var(--surface-2); border-color:var(--surface-2); transform:translateY(-2px); }
.lb-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lb-btn[hidden]{ display:none; }

.lightbox__close{
  position:absolute; top:22px; right:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); font-size:18px; color:var(--text);
  display:grid; place-items:center; transition:background .3s, transform .3s var(--ease-out);
}
.lightbox__close:hover{ background:var(--surface-2); transform:rotate(90deg); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%;
  border:1px solid var(--line); color:var(--text);
  display:grid; place-items:center; transition:background .3s, transform .3s var(--ease-out);
}
.lightbox__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; }
.lightbox__nav:hover{ background:var(--surface-2); }
.lightbox__nav--prev{ left:clamp(12px,3vw,40px); }
.lightbox__nav--next{ right:clamp(12px,3vw,40px); }
.lightbox__nav--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lightbox__nav--next:hover{ transform:translateY(-50%) translateX(4px); }

/* ───────────────────────── АДАПТИВ ───────────────────────────────────── */
@media (max-width:760px){
  .site-footer__claim{ text-align:left; }
  .lightbox__nav{ width:46px; height:46px; }
  .card__title{ font-size:18px; }
  /* на тач — подпись видна сразу, без hover */
  .card__overlay{ opacity:1; background:linear-gradient(180deg, transparent 55%, rgba(5,6,10,.72)); }
  .card__cat,.card__title,.card__author{ opacity:1; transform:none; }
}

@media (hover:none){
  .card__overlay{ opacity:1; }
  .card__cat,.card__title,.card__author{ opacity:1; transform:none; }
}

/* ───────────────────────── REDUCED MOTION ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .card{ opacity:1 !important; transform:none !important; }
  .card__media{ animation:none !important; }
}