/* ============================================================
   Tarot page — card meanings library.
   Builds on style.css tokens (teal/violet, hairlines, 20px radius).
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.modal-open { overflow: hidden; }

.nav__links a[aria-current="page"],
.mobile-menu a[aria-current="page"] { color: var(--aurora-teal); }

/* ================= Hero ================= */
.tarot-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-11) + 60px) 0 var(--space-11);
}
.tarot-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-9);
  align-items: center;
}
.tarot-hero__actions { justify-content: flex-start; }
.tarot-hero .hero__sub { margin-left: 0; }
.tarot-hero__fan {
  position: relative;
  height: 420px;
}
.tarot-hero__fan img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  border-radius: 12px;
  border: 1px solid var(--border-hairline-strong);
  box-shadow: 0 0 60px rgba(117, 205, 214, 0.18);
  transform-origin: 50% 110%;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.tarot-hero__fan img:nth-child(1) { transform: translate(-50%, -50%) rotate(-14deg) translateX(-40px); }
.tarot-hero__fan img:nth-child(2) { transform: translate(-50%, -50%) rotate(14deg) translateX(40px); }
.tarot-hero__fan img:nth-child(3) { transform: translate(-50%, -54%); z-index: 1; }
.tarot-hero__fan:hover img:nth-child(1) { transform: translate(-50%, -50%) rotate(-20deg) translateX(-70px); }
.tarot-hero__fan:hover img:nth-child(2) { transform: translate(-50%, -50%) rotate(20deg) translateX(70px); }

/* ================= How to read ================= */
.tarot-howto { padding: var(--space-10) 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.howto__num {
  display: block;
  font-family: var(--font-caption);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--aurora-teal);
  margin-bottom: var(--space-3);
}
.howto .subheading { margin-bottom: var(--space-2); }
.howto p { font-size: 0.9375rem; line-height: 1.5; }

/* ================= Filter bar ================= */
.tarot-deck { padding: 0 0 var(--space-11); }
.deck-bar {
  position: sticky;
  top: 73px;
  z-index: 50;
  background: rgba(5, 7, 15, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-9);
}
.deck-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.deck-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.deck-tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--text-muted);
  font-family: var(--font-caption);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.deck-tab span { color: var(--text-faint); margin-left: 4px; letter-spacing: 0.05em; }
.deck-tab:hover { color: var(--aurora-teal); border-color: var(--border-hairline-strong); }
.deck-tab.is-active { background: var(--aurora-teal); border-color: var(--aurora-teal); color: #04212a; }
.deck-tab.is-active span { color: rgba(4, 33, 42, 0.6); }

.deck-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--text-faint);
  min-width: 240px;
  transition: border-color 0.2s ease;
}
.deck-search:focus-within { border-color: var(--aurora-teal); color: var(--aurora-teal); }
.deck-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  min-width: 0;
}
.deck-search input::placeholder { color: var(--text-faint); }

/* ================= Deck groups ================= */
.deck-group { margin-bottom: var(--space-11); scroll-margin-top: 150px; }
.deck-group__head { max-width: 640px; margin-bottom: var(--space-8); }
.deck-group__blurb { font-size: 1rem; line-height: 1.5; }

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-7) var(--space-6);
}
.deck-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.deck-item.is-visible { opacity: 1; transform: none; }

.tcard {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
}
.tcard__frame {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  aspect-ratio: 360 / 604;
  background: var(--bg-panel);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.25s ease, box-shadow 0.35s ease;
}
.tcard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 41, 120, 0.25), transparent 35%, transparent 70%, rgba(5, 7, 15, 0.35));
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tcard__frame img { width: 100%; height: 100%; object-fit: cover; }
.tcard:hover .tcard__frame,
.tcard:focus-visible .tcard__frame {
  transform: translateY(-6px);
  border-color: var(--aurora-teal);
  box-shadow: 0 14px 40px -12px rgba(117, 205, 214, 0.45);
}
.tcard:hover .tcard__frame::after { opacity: 0; }
.tcard:focus-visible { outline: none; }

.tcard__num {
  margin-top: var(--space-4);
  font-family: var(--font-caption);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aurora-teal);
}
.tcard__name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--text-primary);
}
.tcard__kw {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-faint);
}

.deck-empty { text-align: center; padding: var(--space-10) 0; }

