/* Doctor Palmy Clinic — subtle public motion system
   Loaded only on public secondary pages through base_public.html.
   Keep motion calm: reveal on scroll + tiny visual drift. */

body.public-ui-v2 {
  --ui-motion-fast: 460ms;
  --ui-motion-normal: 720ms;
  --ui-motion-slow: 8s;
  --ui-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Reveal is enabled only after JS marks the document as motion-ready.
   This keeps all content visible if JS is unavailable. */
body.public-ui-v2.ui-motion-ready [data-ui-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition-property: opacity, translate;
  transition-duration: var(--ui-motion-normal), var(--ui-motion-normal);
  transition-timing-function: var(--ui-motion-ease), var(--ui-motion-ease);
  transition-delay: var(--ui-reveal-delay, 0ms);
  will-change: opacity, translate;
}

body.public-ui-v2.ui-motion-ready [data-ui-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* Smaller motion for compact rows so the page does not feel jumpy. */
body.public-ui-v2.ui-motion-ready [data-ui-reveal="soft"] {
  translate: 0 7px;
  transition-duration: 600ms, 600ms;
}
body.public-ui-v2.ui-motion-ready [data-ui-reveal="soft"].is-visible {
  translate: 0 0;
}

/* Ambient drift is reserved for visuals, never body copy or buttons. */
body.public-ui-v2 [data-ui-float] {
  animation: uiAmbientFloat var(--ui-float-duration, 8s) ease-in-out var(--ui-float-delay, 0s) infinite alternate;
  transform-origin: 50% 50%;
}

body.public-ui-v2 [data-ui-float="reverse"] {
  animation-name: uiAmbientFloatReverse;
}

@keyframes uiAmbientFloat {
  from { transform: translate3d(0, -1px, 0); }
  to   { transform: translate3d(0, 3px, 0); }
}

@keyframes uiAmbientFloatReverse {
  from { transform: translate3d(0, 2px, 0); }
  to   { transform: translate3d(0, -2px, 0); }
}

/* A slightly softer page-load settle for the navigation. */
body.public-ui-v2.ui-motion-ready .public-header {
  animation: uiHeaderSettle 620ms var(--ui-motion-ease) both;
}
@keyframes uiHeaderSettle {
  from { opacity: .72; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Preserve the calm interaction language from V2 while making the lift feel smoother. */
body.public-ui-v2 .service-card-rich,
body.public-ui-v2 .product-feed-card,
body.public-ui-v2 .article-card,
body.public-ui-v2 .article-related-card,
body.public-ui-v2 .review-entry,
body.public-ui-v2 .review-proof-card,
body.public-ui-v2 .case-gallery-item,
body.public-ui-v2 .faq-item,
body.public-ui-v2 .job-card,
body.public-ui-v2 .contact-page-redesign__meta article {
  transition: transform 320ms var(--ui-motion-ease), box-shadow 320ms ease, border-color 320ms ease;
}

@media (hover:hover) and (pointer:fine) {
  body.public-ui-v2 .service-card-rich:hover,
  body.public-ui-v2 .article-related-card:hover,
  body.public-ui-v2 .review-proof-card:hover,
  body.public-ui-v2 .faq-item:hover,
  body.public-ui-v2 .job-card:hover,
  body.public-ui-v2 .contact-page-redesign__meta article:hover {
    transform: translateY(-3px);
  }
}

/* Mobile keeps the same responsive layout; motion is simply shorter and smaller. */
@media (max-width: 760px) {
  body.public-ui-v2 {
    --ui-motion-normal: 560ms;
    --ui-motion-slow: 9s;
  }
  body.public-ui-v2.ui-motion-ready [data-ui-reveal] { translate: 0 8px; }
  body.public-ui-v2.ui-motion-ready [data-ui-reveal].is-visible { translate: 0 0; }
}

/* Accessibility: users who request less motion get a completely static site. */
@media (prefers-reduced-motion: reduce) {
  body.public-ui-v2.ui-motion-ready [data-ui-reveal],
  body.public-ui-v2.ui-motion-ready [data-ui-reveal].is-visible {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
  body.public-ui-v2 [data-ui-float],
  body.public-ui-v2.ui-motion-ready .public-header {
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
  body.public-ui-v2 *,
  body.public-ui-v2 *::before,
  body.public-ui-v2 *::after {
    scroll-behavior: auto !important;
  }
}