/* ============================================================
   ПАМЯТЬ СИЛЬНЕЕ ВРЕМЕНИ — движение и анимации
   Всё здесь работает только при классе .motion на <html>
   (он не ставится, если в системе включено «уменьшить движение»).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* мягкое торможение */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);     /* лёгкий «пружинный» отскок */
}

/* ---------- переходы между страницами (Chrome, Edge, Opera) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
::view-transition-group(site-header) { animation-duration: .4s; }
.header { view-transition-name: site-header; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- плавный скролл колесом (motion.js) ---------- */
html.smooth-wheel { scroll-behavior: auto; }

/* ============================================================
   ШАПКА
   ============================================================ */
.header { transition: background .4s, box-shadow .4s, border-color .4s; }
.header.scrolled {
  background: rgba(17, 14, 12, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
}
.nav-item::after { transform-origin: left center; transition: transform .45s var(--ease-out), opacity .3s; }
.nav-item:hover::after { transform: scaleX(1); opacity: .45; }
.nav-item.active::after { opacity: 1; }
.brand-mark { transition: transform .6s var(--spring), background .3s; }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); }
.brand-mark svg { transition: transform 1.2s var(--ease-out); }
.brand:hover .brand-mark svg { transform: rotate(72deg); }

.header-cta { position: relative; overflow: hidden; }
.header-cta .ico { animation: flicker 2.8s ease-in-out infinite; transform-origin: 50% 90%; }

/* навигация по странице: скользящая подложка */
.page-nav-inner { position: relative; }
.pn-ind {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--tone, var(--wine)); border-radius: 2px;
  transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s;
  opacity: 0; pointer-events: none;
}
.has-ind .page-nav a.active::after { display: none; }
.page-nav.scrolled-under { box-shadow: 0 10px 24px -16px rgba(20, 14, 8, .45); }
.page-nav { transition: box-shadow .4s; }

/* ============================================================
   КНОПКИ И ССЫЛКИ
   ============================================================ */
.btn, .pill-btn, .header-cta, .act-btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after, .pill-btn::after, .header-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover::after, .pill-btn:hover::after, .header-cta:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-out); }
.btn, .pill-btn, .act-btn, .header-cta, .chip, .f-btn, .era, .st-btn, .m-btn, .cp-item {
  transition: background .35s var(--ease-out), border-color .35s, color .3s, transform .45s var(--spring), box-shadow .45s var(--ease-out);
}
.btn:hover, .pill-btn:hover, .header-cta:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); }
.btn-dark:hover { box-shadow: 0 12px 26px -12px rgba(123, 47, 50, .7); }
.btn:active, .pill-btn:active, .act-btn:active, .chip:active, .f-btn:active, .era:active, .header-cta:active { transform: translateY(0) scale(.97); transition-duration: .12s; }

.btn > .ico:last-child, .pill-btn > .ico:last-child, .plate-link .ico, .route-btn .ico, .tool a .ico,
.category-link .ico, .rel-go .ico, .person-item .ico, .footer-cta .ico {
  transition: transform .5s var(--spring);
}
.btn:hover > .ico:last-child, .pill-btn:hover > .ico:last-child, .plate-link:hover .ico,
.route:hover .route-btn .ico, .tool:hover a .ico { transform: translateX(4px); }
.category:hover .category-link .ico, .rel-card:hover .rel-go .ico, .person-item:hover .ico { transform: translateX(5px); }
.chip:hover, .f-btn:hover, .era:hover { transform: translateY(-2px); }
.era.active, .f-btn.on { box-shadow: 0 8px 20px -10px rgba(216, 180, 114, .7); }

/* подчёркивание, которое «вытекает» слева направо */
.plate-link, .crumbs a, .footer-grid > div:not(.footer-about) a, .tool a, .route-btn, .footer-cta {
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .5s var(--ease-out), color .3s;
  padding-bottom: 1px;
}
.plate-link:hover, .crumbs a:hover, .footer-grid > div:not(.footer-about) a:hover,
.tool:hover a, .route:hover .route-btn, .footer-cta:hover { background-size: 100% 1px; }
.crumbs a { background-size: 100% 1px; background-image: linear-gradient(rgba(244, 237, 226, .25), rgba(244, 237, 226, .25)); }
.footer-grid > div:not(.footer-about) a:hover { transform: translateX(3px); }
.footer a { transition: color .3s, transform .45s var(--spring), background-size .5s var(--ease-out); }

