/* draw.css — the Daily Draw page only. */

.draw-stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-8);
  padding: calc(88px + var(--space-6)) var(--space-5)
    calc(var(--space-10) + env(safe-area-inset-bottom));
}

.draw-intro .ornament { margin-inline: auto; }

.draw-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-top: var(--space-2);
}

.draw-hint {
  color: var(--color-text-muted);
  margin: var(--space-3) auto 0;
  max-width: 34rem;
}

/* --- The card ------------------------------------------------------------ */

.card-flip {
  perspective: 1200px;
  width: min(300px, 72vw);
  animation: card-drift 6s ease-in-out infinite;
  scroll-snap-align: center;
}
.card-flip.revealed { animation: none; }

.card-inner {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card-flip.instant .card-inner { transition: none; }
.card-flip.revealed .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow:
    0 10px 34px rgba(10, 8, 24, 0.35),
    0 0 0 1px oklch(from var(--color-primary) l c h / 0.15);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-face-front { transform: rotateY(180deg); }

.card-flip:not(.revealed):hover .card-inner,
.card-flip:not(.revealed):focus-visible .card-inner {
  transform: translateY(-6px) rotateY(0.001deg);
}
.card-flip.revealed { cursor: default; }

@keyframes card-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --- Quote band: the page's second screen. Snaps flush to the viewport top
   (no header margin) so paging down leaves the card wholly above the fold. --- */
main > .draw-quote {
  scroll-margin-top: 0;
  min-height: 61.8dvh;
  display: grid;
  place-items: center;
}

/* --- The result ---------------------------------------------------------- */

.draw-result {
  max-width: 34rem;
  animation: result-rise 700ms ease-out both;
  /* On small screens the revealed stage outgrows one viewport; the result
     snapping flush to the top keeps the card wholly above the fold. */
  scroll-snap-align: start;
  scroll-margin-top: 0;
}

.card-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--color-primary);
}

.card-meaning {
  margin: var(--space-3) auto 0;
  color: var(--color-text);
}

.draw-note {
  margin: var(--space-4) auto 0;
  font-size: 0.9rem;
  color: var(--color-text-faint);
}

.draw-deeper {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.4);
}
.draw-deeper:hover { border-bottom-color: var(--color-primary); }

@keyframes result-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}