/* Stable hit areas keep the raised card under the pointer without flicker. */
.tarot-card-slot {
  position: absolute;
  left: 33%;
  top: 23%;
  width: 35%;
  transform: translateX(var(--shift)) rotate(var(--turn));
  transform-origin: 50% 80%;
}
.tarot-card-slot.real-card-ace {
  top: 12%;
  border: 0;
  background: none;
  box-shadow: none;
}
.tarot-card-slot > .real-tarot-card {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  transform: none;
  transform-origin: 50% 65%;
  backface-visibility: hidden;
  transition: transform .8s cubic-bezier(.22,.61,.36,1),
    box-shadow .65s ease, border-color .5s ease;
}
.real-card-ace > .real-tarot-card {
  border-color: #e4c68b;
  box-shadow: 0 18px 45px #000a, 0 0 25px #c8a35a16;
}
.real-tarot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg,#ffe3a41c,transparent 42%,#ffe3a407);
  box-shadow: inset 0 0 0 1px #ffe0a67a;
  transition: opacity .45s ease;
}

/* The response is to a person's hover or focus; the page never bobs on its own. */
body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
  .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
  .dialog-close,.lightbox-bottom button,.artwork-sources a,.feedback-image-button) {
  transform: none;
  transition: transform .46s cubic-bezier(.22,.61,.36,1),
    box-shadow .46s ease, border-color .4s ease, background-color .4s ease,
    color .4s ease;
}
body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
  .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
  .dialog-close,.lightbox-bottom button,.artwork-sources a):focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px #0006, 0 0 20px #d9b87924;
}
@media (hover:hover) and (pointer:fine) {
  .tarot-card-slot.is-card-returning { z-index: 8; }
  .tarot-card-slot.is-card-active,
  .real-deck:not(.smooth-stack) .tarot-card-slot:hover { z-index: 12; }
  .tarot-card-slot:hover > .real-tarot-card {
    transform: translateY(-28px) rotate(calc(var(--turn) * -.3)) scale(1.018);
    transition-duration: .65s, .55s, .45s;
    border-color: #f1d69d;
    box-shadow: 0 31px 43px #000b, 0 0 26px #d3ab5424;
  }
  .tarot-card-slot:hover > .real-tarot-card::after { opacity: 1; }
  body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
    .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
    .dialog-close,.lightbox-bottom button,.artwork-sources a):hover {
    transform: translateY(-4px) scale(1.01);
    border-color: #e8cc94;
    box-shadow: 0 14px 28px #0007, 0 0 22px #d9b87926;
  }
  body .feedback-image-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px #0006, 0 0 20px #d9b87919;
  }
}
body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
  .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
  .dialog-close,.lightbox-bottom button,.artwork-sources a,.feedback-image-button):active {
  transform: translateY(-1px) scale(.997);
  transition-duration: .16s;
}
@media (max-width:760px) {
  .tarot-card-slot { top: 21%; }
  .tarot-card-slot.real-card-ace { top: 10%; }
}
@media (prefers-reduced-motion:reduce) {
  /* Short, smaller, user-triggered feedback; automatic/page motion stays off. */
  .tarot-card-slot > .real-tarot-card {
    transition: transform .32s cubic-bezier(.22,.61,.36,1),
      box-shadow .32s ease, border-color .28s ease !important;
  }
  .real-tarot-card::after { transition: opacity .28s ease !important; }
  body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
    .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
    .dialog-close,.lightbox-bottom button,.artwork-sources a,.feedback-image-button) {
    transition: transform .24s cubic-bezier(.22,.61,.36,1),
      box-shadow .28s ease, border-color .24s ease,
      background-color .24s ease, color .24s ease !important;
  }
  body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
    .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
    .dialog-close,.lightbox-bottom button,.artwork-sources a):focus-visible {
    transform: translateY(-2px);
  }
  @media (hover:hover) and (pointer:fine) {
    .tarot-card-slot:hover > .real-tarot-card { transform: translateY(-16px); }
    body :is(.button,.header-cta,.text-link,.feedback-shortcut,.footer-link,
      .back-top,.menu-toggle,.carousel-buttons button,.dot,.lightbox-close,
      .dialog-close,.lightbox-bottom button,.artwork-sources a):hover {
      transform: translateY(-2px);
    }
  }
}