/* Плавные анимации Oink. Отключаются при prefers-reduced-motion. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); }
html { scroll-behavior: smooth; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .0); } 50% { box-shadow: 0 0 0 5px rgba(255, 193, 7, .18); } }

/* появление страницы */
.topbar { animation: dropIn .6s var(--ease) backwards; }
main.content > * { animation: rise .6s var(--ease) backwards; }
main.content > :nth-child(2) { animation-delay: .06s; }
main.content > :nth-child(3) { animation-delay: .12s; }
main.content > :nth-child(4) { animation-delay: .18s; }
.home-side > .panel { animation: rise .6s var(--ease) backwards; }
.home-side > .panel:nth-child(1) { animation-delay: .12s; }
.home-side > .panel:nth-child(2) { animation-delay: .2s; }
.home-side > .panel:nth-child(3) { animation-delay: .28s; }
.home-side > .panel:nth-child(4) { animation-delay: .36s; }
.foot { animation: fadeIn 1s ease .4s backwards; }

/* списки: каскадное появление строк */
.forum-item, .feed-item, .trow, .post, .atile, .prow, .forum-table tbody tr, .mini, .adm-cols > .block { animation: rise .55s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
.pill, .chipcloud .yg-label { animation: pop .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms + 150ms); }
.bars i { transform-origin: bottom; animation: grow .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms + 200ms); }
.flash, .banner, .status-banner { animation: slideRight .5s var(--ease) backwards; }

/* общие переходы */
a, button, .btn, .pill, .chip, .yg-label, .avatar, .atile, .tile, .forum-item, .feed-item, .trow, .panel, .block, .card, .post, input, textarea, select, .brand-accent {
  transition: color .22s var(--ease-soft), background-color .25s var(--ease-soft), border-color .25s var(--ease-soft), box-shadow .3s var(--ease-soft), transform .3s var(--ease), filter .25s var(--ease-soft), opacity .25s;
}

/* наведение: шапка */
.topbar .main-nav a { position: relative; }
.topbar .main-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent2); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.topbar .main-nav a:hover::after { transform: scaleX(1); }
.topbar .brand:hover .brand-accent { color: #ffe08a; text-shadow: 0 0 16px rgba(255, 193, 7, .55); }
.topbar .qsearch input { transition: width .4s var(--ease), box-shadow .3s, border-color .3s, background-color .3s; }
.topbar .qsearch input:focus { width: 260px; }
.topbar.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.ub-name:hover { transform: translateY(-1px); }

/* наведение: разделы и лента */
.forum-item { position: relative; }
.forum-item::before { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--accent2); transform: scaleY(0); transition: transform .35s var(--ease); }
.forum-item:hover { background: var(--row-alt); transform: translateX(3px); }
.forum-item:hover::before { transform: scaleY(1); }
.forum-name::after { content: ' \2192'; display: inline-block; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--ease); color: var(--accent2); }
.forum-item:hover .forum-name::after { opacity: 1; transform: none; }
.feed-item:hover { background: var(--row-alt); padding-left: 20px; }
.trow:hover { background: var(--row-alt); transform: translateX(3px); }
.panel:hover, .block:hover, .card:hover { border-color: var(--line2); }
.post:hover { border-color: var(--line2); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.forum-table tbody tr:hover { background: var(--row-alt); }

/* наведение: кнопки, метки, плитки */
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 193, 7, .3); }
.btn:active, button:active { transform: translateY(0) scale(.97); box-shadow: none; }
.pill:hover, .chip:hover { transform: translateY(-1px); }
.yg-label:hover, a.yg-label.prefix:hover { transform: translateY(-1px) scale(1.06); }
.atile:hover, .tile:hover { transform: translateY(-3px); border-color: var(--accent2); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.avatar:hover { transform: scale(1.07); }
.author .avatar:hover { transform: scale(1.1) rotate(-3deg); }
.bars i:hover { filter: brightness(1.3); }
.btn.small:focus-visible, .btn:focus-visible { animation: glow 1.6s ease-in-out infinite; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(255, 193, 7, .22); border-color: var(--accent2); }
a:active { opacity: .8; }

/* плавное исчезновение при переходе на другую страницу */
body.leaving main.content { opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease; }

/* появление при прокрутке (классы ставит motion.js) */
.rv { opacity: 0; transform: translateY(22px); animation: none !important; }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* чат */
.chat-msg.new { animation: slideRight .35s var(--ease) backwards; }
.chat-msg { transition: background-color .2s; }