/* Lumara Tarot — draw a card. */

.draw {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + clamp(32px, 6vw, 80px)) 0 clamp(64px, 9vw, 110px);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.draw__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(42% 38% at 50% 64%, rgba(201, 168, 76, 0.24), transparent 72%),
    url('../img/hero/stage.webp') 50% 100% / auto 92% no-repeat,
    var(--ink);
  opacity: 0.85;
}
.draw__sparkles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.draw__intro .lead {
  margin-inline: auto;
}

.draw__stage {
  position: relative;
  max-width: 1100px;
  height: clamp(320px, 44vh, 420px);
  margin: 8px auto 0;
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* The face-down stack shown before and during the shuffle. */
.draw__deck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(110px, 12vw, 150px);
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.draw__deck-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(241, 202, 139, 0.3),
    0 18px 30px -18px #000;
  translate: calc(var(--d) * -1.5px) calc(var(--d) * -2px);
}
.draw[data-state='fanned'] .draw__deck,
.draw[data-state='picked'] .draw__deck,
.draw[data-state='revealed'] .draw__deck {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}

/* The fan: 21 cards on an arc whose pivot sits far below the cards. */
.draw__fan {
  --card-w: clamp(70px, 7.5vw, 104px);
  --fan-step: 2deg;
  --fan-origin: 840%;
  position: absolute;
  inset: 0;
}
.draw[data-state='revealed'] .draw__fan {
  visibility: hidden;
}
.draw__fan-card {
  --lift: 0px;
  position: absolute;
  left: 50%;
  top: 18%;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% var(--fan-origin);
  transform: translateX(-50%) rotate(calc(var(--i) * var(--fan-step))) translateY(var(--lift));
  transition: transform 0.35s var(--ease-out);
}
.draw__fan-card img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  box-shadow:
    0 0 0 1px rgba(241, 202, 139, 0.35),
    0 16px 26px -16px #000;
  transition: box-shadow 0.3s;
}
.draw__fan-card:hover,
.draw__fan-card:focus-visible {
  --lift: -24px;
  z-index: 30;
  outline: none;
}
.draw__fan-card:hover img,
.draw__fan-card:focus-visible img {
  box-shadow:
    0 0 0 1px rgba(241, 202, 139, 0.9),
    0 0 30px -4px rgba(241, 202, 139, 0.7),
    0 20px 30px -16px #000;
}

/* The chosen card: flies to the centre, then turns over. */
.draw__chosen {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  width: clamp(150px, 17vw, 220px);
  aspect-ratio: 2 / 3;
  visibility: hidden;
  transform: translate(-50%, -50%);
  perspective: 1400px;
  pointer-events: none;
}
.draw__chosen.is-active {
  visibility: visible;
}
.draw__halo {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 50%;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 50%, rgba(241, 202, 139, 0.5) 63%, rgba(241, 202, 139, 0.12) 78%, transparent);
  opacity: 0;
}
.draw__burst {
  position: absolute;
  left: -70%;
  top: -35%;
  width: 240%;
  height: 170%;
  opacity: 0;
}
.draw__chosen.is-flipped .draw__burst {
  opacity: 1;
}
.draw__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.draw__side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 0 0 1px rgba(241, 202, 139, 0.4),
    0 0 70px -14px rgba(241, 202, 139, 0.6),
    0 40px 60px -30px #000;
  transition: transform 0.9s var(--ease-ritual);
}
.draw__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.draw__side--face {
  transform: rotateY(-180deg);
}
.draw__chosen.is-flipped .draw__side--back {
  transform: rotateY(180deg);
}
.draw__chosen.is-flipped .draw__side--face {
  transform: rotateY(0deg);
}
.draw__chosen.is-reversed .draw__face {
  transform: rotate(180deg);
}
.draw__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 238, 211, 0.65) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 170% 0;
  mix-blend-mode: screen;
}
.draw__chosen.is-flipped .draw__sheen {
  animation: draw-sheen 1.3s 0.55s var(--ease-out) forwards;
}
@keyframes draw-sheen {
  to {
    background-position: -70% 0;
  }
}

.draw__controls {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-inline: var(--gutter);
}
.draw__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.draw[data-state='picked'] .draw__controls,
.draw[data-state='revealed'] .draw__controls {
  display: none;
}
.draw__shuffle[aria-disabled='true'] {
  opacity: 0.5;
  cursor: progress;
}

.draw-result {
  width: min(640px, 100% - 2 * var(--gutter));
  margin: 28px auto 0;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 10px;
  background: linear-gradient(170deg, rgba(13, 29, 20, 0.95), rgba(3, 10, 6, 0.97) 55%, rgba(14, 31, 22, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(105, 89, 56, 0.6),
    0 40px 90px -50px #000;
}
.draw-result__name {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4.4vw, 3rem);
}
.draw-result__name:focus {
  outline: none;
}
.draw-result__orientation {
  margin: 0 0 18px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.draw-result__keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.draw-result__keywords li {
  padding: 5px 12px;
  border: 1px solid rgba(241, 202, 139, 0.28);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--gold);
}
.draw-result__disclaimer {
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.draw-result__cta {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--gold-hair);
}
.draw-result__cta p {
  margin: 0;
}
.draw-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

html[data-motion='reduced'] .draw__deck,
html[data-motion='reduced'] .draw__fan-card,
html[data-motion='reduced'] .draw__fan-card img,
html[data-motion='reduced'] .draw__side {
  transition: none;
}
html[data-motion='reduced'] .draw__chosen.is-flipped .draw__sheen {
  animation: none;
}

@media (max-width: 640px) {
  .draw__stage {
    height: 290px;
  }
  .draw__fan {
    --card-w: 62px;
    --fan-origin: 440%;
  }
  .draw__fan-card {
    top: 29%;
  }
}
@media (max-width: 360px) {
  .draw__fan {
    --card-w: 54px;
    --fan-origin: 420%;
  }
}