/* ─────────────── COTD HERO MEDALLIONS (animated) ─────────────── */
/* LEFT: Rising sun — rays slowly rotate, disc gently pulses */
.cotd-medallion-sun .cotd-sun-rays {
  transform-origin: 32px 32px;
  animation: cotdSunRotate 32s linear infinite;
}
.cotd-medallion-sun .cotd-sun-disc {
  transform-origin: 32px 32px;
  animation: cotdSunPulse 4.5s ease-in-out infinite;
}
@keyframes cotdSunRotate {
  from { transform: translate(32px, 32px) rotate(0deg); }
  to   { transform: translate(32px, 32px) rotate(360deg); }
}
@keyframes cotdSunPulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.07); filter: brightness(1.18); }
}

/* RIGHT: Three cards — each breathes (rises slightly + brightens) on offset phase */
.cotd-medallion-trio .cotd-trio-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: cotdTrioBreath 5.4s ease-in-out infinite;
}
.cotd-medallion-trio .cotd-trio-card-l { animation-delay: 0s; }
.cotd-medallion-trio .cotd-trio-card-c { animation-delay: -1.8s; }
.cotd-medallion-trio .cotd-trio-card-r { animation-delay: -3.6s; }

/* Animate via the existing transform attribute by overlaying a translate
   on the inner content. We piggyback by animating opacity + filter, since
   transform conflict with the inline transform="translate(...) rotate(...)"
   is awkward. Subtle brightness pulse reads as breathing. */
@keyframes cotdTrioBreath {
  0%, 100% { filter: brightness(1)    drop-shadow(0 0 0 rgba(212,172,104,0)); opacity: 0.92; }
  50%      { filter: brightness(1.18) drop-shadow(0 0 4px rgba(212,172,104,0.55)); opacity: 1; }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .cotd-medallion-sun .cotd-sun-rays,
  .cotd-medallion-sun .cotd-sun-disc,
  .cotd-medallion-trio .cotd-trio-card {
    animation: none;
  }
}

/**
 * css/tarot-card-of-day.css — Tarot Card of the Day brand v2 ADDITIONS
 *
 * Loads AFTER css/yes-no-tarot.css. Reuses every shared class
 * (.spread-frame, .vitrine, .modal, .sealed-letter, .yn-audio-toggle, etc.)
 * and adds only the differences:
 *   - .cotd-chooser (3-card row instead of 22-card dome fan)
 *   - .cotd-card (individual face-down card button)
 *
 * Color/font system is inherited from yes-no-tarot.css — DO NOT redeclare.
 */

/* ─────────────── 3-CARD CHOOSER ─────────────── */
/* Sits inside .scene-input where yes/no had .spread-fan */
.cotd-chooser {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  margin: 1.4rem auto 1.2rem;
  padding: 0.5rem 0.5rem 1.2rem;
  perspective: 1200px;
}

.cotd-card {
  position: relative;
  width: clamp(120px, 18vw, 180px);
  aspect-ratio: 100 / 179;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  overflow: visible;

  /* Initial state: dropped below + invisible. Scroll-triggered observer
     adds .is-in-view to .cotd-chooser which animates each slot to its
     final resting tilt with a staggered delay. */
  opacity: 0;
  transform: translateY(80px) rotate(-12deg) scale(0.85);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1),
              filter   0.45s ease,
              opacity  0.45s ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

/* ─── SCROLL-TRIGGERED FLY-IN (staggered, like yes/no fan) ─── */
.cotd-chooser.is-in-view .cotd-card {
  animation: cotdFlyIn 0.95s cubic-bezier(.2,.8,.2,1) forwards;
}
.cotd-chooser.is-in-view .cotd-card[data-slot="0"] { animation-delay: 0.10s; }
.cotd-chooser.is-in-view .cotd-card[data-slot="1"] { animation-delay: 0.32s; }
.cotd-chooser.is-in-view .cotd-card[data-slot="2"] { animation-delay: 0.54s; }

