/* tarot-deck.css: the draw (docs/MOTION.md §3, §4). Loaded after style.css on pages that run oracle-client.js.
   Colours are the style.css tokens, mixed with color-mix; the few derived values sit in this :root block. */
:root{
  --deck-shadow:rgba(0,0,0,.55);
  --deck-edge:color-mix(in srgb,var(--gold-2) 70%,var(--card));
  --deck-glow:color-mix(in srgb,var(--gold) 26%,transparent);
  --deck-glow-soft:color-mix(in srgb,var(--gold) 9%,transparent);
  --deck-sweep:color-mix(in srgb,var(--cream) 38%,transparent);
  --deck-mote:var(--gold-2);
}

/* the stage: a card table inside the Oracle panel */
.deck-li{list-style:none}
.deck-stage{container-type:inline-size;position:relative;display:grid;gap:var(--s4);padding-block:var(--s3) var(--s2);scroll-margin-top:88px}
.deck-stage *{-webkit-tap-highlight-color:transparent}
.deck-say{min-height:var(--lh4);text-align:center}
.deck-hint{text-align:center;max-width:44ch;margin-inline:auto}
.deck-tools{justify-content:center}
.deck-tools[hidden],.deck-table[hidden],.deck-piles[hidden]{display:none}
/* the speaker: top right of the stage, beside the line the deck speaks, so it is in view while choosing */
.deck-say{padding-inline:calc(var(--tap) + var(--s1));text-wrap:balance}
.deck-sound{position:absolute;top:calc(var(--s3) - 8px);right:0;z-index:4;color:var(--cream-3)}
.deck-sound[aria-pressed="true"]{color:var(--gold-2)}
.deck-sound[aria-pressed="true"] .snd-off,.deck-sound[aria-pressed="false"] .snd-on{display:none}

/* the spread: where chosen cards land */
.deck-spread{--cw:min(112px,27cqi);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s3);perspective:1100px;min-height:calc(var(--cw) * 1.723)}
.deck-spread[data-n="1"]{--cw:min(150px,40cqi)}
.deck-spread[data-n="5"]{--cw:min(96px,26cqi)}
.deck-slot{position:relative;display:grid;justify-items:center;align-content:start;gap:var(--s2);width:var(--cw)}
.deck-place{position:relative;width:var(--cw);aspect-ratio:300/517;border-radius:var(--r-s);border:1px dashed var(--gold-line-soft)}
.deck-slot.is-filled .deck-place{border-color:transparent}
.deck-slot .label{text-align:center}
.deck-name{text-align:center;color:var(--cream-2);opacity:0;transition:opacity 700ms var(--ease)}
.deck-name.is-in{opacity:1}
.deck-num{display:none}

