/* ═══════════════════════════════════════════════════════════════════
   details.css — слой «дорогих мелочей» (агент деталей).
   Кинематографическая раскадровка поверх готового сайта: номера сцен,
   точки-станции, кадровая рамка-видоискатель, зерно плёнки, служебные
   микро-подписи (хлопушка), шкала прокрутки.

   Правила слоя:
   · чужие классы не переопределяются — здесь только собственные .atc-*;
   · :root не трогаем (токены объявляет base.css) — свои переменные
     живут на body.atc-details, класс вешает details.js;
   · анимации — только transform/opacity, никакого filter в движении;
   · весь декор pointer-events:none, кликают только кнопки станций;
   · z-index ≤ 36 (шапка 50, quick-view 90, волна переключения 200).
   ═══════════════════════════════════════════════════════════════════ */

/* Слой включается только когда жив JS: без него ни одного лишнего узла */
body.atc-details{
  /* волосяная линия декора: серебро в ангельском мире, алое в демонском —
     обе версии берутся из --chrome-mid, поэтому переключение бесплатное */
  --det-hair:var(--line);                                       /* фолбэк */
  --det-hair:color-mix(in srgb, var(--chrome-mid) 32%, transparent);
  --det-hair-soft:var(--line);
  --det-hair-soft:color-mix(in srgb, var(--chrome-mid) 16%, transparent);
}

/* ═══════════ 1. Виньетка ═══════════
   Края кадра чуть темнее центра — глаз сам идёт в середину. Статика. */
.atc-vignette{
  position:fixed; inset:0;
  z-index:28;
  pointer-events:none;
  background:radial-gradient(125% 105% at 50% 48%,
    rgba(0,0,0,0) 54%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.46) 100%);
}
body.is-demon .atc-vignette{
  background:radial-gradient(125% 105% at 50% 48%,
    rgba(0,0,0,0) 52%, rgba(24,2,6,.34) 80%, rgba(28,3,8,.52) 100%);
}

/* ═══════════ 2. Зерно плёнки ═══════════
   SVG-шум растеризуется браузером ОДИН раз (это картинка, а не фильтр
   в кадровом цикле). Двигается только transform шагами ≈4 раза в секунду —
   композитор GPU, страница не перерисовывается. */
.atc-grain{
  position:fixed; inset:-4%;
  z-index:30;
  pointer-events:none;
  opacity:.038;
  contain:layout paint;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  will-change:transform;
  animation:atc-grain-step 1.6s steps(1,end) infinite;
}
@keyframes atc-grain-step{
  0%  {transform:translate3d(0,0,0);}
  25% {transform:translate3d(-1.4%,1%,0);}
  50% {transform:translate3d(1%,-1.4%,0);}
  75% {transform:translate3d(-.8%,-.6%,0);}
  100%{transform:translate3d(0,0,0);}
}
body.is-demon .atc-grain{opacity:.045;}

/* ═══════════ 3. Кадровая рамка (видоискатель) ═══════════
   Четыре уголка по краям экрана. Верхняя кромка опущена ниже вуали
   шапки — иначе уголки тонули бы в её градиенте. */
.atc-frame{
  position:fixed;
  top:calc(var(--nav-h) + 26px);
  right:clamp(12px,1.7vw,28px);
  bottom:clamp(14px,2vh,24px);
  left:clamp(12px,1.7vw,28px);
  z-index:31;
  pointer-events:none;
}
.atc-frame i{
  position:absolute;
  width:20px; height:20px;
  opacity:.6;
}
.atc-frame .tl{top:0;    left:0;  border-top:1px solid var(--det-hair);    border-left:1px solid var(--det-hair);}
.atc-frame .tr{top:0;    right:0; border-top:1px solid var(--det-hair);    border-right:1px solid var(--det-hair);}
.atc-frame .bl{bottom:0; left:0;  border-bottom:1px solid var(--det-hair); border-left:1px solid var(--det-hair);}
.atc-frame .br{bottom:0; right:0; border-bottom:1px solid var(--det-hair); border-right:1px solid var(--det-hair);}
/* точка-«кернинг» в самом углу — деталь, которую замечаешь не сразу */
.atc-frame i::after{
  content:'';
  position:absolute;
  width:2px; height:2px;
  background:var(--det-hair);
}
.atc-frame .tl::after{top:5px;  left:5px;}
.atc-frame .tr::after{top:5px;  right:5px;}
.atc-frame .bl::after{bottom:5px; left:5px;}
.atc-frame .br::after{bottom:5px; right:5px;}

/* ═══════════ 4. Номер сцены ═══════════
   Вертикальная подпись у левого края. Внутри две ячейки-слота: новая
   сцена проявляется, пока прежняя гаснет (перекрёстное растворение).
   Свап делается одним синхронным движением — ни таймеров, ни rAF. */
