/* ==========================================================================
   Spot — анимации
   Только transform и opacity, чтобы не вызывать перерисовку макета.
   Всё отключается при prefers-reduced-motion: reduce (в конце файла).
   ========================================================================== */

/* ---------- появление при скролле ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal--left  { transform: translate3d(-26px, 0, 0); }
.reveal--right { transform: translate3d(26px, 0, 0); }
.reveal--scale { transform: scale(.955); }

/* каскад по карточкам задаётся в JS через --reveal-delay, шаг 60 мс */

/* ---------- первый экран ---------- */
@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__title,
.hero__sub,
.hero__actions,
.hero__stats {
  animation: hero-in 900ms var(--ease-out) backwards;
}
.hero__title   { animation-delay: 80ms; }
.hero__sub     { animation-delay: 190ms; }
.hero__actions { animation-delay: 300ms; }
.hero__stats   { animation-delay: 410ms; }

/* ---------- пар над горячим ---------- */
.steam {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 76px;
  height: 46%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  filter: blur(5px);
  mix-blend-mode: screen;
}

.card:hover .steam,
.modal__media .steam { opacity: .85; }

.steam path {
  fill: none;
  stroke: rgba(255, 255, 255, .82);
  stroke-width: 7;
  stroke-linecap: round;
  transform-origin: bottom center;
}

@keyframes steam-rise {
  0%   { opacity: 0;   transform: translateY(14%) scaleY(.72); }
  22%  { opacity: .95; }
  70%  { opacity: .5; }
  100% { opacity: 0;   transform: translateY(-58%) scaleY(1.35); }
}

.steam path:nth-child(1) { animation: steam-rise 4.2s ease-in-out infinite; }
.steam path:nth-child(2) { animation: steam-rise 4.2s ease-in-out infinite 1.4s; }
.steam path:nth-child(3) { animation: steam-rise 4.2s ease-in-out infinite 2.8s; }

/* ---------- модалка ---------- */
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes modal-panel-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965); }
  to   { opacity: 1; transform: none; }
}

.modal__backdrop { animation: modal-backdrop-in var(--dur-base) var(--ease) backwards; }
.modal__panel    { animation: modal-panel-in 380ms var(--ease-out) backwards; }

.modal.is-closing .modal__backdrop,
.modal.is-closing .modal__panel {
  animation-direction: reverse;
  animation-duration: var(--dur-base);
}

@media (max-width: 768px) {
  @keyframes modal-panel-in {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- перестроение сетки при фильтрах ---------- */
.menu-grid .card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease),
              opacity var(--dur-base) var(--ease);
}

.card.is-hiding {
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
}

@keyframes card-in {
  from { opacity: 0; transform: scale(.94) translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.card.is-entering { animation: card-in 320ms var(--ease-out) backwards; }

/* ---------- смена языка ---------- */
@keyframes lang-fade {
  0%   { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 1; }
}

.lang-fading [data-i18n],
.lang-fading .card__name,
.lang-fading .card__desc,
.lang-fading .menu-group__title,
.lang-fading .hero__title,
.lang-fading .hero__sub {
  animation: lang-fade 420ms var(--ease);
}

/* ---------- ripple на кнопках ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .32;
  pointer-events: none;
  animation: ripple-out 560ms var(--ease-out) forwards;
}

@keyframes ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- плавающая кнопка WhatsApp ---------- */
@keyframes fab-pulse {
  0%, 88%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 211, 102, .5); }
  92%           { box-shadow: var(--shadow-lg), 0 0 0 14px rgba(37, 211, 102, 0); }
}

.fab { animation: fab-pulse 5s ease-out infinite; }

/* ---------- индикатор «открыто» ---------- */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .55; }
}

.open-now[data-open='true'] .open-now__dot { animation: dot-pulse 2.4s ease-in-out infinite; }

/* ---------- skeleton при загрузке ---------- */
@keyframes skeleton-slide {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton {
  border-radius: var(--r-lg);
  background: var(--skeleton);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s linear infinite;
}

.skeleton-card {
  height: 340px;
  border-radius: var(--r-lg);
  background: var(--skeleton);
  background-size: 200% 100%;
  animation: skeleton-slide 1.4s linear infinite;
}

/* ---------- смена темы ---------- */
.site-header, .card, .branch, .review, .modal__panel, .booking,
.rating-banner, .chip, .btn, .icon-btn, .search input, .field input, .field select {
  transition: background-color var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

/* ---------- стрелка «вниз» на первом экране ---------- */
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(7px); opacity: 1; }
}

.scroll-hint { animation: nudge 2.2s ease-in-out infinite; }

/* ==========================================================================
   Уважаем настройку «уменьшить движение»
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .steam, .scroll-hint { display: none; }

  .hero__bg { transform: none !important; }

  .card:hover { transform: none; }
  .card:hover .card__img { transform: none; }
  .branch:hover { transform: none; }
  .gallery__item:hover img { transform: none; }
  .fab:hover { transform: none; }
}