/* ============================================================
   КАРТОЧКИ: подъём, мягкая тень и свет под курсором
   ============================================================ */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--glow, var(--tone, var(--gold))) 18%, transparent), transparent 65%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.spot:hover::before { opacity: 1; }
.spot.on-dark { --glow: var(--gold); }

.category, .tool, .route, .rel-card, .bld-card, .mem-card, .p-card, .lost-card, .theory, .craft,
.story, .lost-row, .date-card, .feast, .map-banner, .route-cta, .cta-strip, .story-form, .person-main, .myth {
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color .4s, background .4s;
}
.category:hover, .tool:hover, .route:hover, .rel-card:hover, .bld-card:hover, .mem-card:hover,
.theory:hover, .craft:hover, .feast:hover, .map-banner:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(20, 14, 8, .05), 0 28px 50px -24px rgba(20, 14, 8, .38);
}
.p-card:hover, .lost-card:hover, .story:hover, .lost-row:hover, .date-card:hover, .route.featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), 0 0 0 1px rgba(216, 180, 114, .18);
}
.story:hover, .lost-row:hover { transform: translateY(-4px); }
.myth:not(.flipped):hover { transform: translateY(-5px) rotate(-.4deg); }

/* иконки и графика в карточках оживают при наведении */
.cat-ico, .tool-ico, .rel-ico { transition: transform .7s var(--spring); }
.category:hover .cat-ico, .tool:hover .tool-ico, .rel-card:hover .rel-ico { transform: translateY(-3px) rotate(-8deg) scale(1.12); }
.cat-art, .rel-art { transition: transform 1.2s var(--ease-out), opacity .6s, stroke-dashoffset 2.2s var(--ease-out) .25s; }
.category:hover .cat-art, .rel-card:hover .rel-art { transform: translate(-10px, -8px) scale(1.06); opacity: .2; }
.mini-plate svg { transition: transform 1.4s var(--ease-out), stroke .5s, stroke-dashoffset 2.2s var(--ease-out) .2s; }
.mem-card:hover .mini-plate svg, .bld-card:hover .mini-plate svg, .story:hover .mini-plate svg, .lost-row:hover .mini-plate svg {
  transform: translate(-50%, -54%) scale(1.07); stroke: rgba(255, 246, 228, .92);
}
.plate-art { transition: transform 1.4s var(--ease-out), stroke .5s, stroke-dashoffset 2.2s var(--ease-out) .2s; }
.plate:hover .plate-art, .lost-card:hover .plate-art { transform: translate(-50%, -54%) scale(1.06); stroke: rgba(255, 246, 228, .9); }
.plate-photo, .mini-plate .plate-photo { transition: transform 1.6s var(--ease-out), filter .6s; }
.plate:hover .plate-photo, .mem-card:hover .plate-photo, .bld-card:hover .plate-photo { transform: scale(1.06); filter: saturate(1); }
.monogram { transition: transform .8s var(--spring), box-shadow .6s; }
.p-card:hover .monogram { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent); }
.map-banner-ico { transition: transform .8s var(--spring); }
.map-banner:hover .map-banner-ico { transform: translateY(-4px) scale(1.08); }

.person-item { transition: background .35s, padding .5s var(--ease-out); }
.person-item:hover { padding-left: 14px; }
.cp-item:hover { transform: translateX(4px); }
.timeline-row { transition: transform .5s var(--ease-out); }
.timeline-row:hover { transform: translateX(6px); }
.timeline-row::before { transition: background .3s, transform .5s var(--spring), box-shadow .4s; }
.timeline-row:hover::before { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(216, 180, 114, .15), 0 0 18px rgba(216, 180, 114, .6); }

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ============================================================ */
.motion .reveal.in { animation: reveal-in 1.05s var(--ease-out) var(--stagger, 0ms) backwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(8px); }
}
.reveal:nth-child(4n+2) { --stagger: 90ms; }
.reveal:nth-child(4n+3) { --stagger: 180ms; }
.reveal:nth-child(4n+4) { --stagger: 270ms; }

