/* Iridescent crystal floats independently of the background image. */
.tarot-orb{position:absolute;left:73.8%;top:41.5%;width:6.4%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;z-index:5;cursor:pointer;animation:orb-float 7.5s ease-in-out infinite;isolation:isolate;touch-action:manipulation}
.orb-shell{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block;background:radial-gradient(ellipse at 24% 22%,#f5ffffef 0%,#c6f8ff9e 10%,transparent 31%),radial-gradient(ellipse at 75% 75%,#ffe7bcbb,transparent 43%),radial-gradient(ellipse at 28% 71%,#87e0f4ba,transparent 52%),radial-gradient(ellipse at 77% 28%,#c799f9d9,transparent 62%),#aaa6f366;box-shadow:inset 0 0 2px 1px #f4faffc9,inset -5px -7px 11px #a274df66,inset 5px 4px 12px #dcffff66,0 0 12px #c7b9ff36;perspective:220px}
.orb-nebula{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse at 70% 28%,#8d6edd66,transparent 65%),radial-gradient(ellipse at 30% 75%,#e9d2f977,transparent 65%);transition:background .8s,opacity 1.4s}
.orb-universe{position:absolute;inset:0;transform-style:preserve-3d;animation:orb-cosmos 17s linear infinite;animation-play-state:paused;opacity:0;transition:opacity 1.5s}
.orb-constellation{position:absolute;inset:0;transform:translateZ(9px);color:#f5f3ff}
.orb-constellation.back{transform:rotateY(100deg) translateZ(8px);opacity:.65}
.orb-constellation svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb-constellation polyline{fill:none;stroke:#e0dcffb0;stroke-width:.6}
.orb-constellation circle{fill:#fffff6;filter:drop-shadow(0 0 1px #fff)}
.orb-constellation i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff8e4;box-shadow:0 0 3px #fff6dd,0 0 6px #d9baff99;animation:orb-sparkle 3.2s var(--spark-delay) ease-in-out infinite;animation-play-state:paused}
.orb-reflection{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 24% 14% at 28% 20%,#fff8,transparent 100%),radial-gradient(ellipse 13% 21% at 83% 73%,#fff4,transparent 100%);box-shadow:inset 0 0 3px #fff9}
.tarot-orb:is(:hover,:focus-visible,.orb-awake) .orb-universe{opacity:1;animation-play-state:running}
.tarot-orb:is(:hover,:focus-visible,.orb-awake) .orb-constellation i{animation-play-state:running}
.tarot-orb:is(:hover,:focus-visible,.orb-awake) .orb-nebula{opacity:.55}
@keyframes orb-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9%) rotate(2deg)}}
@keyframes orb-cosmos{from{transform:rotateZ(-13deg) rotateY(0deg) rotateX(14deg)}to{transform:rotateZ(-13deg) rotateY(360deg) rotateX(14deg)}}
@keyframes orb-sparkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.tarot-orb,.orb-universe,.orb-constellation i{animation:none!important}.orb-universe{transition:none}}

/* The card never leaves the crystal's circular clipping boundary. */
.orb-tarot-card{position:absolute;left:28%;top:17%;width:44%;height:66%;border-radius:7%;border:1px solid #e8d9a7a8;background:radial-gradient(circle at 50% 45%,#b39cde55,transparent 55%),repeating-linear-gradient(45deg,#293340 0 4px,#353749 4px 5px);box-shadow:0 0 7px #d6c8ff77;opacity:0;transform:rotateY(90deg) scale(.7);backface-visibility:visible;overflow:hidden;transition:opacity .7s,transform .9s}
.orb-tarot-card img{width:100%;height:100%;display:block;object-fit:contain;opacity:0;transition:opacity .6s}
.orb-drawing .orb-tarot-card{opacity:1;animation:orb-card-turn 2.8s cubic-bezier(.15,.6,.3,1) both}
.orb-revealed .orb-tarot-card{opacity:1;transform:rotateY(0deg) scale(1)}
.orb-revealed .orb-tarot-card img{opacity:1}
.orb-drawing .orb-universe,.orb-revealed .orb-universe{opacity:.65;animation-play-state:running}
.orb-reading-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes orb-card-turn{0%{transform:rotateY(0deg) rotateZ(-8deg) scale(.6)}45%{transform:rotateY(510deg) rotateZ(5deg) scale(.9)}80%{transform:rotateY(700deg) rotateZ(-2deg) scale(1)}100%{transform:rotateY(720deg) rotateZ(0deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.orb-tarot-card,.orb-tarot-card img{transition:none}.orb-drawing .orb-tarot-card{animation:none}}

/* After a reading, the crystal returns to its quiet constellation interior. */
.orb-universe{opacity:.35}
.orb-tarot-card{transition:opacity .65s ease,transform .9s ease}

.orb-constellation circle{transform-box:fill-box;transform-origin:center;animation:orb-bright-star 3.7s ease-in-out infinite}
.orb-constellation circle:nth-of-type(3n+1){filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #e3ccff);animation-duration:4.9s}
.orb-constellation circle:nth-of-type(2n){animation-delay:-1.7s}
@keyframes orb-bright-star{0%,65%,100%{opacity:.5;transform:scale(.85)}76%{opacity:1;transform:scale(1.9)}88%{opacity:.8;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.orb-constellation circle{animation:none}}