/* five-card-tarot.html CSS [J] mode -> select/ask transition animations. */

/* ==== J. MODE->SELECT/ASK TRANSITION — animations after mode choice ==== */
.reading-stage {
  transition: opacity 0.5s, transform 0.5s;
}

.reading-stage.mode-picked {
  pointer-events: none;
}

.reading-stage.mode-picked .mode-panel-mobile .mode-card {
  display: flex;
}

.reading-stage.mode-picked.hiding .mode-panel-mobile {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.reading-stage.mode-picked.left-opt .mode-panel-mobile .mode-card[data-mode="general"] {
  transform: translateY(calc(50% + 1vh)) scale(1.2);
  z-index: 2;
}

.reading-stage.mode-picked.left-opt .mode-panel-mobile .mode-card.b {
  transform: translateY(calc(-50% - 1vh));
  z-index: 1;
}

.reading-stage.mode-picked.right-opt .mode-panel-mobile .mode-card[data-mode="general"] {
  transform: translateY(calc(50% + 1vh));
  z-index: 1;
}

.reading-stage.mode-picked.right-opt .mode-panel-mobile .mode-card.b {
  transform: translateY(calc(-50% - 1vh)) scale(1.2);
  z-index: 2;
}

.reading-stage.mode-picked.left-opt .mode-panel-desktop .mode-card:not(.b) {
  transform: rotate(0deg) scale(1.1);
  z-index: 2;
}

.reading-stage.mode-picked.left-opt .mode-panel-desktop .mode-card:not(.b)::before,
.reading-stage.mode-picked.left-opt .mode-panel-desktop .mode-card:not(.b):hover::before {
  background: linear-gradient(90deg, #c79bfe, #99fdfe) border-box;
}

.reading-stage.mode-picked.left-opt .mode-panel-desktop .mode-card:not(.b) .mode-shadow {
  opacity: 1;
}

.reading-stage.mode-picked.left-opt .mode-panel-desktop .mode-card.b {
  opacity: 0;
  transform: rotate(15deg) scale(0.5);
  z-index: 1;
}

.reading-stage.mode-picked.right-opt .mode-panel-desktop .mode-card.b {
  transform: rotate(0deg) scale(1.1);
  z-index: 2;
}

.reading-stage.mode-picked.right-opt .mode-panel-desktop .mode-card.b::before,
.reading-stage.mode-picked.right-opt .mode-panel-desktop .mode-card.b:hover::before {
  background: linear-gradient(90deg, #c79bfe, #99fdfe) border-box;
}

.reading-stage.mode-picked.right-opt .mode-panel-desktop .mode-card.b .mode-shadow {
  opacity: 1;
}

.reading-stage.mode-picked.right-opt .mode-panel-desktop .mode-card:not(.b) {
  opacity: 0;
  transform: rotate(-15deg) scale(0.5);
  z-index: 1;
}

.reading-stage.mode-picked.hiding.left-opt-desktop .mode-panel-desktop .mode-card:not(.b) {
  opacity: 0.6;
  transform: rotate(0deg) scale(0.5);
  transform-origin: center top;
  z-index: 2;
}

.reading-stage.mode-picked.hiding.left-opt-desktop .mode-panel-desktop .mode-card.b {
  opacity: 0;
  transform: rotate(15deg) scale(0.85);
}

.reading-stage.mode-picked.hiding.right-opt-desktop .mode-panel-desktop .mode-card.b {
  opacity: 0;
  transform: rotate(0deg) scale(0.5);
  transform-origin: center top;
  z-index: 2;
}

.reading-stage.mode-picked.hiding.right-opt-desktop .mode-panel-desktop .mode-card:not(.b) {
  opacity: 0;
  transform: rotate(-15deg) scale(0.5);
}

.reading-stage.mode-done {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}