@keyframes cotdFlyIn {
  0% {
    opacity: 0;
    transform: translateY(80px) rotate(-12deg) scale(0.85);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    /* Final transform set per-slot below via :not() so animation lands correctly */
  }
}
/* Per-slot final resting transforms (applied AFTER the animation completes) */
.cotd-chooser.is-in-view .cotd-card[data-slot="0"] {
  animation-name: cotdFlyInSlot0;
}
.cotd-chooser.is-in-view .cotd-card[data-slot="1"] {
  animation-name: cotdFlyInSlot1;
}
.cotd-chooser.is-in-view .cotd-card[data-slot="2"] {
  animation-name: cotdFlyInSlot2;
}
@keyframes cotdFlyInSlot0 {
  0%   { opacity: 0; transform: translateY(80px) rotate(-18deg) scale(0.85); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(-3.5deg) scale(1); }
}
@keyframes cotdFlyInSlot1 {
  0%   { opacity: 0; transform: translateY(80px) rotate(0deg) scale(0.85); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(-6px) rotate(0deg) scale(1); }
}
@keyframes cotdFlyInSlot2 {
  0%   { opacity: 0; transform: translateY(80px) rotate(18deg) scale(0.85); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(3.5deg) scale(1); }
}

/* ─── IDLE BREATHING (on the inner SVG so it doesn't conflict with the
   outer card's tilt transform from the fly-in animation) ─── */
.cotd-card .card-back {
  animation: cotdIdleBreath 4.8s ease-in-out infinite;
  transform-origin: center;
}
.cotd-card[data-slot="0"] .card-back { animation-delay: 0s; }
.cotd-card[data-slot="1"] .card-back { animation-delay: -1.6s; }
.cotd-card[data-slot="2"] .card-back { animation-delay: -3.2s; }

@keyframes cotdIdleBreath {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-3px); filter: brightness(1.08); }
}

.cotd-card .card-back {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

/* Hover: lift + scale + brighten */
@media (hover: hover) {
  .cotd-card:hover {
    transform: translateY(-22px) scale(1.06) rotate(0);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 18px rgba(212, 172, 104, 0.35));
    z-index: 5;
  }
}

/* Chosen card: glow + brightness pulse on the inner SVG (doesn't fight
   the outer card's per-slot tilt transform). */
.cotd-card.is-chosen {
  z-index: 6;
}
.cotd-card.is-chosen .card-back {
  animation: cotdChosenPulse 0.55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cotdChosenPulse {
  0%   { transform: scale(1)    translateY(0); filter: brightness(1) drop-shadow(0 0 0 rgba(212, 172, 104, 0)); }
  60%  { transform: scale(1.18) translateY(-10px); filter: brightness(1.4) drop-shadow(0 0 28px rgba(212, 172, 104, 0.85)) drop-shadow(0 0 42px rgba(212, 172, 104, 0.55)); }
  100% { transform: scale(1.10) translateY(-6px); filter: brightness(1.2) drop-shadow(0 0 22px rgba(212, 172, 104, 0.6)); }
}

/* Dim the OTHER cards as one is chosen (focus the eye) */
.cotd-chooser:has(.cotd-card.is-chosen) .cotd-card:not(.is-chosen) {
  opacity: 0.35;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)) blur(1px);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Disable hover on non-input states (after reveal) */
.spread-frame:not(.is-input) .cotd-card {
  pointer-events: none;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .cotd-chooser {
    gap: 0.5rem;
    margin: 1rem auto 0.8rem;
  }
  .cotd-card {
    width: clamp(96px, 28vw, 140px);
  }
  .cotd-card[data-slot="0"] { transform: translateY(0) rotate(-4deg); }
  .cotd-card[data-slot="1"] { transform: translateY(-4px) rotate(0); }
  .cotd-card[data-slot="2"] { transform: translateY(0) rotate(4deg); }
  @media (hover: hover) {
    .cotd-card:hover {
      transform: translateY(-14px) scale(1.04) rotate(0);
    }
  }
}