.atc-scene{
  position:fixed;
  left:clamp(10px,1.7vw,28px);
  top:50%;
  width:16px; height:0;         /* сам контейнер — только точка привязки */
  z-index:32;
  pointer-events:none;
}
.atc-scene span{
  position:absolute;
  left:0; top:0;
  writing-mode:vertical-rl;
  font-family:var(--font-text),sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  /* подпись может лечь на фотографию — тень держит читаемость */
  text-shadow:0 1px 12px rgba(5,5,8,.9), 0 0 4px rgba(5,5,8,.7);
  opacity:0;
  transform:translateY(-50%) translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.atc-scene span.is-on{
  opacity:1;
  transform:translateY(-50%);
}
.atc-scene b{
  font-weight:700;
  color:var(--chrome-mid);
  font-variant-numeric:tabular-nums;
}
/* тире между номером и названием — тонкая черта, а не символ */
.atc-scene i{
  display:inline-block;
  width:1px; height:18px;
  margin:9px 0;                 /* в вертикальном письме это отступы по потоку */
  background:var(--det-hair);
  vertical-align:middle;
}

/* ═══════════ 5. Точки-станции ═══════════
   Вертикальный ряд справа: где ты и сколько осталось. Работает мышью,
   клавиатурой и читается скринридером (aria-current у активной). */
.atc-rail{
  position:fixed;
  right:clamp(8px,1.1vw,18px);
  top:50%;
  transform:translateY(-50%);
  z-index:36;
  pointer-events:none;              /* ловят клики только кнопки */
}
.atc-rail ul{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  list-style:none;
  margin:0; padding:0;
}
/* линия-трек за точками + её заполнение по прогрессу страницы */
.atc-rail-line{
  position:absolute;
  right:16px; top:14px; bottom:14px;
  width:1px;
  background:var(--det-hair-soft);
  pointer-events:none;
}
.atc-rail-line span{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--chrome-mid), var(--chrome-lo));
  opacity:.55;
  transform:scaleY(var(--atc-p,0));
  transform-origin:50% 0;
  will-change:transform;
}
.atc-dot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7em;
  width:auto;
  min-height:34px;                  /* зона нажатия 30×34 — выше минимума WCAG 24×24 */
  padding:8px 12px 8px 10px;
  pointer-events:auto;
  color:var(--muted);
  border-radius:4px;
}
.atc-dot .m{                        /* сама точка */
  position:relative;
  flex:none;
  width:7px; height:7px;
  border-radius:50%;
  border:1px solid var(--chrome-lo);
  background:transparent;
  transition:transform .35s var(--ease-out), background-color .35s var(--ease-out),
             border-color .35s var(--ease-out);
}
.atc-dot .t{                        /* название сцены — по наведению.
     Абсолют обязателен: в потоке невидимая подпись раздувала бы кнопку
     и та ловила бы клики по контенту у правого края экрана. */
  position:absolute;
  right:calc(100% - 6px);
  top:50%;
  font-family:var(--font-text),sans-serif;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
  padding:.45em .7em;
  border:1px solid var(--line);
  border-radius:3px;
  background:rgba(5,5,8,.82);
  opacity:0;
  transform:translateY(-50%) translateX(8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events:none;
}
body.is-demon .atc-dot .t{background:rgba(10,4,6,.85);}
.atc-dot:hover .m,
.atc-dot:focus-visible .m{transform:scale(1.5); border-color:var(--chrome-mid);}
.atc-dot:hover .t,
.atc-dot:focus-visible .t{opacity:1; transform:translateY(-50%);}
/* активная сцена: точка залита и держит вокруг себя нимб-кольцо */
.atc-dot.is-active .m{
  background:var(--chrome-mid);
  border-color:var(--chrome-mid);
  transform:scale(1.15);
}
.atc-dot.is-active .m::after{
  content:'';
  position:absolute; inset:-5px;
  border:1px solid var(--det-hair);
  border-radius:50%;
}
body.is-demon .atc-dot.is-active .m{box-shadow:0 0 10px -1px rgba(255,60,70,.55);}

/* ═══════════ 6. Служебные подписи (хлопушка) ═══════════ */
.atc-slate{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85em;
  margin:1.5rem auto 0;
  max-width:none;
  font-family:var(--font-text),sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.atc-slate.is-on{opacity:.9; transform:none;}
.atc-slate::before,
.atc-slate::after{
  content:'';
  width:clamp(16px,4vw,44px);
  height:1px;
  background:var(--det-hair);
}
/* подпись hero живёт в углу кадра, а не в потоке */
.atc-slate--hero{
  position:absolute;
  right:clamp(30px,5.5vw,76px);
  bottom:clamp(34px,6vh,58px);
  z-index:3;
  margin:0;
  pointer-events:none;
}

/* ═══════════ 7. Шкала прокрутки ═══════════
   Тончайшая линия у нижней кромки. Не спорит с нимбом в шапке:
   тот про бренд, эта — про длину пути. */
.atc-progress{
  position:fixed;
  left:0; right:0; bottom:0;
  height:2px;
  z-index:36;
  pointer-events:none;
  background:var(--det-hair-soft);
}
.atc-progress span{
  display:block;
  height:100%;
  transform:scaleX(var(--atc-p,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--chrome-lo) 0%, var(--chrome-mid) 72%, var(--chrome-hi) 100%);
  opacity:.8;
  will-change:transform;
}

/* ═══════════ Адаптив ═══════════
   На узком экране остаются только рамка, зерно и шкала — остальное
   съедало бы поля и мешало пальцу. */
@media (max-width:1023.98px){
  .atc-scene,
  .atc-slate{display:none;}
  .atc-frame{top:calc(var(--nav-h) + 18px);}
}
@media (max-width:899.98px){
  .atc-rail{display:none;}
}
/* Экран без мыши: подписи станций всё равно показываем по фокусу */
@media (hover:none){
  .atc-dot .t{display:none;}
  .atc-dot:focus-visible .t{display:block; opacity:1; transform:translateY(-50%);}
}

/* ═══════════ prefers-reduced-motion ═══════════
   Всё то же самое, но статикой: зерно не дрожит, появления мгновенные. */
@media (prefers-reduced-motion:reduce){
  .atc-grain{animation:none;}
  .atc-scene span{transition:none;}
  .atc-slate{transition:none;}
  .atc-slate:not(.is-on){opacity:0;}
  .atc-dot .m,
  .atc-dot .t{transition:none;}
  .atc-progress span,
  .atc-rail-line span{will-change:auto;}
}

/* Печать: декор не нужен */
@media print{
  .atc-vignette,.atc-grain,.atc-frame,.atc-scene,.atc-rail,.atc-progress{display:none!important;}
}