/* заголовки секций: строка выезжает из-под маски */
.motion .section-head.reveal.in { animation: none; }
.motion .section-head.reveal.in h2 { animation: title-in 1.1s var(--ease-out) backwards; }
.motion .section-head.reveal.in .section-sub { animation: reveal-in 1s var(--ease-out) .18s backwards; }
@keyframes title-in {
  from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -20% 0); }
}

/* линии зданий рисуются, когда карточка появляется */
.motion .reveal:not(.in) .cat-art, .motion .reveal:not(.in) .rel-art,
.motion .reveal:not(.in) .mini-plate svg, .motion .reveal:not(.in) .plate-art {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
}
.motion .reveal.in .cat-art, .motion .reveal.in .rel-art,
.motion .reveal.in .mini-plate svg, .motion .reveal.in .plate-art {
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */
/* слова заголовка поднимаются по очереди (motion.js разбивает их на span) */
.motion .hero h1:not(.split), .motion .cat-hero h1:not(.split) { opacity: 0; animation: show-late 0s 1.2s forwards; }
@keyframes show-late { to { opacity: 1; } }
h1.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
h1.split .w > span { display: inline-block; animation: word-up 1.2s var(--ease-out) backwards; animation-delay: calc(var(--wi) * 85ms + 120ms); }
@keyframes word-up { from { transform: translateY(105%) rotate(4deg); opacity: 0; } }

.motion .hero-lead, .motion .hero-search, .motion .hero-chips, .motion .hero-panel, .motion .hero-stats .stat,
.motion .crumbs, .motion .cat-lead, .motion .cat-actions, .motion .cat-stats > div, .motion .page-nav {
  animation: rise 1.1s var(--ease-out) backwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.motion .crumbs { animation-delay: 0ms; }
.motion .hero-lead, .motion .cat-lead { animation-delay: 380ms; }
.motion .hero-search, .motion .cat-actions { animation-delay: 500ms; }
.motion .hero-chips { animation-delay: 620ms; }
.motion .hero-panel { animation: panel-in 1.4s var(--ease-out) 420ms backwards; }
@keyframes panel-in { from { opacity: 0; transform: translateY(40px) rotate(1.5deg) scale(.96); filter: blur(10px); } }
.motion .cat-stats > div:nth-child(1), .motion .hero-stats .stat:nth-child(1) { animation-delay: 620ms; }
.motion .cat-stats > div:nth-child(2), .motion .hero-stats .stat:nth-child(2) { animation-delay: 720ms; }
.motion .cat-stats > div:nth-child(3), .motion .hero-stats .stat:nth-child(3) { animation-delay: 820ms; }
.motion .hero-stats .stat:nth-child(4) { animation-delay: 920ms; }
.motion .page-nav { animation-delay: 700ms; animation-name: fade; }
@keyframes fade { from { opacity: 0; } }

/* плавающее свечение на фоне */
.hero::before, .cat-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 70vmax; height: 70vmax; right: -25vmax; top: -35vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 180, 114, .14), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
.cat-hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 40%, transparent), transparent 70%); }
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 50vmax; height: 50vmax; left: -20vmax; bottom: -30vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 47, 50, .28), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vmax, 4vmax) scale(1.12); }
  100% { transform: translate(4vmax, 8vmax) scale(.95); }
}

