/* OKO · hero-кадры разделов. Кадр живёт только на тёмном фоне: свечение на
   белом невидимо и превращается в серую кашу, поэтому в светлой теме он
   гасится до тонкой подложки. Появление - transform/opacity. */

.okh{
  position:relative;
  margin:0 0 4px;
  height:132px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  animation:okhIn .5s cubic-bezier(.22,1,.32,1) backwards;
}
@keyframes okhIn{ from{ opacity:0; transform:translateY(-8px) } }

.okh-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  /* очень медленное дыхание кадра - картинка перестаёт быть мёртвой,
     но внимание не отвлекает */
  animation:okhDrift 26s ease-in-out infinite alternate;
}
@keyframes okhDrift{ from{ transform:scale(1.02) } to{ transform:scale(1.09) } }

/* градиент, чтобы текст читался и кадр растворялся в экране */
.okh-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.34) 0%, rgba(5,5,5,0) 34%, var(--bg,#050505) 97%),
    linear-gradient(90deg, rgba(5,5,5,.62) 0%, rgba(5,5,5,0) 62%);
}

.okh-t{ position:absolute; left:18px; bottom:14px; right:18px }
.okh-t b{
  display:block;
  font-family:'Bebas Neue',Montserrat,sans-serif;
  font-size:30px; line-height:1; letter-spacing:.03em;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.okh-t span{
  display:block; margin-top:3px; font-size:12px;
  color:rgba(255,255,255,.66);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* планшет и ПК - кадр выше, он там не жалко места */
@media (min-width:700px){ .okh{ height:170px } .okh-t b{ font-size:36px } }
@media (min-width:1100px){ .okh{ height:200px } }

/* СВЕТЛАЯ ТЕМА: кадр гасим. Неон на белом не читается. */
:root[data-theme="light"] .okh-img{ opacity:.22; filter:saturate(.7) }
:root[data-theme="light"] .okh-veil{
  background:linear-gradient(180deg, rgba(255,255,255,.2) 0%, var(--bg,#fff) 96%);
}
:root[data-theme="light"] .okh-t b{ color:var(--text); text-shadow:none }
:root[data-theme="light"] .okh-t span{ color:var(--dim); text-shadow:none }

@media (prefers-reduced-motion:reduce){
  .okh{ animation:none }
  .okh-img{ animation:none; transform:none }
}