/* Celtic Cross: the cross of six on the left, the staff of four on the right (half-row grid so both are centred) */
.deck-spread[data-spread="celtic"]{--cw:min(92px,19cqi);display:grid;grid-template-columns:repeat(3,var(--cw)) 4px var(--cw);grid-template-rows:repeat(8,calc(var(--cw) * .9));gap:var(--s1) var(--s3);justify-content:center;min-height:0}
.deck-spread[data-spread="celtic"] .deck-slot{gap:0}
.deck-spread[data-spread="celtic"] .deck-slot .label,.deck-spread[data-spread="celtic"] .deck-slot .deck-name{display:none}
.deck-spread[data-spread="celtic"] .deck-num{display:block;position:absolute;left:-2px;top:-2px;z-index:3;min-width:20px;padding:0 4px;border-radius:var(--r-s);background:var(--night);color:var(--gold);font:400 var(--t-label)/20px var(--f-label);text-align:center}
.deck-spread[data-spread="celtic"] [data-pos="0"]{grid-area:4/2/6/3}
.deck-spread[data-spread="celtic"] [data-pos="1"]{grid-area:4/2/6/3;z-index:2}
.deck-spread[data-spread="celtic"] [data-pos="2"]{grid-area:6/2/8/3}
.deck-spread[data-spread="celtic"] [data-pos="3"]{grid-area:4/1/6/2}
.deck-spread[data-spread="celtic"] [data-pos="4"]{grid-area:2/2/4/3}
.deck-spread[data-spread="celtic"] [data-pos="5"]{grid-area:4/3/6/4}
.deck-spread[data-spread="celtic"] [data-pos="6"]{grid-area:7/5/9/6}
.deck-spread[data-spread="celtic"] [data-pos="7"]{grid-area:5/5/7/6}
.deck-spread[data-spread="celtic"] [data-pos="8"]{grid-area:3/5/5/6}
.deck-spread[data-spread="celtic"] [data-pos="9"]{grid-area:1/5/3/6}
.deck-spread[data-spread="celtic"] [data-pos="1"] .deck-place{border-color:transparent}
/* card 2 lies across card 1, so its number sits at the crossing card's right end, clear of card 1's */
.deck-spread[data-spread="celtic"] [data-pos="1"] .deck-num{left:calc(50% + var(--cw) * .8617 - 20px);top:calc(50% - 10px)}
.deck-spread[data-spread="celtic"] [data-pos="1"]:not(.is-filled) .deck-place::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--cw) * 1.7233);height:var(--cw);transform:translate(-50%,-50%);border:1px dashed var(--gold-line-soft);border-radius:var(--r-s)}
/* phones: the cross and the staff side by side as small cards sized from the viewport, so the spread and the fan
   share one screen while choosing (no scrolling between them). --deck-chrome is the Sanctuary's bottom tab bar. */
@media (max-width:600px){
  body:has(.tabbar:not([hidden])){--deck-chrome:56px}
  .deck-stage:has([data-spread="celtic"]){gap:var(--s3)}
  .deck-stage:has([data-spread="celtic"]) .deck-say{display:grid;place-content:center;min-height:calc(var(--lh4) * 2)}   /* two lines held, so nothing moves when the line changes */
  .deck-stage:has([data-spread="celtic"]) .deck-sound{top:calc(var(--s3) + var(--lh4) - var(--tap) / 2)}
  .deck-spread[data-spread="celtic"]{--g:6px;
    --cw:clamp(38px,min(17cqi,(100vh - 420px - var(--deck-chrome,0px)) / 6.9),58px);
    --cw:clamp(38px,min(17cqi,(100svh - 420px - var(--deck-chrome,0px)) / 6.9),58px);
    grid-template-columns:repeat(3,var(--cw)) 0 var(--cw);grid-template-rows:repeat(8,calc((var(--cw) * 1.7233 - var(--g)) / 2));gap:var(--g) calc(var(--cw) * .38 + 4px)}
  .deck-spread[data-spread="celtic"] .deck-num{min-width:18px;padding:0 3px;font-size:11px;line-height:18px}
  .deck-spread[data-spread="celtic"] [data-pos="1"] .deck-num{left:calc(50% + var(--cw) * .8617 - 18px);top:calc(50% - 9px)}
}
.deck-key{max-width:52ch;margin-inline:auto}
.deck-key>summary{display:flex;justify-content:center;align-items:center;gap:var(--s2);min-height:var(--tap);color:var(--cream-2);cursor:pointer;list-style:none}
.deck-key>summary::-webkit-details-marker{display:none}
.deck-key>summary::after{content:"";width:6px;height:6px;border:solid var(--gold);border-width:0 1px 1px 0;transform:translateY(-2px) rotate(45deg);transition:transform 240ms var(--ease)}
.deck-key[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.deck-key>summary:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
@media (min-width:601px){.deck-key>summary{display:none}}
.deck-legend{display:grid;gap:var(--s1);max-width:52ch;margin-inline:auto;counter-reset:pos}
.deck-legend li{display:grid;grid-template-columns:28px 1fr;gap:var(--s2)}
.deck-legend b{font:400 var(--t-label)/var(--lh6) var(--f-label);color:var(--gold)}

/* a drawn card: a 3D object with two faces and a gilded edge (MOTION §4) */
.tcard{position:absolute;inset:0;display:block;padding:0;margin:0;border:0;background:none;color:var(--cream);border-radius:var(--r-s);transform-style:preserve-3d;--cwpx:100px;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--foil:0}
.tcard:focus-visible{outline:2px solid var(--gold-2);outline-offset:5px}
.tcard.is-cross{transform:rotate(90deg)}
.tcard-shadow{position:absolute;left:8%;right:8%;bottom:-6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,var(--deck-shadow),transparent);opacity:.55;transform:translateZ(-2px)}
.tcard-glow{position:absolute;inset:-34% -48%;border-radius:50%;background:radial-gradient(closest-side,var(--deck-glow),var(--deck-glow-soft) 55%,transparent);opacity:0;pointer-events:none;transform:translateZ(-3px)}
.tcard-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.tcard-back,.tcard-face{position:absolute;inset:0;border-radius:var(--r-s);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tcard-back{background:var(--card) url(/assets/cards/back.svg) center/100% 100% no-repeat;transform:translateZ(1.5px)}
.tcard-face{transform:rotateY(180deg) translateZ(1.5px);overflow:hidden;background:var(--deep)}
.tcard-face img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-s)}
.tcard.is-reversed .tcard-face img{transform:rotate(180deg)}
.tcard-edge{position:absolute;top:1px;bottom:1px;left:calc(50% - 1.5px);width:3px;background:var(--deck-edge)}
.tcard-edge-r{transform:rotateY(90deg) translateZ(calc(var(--cwpx) / 2 - .5px))}
.tcard-edge-l{transform:rotateY(-90deg) translateZ(calc(var(--cwpx) / 2 - .5px))}
.tcard-sweep{position:absolute;inset:-10% auto -10% 0;width:34%;background:linear-gradient(100deg,transparent,var(--deck-sweep),transparent);mix-blend-mode:soft-light;transform:translateX(-140%) skewX(-12deg);pointer-events:none}
/* the foil: a gold highlight under the pointer and a faint diagonal band, both soft-light (fx.js drives --mx --my --foil) */
.tcard-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:var(--foil);transition:opacity 400ms var(--ease);
  background:radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--gold-2) 55%,transparent),transparent 46%),
    repeating-linear-gradient(115deg,transparent 0 9%,color-mix(in srgb,var(--cream) 16%,transparent) 11%,transparent 14% 22%);
  background-size:100% 100%,240% 240%;background-position:center,var(--mx) var(--my)}
