/*
 * Motion Interaction v1
 * Purpose: restrained state feedback and result hierarchy.
 * Existing card copy, layout proportions, and draw logic remain unchanged.
 */

:root {
  --mi-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mi-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mi-press-duration: 140ms;
  --mi-ui-duration: 220ms;
  --mi-reveal-duration: 520ms;
}

body.motion-interaction-enabled .home-starscape,
body.motion-interaction-enabled .home-moon,
body.motion-interaction-enabled .home-portal {
  will-change: transform;
}

body.motion-interaction-enabled .home-starscape {
  transform: translate3d(calc(var(--mi-stage-x, 0px) * -0.3), calc(var(--mi-stage-y, 0px) * -0.25), 0);
}

body.motion-interaction-enabled .home-moon {
  transform: translate3d(calc(var(--mi-stage-x, 0px) * 0.36), calc(var(--mi-stage-y, 0px) * 0.28), 0);
}

body.motion-interaction-enabled .home-portal {
  transform: translate3d(calc(var(--mi-stage-x, 0px) * 0.7), calc(var(--mi-stage-y, 0px) * 0.55), 0);
}

body.motion-interaction-enabled button,
body.motion-interaction-enabled a.home-nav-link,
body.motion-interaction-enabled a.home-brand {
  -webkit-tap-highlight-color: transparent;
}

body.motion-interaction-enabled button:active,
body.motion-interaction-enabled a.home-nav-link:active,
body.motion-interaction-enabled a.home-brand:active {
  transform: scale(0.975);
  transition: transform var(--mi-press-duration) var(--mi-ease-out);
}

body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid.tw-eleven-grid .tw-eleven-layer .deck-card.is-picked {
  animation: none !important;
  transform:
    translate(calc(-50% + var(--tw-x, 0px)), calc(var(--tw-y, 0px) - 20px))
    rotate(var(--tw-tilt, 0deg))
    scale(1.07) !important;
}

body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid.tw-eleven-grid.has-selection .tw-eleven-layer .deck-card,
body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid.mobile-four-row-grid.has-selection .deck-card {
  top: 0 !important;
}

body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid.mobile-four-row-grid .deck-card.is-picked {
  animation: none !important;
  transform: translateY(0) rotate(var(--tilt, 0deg)) !important;
}

/* The final choice must look exactly like choices one and two. Keep the rest
   of the deck visually unchanged until the separate result handoff begins. */
body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid.is-final-reveal .deck-card:not(.is-picked):disabled {
  opacity: var(--tw-rest-opacity, 1) !important;
  filter: none !important;
}

/* Keep the final revealed face readable before the result replaces the deck. */
body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) #card-grid .selection-grid {
  opacity: 1;
  transition: opacity 150ms var(--mi-ease-out);
}

body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) #card-grid.is-result-handoff .selection-grid {
  opacity: 0;
  pointer-events: none;
}

body.motion-interaction-enabled .completed-reading-board.is-single-reading .completed-reading-art {
  animation: mi-result-art-in 500ms var(--mi-ease-out) both !important;
}

body.motion-interaction-enabled .completed-reading-board.is-single-reading .completed-reading-copy {
  animation: mi-result-copy-in 480ms var(--mi-ease-out) 90ms both !important;
}

body.motion-interaction-enabled .completed-reading-grid.is-multi .completed-reading-card {
  animation: mi-result-group-in 480ms var(--mi-ease-out) both !important;
  animation-delay: calc(var(--i, 0) * 56ms) !important;
}

body.motion-interaction-enabled .completed-reading-grid.is-multi .completed-reading-copy {
  animation: mi-result-copy-in 430ms var(--mi-ease-out) both !important;
  animation-delay: calc(80ms + var(--i, 0) * 56ms) !important;
}

@keyframes mi-result-art-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.975) rotateY(5deg);
    clip-path: inset(6% 4% 6% 4% round 8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
    clip-path: inset(0 0 0 0 round 8px);
  }
}

@keyframes mi-result-copy-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    clip-path: inset(0 0 12% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mi-result-group-in {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card {
  animation: none !important;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 340ms var(--mi-ease-out), transform 420ms var(--mi-ease-out);
}

body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card.motion-in-view {
  opacity: 1;
  transform: translateY(0);
}

body.motion-interaction-enabled[data-page="meanings"] .catalog-star-scroll,
body.motion-interaction-enabled[data-page="meanings"] .catalog-star-grid,
body.motion-interaction-enabled[data-page="meanings"] .meaning-entry-image::after {
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) .selection-grid .deck-card:not(.is-picked):hover {
    filter: brightness(1.12) saturate(1.05) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.44)) !important;
  }

  body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card.motion-in-view:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 899px) {
  body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card {
    transform: translateY(9px);
    transition-duration: 280ms, 320ms;
  }

  body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card.motion-in-view {
    transform: translateY(0);
  }

}

@media (prefers-reduced-motion: reduce) {
  body.motion-interaction-enabled[data-page="draw"]:not(.home-landing-state) #card-grid .selection-grid {
    transition-duration: 0.01ms !important;
  }

  body.motion-interaction-enabled .home-starscape,
  body.motion-interaction-enabled .home-moon,
  body.motion-interaction-enabled .home-portal,
  body.motion-interaction-enabled .completed-reading-art,
  body.motion-interaction-enabled .completed-reading-copy,
  body.motion-interaction-enabled .completed-reading-card,
  body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}