/* Общие анимации сайта: переходы между страницами, отклик на нажатие, лайк двойным тапом и мелочи.
   Подключается на всех страницах. Всё отключается, если в системе включено «уменьшить движение». */

/* ---------- плавный переход между страницами (Chrome / Android / Edge; где не поддерживается - как раньше) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
::view-transition-old(root){ animation-name:mo-vt-out; }
::view-transition-new(root){ animation-name:mo-vt-in; }
@keyframes mo-vt-out{ to{ opacity:0; } }
@keyframes mo-vt-in{ from{ opacity:0; transform:translateY(8px); } }
/* логотип и нижнее меню на телефоне при переходе стоят на месте, меняется только содержимое */
.logo-wrap{ view-transition-name:site-logo; }
.mobile-nav{ view-transition-name:mobile-nav; }
::view-transition-group(site-logo), ::view-transition-group(mobile-nav){ animation-duration:.22s; }

/* ---------- отклик на нажатие (на телефоне нет :hover, поэтому кнопка чуть «проседает» под пальцем) ---------- */
button, .tag-chip, .mobile-nav-item, a.btn-action, .search-row, .notif-item{ transition:scale .15s ease; }
button:not(:disabled):active, .tag-chip:active, .mobile-nav-item:active, a.btn-action:active, a.cta-login:active{
  scale:.95; transition-duration:.08s;
}
.card:active, .search-row:active, .notif-item:active, .item:active{ scale:.98; transition-duration:.1s; }

/* ---------- большое сердце при лайке двойным тапом ---------- */
.mo-dt-host{ position:relative; }
.mo-heart{
  position:absolute; width:96px; height:96px; margin:-48px 0 0 -48px; pointer-events:none; z-index:5;
  background:url(/assets/heart_filled.png) center/contain no-repeat;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
  animation:mo-heart .85s cubic-bezier(.2,.9,.3,1.2) forwards;
}
@keyframes mo-heart{
  0%{ opacity:0; transform:scale(.2) rotate(var(--r,0deg)); }
  18%{ opacity:1; transform:scale(1.18) rotate(var(--r,0deg)); }
  32%{ transform:scale(.94) rotate(var(--r,0deg)); }
  45%{ transform:scale(1) rotate(var(--r,0deg)); }
  75%{ opacity:1; transform:scale(1) translateY(0) rotate(var(--r,0deg)); }
  100%{ opacity:0; transform:scale(.9) translateY(-46px) rotate(var(--r,0deg)); }
}

/* ---------- счётчик лайков прокручивается, как табло ---------- */
.mo-roll{ display:inline-flex; flex-direction:column; height:1.25em; line-height:1.25em; overflow:hidden; vertical-align:bottom; }
.mo-roll > span{ display:block; animation:mo-roll .32s cubic-bezier(.2,.8,.3,1) forwards; }
.mo-roll.down > span{ animation-name:mo-roll-down; }
@keyframes mo-roll{ from{ transform:translateY(0); } to{ transform:translateY(-100%); } }
@keyframes mo-roll-down{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }

/* ---------- новый комментарий плавно появляется ---------- */
.comment.mo-new{ animation:mo-cm-in .42s cubic-bezier(.2,.8,.3,1); }
@keyframes mo-cm-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- публикация в профиле: появление и удаление без перезагрузки страницы ---------- */
.post.mo-in{ animation:mo-post-in .55s cubic-bezier(.2,.8,.3,1); }
@keyframes mo-post-in{ from{ opacity:0; transform:translateY(-14px) scale(.985); } to{ opacity:1; transform:none; } }
.post.mo-out{ overflow:hidden; transition:opacity .25s ease, transform .3s ease, max-height .38s cubic-bezier(.4,0,.2,1) .12s, margin .38s ease .12s; opacity:0; transform:scale(.97); }
.post.mo-swap{ animation:mo-swap .35s ease; }
@keyframes mo-swap{ from{ opacity:.35; } to{ opacity:1; } }

/* ---------- колокольчик качается, когда приходит уведомление ---------- */
.mo-ring{ animation:mo-ring .9s ease; transform-origin:50% 15%; }
@keyframes mo-ring{
  0%,100%{ transform:rotate(0); } 12%{ transform:rotate(16deg); } 26%{ transform:rotate(-14deg); }
  40%{ transform:rotate(10deg); } 54%{ transform:rotate(-7deg); } 68%{ transform:rotate(4deg); } 82%{ transform:rotate(-2deg); }
}

