/* ПЛЁНКА — стили общих анимаций (fx.js): шторки переходов, декор-цифры,
   логотип из двух слоёв, shuffle-буквы, credits-ссылки, маски строк, ховеры карточек. */

/* шторки перехода между страницами: два блока, растут то сверху, то снизу */
.tr { position: fixed; inset: 0; z-index: 700; display: none; pointer-events: none; }
.tr__b { flex: 1 1 50%; height: 0; background: var(--bg); align-self: flex-start; }

/* декор-цифры по третям экрана (decor-numbers) */
.decor {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 24px;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(255, 238, 200, 0.42);
}
.decor--l { left: calc(33.333% - 12px); }
.decor--r { left: calc(66.666% - 12px); }
.decor__in { position: absolute; left: 0; top: 0; width: 100%; height: 200%; will-change: transform; }
.decor__n { position: absolute; left: 50%; width: 40px; margin-left: -20px; text-align: center; transform: rotate(-90deg); }
.guides::before, .guides::after { opacity: 0.55; }

/* логотип: два слоя, при наведении верхний уезжает вверх, нижний (курсив) приезжает снизу */
.logo-chars { position: relative; display: block; overflow: hidden; }
.logo-word { transition: transform 0.6s cubic-bezier(0.75, 0, 0.25, 1); }
.logo-word--2 { position: absolute; left: 0; top: 0; transform: translateY(105%); }
.logo:hover .logo-word--1 { transform: translateY(-105%); }
.logo:hover .logo-word--2 { transform: translateY(0); }

/* shuffle-буквы */
.sh { display: inline-block; white-space: nowrap; }
.sh__c { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.sh__o { display: block; position: relative; z-index: 2; }
.sh__d { display: block; position: absolute; left: 0; top: 0; z-index: 1; }
[data-shuffle] { display: inline-block; }
.nav a[data-shuffle] { display: block; }

/* «Помощь» → credits: ссылки раскрываются над кнопкой */
.bar__credwrap { position: relative; display: inline-block; }
.bar__creds { position: absolute; right: 0; bottom: 100%; display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 6px; pointer-events: none; }
.bar__credwrap:hover .bar__creds { pointer-events: auto; }
.bar__creds a { display: block; overflow: hidden; height: 15px; color: var(--grey); }
.bar__creds a::before { content: attr(href); display: none; }
.bar__creds a { transform: translateY(0.7vw); opacity: 0; transition: transform 0.6s cubic-bezier(0.75, 0, 0.25, 1), opacity 0.6s cubic-bezier(0.75, 0, 0.25, 1); }
.bar__creds a.animate-in { transform: translateY(0); opacity: 1; }
.bar__creds a.animate-out { transform: translateY(0.7vw); opacity: 0; }
.bar__creds a:hover { color: var(--fg); }

/* маски строк для ревилов */
.lw { display: block; overflow: hidden; }
.ln { display: block; }
h1 .lw, .h-sec .lw, .pp-title .lw { padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pp-specs div .lw, .pp-add .lw { display: flex; justify-content: space-between; width: 100%; }
.pp-specs div .ln, .pp-add .ln { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; width: 100%; }
.pp-add .ln { justify-content: flex-start; gap: 28px; }
.pp-price .ln { display: flex; align-items: baseline; gap: 14px; }
.pp-crumbs .ln { display: flex; flex-wrap: wrap; }
.plc__body > * > .lw { display: block; }
.plc__price .ln { display: flex; gap: 8px; }
.plc__body .lw { padding-bottom: 2px; }

/* карточка каталога: второй кадр клипом от центра (fx.js), уголки и фон-заливка */
.plc__img--2 { opacity: 1; clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); }
.plc.is-alt .plc__img--2 { opacity: 1; }
.plc__media .corners { opacity: 0; inset: -3px; transform: scale(1.01); transition: opacity 0.3s ease-out, inset 0.6s cubic-bezier(0.75, 0, 0.25, 1), transform 0.3s ease-out; }
.plc:hover .plc__media .corners { opacity: 1; inset: -0.3vw; transform: scale(1); }
.plc::before { content: ""; position: absolute; left: -8px; right: -8px; bottom: -8px; height: 0; background: rgba(255, 238, 200, 0.05); transition: height 0.6s cubic-bezier(0.75, 0, 0.25, 1); pointer-events: none; }
.plc:hover::before { height: calc(100% + 16px); }

/* галерея товара: слои стопкой, кроссфейд клипом (product.js) */
.pp-track { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; scroll-snap-type: none; }
.pp-slide { position: absolute; inset: 0; will-change: clip-path; }
.pp-slide img { width: 100%; height: 100%; }
.pp-gallery { overflow: visible; }

@media (max-width: 767px) {
  .decor--l { left: calc(50% - 12px); }
  .decor--r { display: none; }
  .bar__creds { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-word, .row__bg, .row__desc .mv2, .frame__decor, .fr img, .pk img, .plc__media .corners, .plc::before { transition: none !important; }
  .tdot { animation: none !important; }
}

/* во время лоадера cookie-плашка и панели скрыты */
body.is-loading .lgbar, body.is-loading .lg { visibility: hidden !important; opacity: 0 !important; }