/* Визуальные эффекты оформления сайта (только внешний вид — логика страниц не затрагивается).
   Подключается из base.html; JS-часть — site-fx.js. Все анимации отключаются при prefers-reduced-motion. */

/* 3.1 Плавное появление страницы. Только opacity: transform/filter на <main> создали бы новый
   containing block для fixed-потомков (модалки, оверлеи) и сломали бы их. */
@keyframes site-fx-page-in { from { opacity: 0; } to { opacity: 1; } }
body > main { animation: site-fx-page-in 0.45s var(--ease-smooth, ease-out) both; }

/* 3.1 Бегущий индикатор под пунктами навигации: полоска растёт от центра при наведении и
   остаётся под пунктом текущей страницы (aria-current ставит site-fx.js). */
.site-nav__links a:not(.btn):not(.site-nav__profile-link) { position: relative; }
.site-nav__links a:not(.btn):not(.site-nav__profile-link)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-violet-bright), var(--accent-gold-bright));
    box-shadow: 0 0 8px var(--glow-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease-smooth, ease-out);
}
.site-nav__links a:not(.btn):not(.site-nav__profile-link):hover::after,
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__links a[aria-current="page"] { color: var(--accent-gold-bright); }

/* 3.4 Полоска-таймер под тостом: сжимается за время показа (--flash-ms задаёт flash.js). */
.flash { position: relative; overflow: hidden; }
.flash::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 100%;
    background: currentColor;
    opacity: 0.55;
    transform-origin: left center;
    animation: site-fx-flash-timer var(--flash-ms, 2500ms) linear forwards;
}
.flash-error::after { background: var(--accent-blood-bright); }
.flash-success::after { background: var(--accent-gold-bright); }
.flash-info::after { background: var(--accent-violet-bright); }
@keyframes site-fx-flash-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 3.2 Подпрыгивание счётчика при изменении значения. */
.fx-bump { animation: site-fx-bump 0.5s var(--ease-pop, ease-out); }
@keyframes site-fx-bump { 40% { transform: scale(1.25); color: var(--accent-gold-bright); text-shadow: 0 0 12px var(--glow-gold); } }

/* 3.3 Наклон карточки за курсором + пятно света (переменные --fx-rx/ry/mx/my ставит site-fx.js). */
.fx-tilt, .travel-card, .recipe-card {
    transform: perspective(700px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.2s ease-out;
    position: relative;
}
.fx-tilt.is-tilting::before, .travel-card.is-tilting::before, .recipe-card.is-tilting::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(255, 255, 255, 0.14), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
    body > main, .flash::after, .fx-bump { animation: none; }
    .site-nav__links a::after { transition: none; }
    .fx-tilt, .travel-card, .recipe-card { transform: none; transition: none; }
}