/* POSITIVE SEARCH — полоса «MAIN PAGE» внутри страницы About.
 *
 * Выбор Ильи 09.08.2026 из лабы web-ui/about-cta-lab.html: полоса во всю ширину
 * колонки и втрое ниже карточки на страницах активов (62px против 186), стоит
 * между абзацами и появляется при въезде в кадр. Анимация — МИКС: через одну
 * полосу «сбоку», через одну «рисуется».
 *
 * Почему полосу вставляет скрипт, а не разметка (js/about-cta.js): страница
 * существует на восьми языках и собирается конвейером i18n.py из русской. Полоса
 * в разметке означала бы восемь копий и новые строки в каталогах переводов —
 * ради навигационного элемента, который ничего не сообщает. Краулеру она не
 * нужна: ссылка на главную и без того стоит в навбаре и в тексте.
 *
 * Ничего не появляется, если скрипты выключены, — на месте полосы просто нет
 * ничего, а не пустая рамка. */

.ps-about-cta { position:relative; overflow:hidden; display:flex; align-items:center; gap:18px;
  height:62px; padding:0 20px; margin:26px 0 30px;
  border:1px solid var(--ps-hairline); border-radius:12px; background:var(--ps-bg-card,#0d151c);
  text-decoration:none; cursor:pointer; transition:border-color .18s, background .18s;
  will-change:transform, opacity; }
.ps-about-cta:hover, .ps-about-cta:focus-visible {
  border-color:var(--ps-text-dim); background:rgba(255,255,255,.015); }
/* Лента гаснет к краям: строка, обрубленная посередине буквы, читается как
   поломка. Границы по бокам ставит сам скрипт, а маска смягчает стык. */
.ps-about-cta canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }

.ps-about-cta .ps-about-owl { position:relative; flex:none; width:104px; height:auto; color:var(--ps-text);
  opacity:.95; filter:drop-shadow(0 0 14px rgba(4,10,14,.92)); }
.ps-about-cta .pupil { transform-box:fill-box; transform-origin:center; }
.ps-about-cta:hover .pupil { animation:ps-about-pupil 1.1s ease-in-out infinite; }
@keyframes ps-about-pupil {
  0%,100% { transform:scale(1); } 38% { transform:scale(1.7); } 72% { transform:scale(.3); } }

.ps-about-cta .btn { position:relative; margin-left:auto; flex:none; font-size:11px; font-weight:600;
  letter-spacing:.12em; padding:8px 18px; border-radius:8px; background:var(--ps-green);
  color:var(--ps-bg-page); transition:filter .15s; }
.ps-about-cta:hover .btn { filter:brightness(1.08); }

/* ── ПОЯВЛЕНИЕ ──
   Режим висит на самой полосе (data-a), а не на общем предке: микс должен давать
   соседним полосам разные анимации. Класс .in вешает IntersectionObserver. */

/* сбоку — сторона в data-side, чтобы полосы заезжали то слева, то справа */
.ps-about-cta[data-a="slide"] { opacity:0; transform:translateX(-46px); }
.ps-about-cta[data-a="slide"][data-side="r"] { transform:translateX(46px); }
.ps-about-cta[data-a="slide"].in { opacity:1; transform:none;
  transition:opacity .4s ease, transform .56s cubic-bezier(.2,.75,.3,1); }

/* рисуется — сова прочерчивается контуром, следом зрачки и кнопка */
.ps-about-cta[data-a="draw"] { opacity:0; }
.ps-about-cta[data-a="draw"].in { opacity:1; transition:opacity .26s ease; }
.ps-about-cta[data-a="draw"] .ps-about-owl circle:not(.pupil),
.ps-about-cta[data-a="draw"] .ps-about-owl path { stroke-dasharray:120; stroke-dashoffset:120; }
.ps-about-cta[data-a="draw"].in .ps-about-owl circle:not(.pupil),
.ps-about-cta[data-a="draw"].in .ps-about-owl path { animation:ps-about-draw .85s ease forwards; }
@keyframes ps-about-draw { to { stroke-dashoffset:0; } }
.ps-about-cta[data-a="draw"] .ps-about-owl .pupil,
.ps-about-cta[data-a="draw"] .btn { opacity:0; }
/* Зрачки проявляются ПЕРЕХОДОМ, а не анимацией. Анимация здесь занимала бы
   свойство animation целиком и перебивала дыхание при наведении — оно объявлено
   менее специфичным селектором. Так и вышло в первой сборке: на полосах
   «сбоку» глаза дышали, на «рисуется» нет. Переход трогает opacity, дыхание —
   transform, они больше не спорят. */
.ps-about-cta[data-a="draw"].in .ps-about-owl .pupil {
  opacity:1; transition:opacity .3s .5s ease; }
.ps-about-cta[data-a="draw"].in .btn { animation:ps-about-fade .36s .62s ease forwards; }
@keyframes ps-about-fade { to { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  .ps-about-cta, .ps-about-cta.in { opacity:1 !important; transform:none !important;
    transition:none !important; }
  .ps-about-cta .ps-about-owl circle, .ps-about-cta .ps-about-owl path {
    stroke-dashoffset:0 !important; animation:none !important; }
  .ps-about-cta .btn, .ps-about-cta .ps-about-owl .pupil { opacity:1 !important; animation:none !important; }
}

@media (max-width:620px) {
  .ps-about-cta { height:58px; gap:12px; padding:0 14px; }
  .ps-about-cta .ps-about-owl { width:78px; }
  .ps-about-cta .btn { padding:7px 13px; letter-spacing:.08em; }
}