.tcard.is-up{cursor:zoom-in}
.tcard.is-up .tcard-body{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateY(180deg)}
.tcard.is-waiting .tcard-glow{animation:deck-breathe 2.8s var(--ease) infinite}
@keyframes deck-breathe{50%{opacity:.5}}

/* the table: the pile, the cut and the fan */
.deck-table{position:relative;height:var(--table-h,230px);touch-action:pan-y}
.deck-pile{position:absolute;left:50%;top:50%;width:var(--fw,70px);aspect-ratio:300/517;margin-left:calc(var(--fw,70px) / -2);margin-top:calc(var(--fw,70px) * -.862);padding:0;border:0;background:none;border-radius:var(--r-s);cursor:pointer}
.deck-pile:focus-visible{outline:2px solid var(--gold-2);outline-offset:6px}
.deck-proxy,.deck-card{position:absolute;left:0;top:0;width:var(--fw,70px);aspect-ratio:300/517;border-radius:var(--r-s);background:var(--card) url(/assets/cards/back.svg) center/100% 100% no-repeat;box-shadow:0 0 0 1px var(--gold-line-soft)}
.deck-proxy{transform:translate3d(calc(var(--i) * -.35px),calc(var(--i) * -.45px),0)}
.deck-pile.is-breathing{animation:deck-pile-breathe 4.2s ease-in-out infinite}
@keyframes deck-pile-breathe{50%{transform:translateY(-3px) scale(1.012)}}
.deck-piles{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:var(--s5)}
.deck-cutpile{position:relative;width:calc(var(--fw,70px) + 8px);min-height:var(--tap);aspect-ratio:300/517;padding:0;border:0;background:none;border-radius:var(--r-s)}
.deck-cutpile .deck-proxy{left:4px;top:4px}
.deck-cutpile:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.deck-cutpile .label{position:absolute;left:0;right:0;bottom:-28px;text-align:center}

