/* КиберДек — анимации интерфейса в духе меню Cyberpunk 2077.
   Подключается поверх style.css / инлайновых стилей лендинга. */

/* ---------- кнопки ---------- */
.btn{position:relative;isolation:isolate;
  transition:background .12s ease,color .12s ease,transform .07s ease,box-shadow .18s ease}

/* блик, пробегающий по кнопке при наведении */
.btn::before{content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-120%);opacity:0}
.btn:hover::before{animation:kd-sweep .5s ease-out}
.btn.mag:hover::before,.btn.dark:hover::before{
  background:linear-gradient(105deg,transparent 42%,rgba(252,238,10,.55) 50%,transparent 58%)}
@keyframes kd-sweep{
  0%{transform:translateX(-120%);opacity:0}
  12%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}

/* короткий глитч текста в момент наведения */
.btn:hover{animation:kd-glitch .26s steps(3,end)}
@keyframes kd-glitch{
  0%{text-shadow:none;transform:translate(0,0)}
  30%{text-shadow:-2px 0 var(--magenta,#ff2e88),2px 0 var(--cyan,#00d9f5);transform:translate(1px,-1px)}
  60%{text-shadow:2px 0 var(--magenta,#ff2e88),-2px 0 var(--cyan,#00d9f5);transform:translate(-1px,1px)}
  100%{text-shadow:none;transform:translate(0,0)}
}

/* дыхание в простое — только у главных кнопок */
.btn:not(.ghost):not(.small):not(:disabled){animation:kd-breath 3.4s ease-in-out infinite}
.btn:not(.ghost):not(.small):hover{animation:kd-glitch .26s steps(3,end)}
.btn:nth-of-type(2n){animation-delay:-1.1s}
.btn:nth-of-type(3n){animation-delay:-2.3s}
@keyframes kd-breath{
  0%,100%{box-shadow:0 0 0 0 rgba(11,12,16,.16)}
  48%{box-shadow:3px 3px 0 0 rgba(11,12,16,.22)}
  52%{box-shadow:3px 3px 0 0 rgba(255,46,136,.35)}   /* редкий цветной сбой */
}

/* нажатие — просадка и вспышка */
.btn:active{transform:translateY(2px) scale(.985);animation:none;
  box-shadow:0 0 0 0 rgba(11,12,16,.4),0 0 18px rgba(252,238,10,.8)}
.btn:disabled{animation:none}
.btn:focus-visible{outline:2px solid var(--cyan,#00d9f5);outline-offset:2px}

/* ---------- метки, вкладки, навигация ---------- */
.pill,.tabs button,.admtabs button,.nav a,header nav a,.copy,.vbtn,.opt{
  position:relative;transition:background .12s,color .12s,border-color .12s,transform .08s}
.pill:hover,.tabs button:hover,.admtabs button:hover,.copy:hover,.vbtn:hover{
  transform:translate(-1px,-1px);box-shadow:2px 2px 0 rgba(11,12,16,.85)}
.pill:active,.tabs button:active,.admtabs button:active,.copy:active,.vbtn:active{
  transform:translate(0,0);box-shadow:0 0 0 rgba(11,12,16,0)}

/* уголок-засечка, как у пунктов меню в игре */
.nav a,header nav a{overflow:hidden}
.nav a::after,header nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--magenta,#ff2e88);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
.nav a:hover::after,header nav a:hover::after{transform:scaleX(1)}
.nav a.on::after{background:#000;transform:scaleX(1)}

.opt:hover{transform:translateX(3px)}

/* ---------- карточки материалов ---------- */
.lesson-card{transition:transform .12s ease,box-shadow .16s ease}
.lesson-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(11,12,16,.9)}

/* ---------- переключатель звука ---------- */
.sfxbtn{width:32px;height:32px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line,#d5d8e0);color:var(--ink,#0b0c10);
  font-family:var(--mono,monospace);font-size:14px;line-height:1;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  transition:background .12s,color .12s,transform .08s}
.sfxbtn:hover{background:var(--yellow,#fcee0a);transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 rgba(11,12,16,.85)}
.sfxbtn.off{color:var(--muted,#5d6270);opacity:.65}
.topbar .sfxbtn{margin-left:2px}
header .sfxbtn{border-color:rgba(255,255,255,.45);color:#fff}
header .sfxbtn:hover{color:#000;box-shadow:2px 2px 0 rgba(252,238,10,.5)}
header nav a::after{background:var(--yellow,#fcee0a)}

/* ---------- уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:not(.ghost):not(.small):not(:disabled){animation:none}
  .btn::before{display:none}
  .pill:hover,.tabs button:hover,.admtabs button:hover,.copy:hover,
  .vbtn:hover,.lesson-card:hover,.sfxbtn:hover{transform:none}
}