/* силуэт города рисуется линией */
.motion .skyline path { stroke-dasharray: 1 1; animation: draw 2.6s var(--ease-io) backwards; }
.motion .skyline path:nth-child(3n+1) { animation-delay: .3s; }
.motion .skyline path:nth-child(3n+2) { animation-delay: .55s; }
.motion .skyline path:nth-child(3n) { animation-delay: .8s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.skyline { will-change: transform; }

.motion .cat-hero-art { stroke-dasharray: 1 1; animation: draw 3.2s var(--ease-io) .2s backwards; }
.cat-hero-bg { will-change: transform; }

/* карусель «Место памяти» */
.plate.swap .plate-art { stroke-dasharray: 1 1; animation: draw 2s var(--ease-io) backwards; }
.plate.swap .plate-photo.loaded { animation: kenburns 7s var(--ease-out) both; }
@keyframes kenburns { from { transform: scale(1.12); filter: blur(3px); } to { transform: scale(1); } }
.plate.swap .plate-caption > * { animation: rise .9s var(--ease-out) backwards; }
.plate.swap .plate-caption > :nth-child(2) { animation-delay: .08s; }
.plate.swap .plate-caption > :nth-child(3) { animation-delay: .16s; }
.plate.swap .plate-caption > :nth-child(4) { animation-delay: .24s; }
.panel-dots button { position: relative; overflow: hidden; transition: width .5s var(--ease-out), background .3s; }
.panel-dots button.on { width: 28px; border-radius: 99px; background: rgba(216, 180, 114, .3); }
.panel-dots button.on::after {
  content: ""; position: absolute; inset: 0; background: var(--gold); border-radius: inherit;
  transform-origin: left; animation: dot-fill 6s linear both;
}
@keyframes dot-fill { from { transform: scaleX(0); } }
.hero-panel:hover .panel-dots button.on::after { animation-play-state: paused; }
.legend-dots button { transition: width .5s var(--ease-out), background .3s; }
.legend-dots button.on { width: 24px; border-radius: 99px; }

/* ============================================================
   ОТДЕЛЬНЫЕ БЛОКИ
   ============================================================ */
/* хронология: линия заполняется по мере прокрутки */
.tl-progress {
  position: absolute; left: 5px; top: 10px; bottom: 0; width: 1px; z-index: 1;
  background: linear-gradient(to bottom, var(--gold), #E9C98C);
  box-shadow: 0 0 10px rgba(216, 180, 114, .8);
  transform-origin: top; transform: scaleY(var(--p, 0));
}
.motion .timeline-row.tl-in { animation: tl-in .9s var(--ease-out) backwards; }
@keyframes tl-in { from { opacity: 0; transform: translateX(-24px); } }
.motion .timeline-row.tl-in::before { animation: dot-pop .7s var(--spring) .15s backwards; }
@keyframes dot-pop { from { transform: scale(0); } }
.motion .timeline-row.is-hidden { animation: none; }

/* было — стало */
.compare { transition: box-shadow .5s; }
.compare:hover { box-shadow: 0 30px 60px -30px rgba(20, 14, 8, .6); }
.handle-grip { transition: transform .5s var(--spring), box-shadow .4s; }
.compare:hover .handle-grip { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(247, 242, 232, .25), 0 6px 18px rgba(0, 0, 0, .4); }
.compare.dragging .handle-grip { transform: scale(.94); }
.motion .compare.hint .compare-old, .motion .compare.hint .compare-handle { transition: clip-path 1.1s var(--ease-io), left 1.1s var(--ease-io); }
.compare-meta.swap > * { animation: rise .8s var(--ease-out) backwards; }
.compare-meta.swap > :nth-child(2) { animation-delay: .06s; }
.compare-meta.swap > :nth-child(3) { animation-delay: .12s; }

.compare.swap .plate-art { stroke-dasharray: 1 1; animation: draw 1.8s var(--ease-io) backwards; }
.compare-old .plate-art { animation-delay: .25s; }

/* легенды */
.legend { transform: translateY(16px); filter: blur(6px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s; }
.legend.active { transform: none; filter: none; }
.legend-quote { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* свеча и «искры» */
.candle-glow { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.15); } }
.ember {
  position: absolute; bottom: -10px; z-index: 0; pointer-events: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: #F2C37A; box-shadow: 0 0 8px 2px rgba(242, 170, 80, .7);
  opacity: 0; animation: ember linear infinite;
}
@keyframes ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: .9; }
  60% { transform: translate(var(--dx, 20px), -55vh) scale(.7); opacity: .6; }
  100% { transform: translate(calc(var(--dx, 20px) * -.6), -95vh) scale(.2); opacity: 0; }
}
.candle { position: relative; z-index: 1; }
.flame svg { filter: drop-shadow(0 0 18px rgba(222, 150, 67, .55)); }
.flame.pop svg { animation: pop .9s var(--spring); }
@keyframes pop { 40% { transform: scale(1.35) rotate(-4deg); filter: drop-shadow(0 0 40px rgba(255, 190, 90, .95)); } }
.cw-item { animation: light-up .8s var(--spring) backwards; }
@keyframes light-up { from { opacity: 0; transform: translateY(10px) scale(.8); } }

