/*
 * Bao tang so - UI V2 global motion system
 * Progressive enhancement: content is hidden only after museum-motion.js is ready.
 */

body.public-ui-v2,
body.system-v2,
body.qr-content-page {
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
  --motion-hero: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-reveal-distance: 1rem;
  --motion-stagger: 60ms;

  /* Compatibility aliases used by the existing UI V2 styles. */
  --v2-motion-fast: var(--motion-fast);
  --v2-motion-base: var(--motion-base);
  --v2-motion-slow: var(--motion-slow);
  --v2-motion-ease-out: var(--ease-out);
  --v2-reveal-distance: var(--motion-reveal-distance);
  --v2-reveal-duration: var(--motion-slow);
  --v2-reveal-stagger: var(--motion-stagger);
}

/* Content remains visible when JavaScript is unavailable. */
body[data-v2-motion="ready"] :where(
  .motion-reveal,
  .v2-reveal,
  .v2-reveal-up,
  .v2-reveal-left,
  .v2-reveal-right
):not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
  transition-delay: var(
    --motion-reveal-delay,
    calc(var(--v2-reveal-index, 0) * var(--motion-stagger))
  );
  will-change: opacity, transform;
}

body[data-v2-motion="ready"] :where(
  .motion-reveal.motion-reveal-left,
  .v2-reveal-left
):not(.is-visible) {
  transform: translate3d(calc(var(--motion-reveal-distance) * -1), 0, 0);
}

body[data-v2-motion="ready"] :where(
  .motion-reveal.motion-reveal-right,
  .v2-reveal-right
):not(.is-visible) {
  transform: translate3d(var(--motion-reveal-distance), 0, 0);
}

body[data-v2-motion="ready"] :where(
  .motion-reveal.motion-reveal-media,
  .v2-image-reveal
):not(.is-visible) {
  transform: scale(0.985);
}

body[data-v2-motion="ready"] :where(
  .motion-reveal,
  .v2-reveal,
  .v2-reveal-up,
  .v2-reveal-left,
  .v2-reveal-right
).is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

body.public-ui-v2 .v2-image-reveal {
  position: relative;
  overflow: hidden;
}

