/* Lucky Dip: deal-and-flip reveal
   Load AFTER /lucky-dip.css:
   <link rel="stylesheet" href="/lucky-dip-reveal.css">

   Needs no HTML or JS changes. It assumes lucky-dip.js already:
   - adds .is-revealed to each .dip-card (with a --delay stagger), and
   - toggles .is-shuffling on #dip-button while drawing.
   Both are what lucky-dip.css already expects. */

/* --- Card: drops in face-down, pauses, then flips to show the cover --- */

.dip-card {
  position: relative;
  --tilt: -5deg;
}
.dip-card:nth-child(2) { --tilt: 4deg; }
.dip-card:nth-child(3) { --tilt: -3deg; }
.dip-card:nth-child(4) { --tilt: 5deg; }
.dip-card:nth-child(5) { --tilt: -4deg; }

.dip-card.is-revealed {
  animation: dip-deal-flip 1.5s cubic-bezier(.22, .8, .3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* Card back, sits on top until the flip passes its halfway point */
.dip-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  border: 1px solid #e4a78b9a;
  background:
    url('/music-hub-card-logo.svg') center / 88% auto no-repeat,
    radial-gradient(circle at 55% 25%, #8d60784d, transparent 52%),
    linear-gradient(150deg, #312a38, #161923);
  opacity: 0;
  pointer-events: none;
}
.dip-card.is-revealed::after {
  animation: dip-back-hide 1.5s linear forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes dip-deal-flip {
  /* thrown in from above, face-down, slightly tilted */
  0%   { opacity: 0; transform: translateY(-80px) scale(.7) rotate(var(--tilt)); pointer-events: none; }
  /* lands face-down */
  30%  { opacity: 1; transform: translateY(0) scale(1) rotate(0) scaleX(1); pointer-events: none; }
  /* short beat so the eye catches the card back */
  52%  { transform: translateY(0) scale(1) rotate(0) scaleX(1); pointer-events: none; }
  /* edge-on: this is where the back swaps for the cover */
  66%  { transform: translateY(-6px) scale(1.03) rotate(0) scaleX(0); pointer-events: none; }
  /* opens out with a small overshoot, then settles */
  86%  { transform: translateY(0) scale(1) rotate(0) scaleX(1.04); pointer-events: none; }
  99%  { pointer-events: none; }
  100% { opacity: 1; transform: none; pointer-events: auto; }
}

@keyframes dip-back-hide {
  0%   { opacity: 1; }
  65%  { opacity: 1; }
  66%  { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Hero deck: the three stacked cards shuffle while a draw is running ---
   Uses :has(), supported by current Chrome, Edge, Safari and Firefox.
   Older browsers just skip it. */

.dip-hero:has(.dip-button.is-shuffling) .dip-deck-back {
  animation: dip-shuffle-back .65s ease-in-out infinite;
}
.dip-hero:has(.dip-button.is-shuffling) .dip-deck-middle {
  animation: dip-shuffle-middle .65s ease-in-out infinite;
}
.dip-hero:has(.dip-button.is-shuffling) .dip-deck-front {
  animation: dip-shuffle-front .65s ease-in-out infinite;
}

@keyframes dip-shuffle-back {
  0%, 100% { transform: translate(65px, 6px) rotate(17deg); }
  50%      { transform: translate(-58px, -14px) rotate(-9deg); }
}
@keyframes dip-shuffle-middle {
  0%, 100% { transform: translate(-47px, 1px) rotate(-12deg); }
  50%      { transform: translate(52px, 10px) rotate(14deg); }
}
@keyframes dip-shuffle-front {
  0%, 100% { transform: translate(5px, -7px) rotate(3deg); }
  50%      { transform: translate(5px, -24px) rotate(-2deg); }
}

/* --- Reduced motion: no drop, no flip, no shuffle. Cards just fade in. --- */

@media (prefers-reduced-motion: reduce) {
  .dip-card::after { display: none; }
  .dip-card.is-revealed {
    animation: dip-fade-only .3s ease forwards !important;
    animation-delay: 0ms !important;
  }
  .dip-hero:has(.dip-button.is-shuffling) .dip-deck-card { animation: none !important; }
}
@keyframes dip-fade-only {
  from { opacity: 0; transform: none; }
  to   { opacity: 1; transform: none; }
}