/* поиск, меню, окно личности */
.search-overlay:not([hidden]) { animation: fade .35s ease both; }
.search-overlay:not([hidden]) .search-box { animation: pop-in .6s var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-18px) scale(.96); filter: blur(6px); } }
.search-results .sr { animation: rise .55s var(--ease-out) backwards; }
.search-results .sr:nth-child(2) { animation-delay: .04s; }
.search-results .sr:nth-child(3) { animation-delay: .08s; }
.search-results .sr:nth-child(4) { animation-delay: .12s; }
.search-results .sr:nth-child(5) { animation-delay: .16s; }
.search-results .sr:nth-child(n+6) { animation-delay: .2s; }
.search-results .sr { transition: background .25s, padding .4s var(--ease-out); }
.search-results .sr:hover { padding-left: 24px; }

.mobile-menu:not([hidden]) { animation: menu-in .5s var(--ease-out) both; }
@keyframes menu-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mobile-menu:not([hidden]) > * { animation: rise .6s var(--ease-out) backwards; }
.mobile-menu > :nth-child(2) { animation-delay: .04s; } .mobile-menu > :nth-child(3) { animation-delay: .07s; }
.mobile-menu > :nth-child(4) { animation-delay: .1s; } .mobile-menu > :nth-child(5) { animation-delay: .13s; }
.mobile-menu > :nth-child(6) { animation-delay: .16s; } .mobile-menu > :nth-child(7) { animation-delay: .19s; }
.mobile-menu > :nth-child(n+8) { animation-delay: .22s; }

.modal:not([hidden]) { animation: fade .35s ease both; }
.modal:not([hidden]) .modal-box { animation: pop-in .65s var(--ease-out) both; }
.pm-content > * { animation: rise .8s var(--ease-out) backwards; }
.pm-content > :nth-child(2) { animation-delay: .07s; } .pm-content > :nth-child(3) { animation-delay: .14s; }
.pm-content > :nth-child(4) { animation-delay: .21s; } .pm-content > :nth-child(n+5) { animation-delay: .28s; }

/* викторина: переворот с пружиной */
.myth-inner { transition: transform .9s var(--spring); }
.myth-q button:hover { transform: translateY(-2px); }

/* разделы: активные плашки шкал */
.st-btn:hover, .m-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(20, 14, 8, .5); }
.st-btn.on, .m-btn.on { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(20, 14, 8, .6); }
.style-panel.swap > *, .month-panel > * { animation: rise .8s var(--ease-out) backwards; }
.style-panel.swap > :nth-child(2) { animation-delay: .1s; }
.month-panel > :nth-child(2) { animation-delay: .08s; } .month-panel > :nth-child(3) { animation-delay: .16s; }
.lb-seg { transform-origin: left; }
.motion .reveal.in .lb-seg { animation: grow 1.6s var(--ease-out) .35s backwards; }
@keyframes grow { from { transform: scaleX(0); } }
.motion .reveal.in .lb-seg.lb-gone { animation-delay: .9s; }
.motion .reveal.in .lb-seg.lb-back { animation-delay: 1.4s; }
.orn-cell { transition: background .2s, transform .35s var(--spring); }
.orn-cell:hover { transform: scale(1.18); }
.orn-cell.on { animation: cell-on .45s var(--spring); }
@keyframes cell-on { from { transform: scale(.4); } }
.pb-bar i { transition: width 1s var(--ease-out); }
.mk { transition: transform .45s var(--spring); }
.leaflet-marker-icon.mk-wrap { animation: pin-drop .8s var(--spring) backwards; }
@keyframes pin-drop { from { opacity: 0; translate: 0 -24px; } }

/* кнопка «наверх» */
.to-top { transform: translateY(16px) scale(.8); transition: opacity .4s, visibility .4s, transform .6s var(--spring), box-shadow .3s; }
.to-top.show { transform: none; }
.to-top:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.to-top svg { transition: transform .5s var(--spring); }
.to-top:hover svg { transform: translateY(-2px); }

/* на сенсорных экранах не поднимаем карточки — только нажатие */
@media (hover: none) {
  .category:hover, .tool:hover, .route:hover, .rel-card:hover, .bld-card:hover, .mem-card:hover,
  .theory:hover, .craft:hover, .feast:hover, .map-banner:hover, .p-card:hover, .lost-card:hover,
  .story:hover, .lost-row:hover, .date-card:hover { transform: none; }
  .spot::before { display: none; }
}

/* ---------- «уменьшить движение» в системе ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .cat-hero::before, .ember, .legend-quote, .candle-glow { animation: none !important; }
  .ember { display: none; }
}