/* ============================================================
   STILIST — smooth.css
   Drop-in модуль плавности. Подключать ПОСЛЕ основного CSS:
   <link rel="stylesheet" href="css/stilist-smooth.css">
   Ничего не ломает: только добавляет анимации и переходы.
   ============================================================ */

/* ------------------------------------------------------------
   1. View Transitions между страницами (MPA cross-document).
   Chrome 126+, Edge, Safari 18.2+. Остальные — обычный переход.
   ------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}

/* Чистый кроссфейд без сдвига: translateY открывал тёмный фон браузера
   по краям («чёрные полосы» при переходе). Снимки страниц перекрываются
   полностью — щелей нет. */
::view-transition-old(root) {
  animation: vt-fade-out 0.16s ease both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.2s ease both;
}
@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Шапка не должна "мигать" при переходе — закрепляем её как
   отдельный transition-слой (если шапка sticky/fixed).
   Antigravity-агент: подставь реальный селектор хедера. */
header,
.header,
.site-header {
  view-transition-name: site-header;
}

/* ------------------------------------------------------------
   2. Scroll-reveal: появление блоков при скролле.
   JS вешает [data-reveal] автоматически. Если браузер умеет
   animation-timeline — работает чистый CSS (компоновщик, 60fps),
   иначе JS-фолбэк через IntersectionObserver добавит .is-visible.
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Каскадная задержка для карточек в сетке */
[data-reveal][data-reveal-i="1"] { transition-delay: 0.06s; }
[data-reveal][data-reveal-i="2"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-i="3"] { transition-delay: 0.18s; }
[data-reveal][data-reveal-i="4"] { transition-delay: 0.24s; }

/* Нативная scroll-driven версия — ТОЛЬКО десктоп (мышь).
   На телефонах (in-app браузеры Instagram/Telegram, iOS Safari,
   Яндекс.Браузер) view() заявлен как поддерживаемый, но глючит на
   динамически вставленных узлах: анимация застревает на from-кадре
   и элемент остаётся с opacity:0 навсегда — «товары пропадают».
   Телефоны используют JS-фолбэк (IO + .is-visible), см. stilist-smooth.js. */