/* ---------- переключатели: белая плашка переезжает к выбранной кнопке ---------- */
.mo-pill-host{ position:relative; isolation:isolate; }
.mo-pill{
  position:absolute; z-index:-1; border-radius:8px; background:var(--btn-bg, #ECEFF0); pointer-events:none;
  transition:left .32s cubic-bezier(.3,.8,.3,1), top .32s cubic-bezier(.3,.8,.3,1), width .32s cubic-bezier(.3,.8,.3,1), height .32s cubic-bezier(.3,.8,.3,1), opacity .2s;
}
.mo-pill.no-anim{ transition:none; }
.mo-pill-host.mo-pill-ready > .active, .mo-pill-host.mo-pill-ready > .on{ background:transparent !important; border-color:transparent !important; }
.mo-pill-host > button{ transition:color .25s ease; }

/* ---------- лента: карточки мягко «всплывают» волной, когда подгружаются ---------- */
@keyframes mo-rise{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
@keyframes mo-fade{ from{ opacity:0; } to{ opacity:1; } }
.grid > .card{ animation:mo-rise .5s cubic-bezier(.2,.75,.3,1) backwards; animation-delay:calc(var(--i, 0) * 40ms); }
.full-posts > .post{ animation:mo-rise .5s cubic-bezier(.2,.75,.3,1) backwards; }
/* смена вида сетка <-> список: новый вид проявляется, а не «прыгает» */
.feed-wrap .grid, .feed-wrap .full-posts{ animation:mo-fade .3s ease; }

/* ---------- плитки скринов: тень и подъём при наведении ---------- */
@media (hover:hover){
  .grid > .card{ transition:translate .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, scale .15s ease; }
  .grid > .card:hover{ translate:0 -3px; box-shadow:0 14px 34px rgba(0,0,0,.55); }
  .side-nav a, .top-a{ transition:background-color .2s ease, color .2s ease, translate .2s cubic-bezier(.2,.8,.3,1); }
  .side-nav a:hover, .top-a:hover{ translate:3px 0; }
  .side-tags a{ transition:background-color .2s ease, border-color .2s ease, translate .2s ease; }
  .side-tags a:hover{ translate:0 -2px; }
}

/* ---------- баннер для гостей: скрины выезжают веером, цифры набегают ---------- */
@keyframes mo-fan-in{ from{ opacity:0; translate:60px 24px; } to{ opacity:1; translate:0 0; } }
.hero-fan .hero-shot{ animation:mo-fan-in .8s cubic-bezier(.2,.8,.25,1) backwards; }
.hero-fan .hero-shot:nth-child(1){ animation-delay:.15s; }
.hero-fan .hero-shot:nth-child(2){ animation-delay:.27s; }
.hero-fan .hero-shot:nth-child(3){ animation-delay:.39s; }
.hero h1 em{ background-size:200% 100%; animation:mo-shine 6s ease-in-out infinite alternate; }
@keyframes mo-shine{ from{ background-position:0% 0; } to{ background-position:100% 0; } }

/* ---------- боковые колонки появляются следом за лентой ---------- */
.side-in > *{ animation:mo-rise .55s cubic-bezier(.2,.75,.3,1) backwards; }
.side-in > *:nth-child(2){ animation-delay:.08s; }
.side-in > *:nth-child(3){ animation-delay:.16s; }
.side-in > *:nth-child(n+4){ animation-delay:.24s; }

/* ---------- Скрин недели / месяца / Авторы: карточки волной ---------- */
.mo-stagger > *{ animation:mo-rise .5s cubic-bezier(.2,.75,.3,1) backwards; animation-delay:calc(min(var(--i, 0), 10) * 45ms); }

/* ---------- кому мешает движение - всё почти мгновенно ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
  .mo-heart{ display:none; }
  .hero h1 em{ animation:none; }
}

/* длинное слово без пробелов («ААААААА...» или ссылка) не должно вылезать за карточку */
body{ overflow-wrap:break-word; }
.post-title, .desc, .tx, .rt, .post h2, .post h3, .sv-rev h3, .comment, .c .t, .tk-desc{ overflow-wrap:anywhere; }

/* нижнее меню на телефоне: пункты делят ширину поровну, чтобы влезали все 5 (с «Путешествиями») */
@media (max-width:700px){
  .mobile-nav, .sh-nav{ padding-left:4px !important; padding-right:4px !important; }
  .mobile-nav-item, .sh-nav a{ flex:1 1 auto; min-width:0; padding-left:0 !important; padding-right:0 !important; }
  .mobile-nav-item > span:last-child, .sh-nav a > span:not(.sh-nav-av){ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .sh-nav a.active{ color:#fff; }
}
/* когда пунктов пять - шрифт подписей чуть меньше, чтобы «Уведомления» и «Путешествия» влезали целиком */
@media (max-width:440px){ .mobile-nav:has(> :nth-child(5)) > *, .sh-nav:has(> :nth-child(5)) > a{ font-size:8.5px !important; letter-spacing:-.02em; } }
@media (max-width:345px){ .mobile-nav:has(> :nth-child(5)) > *, .sh-nav:has(> :nth-child(5)) > a{ font-size:7.5px !important; } }
/* плашки «Скрин недели/месяца» в строке автора переносятся на новую строку, а не вылезают за экран */
.post .author-row, .author-row{ flex-wrap:wrap; row-gap:6px; }
.notif-text, .notif-time{ overflow-wrap:anywhere; }