/* One two-second gesture; no flashing loop and no added layout space. */
.hand-outline{fill:#e8d9f0;stroke:#9068a7;animation:hand-touch 2s ease-in-out both}
.tap-ring{animation:tap-once 2s ease-out both}
.hand-caption{animation:hand-caption-in 2s ease-out both}
@keyframes hand-touch{0%{transform:translateY(5px);opacity:.35}15%,48%,82%,100%{transform:translateY(0);opacity:1}32%,65%{transform:translateY(-4px);opacity:1}}
@keyframes tap-once{0%,18%,49%{transform:scale(.5);opacity:0}29%,60%{transform:scale(.8);opacity:.85}45%,78%,100%{transform:scale(1.5);opacity:0}}
@keyframes hand-caption-in{0%{opacity:0;transform:translateY(3px)}15%,100%{opacity:1;transform:none}}
/* Pearl foil uses the result card's lilac, blush and cool reflected light. */
.is-drawing .draw-card .back-face{background:radial-gradient(ellipse at 90% 8%,#e2b6ce80,transparent 58%),radial-gradient(ellipse at 6% 70%,#aa8ccb63,transparent 63%),linear-gradient(132deg,#f8f4fb 0%,#d7c6e6 25%,#bfa7d3 43%,#e8d9e8 63%,#f8edf3 78%,#cdbadd 100%);border-color:#fef9ff;box-shadow:inset 1px 1px 1px #fff,inset -1px -2px 2px #88669c4d,0 3px 0 -1px #bea6ce,0 7px 11px -7px #6e47726b}
.is-drawing .draw-card .back-face:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(117deg,transparent 8%,#fff4f53b 22%,#e1f0ed88 30%,#fffef0a6 35%,#ffffffd6 39%,#e6bfd650 45%,transparent 59%,#eef7ff40 80%);opacity:.68}
.is-drawing .draw-card .back-face:after{inset:6px;border-color:#fff9;box-shadow:inset 0 0 0 1px #b59bc328}
.is-drawing .tarot-back-art{opacity:.94}
.is-drawing .back-face small{color:#8d6a9f;text-shadow:0 1px 0 #fff5}
/* The two fixed draws are being revealed; these rings are a visual transition. */
.is-flow .loading{padding-top:16px}
.is-flow .loading.page-in{animation:none}
.is-flow .loading .flow-steps{margin-bottom:30px}
.calculation-art{position:relative;width:min(300px,100%);aspect-ratio:1;margin:30px auto 26px;isolation:isolate}
.time-halo{position:absolute;inset:-12%;background:radial-gradient(ellipse at 35% 43%,#c9b1e05c,transparent 55%),radial-gradient(ellipse at 75% 60%,#edc3d45c,transparent 60%);animation:time-gather 3.2s ease-in-out both}
.time-orbit{position:absolute;inset:0;transform-origin:center;animation:time-rewind 3.2s cubic-bezier(.22,.58,.28,1) both}
.time-orbit svg{width:100%;height:100%;fill:none;stroke:#a48ab9;stroke-width:.8}
.time-outer .orbit-point{fill:#9872b0;stroke:#fff;stroke-width:1.5}
.time-inner{animation-name:time-rewind-inner}
.time-inner svg{stroke:#c3afd0;stroke-width:.65}
.time-inner .orbit-arc{stroke:#fefaff;stroke-width:2.5}
.time-lens{position:absolute;inset:24%;border-radius:50%;background:linear-gradient(130deg,#fff9,#e4d3ee80 48%,#f6dfe970);border:1px solid #fffc;box-shadow:inset 0 0 0 5px #ffffff20,0 10px 25px -16px #79598d6b;animation:lens-reveal 3.2s ease-in-out both}
.time-lens img{position:absolute;width:132%;height:132%;max-width:none;left:-16%;top:-16%;object-fit:contain}
.time-label{position:absolute;bottom:0;left:0;right:0;font-size:10px;letter-spacing:4px;color:#a18aac}
.is-flow .loading h1{font-size:25px;font-weight:600;color:#6c4d7e;margin:0}
.calculation-phases{position:relative;min-height:28px;margin:15px auto 0;font-size:12px;line-height:1.8;color:#a08aaa;letter-spacing:1px}
.calculation-phases span{position:absolute;inset:0;opacity:0;animation:phase-reveal 1s both}
.calculation-phases span:nth-child(2){animation-delay:1s}
.calculation-phases span:nth-child(3){animation:phase-last 1s 2s both}
@keyframes time-rewind{from{transform:rotate(85deg) scale(.93);opacity:.65}20%{opacity:1}to{transform:rotate(-240deg) scale(1);opacity:1}}
@keyframes time-rewind-inner{from{transform:rotate(30deg) scale(.85);opacity:.65}20%{opacity:1}to{transform:rotate(-480deg) scale(1);opacity:1}}
@keyframes time-gather{0%{transform:scale(1.15);opacity:.15}65%{opacity:1}100%{transform:scale(.92);opacity:.8}}
@keyframes lens-reveal{0%{transform:scale(.7) rotate(18deg);opacity:.75}70%{opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes phase-reveal{0%{opacity:0;transform:translateY(4px)}20%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
@keyframes phase-last{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:350px){.calculation-art{width:252px;margin:20px auto}.is-flow .loading .flow-steps{margin-bottom:20px}.is-flow .loading h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){.hand-outline,.tap-ring,.hand-caption,.time-halo,.time-orbit,.time-lens,.calculation-phases span{animation:none}.tap-ring{opacity:0}.calculation-phases span{display:none}.calculation-phases span:last-child{display:block;opacity:1}}