/* Motion на головній (pulse / tilt / blur-reveal) */

/* ——— Booking FAB: лише м’який пульс ——— */
#booking-fab {
  position: fixed;
  isolation: isolate;
  overflow: visible;
}

#booking-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.38);
  animation: fab-pulse-out 2.2s ease-out infinite;
}

@keyframes fab-pulse-out {
  0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.4); }
  70% { box-shadow: 0 0 0 14px rgba(17, 17, 17, 0); }
  100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

html[data-theme="dark"] #booking-fab::after {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
  animation-name: fab-pulse-out-dark;
}

@keyframes fab-pulse-out-dark {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.32); }
  70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ——— Tilt cards ——— */
.js-tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s ease, box-shadow 0.25s ease;
}

.js-tilt-card.is-tilting {
  transition: box-shadow 0.2s ease;
}

.gv-macet-card.js-tilt-card:hover {
  transform: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.gv-loc-card.js-tilt-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

/*
  Blur-reveal: чистий CSS, без JS-класу.
  Текст завжди закінчує з opacity:1 (forwards), навіть якщо JS не спрацював.
*/
.js-blur-reveal {
  animation: hero-blur-reveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes hero-blur-reveal {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #booking-fab::after {
    animation: none !important;
  }

  .js-tilt-card,
  .js-tilt-card.is-tilting {
    transition: none !important;
    transform: none !important;
  }

  .js-blur-reveal {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}
