/* What Dreams (Sanje) and Signs (Znamenja), Slovenian and English, share with Cards in the reading itself.
   Linked from sanje.html, en/dreams.html, signal.html, en/signal.html, after the pillar workspace file.
   1. The crystal-ball loading: the rules are copied word for word from tarot-reading.css (Cards), so it
      looks and moves the same on all three pillars. tests/validation/reading-art.test.ts fails if the two drift apart.
      .reading-loading and .loading-text stay in each page (their size differs by page).
   2. The artwork on the card of the dream / sign, with the page's own frame colours. */

/* 1. crystal ball loading (same as tarot-reading.css) */
.crystal-wrap{position:relative;width:84px;height:84px}
.crystal-wrap::before{content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,rgba(216,189,154,.12),rgba(199,188,228,.08) 38%,transparent 68%);filter:blur(5px);animation:oracleHalo 4.8s ease-in-out infinite}
.crystal-ball{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 34% 27%,var(--ball-core,rgba(246,240,231,.74)) 0 8%,var(--ball-warm,rgba(216,189,154,.34)) 15%,var(--ball-mid,rgba(199,188,228,.28)) 32%,var(--ball-deep,rgba(76,64,96,.5)) 58%,var(--ball-dark,rgba(13,12,20,.92)) 82%);border:1px solid var(--ball-ring,rgba(216,189,154,.34));box-shadow:0 0 22px var(--ball-glow,rgba(216,189,154,.18)),0 0 48px var(--ball-glow2,rgba(199,188,228,.16)),0 18px 50px rgba(0,0,0,.36),inset 0 0 20px var(--ball-core,rgba(246,240,231,.16)),inset 0 -18px 28px var(--ball-dark,rgba(9,8,14,.82));position:relative;overflow:hidden;animation:oraclePulse 4.2s ease-in-out infinite}
.crystal-ball::after{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:14%;border-radius:50%;background:radial-gradient(ellipse,rgba(216,189,154,.34),transparent 70%);filter:blur(4px);opacity:.58}
.crystal-glow{position:absolute;top:18%;left:22%;width:30%;height:20%;border-radius:50%;background:rgba(246,240,231,.46);filter:blur(4px);box-shadow:0 0 18px rgba(216,189,154,.36);animation:softGlint 4.6s ease-in-out infinite}
.crystal-swirl{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 135deg,transparent 0 28%,rgba(216,189,154,.18) 36%,rgba(199,188,228,.22) 46%,transparent 62% 100%);filter:blur(2px);opacity:.72;animation:veilTurn 8s ease-in-out infinite}
.crystal-nebula{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 64% 66%,rgba(127,108,175,.34),transparent 54%),radial-gradient(ellipse at 28% 44%,rgba(216,189,154,.2),transparent 46%),radial-gradient(circle at 56% 45%,rgba(168,190,223,.14),transparent 36%);animation:mistBreath 5.8s ease-in-out infinite}
.crystal-arc{position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(216,189,154,.14);box-shadow:inset 0 0 18px rgba(199,188,228,.08);animation:oracleRing 6.4s ease-in-out infinite}
.crystal-arc::before{content:"";position:absolute;left:20%;top:19%;width:56%;height:56%;border-radius:50%;border-top:1px solid rgba(216,189,154,.24);border-left:1px solid rgba(199,188,228,.16);transform:rotate(-18deg);filter:blur(.2px)}
.crystal-arc::after{content:"";position:absolute;left:48%;top:43%;width:5px;height:5px;border-radius:50%;background:rgba(216,189,154,.56);box-shadow:0 0 16px rgba(216,189,154,.5);animation:emberBlink 3.8s ease-in-out infinite}
@keyframes oraclePulse{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 22px rgba(216,189,154,.16),0 0 48px rgba(199,188,228,.14),0 18px 50px rgba(0,0,0,.36),inset 0 0 20px rgba(246,240,231,.14),inset 0 -18px 28px rgba(9,8,14,.82)}50%{transform:translateY(-3px) scale(1.015);box-shadow:0 0 30px rgba(216,189,154,.24),0 0 62px rgba(199,188,228,.2),0 18px 54px rgba(0,0,0,.42),inset 0 0 26px rgba(246,240,231,.18),inset 0 -16px 26px rgba(9,8,14,.74)}}
@keyframes oracleHalo{0%,100%{opacity:.44;transform:scale(.96)}50%{opacity:.82;transform:scale(1.08)}}
@keyframes softGlint{0%,100%{opacity:.42;transform:translate(0,0) scale(.95)}50%{opacity:.74;transform:translate(4px,3px) scale(1.05)}}
@keyframes veilTurn{0%,100%{transform:rotate(-8deg) scale(.96);opacity:.42}50%{transform:rotate(18deg) scale(1.06);opacity:.78}}
@keyframes mistBreath{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:.86;transform:scale(1.04)}}
@keyframes oracleRing{0%,100%{opacity:.32;transform:rotate(-12deg) scale(.96)}50%{opacity:.68;transform:rotate(8deg) scale(1.02)}}
@keyframes emberBlink{0%,100%{opacity:.28;transform:scale(.8)}42%,58%{opacity:.9;transform:scale(1.16)}}
@media(max-width:760px){
  .crystal-ball{width:64px;height:64px}
  .crystal-wrap{width:64px;height:64px}
}