.deck-fan{position:absolute;inset:0;border:0;padding:0;margin:0}
.deck-fan .deck-card{--a:0deg;--r:400px;--lift:0px;left:calc(50% - var(--fw,70px) / 2);top:var(--pivot-y,520px);margin-top:calc(var(--fw,70px) * -.862);padding:0;border:0;cursor:pointer;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r) - var(--lift)));transition:transform 260ms var(--ease)}
.deck-fan .deck-card:hover,.deck-fan .deck-card:focus-visible,.deck-fan .deck-card.is-aim{--lift:16px}
.deck-fan .deck-card:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.deck-fan .deck-card.is-taken{visibility:hidden;pointer-events:none}
/* phone: a strip you scroll with your thumb; JS bends it into an arc as it moves */
.deck-fan.is-strip{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
.deck-fan.is-strip::-webkit-scrollbar{display:none}
.deck-fan.is-strip .deck-track{position:relative;height:100%}
.deck-fan.is-strip .deck-card{left:var(--x);top:calc(50% + 6px);margin-top:calc(var(--fw,70px) * -.862);transform:none;transition:none;scroll-snap-align:center}
.deck-fan.is-strip .deck-card:hover{--lift:0px}

.deck-mote{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:var(--r-full);background:var(--deck-mote);box-shadow:0 0 6px 1px var(--deck-glow);pointer-events:none;opacity:0}

/* the closer look */
.deck-dialog .dialog-in{max-width:min(92vw,440px)}
.deck-dialog figure{margin:0;display:grid;gap:var(--s3);justify-items:center}
.deck-dialog img{width:min(78vw,300px);height:auto;aspect-ratio:300/517;border-radius:var(--r-s)}
.deck-dialog img.is-reversed{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .deck-fan .deck-card{transition:none}
  .tcard.is-waiting .tcard-glow,.deck-pile.is-breathing{animation:none}
}

/* the homepage pull (docs/MOTION.md §3b, js/home-pull.js): a small fan from a sealed deck, one card chosen and turned
   in place. The table keeps its height in every state (fan, chosen, face up), so nothing below it moves. */
.pull{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"say" "main" "text" "foot";gap:var(--s3);align-items:center}
.pull-say{grid-area:say;margin:0;min-height:calc(var(--lh4) * 2);display:grid;align-content:end;padding-right:calc(var(--tap) + var(--s1));text-wrap:balance}
.pull .deck-sound{top:0;right:0}
.pull-table{grid-area:main;position:relative;height:250px;perspective:1100px;overflow-x:clip;touch-action:pan-y}
.pull-fan[hidden]{display:none}
.pull-fan.is-stacked .deck-card{transform:translateY(calc(-1 * var(--r))) rotate(calc(var(--a) * .06));pointer-events:none}
.pull-slot{grid-area:main;justify-self:center;--cw:128px;width:var(--cw);gap:0;z-index:3;pointer-events:none}
.pull-slot.is-filled{pointer-events:auto}
.pull-slot .deck-place{border-color:transparent}
.pull-text{grid-area:text;display:grid;gap:var(--s2);align-content:start;min-width:0}
.pull-text[data-state="waiting"]{visibility:hidden}
.pull-text h3{margin:0}
.pull-text .actions{margin-top:var(--s2)}
.pull-text .btn{white-space:normal;text-align:left}
.pull-orient{color:var(--cream-2)}
.pull-foot{grid-area:foot;margin:0;min-height:var(--lh5)}
@media (min-width:640px){
  .pull{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"say say" "slot text" "foot foot";column-gap:var(--s6)}
  .pull-say{min-height:var(--lh4)}
  .pull-table{grid-area:2/1/3/3;height:320px}
  .pull-slot{grid-area:slot;--cw:170px}
  .pull-text{align-self:center}
}