/* ========================================================
   BEAUTYLINK — LIGHTWEIGHT MOTION
   ========================================================
   Легкі client-side анімації тільки через opacity/transform, щоб рух залишався
   GPU-friendly і не конфліктував з layout. Motion-токени беруться з css/tokens.css.
   ======================================================== */

html.motion-ready {
  scroll-behavior: smooth;
}

.motion-ready [data-motion] {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
  transition:
    opacity var(--motion-mid) var(--motion-ease),
    transform var(--motion-mid) var(--motion-ease);
  transition-delay: calc(var(--motion-order, 0) * 52ms);
  will-change: opacity, transform;
}

.motion-ready [data-motion="fade"] {
  transform: translate3d(0, 0, 0);
}

.motion-ready [data-motion="pop"] {
  transform: translate3d(0, 12px, 0) scale(.96);
}

.motion-ready [data-motion="slide-left"] {
  transform: translate3d(18px, 0, 0);
}

.motion-ready [data-motion="slide-right"] {
  transform: translate3d(-18px, 0, 0);
}

.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

.motion-ready .site-main > .container {
  animation: bl-page-enter var(--motion-slow) var(--motion-ease) both;
}

@keyframes bl-page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-ready .btn,
.motion-ready button,
.motion-ready .ph-floating-book,
.motion-ready .db-tab {
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.motion-ready .btn:active,
.motion-ready button:active,
.motion-ready .ph-floating-book:active,
.motion-ready .db-tab:active {
  transform: translate3d(0, 1px, 0) scale(.985);
}

.motion-ready .card,
.motion-ready .soft-card,
.motion-ready .ob-card,
.motion-ready .ph-svc,
.motion-ready .svc-card,
.motion-ready .stat-card,
.motion-ready .today-tl-card {
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .motion-ready .card:hover,
  .motion-ready .soft-card:hover,
  .motion-ready .ob-card:hover,
  .motion-ready .ph-svc:hover,
  .motion-ready .svc-card:hover,
  .motion-ready .stat-card:hover,
  .motion-ready .today-tl-card:hover {
    transform: translate3d(0, -2px, 0);
  }
}

.motion-ready .flash {
  animation: bl-toast-in 360ms var(--motion-ease) both;
}

@keyframes bl-toast-in {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* ── ② PULSE RING на .ph-floating-book ───────────────── */
.motion-ready .ph-floating-book::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-circle);
  border: 2.5px solid rgb(var(--primary-rgb) / .50);
  animation: fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.motion-ready .ph-floating-book::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-circle);
  border: 2.5px solid rgb(var(--primary-rgb) / .28);
  animation: fab-pulse 2.4s ease-out .75s infinite;
  pointer-events: none;
}

@keyframes fab-pulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.6);  opacity: 0;  }
  100% { transform: scale(1.6);  opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready,
  html.motion-reduced {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fix: the mobile bottom navigation is inside #dashboard-root.
   A transform/animation on that parent makes position: fixed behave as if it
   is attached to the parent instead of the viewport on mobile browsers. */
html.motion-ready body.dashboard-page .site-main > #dashboard-root {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

html.motion-ready body.dashboard-page .mob-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
}

/* Robust bottom-bar pin: keep dashboard mobile nav attached to the viewport,
   not to the animated dashboard content container. */
body.dashboard-page .site-main > .mob-nav,
html.motion-ready body.dashboard-page .site-main > .mob-nav {
  position: fixed !important;
  top: auto !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483000 !important;
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
}

@media (max-width: 640px) {
  body.dashboard-page .site-main > .mob-nav {
    display: flex !important;
  }
}

body.dashboard-page.dashboard-overlay-open .site-main > .mob-nav,
html.motion-ready body.dashboard-page.dashboard-overlay-open .site-main > .mob-nav,
html.settings-panel-open body.dashboard-page .site-main > .mob-nav,
html.motion-ready.settings-panel-open body.dashboard-page .site-main > .mob-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Same viewport pin for the public profile bottom nav. */
body.profile-page .site-main > .ph-bottom-nav,
html.motion-ready body.profile-page .site-main > .ph-bottom-nav {
  position: fixed !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483000 !important;
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
}

body.profile-page.booking-modal-open .site-main > .ph-bottom-nav,
html.motion-ready body.profile-page.booking-modal-open .site-main > .ph-bottom-nav,
body.profile-page.booking-modal-open .site-main > .ph-floating-book,
html.motion-ready body.profile-page.booking-modal-open .site-main > .ph-floating-book {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}