/* Daily tarot. Palette is lifted from the card art. */

:root {
  --ag-night: #12141b;
  --ag-navy: #1a1d26;
  --ag-navy-2: #242733;
  --ag-gold: #e5cf76;
  --ag-gold-deep: #d4b376;
  --ag-cream: #f2e5b1;
  --ag-text: #d9d4c3;
  --ag-head: 'Josefin Sans', sans-serif;
  --ag-body: 'Inter', system-ui, sans-serif;
}

/* Hide the raw template until Vue has mounted. !important because #app also
   carries layout classes (.page sets display: flex) that would otherwise win. */
[v-cloak] { display: none !important; }

body {
  --bs-body-bg: var(--ag-night);
  --bs-body-color: var(--ag-text);
  font-family: var(--ag-body);
  min-height: 100vh;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(242, 229, 177, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(242, 229, 177, .6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 31%, rgba(242, 229, 177, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 52%, rgba(242, 229, 177, .45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 63%, rgba(242, 229, 177, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 81%, rgba(242, 229, 177, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 88%, rgba(242, 229, 177, .4) 50%, transparent 51%),
    radial-gradient(ellipse at 50% -10%, #2a2f45 0%, var(--ag-night) 60%) fixed;
  background-color: var(--ag-night);
}

h1, h2, .eyebrow, .brand, .btn, .slot span {
  font-family: var(--ag-head);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1 0 auto; }

.masthead { text-align: center; padding: .9rem 1rem .25rem; }
.brand { color: var(--ag-gold); text-decoration: none; font-size: .95rem; font-weight: 600; }
.brand span { opacity: .6; }
.masthead { position: relative; }
.debug-reset {
  position: absolute; top: .6rem; right: .75rem;
  font: 500 .7rem var(--ag-body); color: var(--ag-gold);
  background: rgba(229, 207, 118, .08); border: 1px dashed rgba(229, 207, 118, .45);
  border-radius: 999px; padding: .25rem .7rem;
}
.debug-reset:hover { background: rgba(229, 207, 118, .2); }

.reading-wrap { max-width: 880px; flex: 1; }

/* ---- site footer ---- */
.site-footer {
  margin-top: 3rem; padding: 1.75rem 1rem 2rem; text-align: center;
  border-top: 1px solid rgba(229, 207, 118, .14);
  font-size: .75rem; line-height: 1.6; color: rgba(217, 212, 195, .6);
}
.site-footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; margin-bottom: 1rem; }
.site-footer-nav a {
  font-family: var(--ag-head); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem;
  color: var(--ag-gold); opacity: .8; text-decoration: none;
}
.site-footer-nav a:hover { opacity: 1; text-decoration: underline; }
.site-footer p { max-width: 38rem; margin: 0 auto .6rem; }
.site-footer-copyright { color: rgba(217, 212, 195, .45); }

/* ---- buttons ---- */
.btn-gold {
  --bs-btn-color: var(--ag-navy);
  --bs-btn-bg: var(--ag-gold);
  --bs-btn-border-color: var(--ag-gold);
  --bs-btn-hover-color: var(--ag-navy);
  --bs-btn-hover-bg: var(--ag-cream);
  --bs-btn-hover-border-color: var(--ag-cream);
  --bs-btn-active-color: var(--ag-navy);
  --bs-btn-active-bg: var(--ag-gold-deep);
  --bs-btn-active-border-color: var(--ag-gold-deep);
  --bs-btn-disabled-color: var(--ag-navy);
  --bs-btn-disabled-bg: var(--ag-gold-deep);
  --bs-btn-disabled-border-color: var(--ag-gold-deep);
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem 1.4rem .45rem; /* Josefin sits high in its box */
  border-radius: 999px;
}
.btn-gold.btn-lg { font-size: .95rem; padding: .8rem 2rem .62rem; box-shadow: 0 0 28px rgba(229, 207, 118, .25); }
.btn-outline-gold {
  --bs-btn-color: var(--ag-gold);
  --bs-btn-border-color: rgba(229, 207, 118, .5);
  --bs-btn-hover-color: var(--ag-navy);
  --bs-btn-hover-bg: var(--ag-gold);
  --bs-btn-hover-border-color: var(--ag-gold);
  --bs-btn-active-color: var(--ag-navy);
  --bs-btn-active-bg: var(--ag-gold-deep);
  border-radius: 999px;
  font-size: .72rem;
  padding: .45rem 1rem .3rem;
}

/* Link between the full reading and the card of the day */
.elsewhere { margin: 1.4rem 0 0; font-size: .8rem; }
.elsewhere a { color: var(--ag-gold); opacity: .75; text-decoration: none; }
.elsewhere a:hover { opacity: 1; text-decoration: underline; }

/* Reading options on the intro screen */
.options { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: center; margin: 0 0 1.4rem; }
.btn-option {
  --bs-btn-color: var(--ag-text);
  --bs-btn-border-color: rgba(229, 207, 118, .3);
  --bs-btn-hover-color: var(--ag-cream);
  --bs-btn-hover-border-color: rgba(229, 207, 118, .6);
  --bs-btn-active-color: var(--ag-navy);
  --bs-btn-active-bg: var(--ag-gold);
  --bs-btn-active-border-color: var(--ag-gold);
  font-size: .68rem; padding: .45rem .95rem .3rem;
}
.spread-picker { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .9rem 0 1rem; }
.spread-picker .btn-option { border-radius: 999px; }
.intro .lede { min-height: 3em; }
.btn-group > .btn-option:first-of-type { border-radius: 999px 0 0 999px; }
.btn-group > .btn-option:last-of-type { border-radius: 0 999px 999px 0; }
.btn-option small { opacity: .6; margin-left: .3em; }
.btn-check:focus-visible + .btn-option { box-shadow: 0 0 0 .2rem rgba(229, 207, 118, .2); }

/* ---- intro + prompt ---- */
.intro, .prompt { text-align: center; margin: 0 auto; max-width: 34rem; }
.intro { padding: 1.5rem 0 1.25rem; }
.prompt { min-height: 7.25rem; padding: .75rem 0 .5rem; }
.intro h1, .prompt h1 { color: var(--ag-cream); font-size: 1.25rem; font-weight: 400; margin-bottom: .4rem; }
.intro .lede { color: var(--ag-text); }
.prompt p { font-size: .9rem; margin-bottom: .5rem; }
.prompt-action { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; font-size: .85rem; }
.intention {
  --bs-body-bg: rgba(255, 255, 255, .04);
  --bs-border-color: rgba(229, 207, 118, .3);
  text-align: center;
  border-radius: 999px;
  margin: 1.1rem auto;
  max-width: 26rem;
}
.intention:focus { border-color: var(--ag-gold); box-shadow: 0 0 0 .2rem rgba(229, 207, 118, .15); }

/* ---- the table ---- */
.table-top {
  position: relative;
  margin: 0 auto;
  transition: height .8s ease;
  user-select: none;
  -webkit-user-select: none;
}

.slot {
  position: absolute; top: 0; left: 0;
  width: var(--cw); height: var(--ch);
  border: 1px dashed rgba(229, 207, 118, .35);
  border-radius: calc(var(--cw) * .07);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: rgba(229, 207, 118, .55);
  transition: border-color .3s, box-shadow .3s, color .3s, transform .8s ease, width .8s ease, height .8s ease;
}
.slot span { font-size: clamp(.5rem, calc(var(--cw) * .1), .7rem); letter-spacing: .1em; padding-top: .2em; }
.slot.next { border-color: var(--ag-gold); color: var(--ag-gold); animation: slot-pulse 1.8s ease-in-out infinite; }
@keyframes slot-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 207, 118, 0); }
  50% { box-shadow: 0 0 22px rgba(229, 207, 118, .45); }
}

.tcard {
  position: absolute; top: 0; left: 0;
  width: var(--cw); height: var(--ch);
  perspective: 900px;
  pointer-events: none;
  will-change: transform;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, width .8s ease, height .8s ease;
}
.tcard.in-slot { transition-duration: .7s, .45s, .8s, .8s; }
.tcard.clickable { pointer-events: auto; cursor: pointer; }
.phase-shuffle .tcard { transition-duration: .2s, .45s, .8s, .8s; transition-timing-function: ease-in-out; }
/* Once the fan has settled, cards still in it follow the hand quickly. */
.fan-settled.phase-cut .tcard:not(.in-slot),
.fan-settled.phase-draw .tcard:not(.in-slot) { transition-duration: .16s, .45s, .8s, .8s; }
.instant .tcard, .instant .tcard-inner, .instant.table-top { transition: none !important; }

.tcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, .1, .2, 1);
}
.tcard.face-up .tcard-inner { transform: rotateY(180deg); }
.tcard-back, .tcard-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: calc(var(--cw) * .07);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  -webkit-touch-callout: none;
}
/* The card back art is a little squatter than the faces; stretch it to match. */
.tcard-back { object-fit: fill; }
.tcard-face { transform: rotateY(180deg); }