/* ================= Modal ================= */
.card-modal {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  overflow: visible;
}
.card-modal::backdrop {
  background: rgba(3, 5, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-modal[open] { animation: modal-in 0.35s cubic-bezier(.2,.7,.2,1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

.card-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-9);
  padding: var(--space-9);
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(117, 205, 214, 0.14), transparent 70%),
    linear-gradient(160deg, #0d1638 0%, #0a0f22 60%, #070a18 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.card-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-hairline);
  background: rgba(5, 7, 15, 0.6);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.card-modal__close:hover { color: var(--aurora-teal); border-color: var(--aurora-teal); }

.card-modal__figure { align-self: start; perspective: 1000px; }
.card-modal__figure img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border-hairline-strong);
  box-shadow: 0 0 80px rgba(117, 205, 214, 0.2);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.card-modal__figure.is-reversed img { transform: rotate(180deg); }
.card-modal__figure.is-drawn img { animation: card-flip 0.8s cubic-bezier(.2,.7,.2,1); }
.card-modal__figure.is-drawn.is-reversed img { animation-name: card-flip-rev; }
@keyframes card-flip { from { transform: rotateY(90deg); opacity: 0; } }
@keyframes card-flip-rev { from { transform: rotate(180deg) rotateY(90deg); opacity: 0; } }

/* ---- Shuffle animation (card backs) ---- */
.card-modal__figure { position: relative; }
.shuffle {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.shuffle span {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid var(--border-hairline-strong);
  background:
    radial-gradient(circle at 50% 50%, transparent 17%, rgba(117, 205, 214, 0.55) 17.5%, transparent 18.5%),
    radial-gradient(circle at 50% 50%, rgba(117, 205, 214, 0.35) 0 4%, transparent 4.5%),
    radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 76% 30%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 30% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 84%, rgba(255,255,255,0.5), transparent),
    linear-gradient(160deg, var(--cosmic-violet) 0%, var(--twilight-indigo) 55%, #0a1330 100%);
  box-shadow: inset 0 0 0 8px rgba(5, 7, 15, 0.35), inset 0 0 0 9px rgba(117, 205, 214, 0.3);
}
.card-modal.is-shuffling .card-modal__figure img { opacity: 0; }
.card-modal.is-shuffling .shuffle { opacity: 1; }
.card-modal.is-shuffling .shuffle span { animation: riffle 0.42s ease-in-out 3; }
.card-modal.is-shuffling .shuffle span:nth-child(odd) { animation-name: riffle-alt; }
.card-modal.is-shuffling .shuffle span:nth-child(2) { animation-delay: 0.05s; }
.card-modal.is-shuffling .shuffle span:nth-child(3) { animation-delay: 0.1s; }
.card-modal.is-shuffling .shuffle span:nth-child(4) { animation-delay: 0.15s; }
.card-modal.is-shuffling .shuffle span:nth-child(5) { animation-delay: 0.2s; }
@keyframes riffle     { 50% { transform: translateX(10%) rotate(4deg); } }
@keyframes riffle-alt { 50% { transform: translateX(-10%) rotate(-4deg); } }
.card-modal.is-shuffling .card-modal__figure::after {
  content: "Shuffling the deck";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 18px);
  text-align: center;
  font-family: var(--font-caption);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aurora-teal);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.card-modal__body { padding-top: var(--space-3); min-width: 0; transition: opacity 0.4s ease; }
.card-modal.is-shuffling .card-modal__body { opacity: 0; transition: none; }
.card-modal__note {
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
  font-family: var(--font-caption);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card-modal__body .heading { margin-bottom: var(--space-6); }

.orient {
  display: inline-flex;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: var(--space-6);
}
.orient__btn {
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 8px 18px;
  color: var(--text-muted);
  font-family: var(--font-caption);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.orient__btn.is-active { background: var(--aurora-teal); color: #04212a; }
.orient__btn:not(.is-active):hover { color: var(--aurora-teal); }

.card-modal__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.card-modal__tags .tag { color: var(--polar-white); border-color: var(--border-hairline-strong); }
.card-modal__tags .tag--rev { border-color: rgba(116, 136, 165, 0.6); color: var(--text-muted); }
.card-modal__text { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); max-width: 56ch; }
.card-modal__q { margin: var(--space-7) 0; font-size: 1.2rem; border-left-color: var(--aurora-teal); }

.card-modal__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}
.card-modal__nav .link-arrow { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }

/* ================= CTA ================= */
.tarot-cta { border-top: 1px solid var(--border-hairline); }
.tarot-cta .display-sm { line-height: 1.1; }

/* ================= Responsive ================= */
@media (max-width: 960px) {
  .tarot-hero__inner { grid-template-columns: 1fr; }
  .tarot-hero__fan { height: 320px; order: -1; }
  .tarot-hero__fan img { width: 150px; }
  .howto-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .deck-bar__inner { flex-direction: column; align-items: stretch; }
  .deck-search { min-width: 0; }
  .card-modal__panel { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) var(--space-5); }
  .card-modal__figure { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .tarot-hero { padding-top: var(--space-11); }
  .deck-bar { top: 72px; }
  .deck-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
  .deck-tabs::-webkit-scrollbar { display: none; }
  .deck-tab { flex: 0 0 auto; }
  .deck-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }
}