/* =====================================================================
   ONYX · /ai-production/ · блок «Из чего собран рекламный кадр»
   Интерактив: нажали на пункт → его слой поднимается из стопки и подсвечивается,
   остальные гаснут, от пункта к слою тянется линия-указатель.
   Подключить ПОСЛЕ main.css. Работает вместе с sloi-interaktiv.js
   ===================================================================== */

/* --- слои: глубина через переменные, чтобы можно было «поднять» выбранный --- */
.layers { position: relative; --lift: 70px; }
.layer { --z: 0px; --up: 0px; }
.layers.is-split .layer--bg      { --z: -130px; }
.layers.is-split .layer--light   { --z: -50px; }
.layers.is-split .layer--hero    { --z: 30px; }
.layers.is-split .layer--product { --z: 100px; }
.layers.is-split .layer--text    { --z: 170px; }
.layers.is-split .layer { transform: translateZ(calc(var(--z) + var(--up))); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, box-shadow .5s ease, filter .5s ease; }

/* выбран слой: он поднимается и горит, остальные — тусклые */
.layers.is-split.has-pick .layer { opacity: .16; filter: saturate(.4); }
.layers.is-split.has-pick .layer.is-pick {
  --up: var(--lift); opacity: 1; filter: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 60px -6px rgba(240, 30, 20, .75), 0 30px 60px rgba(0, 0, 0, .55);
}
/* у прозрачных слоёв (свет, персонаж, товар, текст) — лёгкая подложка, чтобы было видно границу */
.layers.is-split.has-pick .layer.is-pick:not(.layer--bg) { background-color: rgba(20, 6, 6, .35); }

/* свет и атмосфера — наши дым, блик и искры поверх старых красных пятен */
.layer--light {
  background:
    url(/assets/img/layers/flare.webp) 18% 10% / 70% auto no-repeat,
    url(/assets/img/layers/smoke-bottom.webp) center 120% / 100% auto no-repeat,
    radial-gradient(circle at 25% 30%, rgba(240, 30, 20, .45), transparent 30%),
    radial-gradient(circle at 80% 60%, rgba(255, 90, 80, .3), transparent 35%);
  border-radius: var(--r-s);
}

/* метка на выбранном слое: «1 · Фон» */
.layer__tag {
  position: absolute; left: 4%; top: 6%; z-index: 3;
  padding: 6px 12px; border-radius: 999px; background: var(--accent-btn); color: #fff;
  font: 700 clamp(11px, 1vw, 14px)/1 var(--font-body); letter-spacing: .02em; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.layers.is-split .layer.is-pick .layer__tag { opacity: 1; transform: none; }
.layer--text .layer__tag { left: auto; right: 4%; justify-self: auto; }   /* у текста слева слоган — метку справа */
/* в main.css у слоёв «товар» и «текст» стоят правила для всех span — для метки их отменяем */
.layer--product .layer__tag { right: auto; bottom: auto; border: 0; border-radius: 999px; padding: 6px 12px; font-size: clamp(11px, 1vw, 14px); }
.layer--text .layer__tag { background: var(--accent-btn); padding: 6px 12px; font-size: clamp(11px, 1vw, 14px); }
.layers.is-split.has-pick .layer--text.is-pick { --up: 34px; }   /* верхний слой поднимаем меньше — не налезает на заголовок */

/* --- линия-указатель от пункта к слою --- */
.layers__pointer { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.layers__pointer path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; filter: drop-shadow(0 0 6px rgba(240, 30, 20, .8));
  animation: lp-flow 1s linear infinite; opacity: 0; transition: opacity .3s ease; }
.layers__pointer circle { fill: #fff; stroke: var(--accent); stroke-width: 3; opacity: 0; transition: opacity .3s ease; }
.layers__pointer .lp-ring { fill: none; stroke: var(--accent); stroke-width: 2; animation: lp-ring 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.layers__pointer.is-on path, .layers__pointer.is-on circle { opacity: 1; }
@keyframes lp-flow { to { stroke-dashoffset: -22; } }
@keyframes lp-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* --- пункты списка = кнопки --- */
.layer-item { position: relative; overflow: hidden; cursor: pointer; transition: border-color .3s ease, background .3s ease, transform .3s ease !important; transition-delay: 0s !important; }
.layer-item:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); transform: translateX(-4px); }
.layer-item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.layers.has-pick .layer-item { opacity: .55; transition: opacity .3s ease, border-color .3s ease, background .3s ease, transform .3s ease !important; }
.layers.has-pick .layer-item.is-pick { opacity: 1; background: linear-gradient(100deg, #3d0806, #160707 70%); border-color: var(--accent); transform: translateX(-8px); box-shadow: 0 0 40px -14px var(--glow); }
.layers.has-pick .layer-item.is-pick .layer-item__num { background: #fff; color: var(--accent); border-color: #fff; }
/* полоска автопоказа внизу активного пункта */
.layer-item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.layers.is-tour .layer-item.is-pick::after { animation: lp-bar var(--tour, 2600ms) linear forwards; }
@keyframes lp-bar { to { width: 100%; } }

/* --- панель под кадром: подсказка + кнопка «Собрать кадр» --- */
.layers__bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; transition: margin-top 1.2s var(--ease); }
.layers.is-split .layers__bar { margin-top: 64px; }
.layers__hint { color: var(--text-3); font-size: 14px; }
.layers__hint b { color: #ff8a80; font-weight: 600; }
.layers__toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(240, 30, 20, .1); color: #fff;
  font: 600 14px/1 var(--font-body); cursor: pointer; transition: background .3s ease, box-shadow .3s ease;
}
.layers__toggle:hover { background: var(--accent-btn); box-shadow: 0 0 30px -6px var(--glow); }
.layers__toggle svg { width: 16px; height: 16px; }
.layers__caption { display: none; }                         /* старую подпись заменила панель */
.layers:not(.is-split) .layers__hint { visibility: hidden; }

/* собранный кадр: все пункты отмечены галочкой */
.layers.is-built .layer-item { border-color: color-mix(in srgb, var(--accent) 60%, transparent); opacity: 1; }
.layers.is-built .layer-item__num { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 0; }
.layers.is-built .layer-item__num::before { content: "✓"; font-size: 14px; }

/* --- телефон: пункты — ряд кнопок 1–5 под кадром, текст выбранного — карточкой --- */
.layers__detail { display: none; }
@media (max-width: 900px) {
  .layers { --lift: 46px; }
  .layers__pointer { display: none; }
  .layers__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; grid-template-columns: none; }
  .layers__list::-webkit-scrollbar { display: none; }
  .layer-item { flex: 0 0 auto; padding: 10px 14px 10px 10px; align-items: center; font-size: 14px; }
  .layer-item:hover, .layers.has-pick .layer-item.is-pick { transform: none; }
  .layer-item__txt { display: none; }
  .layers__detail .layer-item__txt { display: inline; }
  .layers.is-split .layers__scene { margin-top: 44px; transition: margin-top 1.2s var(--ease); }
  .layer-item strong { white-space: nowrap; }
  .layers__detail { display: block; min-height: 64px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: var(--r-s); background: linear-gradient(100deg, #2a0705, #140707 70%); color: var(--text-2); font-size: 15px; line-height: 1.45; }
  .layers__detail strong { color: #fff; }
  .layers__bar, .layers.is-split .layers__bar { margin-top: 34px; }
  .layer__tag { font-size: 11px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .layers.is-split .layer, .layer-item, .layer__tag { transition: none !important; }
  .layers__pointer path, .layers__pointer .lp-ring, .layers.is-tour .layer-item.is-pick::after { animation: none; }
}