.reading-presentation { min-width: 0; width: 100%; }
.reading-ritual { position: relative; isolation: isolate; margin: 8px 0 32px; padding: 8px 0 0; }
/* No frame: a pool of warm light on the page that the deck lies in. */
.reading-ritual::before { content: ''; position: absolute; z-index: -1; inset: -40px -16px; background: radial-gradient(ellipse 62% 58% at 50% 54%, color-mix(in oklch, var(--wine-700) 85%, transparent) 0%, transparent 72%); pointer-events: none; }
.reading-ritual[hidden], [data-reading-content][hidden] { display: none; }
.ritual-heading { text-align: center; min-height: 64px; padding-inline: 8px; }
.ritual-heading h3 { font: italic 400 clamp(24px, 4.2vw, 36px)/1.2 var(--font-italic); margin: 0; color: var(--bone); animation: ritual-line 600ms var(--ease-out) both; }
.ritual-caption { margin: 10px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--bone-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes ritual-line { from { opacity: 0; transform: translateY(6px); } }
.ritual-table { position: relative; height: clamp(380px, 62vw, 500px); perspective: 1200px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
.ritual-orbit { position: absolute; width: min(86%, 350px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid oklch(0.94 0.012 80 / .12); border-radius: 50%; }
.ritual-orbit::before, .ritual-orbit::after { content: ''; position: absolute; inset: 14px; border: 1px dashed oklch(0.94 0.012 80 / .1); border-radius: 50%; }
.ritual-orbit::after { inset: 40px; border-style: solid; }
.ritual-back, .ritual-pick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; opacity: 0; }
.ritual-back { aspect-ratio: 5/8; border-radius: 5px; border: 1px solid oklch(0.94 0.012 80 / .2); box-shadow: 0 5px 12px oklch(0.06 0.04 18 / .5); background: var(--wine-800); }
.ritual-pick { z-index: 60; }
.ritual-pick .card { width: 100%; }
.ritual-pick .card-inner { transition: transform 700ms cubic-bezier(0.3, 0.9, 0.2, 1); }
.ritual-glow { position: absolute; left: 50%; top: 50%; width: min(120%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 22%, transparent), transparent 62%); opacity: 0; pointer-events: none; }
/* Layers under, around and over a dealt card. They only ever move through transform and opacity. */
.ritual-shadow, .ritual-halo, .ritual-ring, .ritual-glint { position: absolute; pointer-events: none; opacity: 0; }
.ritual-shadow { inset: 8% -6% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, oklch(0.04 0.03 18 / .75), transparent 68%); filter: blur(7px); }
.ritual-halo { inset: -5px; z-index: -1; border-radius: 9px; box-shadow: 0 0 26px 3px color-mix(in oklch, var(--accent) 55%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--accent) 55%, transparent); }
.ritual-ring { left: 50%; top: 50%; width: 170%; aspect-ratio: 1; z-index: -1; border-radius: 50%; border: 1px solid var(--accent); }
.ritual-glint { inset: 0; overflow: hidden; border-radius: 5px; }
.ritual-glint i { position: absolute; inset: -10% auto -10% 0; width: 45%; background: linear-gradient(100deg, transparent, oklch(0.98 0.02 80 / .5), transparent); mix-blend-mode: screen; }
.ritual-pick .card-face { border-radius: 5px; }
.ritual-pick .card-name { font-size: clamp(8px, 1.4vw, 13px); padding-inline: 3px; }
/* Positions are named in the reading itself; on the table a number would cover the card name. */
.ritual-position { display: none; }
.ritual-footer { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; }
/* Five quiet marks for the five moments: shuffle, cut, fan, deal, open. */
.ritual-steps { display: flex; gap: 8px; }
.ritual-steps i { width: 18px; height: 2px; border-radius: 2px; background: color-mix(in oklch, var(--bone) 18%, transparent); transition: background-color 500ms var(--ease-out), width 500ms var(--ease-out); }
.ritual-steps i.is-on { background: var(--accent); }
.ritual-steps i.is-on:last-of-type { width: 28px; }
.ritual-skip { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 4px; border: 0; background: none; font-size: 13px; color: var(--bone-faint); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: color var(--dur-ui), text-decoration-color var(--dur-ui); }
.ritual-skip:active { color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .ritual-skip:hover { color: var(--bone); text-decoration-color: currentColor; } }
/* Before the first viewing: a closed deck under «Твой расклад готов», a warm breathing light and one clear button. */
.ritual-ready { display: none; justify-content: center; margin-top: 4px; }
.reading-ritual[data-state="ready"] .ritual-ready { display: flex; }
.reading-ritual[data-state="ready"] .ritual-footer { display: none; }
.reading-ritual[data-state="ready"] .ritual-table { cursor: pointer; }
.reading-ritual[data-state="ready"] .ritual-glow { animation: ritual-breathe 3.6s ease-in-out infinite alternate; }
.reading-ritual[data-state="ready"] .ritual-orbit { opacity: .55; }
@keyframes ritual-breathe { from { opacity: .3; } to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .reading-ritual[data-state="ready"] .ritual-glow { animation: none; opacity: .5; } }
.reading-replay { display: block; margin: 22px 0; font-size: 14px; color: var(--bone-dim); }
[data-reading-content]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .ritual-pick .card-inner { transition: none; } .ritual-glow, .ritual-orbit { display: none; } .ritual-heading h3 { animation: none; } }
@media print { .reading-ritual, .reading-replay { display: none !important; } [data-reading-content][hidden] { display: block; } }