/* 2. The artwork on the turned card. The frame (border, glow, inner line) is the page's own, from
   dream-workspace.css / signal-workspace.css; the picture fills it, under a vignette, and the name sits
   on the dark lower part. A very slow breathing and a soft glow; both stop for prefers-reduced-motion. */
.symbol-front{--art-glow:rgba(168,200,232,.5);--art-shade:6,10,20}
.signal-front{--art-glow:rgba(124,108,255,.5);--art-shade:12,9,32}
.reading-art{position:absolute;inset:0;overflow:hidden;background:rgb(var(--art-shade))}
.reading-art-img{display:block;width:100%;height:100%;aspect-ratio:5/8;object-fit:cover;transform-origin:50% 55%;animation:readingArtBreath 18s ease-in-out infinite}
.reading-art::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 36%,var(--art-glow),transparent 62%);mix-blend-mode:screen;opacity:.16;animation:readingArtGlow 9s ease-in-out infinite;pointer-events:none}
.reading-art::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 50% 40%,transparent 48%,rgba(var(--art-shade),.62) 100%),linear-gradient(180deg,transparent 50%,rgba(var(--art-shade),.86) 100%);pointer-events:none}
.symbol-front.has-art,.signal-front.has-art{justify-content:flex-end;gap:.45rem;padding:1.2rem 1.1rem 1.5rem}
.symbol-front.has-art::before,.signal-front.has-art::before{z-index:3}
.symbol-front.has-art .symbol-card-name,.signal-front.has-art .signal-card-name,.symbol-front.has-art .symbol-card-line,.signal-front.has-art .signal-card-line{z-index:4}
@keyframes readingArtBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes readingArtGlow{0%,100%{opacity:.1}50%{opacity:.34}}
@media(prefers-reduced-motion:reduce){.reading-art-img,.reading-art::before{animation:none}}

/* The loading square is the same on Cards, Dreams and Signs: the panel around it steps
   aside while the ball turns, so the box is the box and nothing else. */
.reading-loading{min-height:340px;padding:2rem;border:1px solid var(--load-line,rgba(199,188,228,.2));background:var(--load-bg,#111018);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}
.result:has(.reading-loading),.result-card:has(.reading-loading){border-color:transparent;background:none;padding:0;box-shadow:none}
@media(max-width:760px){.reading-loading{min-height:280px;padding:1.4rem}}

/* The loading square and the ball follow the colours of each pillar: cool steel and blue on
   Dreams. Signs overrides these on its own page, so both keep one box and one ball, painted
   in their own light. */
.reading-loading{
  --load-line:rgba(168,200,232,.24);
  --load-bg:radial-gradient(circle at 50% 34%,rgba(138,184,216,.08),transparent 62%),#0e1018;
  --ball-core:rgba(232,242,252,.78);
  --ball-warm:rgba(168,200,232,.36);
  --ball-mid:rgba(138,184,216,.32);
  --ball-deep:rgba(46,70,100,.52);
  --ball-dark:rgba(8,14,22,.93);
  --ball-ring:rgba(168,200,232,.4);
  --ball-glow:rgba(138,184,216,.24);
  --ball-glow2:rgba(168,200,232,.18);
}