@media (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes reveal-up {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ------------------------------------------------------------
   3. Микро-интеракции кнопок и карточек
   ------------------------------------------------------------ */
button,
.btn,
[class*="button"] {
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
button:active,
.btn:active,
[class*="button"]:active {
  transform: scale(0.965);
}

/* Карточки товаров: мягкий подъём при ховере.
   Antigravity-агент: подставь реальный класс карточки. */
.product-card,
.card,
[class*="product"] > a {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.product-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

/* ------------------------------------------------------------
   4. Иконка корзины: bounce при добавлении товара.
   JS добавляет .cart-bump на иконку/счётчик.
   ------------------------------------------------------------ */
.cart-bump {
  animation: cart-bump 0.45s cubic-bezier(0.28, 2.2, 0.5, 1) both;
}
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------
   5. Корзина-drawer: плавный слайд через transform (не right!).
   Затемнение с blur. JS управляет классом .is-open и .drawer-backdrop.
   Antigravity-агент: согласуй селекторы с реальной разметкой корзины.
   ------------------------------------------------------------ */
.cart-drawer,
.cart-sidebar,
#cartDrawer {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   6. Горизонтальный скролл "Хитов продаж" на мобиле: scroll-snap
   Antigravity-агент: примени к реальному контейнеру карточек,
   если на мобиле они скроллятся горизонтально.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .products-row,
  .hits-row {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .products-row > *,
  .hits-row > * {
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------
   7. Переключение табов в "Хитах": fade при смене категории.
   JS добавляет .tab-switching на контейнер на время смены.
   ------------------------------------------------------------ */
.tab-switching {
  animation: tab-fade 0.3s ease both;
}
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(8px); }
}

/* ------------------------------------------------------------
   8. Плавный якорный скролл (#hits и т.п.)
   ------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* высота sticky-шапки STILIST */
}

/* ------------------------------------------------------------
   9. Уважение к prefers-reduced-motion — выключаем всё
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   10. Кнопка «наверх»
   ------------------------------------------------------------ */
.back-to-top {
  position: fixed; left: 18px; bottom: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(26, 26, 26, 0.85); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 95;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: rgba(26, 26, 26, 1); }

/* ------------------------------------------------------------
   11. Подсказки hero-поиска на главной
   ------------------------------------------------------------ */
.hero-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
  overflow: hidden; z-index: 60;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-suggest.is-open { opacity: 1; pointer-events: auto; transform: none; }
.hero-suggest a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hero-suggest a:hover { background: #f7f5f3; }
.hero-suggest img {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0; background: #f4f1ee;
}
.hero-suggest .hs-name {
  flex: 1; min-width: 0; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-suggest .hs-brand { display: block; font-size: 10.5px; color: #b09080; text-transform: uppercase; letter-spacing: .06em; }
.hero-suggest .hs-price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.hero-suggest .hs-all {
  justify-content: center; font-size: 13px; font-weight: 600;
  color: #1a1a1a; background: #faf8f6; border-bottom: none;
}


/* ------------------------------------------------------------
   12. Появление карточек товаров — собственная анимация вставки.
   Срабатывает автоматически при добавлении карточки в DOM (и на
   первой партии, и на догрузке «Показать ещё»). Каскад катится
   по рядам через nth-child(6n+...). Заменяет scroll-reveal для
   .p-card — это убирает мерцание из-за конфликта систем.
   ------------------------------------------------------------ */
.products-grid .p-card {
  animation: card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.products-grid .p-card:nth-child(6n+2) { animation-delay: 0.05s; }
.products-grid .p-card:nth-child(6n+3) { animation-delay: 0.10s; }
.products-grid .p-card:nth-child(6n+4) { animation-delay: 0.15s; }
.products-grid .p-card:nth-child(6n+5) { animation-delay: 0.20s; }
.products-grid .p-card:nth-child(6n)   { animation-delay: 0.25s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .products-grid .p-card { animation: none; }
}


/* ------------------------------------------------------------
   13. Scroll-появление карточек (возврат «плавности» при прокрутке).
   Нативная scroll-driven анимация: карточка проявляется, когда
   входит в экран. Стиль применяется в момент вставки в DOM —
   мерцания (как у JS-reveal) нет в принципе. Анимируется ТОЛЬКО
   opacity — transform остаётся свободным для плавного hover.
   Браузеры без поддержки оставляют анимацию вставки card-in.
   ------------------------------------------------------------ */
/* Scroll-fade карточек — ТОЛЬКО десктоп. На телефонах view()-таймлайн
   глючит (см. коммент к секции 2) и карточки застревали с opacity:0 —
   товары «пропадали». Мобильные получают надёжную анимацию вставки card-in. */
@media (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    .products-grid .p-card {
      animation: card-scroll-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
      animation-delay: 0s;
      animation-duration: auto;
    }
    @keyframes card-scroll-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .products-grid .p-card { animation: none !important; }
}

/* ═══════════════ HERO-MOTION-2026-07-02 ═══════════════
   Ambient GPU-friendly motion for the hero (transform/opacity only).
   Individual card :hover is untouched (we float the CONTAINER, not cards).
   Fully disabled under prefers-reduced-motion at the bottom. */

/* 1 — ambient background glows drift & breathe */
.hero-slide--0 .hero-slide__bg::before { animation: hm-glow-a 14s ease-in-out infinite alternate; }
.hero-slide--0 .hero-slide__bg::after  { animation: hm-glow-b 18s ease-in-out infinite alternate; }
@keyframes hm-glow-a {
  0%   { transform: translate3d(0,0,0) scale(1);        opacity: .85; }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: 1; }
}
@keyframes hm-glow-b {
  0%   { transform: translate3d(0,0,0) scale(1);         opacity: .65; }
  100% { transform: translate3d(4%, -3%, 0) scale(1.12); opacity: 1; }
}

/* 2 — decorative blob breathing (keeps its centering transform) */
.hero-slide__blob { animation: hm-breathe 9s ease-in-out infinite; will-change: transform; }
@keyframes hm-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .85; }
  50%     { transform: translate(-50%,-50%) scale(1.14); opacity: 1; }
}

/* 3 — floating product showcase (container only → card hover stays intact) */
.hero-slide__visual .hero-prod-comp { animation: hm-float 6.5s ease-in-out infinite; will-change: transform; }
@keyframes hm-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* 4 — hero content entrance, staggered; replays when a slide becomes active */
.hero-slide--active .hero-slide__content > * { animation: hm-in .7s cubic-bezier(.22,1,.36,1) backwards; }
.hero-slide--active .hero-slide__content > *:nth-child(1) { animation-delay: .05s; }
.hero-slide--active .hero-slide__content > *:nth-child(2) { animation-delay: .13s; }
.hero-slide--active .hero-slide__content > *:nth-child(3) { animation-delay: .21s; }
.hero-slide--active .hero-slide__content > *:nth-child(4) { animation-delay: .29s; }
.hero-slide--active .hero-slide__content > *:nth-child(5) { animation-delay: .37s; }
@keyframes hm-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5 — slow shine sweep across the hero primary CTA */
.hero-slide__actions .btn--primary { position: relative; overflow: hidden; }
.hero-slide__actions .btn--primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: hm-shine 4s ease-in-out infinite;
}
@keyframes hm-shine {
  0%, 60%  { left: -60%; }
  90%,100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide--0 .hero-slide__bg::before,
  .hero-slide--0 .hero-slide__bg::after,
  .hero-slide__blob,
  .hero-slide__visual .hero-prod-comp,
  .hero-slide--active .hero-slide__content > *,
  .hero-slide__actions .btn--primary::after { animation: none !important; }
}
/* ═══════════════ /HERO-MOTION ═══════════════ */

/* ═══════════════ MOTION-2-2026-07-02 ═══════════════ */

/* accent word "маникюра" — slow gradient shimmer (dark slides only) */
.hero-slide--0 .hero-title__serif,
.hero-slide--1 .hero-title__serif {
  background: linear-gradient(100deg,
     rgba(255,180,215,.85) 0%, #ffe0ef 26%, #ff7ac6 50%, #ffe0ef 74%, rgba(255,180,215,.85) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hm-shimmer 5s linear infinite;
}
@keyframes hm-shimmer { to { background-position: 220% center; } }

/* category photo — gentle zoom on hover (image already clipped by overflow) */
.cat-card__photo { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.cat-card:hover .cat-card__photo { transform: scale(1.09); }

/* contact FAB — subtle attention pulse ring (keeps base shadow) */
.contact-fab__toggle { animation: hm-fab-pulse 2.6s ease-out infinite; }
@keyframes hm-fab-pulse {
  0%   { box-shadow: 0 4px 16px rgba(224,21,122,.3), 0 0 0 0 rgba(224,21,122,.42); }
  70%  { box-shadow: 0 4px 16px rgba(224,21,122,.3), 0 0 0 15px rgba(224,21,122,0); }
  100% { box-shadow: 0 4px 16px rgba(224,21,122,.3), 0 0 0 0 rgba(224,21,122,0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide--0 .hero-title__serif,
  .hero-slide--1 .hero-title__serif { animation: none !important; }
  .contact-fab__toggle { animation: none !important; }
  .cat-card:hover .cat-card__photo { transform: none; }
}
/* ═══════════════ /MOTION-2 ═══════════════ */

/* ═══════════════ MOTION-BOOST-2026-07-02 ═══════════════
   Stronger, more obvious motion (per user feedback: "didn't notice"). */

/* Per-card floating — uses the `translate` property so it COMPOSES with the
   hover `transform: translateY(-6px)` (they don't overwrite each other). */
.hero-slide__visual .hero-prod-comp { animation: none; }
.hero-prod-comp__card { animation: hm-cardfloat 4.4s ease-in-out infinite; will-change: translate; }
.hero-prod-comp__card:nth-child(1) { animation-delay: 0s; }
.hero-prod-comp__card:nth-child(2) { animation-delay: -1.5s; }
.hero-prod-comp__card:nth-child(3) { animation-delay: -2.9s; }
@keyframes hm-cardfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -17px; } }

/* Bigger blob breathing */
@keyframes hm-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(.92); opacity: .65; }
  50%     { transform: translate(-50%,-50%) scale(1.22); opacity: 1; }
}

/* Announcement bar — continuously sliding plum sheen (always on screen) */
.announcement-bar {
  background: linear-gradient(90deg, #170512 0%, #33081F 34%, #4a0e33 50%, #33081F 66%, #170512 100%);
  background-size: 220% 100%;
  animation: hm-annbg 7s linear infinite;
}
@keyframes hm-annbg { from { background-position: 110% 0; } to { background-position: -110% 0; } }

/* Brighter, faster accent shimmer */
.hero-slide--0 .hero-title__serif,
.hero-slide--1 .hero-title__serif { animation-duration: 3.4s; }

/* Bolder content entrance */
@keyframes hm-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Stronger, more visible float for the whole showcase glow too */
@keyframes hm-glow-a { 0% { transform: translate3d(0,0,0) scale(1); opacity:.8; } 100% { transform: translate3d(-5%,3%,0) scale(1.14); opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-prod-comp__card { animation: none !important; }
  .announcement-bar { animation: none !important; background: var(--graphite); }
}
/* ═══════════════ /MOTION-BOOST ═══════════════ */

/* ═══════════════ MOTION-NATURAL-2026-07-02 ═══════════════
   Slower, gentler, organic. Overrides the earlier boost + extends motion
   beyond the hero to buttons / trust / footer / tabs / links. */

/* Hero cards float slowly and OUT OF SYNC (each its own duration) */
.hero-prod-comp__card { animation-name: hm-cardfloat; animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.37,0,.63,1); }
.hero-prod-comp__card:nth-child(1) { animation-duration: 7s;   animation-delay: 0s; }
.hero-prod-comp__card:nth-child(2) { animation-duration: 8.6s; animation-delay: -2.4s; }
.hero-prod-comp__card:nth-child(3) { animation-duration: 7.7s; animation-delay: -4.6s; }
@keyframes hm-cardfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }

/* Gentler, slower blob + glows */
.hero-slide__blob { animation-duration: 13s; }
@keyframes hm-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(.96); opacity: .72; }
  50%     { transform: translate(-50%,-50%) scale(1.13); opacity: 1; }
}
.hero-slide--0 .hero-slide__bg::before { animation-duration: 22s; }
.hero-slide--0 .hero-slide__bg::after  { animation-duration: 27s; }

/* Announcement sheen — very slow & subtle */
.announcement-bar {
  background: linear-gradient(90deg, #191919 0%, #23151f 42%, #2c1526 50%, #23151f 58%, #191919 100%);
  background-size: 200% 100%; animation-duration: 17s;
}

/* Softer accent shimmer + entrance */
.hero-slide--0 .hero-title__serif,
.hero-slide--1 .hero-title__serif { animation-duration: 6.5s; }
.hero-slide--active .hero-slide__content > * {
  animation-duration: .95s; animation-timing-function: cubic-bezier(.16,1,.3,1);
}
@keyframes hm-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Calmer chat pulse */
.contact-fab__toggle { animation-duration: 3.8s; }

/* ── Motion beyond the hero (hover — the rest of the page comes alive) ── */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left .75s cubic-bezier(.22,1,.36,1);
}
.btn--primary:hover::before { left: 130%; }

.trust__item { transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.trust__item:hover { transform: translateY(-5px); }
.trust__item svg { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.trust__item:hover svg { transform: scale(1.14) rotate(-5deg); }

.footer__soc { transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease, color .25s ease, background .25s ease; }
.footer__soc:hover { transform: translateY(-3px) scale(1.1); }

.tab:not(.tab--active):hover { border-color: var(--brand); color: var(--brand); }

.section-head__link svg { transition: transform .3s ease; }
.section-head__link:hover svg { transform: translateX(4px); }



@media (prefers-reduced-motion: reduce) {
  .btn--primary::before,
  .trust__item, .trust__item svg, .footer__soc, .section-head__link svg { transition: none; }
  .trust__item:hover, .trust__item:hover svg, .footer__soc:hover,
  .section-head__link:hover svg { transform: none; }
  .announcement-bar, .footer__bottom { animation: none !important; }
  .footer__bottom { background: none; }
}
/* ═══════════════ /MOTION-NATURAL ═══════════════ */

/* FOOTER-PAY-WRAP-FIX 2026-07-03 */
.footer__pay { flex-wrap: wrap; }

/* HEADER-FIT-FIX 2026-07-03 — kill 32px mobile h-scroll (logo+icons didnt fit) */
@media (max-width: 430px) {
  .header__logo-img { height: 13px; }
  .header__right { gap: 9px; }
  .header__inner { gap: 8px; }
}
@media (max-width: 360px) {
  .header__right { gap: 7px; }
}

/* ══════════ MOTION+ fly-in stronger (2026-07-03) ══════════ */
[data-reveal] { transform: translateY(30px) scale(.985); }
[data-reveal].is-visible { transform: none; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }



/* TOP-BAR-SHEEN-OFF 2026-07-03 — remove announcement bar shimmer, plain dark */
.announcement-bar { background: var(--graphite); background-size: auto; animation: none; }

/* ═══ MOBILE-PERF 2026-07-11 ═══
   Телефоны (особенно Telegram-webview на iPhone) лагали от постоянных
   фоновых анимаций: 9 бесконечных циклов одновременно. На узких экранах
   глушим весь эмбиент — остаются только анимации-отклики на действия. */
@media (max-width: 820px) {
  .hero-slide--0 .hero-slide__bg::before,
  .hero-slide--0 .hero-slide__bg::after,
  .hero-slide__blob,
  .hero-slide__visual .hero-prod-comp,
  .hero-prod-comp__card,
  .hero-slide__actions .btn--primary::after,
  .contact-fab__toggle,
  .announcement-bar,
  .footer__bottom { animation: none !important; }
  .footer__bottom { background: none; }
  .hero-slide--0 .hero-title__serif,
  .hero-slide--1 .hero-title__serif { animation: none !important; }
}