/* ДВИЖЕНИЕ.
   Три вещи: интро при загрузке, мягкое появление содержимого после каждого перехода
   и плавность у всего, что нажимается.

   ⚠️ Правило безопасности: ни один элемент не имеет opacity:0 в обычном состоянии.
   Прозрачность живёт только внутри @keyframes, а класс анимации снимается таймером
   из app.js. В скрытой вкладке анимации не идут — при таком устройстве содержимое
   просто появится без движения, а не исчезнет навсегда. */

/* ---------- интро ---------- */
.introv{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s ease;
}
.introv.out{opacity:0; pointer-events:none}
.iocross{position:absolute; inset:0; width:100%; height:100%}
.iocross path{stroke:var(--ink); stroke-width:1; fill:none; opacity:.16;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:iodraw .85s cubic-bezier(.2,.7,.2,1) forwards}
.iocross .ioh{animation-delay:.12s}

.iostage{position:relative; display:flex; flex-direction:column; align-items:center; gap:34px}
.iomark{width:min(34vw,240px); height:auto; fill:var(--ink)}
.iomark .iml{animation:iolft .9s cubic-bezier(.2,.75,.2,1) both}
.iomark .imr{animation:iorgt .9s cubic-bezier(.2,.75,.2,1) both}
.iologo{animation:iofade .7s ease .55s both}
.iologo svg{display:block; width:168px; height:37px; fill:var(--ink)}
.introv.done .iomark{animation:iopulse .5s ease}

@keyframes iodraw{to{stroke-dashoffset:0}}
@keyframes iolft{from{opacity:0; transform:translateX(-46px)} to{opacity:1; transform:none}}
@keyframes iorgt{from{opacity:0; transform:translateX(46px)} to{opacity:1; transform:none}}
@keyframes iofade{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes iopulse{50%{transform:scale(1.04)}}

/* ---------- появление содержимого ---------- */
@keyframes rv{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.rv{animation:rv .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0ms)}

/* ---------- нажимаемое ---------- */
.go,.ghost,.around,.aswap,.opt,.mb,.slink,.slink2,.mini,.vph,.cit,.crow,.ico,.arem,.aeye,
.frow input,.q input,.trow input,.blk textarea,.afield input,.afield select{
  transition:background-color .22s ease, color .22s ease, border-color .22s ease,
             opacity .22s ease, transform .18s cubic-bezier(.2,.7,.2,1),
             box-shadow .22s ease;
}
.go:hover:not(:disabled),.around:hover{transform:translateY(-2px)}
.go:active:not(:disabled),.around:active{transform:translateY(0) scale(.96)}
.opt:hover,.vph:hover,.mini:hover,.ico:hover{transform:translateY(-1px)}
.opt:active,.vph:active,.mini:active,.ico:active{transform:translateY(0) scale(.97)}
.crow{transform:translateX(0)}
.crow:hover{transform:translateX(4px)}
.mb,.slink,.slink2,.ghost,.aswap{will-change:color}
.arem span{transition:background-color .2s ease, border-color .2s ease}

/* видимый фокус с клавиатуры — без него плавность превращается в недоступность */
.go:focus-visible,.ghost:focus-visible,.around:focus-visible,.opt:focus-visible,
.mb:focus-visible,.slink:focus-visible,.slink2:focus-visible,.mini:focus-visible,
.vph:focus-visible,.crow:focus-visible,.ico:focus-visible,.aswap:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .rv,.iocross path,.iomark .iml,.iomark .imr,.iologo{animation:none}
  .go,.ghost,.around,.opt,.mb,.slink,.slink2,.mini,.vph,.cit,.crow,.ico{transition:none}
  .go:hover,.around:hover,.opt:hover,.crow:hover{transform:none}
}