body.public-ui-v2 .v2-card-motion,
body.public-ui-v2 :where(
  .listing-card,
  .home-v2-explore-card,
  .home-v2-news-feature,
  .home-v2-research-feature,
  .detail-gallery-preview-link
) {
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

body.public-ui-v2 :where(
  .listing-card,
  .home-v2-explore-card,
  .home-v2-news-feature,
  .home-v2-research-feature,
  .detail-gallery-preview-link
) :where(img, picture img) {
  transition: transform var(--motion-slow) var(--ease-out);
}

body.public-ui-v2 .v2-button-arrow .v2-button-arrow-icon,
body.public-ui-v2 :where(.listing-card-action, .home-v2-card-action) i {
  display: inline-flex;
  transition: transform var(--motion-fast) var(--ease-out);
}

body.public-ui-v2 .v2-nav-underline {
  position: relative;
}

body.public-ui-v2 .v2-nav-underline::after {
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 1px;
  content: "";
  background: var(--v2-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--motion-fast) var(--ease-out);
}

body.public-ui-v2 .v2-nav-underline:hover::after,
body.public-ui-v2 .v2-nav-underline:focus-visible::after,
body.public-ui-v2 .v2-nav-underline[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

body.public-ui-v2 :where(.museum-button, button):active:not(:disabled) {
  transform: translate3d(0, 1px, 0);
}

body.public-ui-v2 .v2-mobile-menu:not([hidden]) {
  animation: motion-menu-scrim var(--motion-fast) var(--ease-standard) both;
}

body.public-ui-v2 .v2-mobile-menu:not([hidden]) .v2-mobile-menu-panel {
  animation: motion-menu-panel var(--motion-base) var(--ease-out) both;
}

body.public-ui-v2 .audio-guide-play {
  position: relative;
  isolation: isolate;
}

body.public-ui-v2 .audio-guide-player[data-player-state="playing"] .audio-guide-play::after {
  position: absolute;
  z-index: -1;
  inset: -0.25rem;
  border: 1px solid currentColor;
  border-radius: inherit;
  content: "";
  opacity: 0;
  animation: motion-audio-pulse 1.8s var(--ease-out) infinite;
  pointer-events: none;
}

body.public-ui-v2 .v2-hotspot-pulse {
  position: relative;
  isolation: isolate;
}

body.public-ui-v2 .v2-hotspot-pulse::before {
  position: absolute;
  z-index: -1;
  inset: -0.4rem;
  border: 1px solid var(--v2-accent);
  border-radius: 50%;
  content: "";
  opacity: 0;
  animation: motion-hotspot-pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  body.public-ui-v2 .v2-card-motion:hover,
  body.public-ui-v2 .v2-card-motion:focus-within,
  body.public-ui-v2 :where(
    .listing-card,
    .home-v2-explore-card,
    .home-v2-news-feature,
    .home-v2-research-feature,
    .detail-gallery-preview-link
  ):hover,
  body.public-ui-v2 :where(
    .listing-card,
    .home-v2-explore-card,
    .home-v2-news-feature,
    .home-v2-research-feature,
    .detail-gallery-preview-link
  ):focus-within {
    transform: translate3d(0, -2px, 0);
  }

  body.public-ui-v2 :where(
    .listing-card,
    .home-v2-explore-card,
    .home-v2-news-feature,
    .home-v2-research-feature,
    .detail-gallery-preview-link
  ):hover :where(img, picture img),
  body.public-ui-v2 :where(
    .listing-card,
    .home-v2-explore-card,
    .home-v2-news-feature,
    .home-v2-research-feature,
    .detail-gallery-preview-link
  ):focus-within :where(img, picture img) {
    transform: scale(1.025);
  }

  body.public-ui-v2 .v2-button-arrow:hover .v2-button-arrow-icon,
  body.public-ui-v2 .v2-button-arrow:focus-visible .v2-button-arrow-icon,
  body.public-ui-v2 :where(.listing-card, .home-v2-explore-card):hover :where(.listing-card-action, .home-v2-card-action) i,
  body.public-ui-v2 :where(.listing-card, .home-v2-explore-card):focus-within :where(.listing-card-action, .home-v2-card-action) i {
    transform: translate3d(0.25rem, 0, 0);
  }
}

@keyframes motion-menu-scrim {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-menu-panel {
  from { opacity: 0; transform: translate3d(1rem, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-audio-pulse {
  0% { opacity: 0.38; transform: scale(0.94); }
  75%, 100% { opacity: 0; transform: scale(1.12); }
}

@keyframes motion-hotspot-pulse {
  0% { opacity: 0.5; transform: scale(0.78); }
  75%, 100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-v2-motion] :where(
    .motion-reveal,
    .v2-reveal,
    .v2-reveal-up,
    .v2-reveal-left,
    .v2-reveal-right,
    .v2-image-reveal
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.public-ui-v2 :where(
    .v2-card-motion,
    .listing-card,
    .home-v2-explore-card,
    .home-v2-news-feature,
    .home-v2-research-feature,
    .detail-gallery-preview-link,
    .museum-button,
    button,
    img,
    .v2-button-arrow-icon
  ) {
    transition-duration: 0.01ms !important;
  }

  body.public-ui-v2 .v2-mobile-menu:not([hidden]),
  body.public-ui-v2 .v2-mobile-menu:not([hidden]) .v2-mobile-menu-panel,
  body.public-ui-v2 .audio-guide-player[data-player-state="playing"] .audio-guide-play::after,
  body.public-ui-v2 .v2-hotspot-pulse::before,
  body.public-ui-v2 .qr-scan-line,
  body.public-ui-v2 .home-v2-scroll-cue i {
    animation: none !important;
  }
}