/* Tarot reading route styles. */
/* Tarot landing atmosphere */
.tarot-cosmic-base {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(247, 229, 176, 0.13), transparent 11%),
    radial-gradient(ellipse at 54% 55%, rgba(90, 134, 151, 0.2), transparent 34%),
    radial-gradient(ellipse at 38% 38%, rgba(71, 55, 120, 0.26), transparent 42%),
    radial-gradient(ellipse at 72% 26%, rgba(212, 175, 95, 0.12), transparent 34%),
    linear-gradient(180deg, #01020a 0%, #04040f 42%, #000207 100%);
}
.tarot-cosmic-depth {
  background:
    repeating-radial-gradient(
      ellipse at 50% 52%,
      rgba(255, 255, 255, 0.055) 0 1px,
      transparent 1px 46px
    ),
    conic-gradient(
      from 214deg at 50% 52%,
      transparent 0deg,
      rgba(215, 168, 79, 0.06) 62deg,
      transparent 122deg,
      rgba(114, 153, 169, 0.065) 184deg,
      transparent 250deg,
      rgba(248, 241, 224, 0.05) 318deg,
      transparent 360deg
    );
  opacity: 0.34;
  transform-origin: 50% 52%;
}
.tarot-nebula-cloud {
  border-radius: 999px;
  opacity: 0.54;
  transform-origin: 50% 50%;
}
.tarot-nebula-cloud-a {
  left: 15%;
  top: 20%;
  width: min(72vw, 920px);
  height: min(40vw, 520px);
  background:
    radial-gradient(ellipse at 45% 50%, rgba(92, 114, 150, 0.36), transparent 62%),
    radial-gradient(ellipse at 70% 54%, rgba(210, 163, 78, 0.2), transparent 58%);
  animation: tarot-nebula-drift-a 34s ease-in-out infinite alternate;
}
.tarot-nebula-cloud-b {
  right: -14%;
  top: 8%;
  width: min(62vw, 820px);
  height: min(50vw, 640px);
  background:
    radial-gradient(ellipse at 46% 54%, rgba(70, 46, 126, 0.38), transparent 64%),
    radial-gradient(ellipse at 40% 38%, rgba(86, 146, 154, 0.2), transparent 58%);
  opacity: 0.58;
  animation: tarot-nebula-drift-b 42s ease-in-out infinite alternate;
}
.tarot-nebula-cloud-c {
  left: -18%;
  bottom: -8%;
  width: min(72vw, 980px);
  height: min(44vw, 560px);
  background:
    radial-gradient(ellipse at 54% 52%, rgba(24, 82, 91, 0.32), transparent 60%),
    radial-gradient(ellipse at 36% 50%, rgba(225, 183, 95, 0.14), transparent 56%);
  opacity: 0.52;
  animation: tarot-nebula-drift-c 46s ease-in-out infinite alternate;
}
.tarot-light-bloom {
  border-radius: 999px;
  mix-blend-mode: screen;
  pointer-events: none;
}
.tarot-light-bloom-core {
  left: 50%;
  top: 48%;
  width: min(25vw, 330px);
  height: min(25vw, 330px);
  background: radial-gradient(circle, rgba(248, 241, 224, 0.15), rgba(215, 168, 79, 0.065) 34%, transparent 66%);
  transform: translate(-50%, -50%);
  animation: tarot-light-bloom-core 9s ease-in-out infinite;
}
.tarot-light-bloom-rim {
  left: 50%;
  top: 52%;
  width: min(62vw, 780px);
  height: min(40vw, 500px);
  border: 1px solid rgba(248, 241, 224, 0.055);
  background:
    radial-gradient(ellipse, transparent 0 48%, rgba(248, 241, 224, 0.065) 60%, transparent 72%);
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: tarot-light-bloom-rim 18s ease-in-out infinite alternate;
}
.tarot-star-map {
  background: rgba(246, 244, 236, 0.72);
  transform-origin: 50vw 50vh;
}
.tarot-star-map-far {
  opacity: 0.76;
}
.tarot-star-map-dust {
  opacity: 0.9;
}
.tarot-floating-stars {
  animation: tarot-floating-field-drift 96s linear infinite;
  transform-origin: 50% 52%;
}
.tarot-floating-star {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.42) 38%, transparent 72%);
  animation: tarot-floating-star-drift var(--tarot-star-duration, 12s) ease-in-out infinite;
  animation-delay: var(--tarot-star-delay, 0s);
}
.tarot-floating-star-white {
  background: radial-gradient(circle, rgba(246, 244, 236, 0.95), rgba(246, 244, 236, 0.38) 38%, transparent 72%);
}
.tarot-floating-star-gold {
  background: radial-gradient(circle, rgba(232, 202, 117, 0.95), rgba(232, 202, 117, 0.36) 38%, transparent 72%);
}
.tarot-floating-star-blue {
  background: radial-gradient(circle, rgba(200, 235, 255, 0.95), rgba(200, 235, 255, 0.34) 38%, transparent 72%);
}
.tarot-cosmic-vignette {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.34) 74%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.5));
}
html[data-tarot-step="ritual"] .tarot-atmosphere {
  display: none;
}
.tarot-hero-intro,
.tarot-widget-wrap {
  transition:
    opacity 0.34s ease,
    transform 0.34s ease,
    margin 0.34s ease;
}
html[data-tarot-step="ritual"] .tarot-hero-intro,
html[data-tarot-step="choose"] .tarot-hero-intro,
html[data-tarot-step="reveal"] .tarot-hero-intro,
html[data-tarot-step="reading"] .tarot-hero-intro {
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
}
html[data-tarot-step="ritual"] .tarot-widget-wrap,
html[data-tarot-step="choose"] .tarot-widget-wrap,
html[data-tarot-step="reveal"] .tarot-widget-wrap,
html[data-tarot-step="reading"] .tarot-widget-wrap {
  margin-top: 0 !important;
}
html[data-tarot-step] .tsqd-open-btn-container {
  display: none !important;
}
.tarot-magic-border,
.tarot-magic-button,
.tarot-magic-empty-slot {
  position: relative;
  border-color: rgba(232, 211, 156, 0.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(105, 82, 38, 0.32),
    inset 0 0 28px rgba(248, 241, 224, 0.045),
    0 0 22px rgba(215, 168, 79, 0.08);
}
.tarot-magic-button {
  overflow: hidden;
  border-color: rgba(231, 215, 170, 0.88) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(180deg, #fbf5e4 0%, #e7dcc4 56%, #c9b27a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(121, 93, 41, 0.36),
    inset 0 11px 22px rgba(255, 255, 255, 0.38),
    0 18px 46px rgba(248, 241, 224, 0.16);
}
.tarot-magic-border::before,
.tarot-magic-button::before,
.tarot-magic-empty-slot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      135deg,
      rgba(248, 241, 224, 0.86),
      rgba(215, 168, 79, 0.42) 22%,
      rgba(80, 60, 29, 0.58) 50%,
      rgba(229, 193, 88, 0.68) 78%,
      rgba(248, 241, 224, 0.72)
    );
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.tarot-magic-border::after,
.tarot-magic-button::after,
.tarot-magic-empty-slot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) left top / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) left top / 1px 34px no-repeat,
    linear-gradient(270deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) right top / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) right top / 1px 34px no-repeat,
    linear-gradient(90deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) left bottom / 34px 1px no-repeat,
    linear-gradient(0deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) left bottom / 1px 34px no-repeat,
    linear-gradient(270deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) right bottom / 34px 1px no-repeat,
    linear-gradient(0deg, rgba(229, 193, 88, 0.75), rgba(229, 193, 88, 0.08) 72%, transparent) right bottom / 1px 34px no-repeat;
  opacity: 0.76;
  pointer-events: none;
}
.tarot-glass-panel {
  isolation: isolate;
  contain: paint;
  border-color: rgba(232, 211, 156, 0.52) !important;
  background: rgba(0, 0, 0, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 38px rgba(248, 241, 224, 0.045),
    0 24px 80px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(215, 168, 79, 0.055);
}
.tarot-glass-panel-focus {
  border-color: rgba(248, 241, 224, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 0 42px rgba(248, 241, 224, 0.06),
    0 24px 90px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(215, 168, 79, 0.1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tarot-glass-panel {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px) saturate(126%);
    backdrop-filter: blur(10px) saturate(126%);
  }
}
.tarot-magic-empty-slot {
  border-style: solid !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(215, 168, 79, 0.1), transparent 52%),
    rgba(255, 248, 234, 0.025);
}
.tarot-ritual-star {
  animation: tarot-ritual-star-pulse 3.8s ease-in-out infinite;
  animation-delay: var(--ritual-star-delay, 0s);
}
.tarot-ritual-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ray-length, 360px);
  height: var(--ray-width, 1px);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, calc(var(--ray-opacity, 0.42) * 0.42)) 18%,
    rgba(255, 255, 255, var(--ray-opacity, 0.42)) 84%,
    rgba(255, 255, 255, 0.12)
  );
  opacity: 0;
  transform-origin: 0 50%;
  animation: tarot-ray-collapse 2s cubic-bezier(0.16, 0.78, 0.18, 1) both;
  animation-delay: var(--ray-delay, 0s);
}
.tarot-ritual-ray::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(-50%);
}
.tarot-ritual-core {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f8f1e0;
  box-shadow:
    0 0 18px rgba(248, 241, 224, 0.86),
    0 0 62px rgba(215, 168, 79, 0.5),
    0 0 112px rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.18);
  animation: tarot-core-condense 2s cubic-bezier(0.16, 0.78, 0.18, 1) both;
}
.tarot-ritual-pile::before {
  content: "";
  position: absolute;
  inset: -42px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(248, 241, 224, 0.3), rgba(215, 168, 79, 0.16) 26%, transparent 68%);
  opacity: 0.8;
  transform: scale(0.88);
  animation: tarot-pile-aura 0.78s ease-out both;
}
.tarot-card-sphere-stage {
  perspective: 1180px;
  perspective-origin: 50% 48%;
}
.tarot-card-sphere {
  transform-style: preserve-3d;
  animation: tarot-card-sphere-spin 1.8s linear infinite;
  will-change: transform;
}
.tarot-card-sphere::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vw, 720px);
  height: min(58vw, 720px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(248, 241, 224, 0.1), rgba(248, 241, 224, 0.035) 30%, transparent 68%);
  transform: translate(-50%, -50%);
}
.tarot-sphere-card {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: var(--sphere-opacity, 0.72);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    rotateY(var(--sphere-yaw, 0deg))
    rotateX(var(--sphere-pitch, 0deg))
    translateZ(var(--sphere-radius, 330px))
    rotateZ(var(--sphere-tilt, 0deg))
    scale(var(--sphere-scale, 1));
  backface-visibility: hidden;
}
.tarot-morph-card {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.tarot-morph-card-expand {
  animation: tarot-pile-to-sphere 0.82s cubic-bezier(0.16, 0.84, 0.18, 1) both;
  animation-delay: var(--morph-delay, 0s);
}
.tarot-morph-card-collapse {
  animation: tarot-sphere-to-stack 0.82s cubic-bezier(0.2, 0.78, 0.18, 1) both;
  animation-delay: var(--morph-delay, 0s);
}
.tarot-stack-card {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: tarot-stack-card-settle 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--stack-delay, 0s);
  backface-visibility: hidden;
}
.tarot-stack-card-final {
  animation: tarot-stack-card-final-in 0.28s ease-out both;
  animation-delay: 0s;
}
.tarot-deck-field {
  animation: tarot-deck-field-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.tarot-deck-card {
  opacity: 1;
  padding: 0;
  border: 1px solid rgba(226, 201, 132, 0.55);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 36%, rgba(172, 130, 52, 0.1) 76%, transparent),
    url("/brand/tomako-tarot-card-back.webp") center / cover,
    #f8f1e0;
  box-shadow: inset 0 0 0 1px rgba(87, 62, 22, 0.16);
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--deck-x, 0), var(--deck-y, 0), 0)
    rotate(var(--deck-rotate, 0deg))
    scale(1);
  transform-origin: 50% 50%;
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backface-visibility: hidden;
}
.tarot-deck-card:not(:disabled):hover {
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--deck-x, 0), var(--deck-y, 0), 0)
    rotate(var(--deck-rotate, 0deg))
    translate3d(0, -18px, 0)
    scale(1.04);
}
.tarot-deck-card-selected {
  border-color: rgba(248, 241, 224, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(87, 62, 22, 0.18),
    0 6px 10px rgba(38, 24, 8, 0.36),
    0 28px 58px rgba(0, 0, 0, 0.56),
    0 12px 24px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(248, 241, 224, 0.22);
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--deck-x, 0), var(--deck-y, 0), 0)
    rotate(var(--deck-rotate, 0deg))
    translate3d(0, var(--deck-selected-lift, -46px), 0)
    scale(1.08);
}
.tarot-deck-card-collect-selected {
  z-index: 300 !important;
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--deck-collect-x, 0), var(--deck-collect-y, -48px), 0)
    rotate(0deg)
    scale(1.08);
  transition:
    transform 720ms cubic-bezier(0.2, 0.82, 0.18, 1),
    box-shadow 720ms ease,
    border-color 720ms ease;
}
.tarot-deck-card-collect-dismiss {
  pointer-events: none;
  opacity: 0;
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(var(--deck-x, 0), calc(var(--deck-y, 0) + 440px), 0)
    rotate(var(--deck-rotate, 0deg))
    scale(0.9);
  transition:
    transform 760ms cubic-bezier(0.32, 0, 0.55, 1),
    opacity 520ms ease 120ms;
}
@keyframes tarot-deck-field-enter {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 8px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes tarot-nebula-drift-a {
  0% {
    opacity: 0.52;
    transform: translate3d(-2.5%, 1%, 0) rotate(-5deg) scale(0.98);
  }
  100% {
    opacity: 0.76;
    transform: translate3d(2.5%, -2%, 0) rotate(4deg) scale(1.05);
  }
}
@keyframes tarot-nebula-drift-b {
  0% {
    opacity: 0.44;
    transform: translate3d(2%, -1.5%, 0) rotate(4deg) scale(1);
  }
  100% {
    opacity: 0.66;
    transform: translate3d(-2.5%, 2.5%, 0) rotate(-4deg) scale(1.08);
  }
}
@keyframes tarot-nebula-drift-c {
  0% {
    opacity: 0.38;
    transform: translate3d(-1.5%, 2%, 0) rotate(-3deg) scale(1.02);
  }
  100% {
    opacity: 0.6;
    transform: translate3d(2%, -1%, 0) rotate(3deg) scale(1.08);
  }
}
@keyframes tarot-light-bloom-core {
  0%,
  100% {
    opacity: 0.56;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@keyframes tarot-light-bloom-rim {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.98);
  }
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(8deg) scale(1.04);
  }
}
@keyframes tarot-floating-field-drift {
  from {
    transform: translate3d(-1%, -0.5%, 0) rotate(-6deg);
  }
  to {
    transform: translate3d(1%, 0.5%, 0) rotate(354deg);
  }
}
@keyframes tarot-floating-star-drift {
  0%,
  100% {
    opacity: calc(var(--tarot-star-opacity, 0.42) * 0.54);
    transform: translate3d(0, 0, 0) scale(0.82);
  }
  46% {
    opacity: calc(var(--tarot-star-opacity, 0.42) * 1.34);
    transform: translate3d(var(--tarot-star-drift-x, 0), var(--tarot-star-drift-y, 0), 0) scale(1.18);
  }
  72% {
    opacity: calc(var(--tarot-star-opacity, 0.42) * 0.86);
    transform: translate3d(var(--tarot-star-drift-x-late, 0), var(--tarot-star-drift-y-late, 0), 0) scale(0.96);
  }
}
@keyframes tarot-ritual-star-pulse {
  0%,
  100% {
    transform: scale(0.86);
    opacity: calc(var(--ritual-star-opacity, 0.42) * 0.7);
  }
  48% {
    transform: scale(1.22);
    opacity: calc(var(--ritual-star-opacity, 0.42) * 1.32);
  }
}
@keyframes tarot-core-condense {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
  }
  45% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.24);
  }
  88% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.72);
  }
}
@keyframes tarot-pile-aura {
  0% {
    opacity: 0.95;
    transform: scale(0.18);
  }
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
}
@keyframes tarot-ray-collapse {
  0% {
    opacity: calc(var(--ray-opacity, 0.42) * 1.5);
    filter: blur(0.2px);
    transform: rotate(var(--ray-angle, 0deg)) translateX(var(--ray-start, 520px)) scaleX(1.18);
  }
  30% {
    opacity: calc(var(--ray-opacity, 0.42) * 1.4);
    filter: blur(0.45px);
    transform: rotate(var(--ray-angle, 0deg)) translateX(var(--ray-near, 360px)) scaleX(0.94);
  }
  76% {
    opacity: calc(var(--ray-opacity, 0.42) * 1.12);
    filter: blur(0.8px);
    transform: rotate(var(--ray-angle, 0deg)) translateX(var(--ray-mid, 82px)) scaleX(0.62);
  }
  100% {
    opacity: 0;
    filter: blur(1.4px);
    transform: rotate(var(--ray-angle, 0deg)) translateX(4px) scaleX(0.02);
  }
}
@keyframes tarot-card-sphere-spin {
  0% {
    transform: rotateX(-7deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-7deg) rotateY(-360deg) rotateZ(0deg);
  }
}
@keyframes tarot-sphere-card-expand {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(18px)
      rotateZ(var(--sphere-tilt, 0deg))
      scale(0.22);
  }
  72% {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
  100% {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
}
@keyframes tarot-pile-to-sphere {
  0% {
    opacity: 0.2;
    transform:
      translate(-50%, -50%)
      rotateZ(calc(var(--sphere-tilt, 0deg) * 0.08))
      scale(0.08);
  }
  18% {
    opacity: 0.62;
    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotateZ(calc(var(--sphere-tilt, 0deg) * 0.16))
      scale(0.24);
  }
  68% {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(calc(var(--sphere-radius, 330px) * 0.82))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(calc(var(--sphere-scale, 1) * 0.9));
  }
  100% {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
}
@keyframes tarot-sphere-to-stack {
  0% {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
  44% {
    opacity: 0.72;
    transform:
      translate(-50%, -50%)
      rotateY(calc(var(--sphere-yaw, 0deg) * 0.28))
      rotateX(calc(var(--sphere-pitch, 0deg) * 0.24))
      translateZ(calc(var(--sphere-radius, 330px) * 0.28))
      rotateZ(var(--stack-rotate, 0deg))
      scale(0.64);
  }
  100% {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
}
@keyframes tarot-stack-card-settle {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(0deg)
      scale(0.24);
  }
  72% {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1.04);
  }
  100% {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
}
@keyframes tarot-stack-card-final-in {
  0% {
    opacity: 0.52;
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
  100% {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-cosmic-depth,
  .tarot-nebula-cloud,
  .tarot-light-bloom,
  .tarot-star-map-far,
  .tarot-star-map-dust,
  .tarot-floating-stars,
  .tarot-floating-star,
  .tarot-ritual-star,
  .tarot-ritual-ray,
  .tarot-ritual-core,
  .tarot-ritual-pile::before,
  .tarot-card-sphere,
  .tarot-sphere-card,
  .tarot-morph-card,
  .tarot-stack-card,
  .tarot-deck-field {
    animation: none !important;
  }
  .tarot-ritual-ray {
    display: none;
  }
  .tarot-sphere-card {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
  .tarot-morph-card-expand {
    opacity: var(--sphere-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      rotateY(var(--sphere-yaw, 0deg))
      rotateX(var(--sphere-pitch, 0deg))
      translateZ(var(--sphere-radius, 330px))
      rotateZ(var(--sphere-tilt, 0deg))
      scale(var(--sphere-scale, 1));
  }
  .tarot-morph-card-collapse {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
  .tarot-stack-card {
    opacity: var(--stack-opacity, 0.72);
    transform:
      translate(-50%, -50%)
      translate(var(--stack-x, 0), var(--stack-y, 0))
      rotate(var(--stack-rotate, 0deg))
      scale(1);
  }
}