/* Presentation only. The page remains visible and usable without JavaScript. */
body.tianji-mystic {
  --mystic-motion-ease: cubic-bezier(.2, .7, .25, 1);
}

body.tianji-mystic :is(
  .home-primary, .home-secondary, .primary-button, .secondary-button,
  .primary-action, .primary-btn, .secondary-btn, .btn-primary, .btn-secondary,
  .dialog-primary-btn, .dialog-secondary-btn, .checkin-primary,
  .ai-generate-button, .ai-secondary-button, .ai-stop-button,
  .site-nav-link, .orchid-stepper button, .mode-tabs button,
  .game-tabs button, .account-auth-tabs button, .account-channel-tabs button,
  .calendar-picker-tab, .location-step, .seg-options label > span,
  .focus-options label > span, .home-text-action, .save-button
) {
  transition-property: color, background-color, border-color, box-shadow, filter, transform, translate;
  transition-duration: 180ms;
  transition-timing-function: var(--mystic-motion-ease);
}

body.tianji-mystic :is(
  .home-primary, .home-secondary, .primary-button, .secondary-button,
  .primary-action, .primary-btn, .secondary-btn, .btn-primary, .btn-secondary,
  .dialog-primary-btn, .dialog-secondary-btn, .checkin-primary,
  .ai-generate-button, .ai-secondary-button, .ai-stop-button,
  .save-button, .home-text-action
):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
  filter: brightness(.94);
  transition-duration: 80ms;
}

body.tianji-mystic :is(a, button, summary, [role="button"]):not(#homeIntro *):focus-visible {
  outline: 2px solid #d8c296;
  outline-offset: 4px;
}

/* Tilt the decorative object inside the tile, keeping text, focus and hitboxes steady. */
body.tianji-mystic [data-mystic-depth] .mystic-depth-art {
  transform: perspective(650px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
  transform-origin: 50% 55%;
  transition: transform 460ms var(--mystic-motion-ease), filter 360ms ease;
}

@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
  body.tianji-mystic.mystic-motion-active [data-mystic-depth].mystic-depth-active .mystic-depth-art {
    transform: perspective(650px) rotateX(var(--mystic-depth-x, 0deg)) rotateY(var(--mystic-depth-y, 0deg)) translateY(-3px) scale(1.035);
    transition-duration: 160ms;
    filter: drop-shadow(0 12px 17px rgb(139 104 180 / 15%));
  }
}

body.tianji-mystic [data-mystic-float] {
  animation: mystic-object-float 6.8s ease-in-out infinite;
  animation-play-state: paused;
}

body.tianji-mystic.mystic-motion-active [data-mystic-float].mystic-in-view {
  animation-play-state: running;
}

@keyframes mystic-object-float {
  0%, 100% { translate: 0 0; rotate: -.6deg; }
  50% { translate: 0 -4px; rotate: .6deg; }
}

/* Prevent base-theme hover transforms from leaving a tilted icon on touch devices. */
@media (hover: none), (pointer: coarse), (max-width: 759px) {
  body.tianji-mystic [data-mystic-depth] .mystic-depth-art {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tianji-mystic,
  body.tianji-mystic * {
    scroll-behavior: auto !important;
  }
  body.tianji-mystic *:not(#homeIntro):not(#homeIntro *) {
    animation: none !important;
    transition: none !important;
  }
  body.tianji-mystic [data-mystic-depth] .mystic-depth-art,
  body.tianji-mystic [data-mystic-float] {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
  }
}

@media print {
  body.tianji-mystic [data-mystic-depth] .mystic-depth-art,
  body.tianji-mystic [data-mystic-float] {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
  }
}