/* Движение главной, 2026. Идеи из материала Ольги: набор литер, гравюрный штрих, метки реза.
   Всё отключается при prefers-reduced-motion. */
@property --hatch{syntax:'<length>';inherits:false;initial-value:0px}

/* 1. Набор: литеры встают на место по одной, как металлический шрифт в верстатку */
.ol-big .ch{display:inline-block;will-change:transform}
.m-go .ol-big.split .ch{opacity:0;transform:translateY(.22em);animation:m-set .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i) * 28ms + 60ms)}
@keyframes m-set{to{opacity:1;transform:none}}

/* 2. Гравюра: портрет проявляется косым штрихом, линии утолщаются до тона */
.m-on .ol-photo img{-webkit-mask-image:repeating-linear-gradient(-38deg,#000 0 var(--hatch),transparent var(--hatch) 7px);mask-image:repeating-linear-gradient(-38deg,#000 0 var(--hatch),transparent var(--hatch) 7px)}
.m-go .ol-photo img{animation:m-engrave 1.15s cubic-bezier(.55,0,.2,1) .2s forwards}
@keyframes m-engrave{to{--hatch:7.2px}}
.m-on .ol-photo{background:#0B0A09}
.m-go .ol-photo{animation:m-plate 1.15s ease .2s forwards}
@keyframes m-plate{from{background:#0B0A09}to{background:#ddd}}

/* 3. Остальное на первом экране — следом, спокойно */
.m-on .ol-list,.m-on .ol-recent,.m-on .ol-about,.m-on .ol-foot,.m-on .ol-city,.m-on .ol-head{opacity:0;transform:translateY(10px)}
.m-go .ol-list,.m-go .ol-recent,.m-go .ol-about,.m-go .ol-foot,.m-go .ol-city,.m-go .ol-head{animation:m-up .8s cubic-bezier(.2,.7,.2,1) forwards}
.m-go .ol-head{animation-delay:0s}.m-go .ol-city{animation-delay:.35s}.m-go .ol-list{animation-delay:.5s}.m-go .ol-recent{animation-delay:.55s}.m-go .ol-about{animation-delay:.7s}.m-go .ol-foot{animation-delay:.8s}
@keyframes m-up{to{opacity:1;transform:none}}

/* 4. Обложки открываются кадрированием по скроллу (родная scroll-анимация) */
@supports (animation-timeline: view()){
  .m-on .shot.reveal{opacity:1;transform:none;transition:none}
  .m-on .shot img{animation:m-crop linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes m-crop{from{clip-path:inset(6% 4% 6% 4%);scale:1.04}to{clip-path:inset(0);scale:1}}
}

/* 5. Метки реза: при наведении по углам обложки встают типографские уголки */
.shot{position:relative}
.shot::after{content:"";position:absolute;inset:14px;pointer-events:none;mix-blend-mode:difference;
  --c:#fff;--l:0px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px var(--l) no-repeat;
  transition:--l .5s cubic-bezier(.2,.7,.2,1),inset .5s cubic-bezier(.2,.7,.2,1)}
@property --l{syntax:'<length>';inherits:false;initial-value:0px}
@media (hover:hover){.shot:hover::after{--l:22px;inset:18px}}


@media (prefers-reduced-motion:reduce){
  .m-go .ol-big .ch,.m-go .ol-photo img,.m-go .ol-photo,.m-go .ol-list,.m-go .ol-recent,.m-go .ol-about,.m-go .ol-foot,.m-go .ol-city,.m-go .ol-head,
  .m-on .ol-big .ch,.m-on .ol-photo img,.m-on .ol-photo,.m-on .ol-list,.m-on .ol-recent,.m-on .ol-about,.m-on .ol-foot,.m-on .ol-city,.m-on .ol-head,.m-on .shot img{animation:none!important;opacity:1;transform:none;-webkit-mask-image:none;mask-image:none;clip-path:none;scale:1}
  .shot::after{transition:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-on .ol-big:not(.split){visibility:hidden;animation:m-show 0s 1.5s forwards}
@keyframes m-show{to{visibility:visible}}

@media (prefers-reduced-motion:reduce){.m-go .ol-big.split .ch,.m-go .ol-big .ch{opacity:1!important;transform:none!important;animation:none!important}}