.deck-hit, .fan-zone { position: absolute; left: 0; z-index: 1000; touch-action: none; -webkit-tap-highlight-color: transparent; }
.deck-hit { top: 0; background: none; border: 0; border-radius: 12px; cursor: grab; }
.deck-hit:active { cursor: grabbing; }
.deck-hit.deck-begin, .deck-hit.deck-begin:active { cursor: pointer; }
.fan-zone { right: 0; outline: none; }
.fan-zone.active { cursor: pointer; }
.deck-hit:focus-visible, .fan-zone:focus-visible { box-shadow: 0 0 0 2px rgba(229, 207, 118, .5); border-radius: 12px; }

/* The reveal button stands where the deck was. The wrapper does the centring
   so the rise transition is free to use transform on it. */
.reveal-spot { position: absolute; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; margin-top: -1.5rem; }

/* ---- the interpretation ---- */
.reading-error { text-align: center; margin: 2rem auto 0; max-width: 30rem; font-size: .9rem; }
.reading-error .btn { margin-left: .5rem; }
.reading { padding: 1.5rem 0 0; max-width: 46rem; margin: 0 auto; }
.reading-card, .reading-whole {
  background: linear-gradient(180deg, rgba(36, 39, 51, .85), rgba(26, 29, 38, .85));
  border: 1px solid rgba(229, 207, 118, .18);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  scroll-margin-top: 1rem;
}
.reading-card { display: flex; gap: 1.25rem; align-items: flex-start; }
.reading-art { flex: 0 0 clamp(84px, 24vw, 150px); }
.reading-art img { width: 100%; height: auto; display: block; border-radius: 7%/4.2%; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.reading-body { flex: 1; min-width: 0; }
.eyebrow { color: var(--ag-gold); font-size: .7rem; font-weight: 600; }
.reading h2 { color: var(--ag-cream); font-size: 1.15rem; font-weight: 400; margin: .2rem 0 .6rem; }
.badge-reversed {
  display: inline-block; vertical-align: middle;
  font-size: .6rem; letter-spacing: .12em; color: var(--ag-navy); background: var(--ag-gold-deep);
  border-radius: 999px; padding: .3em .8em .15em; margin-left: .4em;
}
.keys { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.keys li { font-size: .72rem; border: 1px solid rgba(229, 207, 118, .3); color: var(--ag-gold); border-radius: 999px; padding: .15em .7em; }
.reading p { line-height: 1.65; font-size: .95rem; }
.reading p:last-child { margin-bottom: 0; }
.advice { border-left: 2px solid var(--ag-gold); padding-left: .9rem; color: var(--ag-cream); font-style: italic; }

/* Correspondences: number, astrology, element, colors, crystals */
.corr {
  display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem;
  margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid rgba(229, 207, 118, .15);
  font-size: .8rem; line-height: 1.5;
}
.corr dt { font-family: var(--ag-head); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; font-weight: 600; color: var(--ag-gold); padding-top: .25em; }
.corr dd { margin: 0; }
.corr dd strong { color: var(--ag-cream); font-weight: 500; }
.corr dd span { opacity: .7; }
.corr dd strong + span::before { content: '· '; }
.corr .swatch { opacity: 1; display: inline-flex; align-items: center; gap: .4em; margin-right: 1em; }
.corr .swatch i { width: .8em; height: .8em; border-radius: 50%; border: 1px solid rgba(242, 229, 177, .45); display: inline-block; }

.rise-enter-active { transition: opacity .9s ease, transform .9s ease; }
.rise-enter-from { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard-inner, .table-top, .rise-enter-active { transition-duration: .01s !important; transition-delay: 0s !important; }
  .slot.next { animation: none; box-shadow: 0 0 16px rgba(229, 207, 118, .4); }
}