/**
 * Shuffle Animation — Leque de embaralhamento (3 ciclos)
 * Componente: ShuffleAnimator
 * Mobile-first · responsivo
 *
 * ShuffleAnimator cria um .shuffle-stage (overlay fixed) no document.body
 * e insere 69 .shuffle-card posicionadas sobre o pile.
 * Cada carta usa CSS transitions com duration/delay controlados via JS.
 *
 * Não usa @keyframes — toda a orquestração temporal é feita em JS.
 */

/* ============================================
   OVERLAY DA ANIMAÇÃO
   Z-index 7000: acima da mesa, abaixo do deck-deal (8500)
   ============================================ */

.shuffle-stage {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        7000;
  overflow:       hidden;
}

/* ============================================
   CARTA INDIVIDUAL
   Posição/dimensão definidas via JS (getBoundingClientRect do pile).
   Transition duraion/delay definidos via JS antes de cada fase.
   ============================================ */

.shuffle-card {
  position:            fixed;
  background-image:    url("../img/carta_verso.png");
  background-size:     cover;
  background-position: center;

  border-radius:       clamp(5px, 1vw, 9px);

  /* GPU acceleration — apenas transform muda */
  will-change:           transform;
  transform-origin:      center center;
  backface-visibility:   hidden;

  /* transition-property fixo; duration/delay definidos inline pelo JS */
  transition-property:        transform;
  transition-timing-function: ease-in-out;
}

/* ============================================
   ACESSIBILIDADE — prefers-reduced-motion
   JS também verifica e colapsa stagger/duração a 1ms
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .shuffle-card {
    transition-duration: 1ms !important;
    transition-delay:    0ms !important;
  }
}

/* ============================================
   KEYFRAMES — FAN-OUT ESQUERDO
   Carta sai para a esquerda, rotaciona CCW e volta
   ============================================ */

@keyframes deckCardFanLeft {
  0%   {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    opacity: 1;
  }
  20%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) - var(--shuffle-dx) * 0.6),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy) * 0.4)
      )
      rotate(calc(var(--card-base-rot, 0deg) - var(--shuffle-rot) * 0.5))
      scale(1.03);
  }
  40%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) - var(--shuffle-dx)),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy))
      )
      rotate(calc(var(--card-base-rot, 0deg) - var(--shuffle-rot)))
      scale(var(--shuffle-scale));
    opacity: 1;
  }
  70%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) - var(--shuffle-dx) * 0.3),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy) * 0.2)
      )
      rotate(calc(var(--card-base-rot, 0deg) - var(--shuffle-rot) * 0.2))
      scale(1.01);
  }
  100% {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    opacity: 1;
  }
}

/* ============================================
   KEYFRAMES — FAN-OUT DIREITO
   Carta sai para a direita, rotaciona CW e volta
   ============================================ */

@keyframes deckCardFanRight {
  0%   {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    opacity: 1;
  }
  20%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) + var(--shuffle-dx) * 0.6),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy) * 0.4)
      )
      rotate(calc(var(--card-base-rot, 0deg) + var(--shuffle-rot) * 0.5))
      scale(1.03);
  }
  40%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) + var(--shuffle-dx)),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy))
      )
      rotate(calc(var(--card-base-rot, 0deg) + var(--shuffle-rot)))
      scale(var(--shuffle-scale));
    opacity: 1;
  }
  70%  {
    transform:
      translate(
        calc(var(--card-base-tx, 0px) + var(--shuffle-dx) * 0.3),
        calc(var(--card-base-ty, 0px) + var(--shuffle-dy) * 0.2)
      )
      rotate(calc(var(--card-base-rot, 0deg) + var(--shuffle-rot) * 0.2))
      scale(1.01);
  }
  100% {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    opacity: 1;
  }
}

/* ============================================
   KEYFRAMES — TOPO (carta mais visível)
   Lifts slightly upward and returns
   ============================================ */

@keyframes deckCardTop {
  0%   {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    filter: brightness(1);
  }
  25%  {
    transform:
      translate(
        var(--card-base-tx, 0px),
        calc(var(--card-base-ty, 0px) - 14px)
      )
      rotate(var(--card-base-rot, 0deg))
      scale(1.05);
    filter: brightness(1.12);
  }
  55%  {
    transform:
      translate(
        var(--card-base-tx, 0px),
        calc(var(--card-base-ty, 0px) - 6px)
      )
      rotate(var(--card-base-rot, 0deg))
      scale(1.02);
    filter: brightness(1.05);
  }
  100% {
    transform: var(--card-base-transform, translate(0,0) rotate(0deg));
    filter: brightness(1);
  }
}

/* ============================================
   CLASSES DE ATIVAÇÃO POR CARTA
   Adicionadas/removidas pelo DeckShuffleAnimator por carta individual
   ============================================ */

/**
 * Base: todas as cartas animadas herdam estes valores.
 * JS define --card-base-tx, --card-base-ty, --card-base-rot
 * e --card-base-transform no style inline de cada carta.
 */
.card-shuffle-left,
.card-shuffle-right,
.card-shuffle-top {
  will-change:      transform, opacity;
  transform-origin: center center;
}

.card-shuffle-left {
  animation: deckCardFanLeft var(--shuffle-duration, 1100ms) cubic-bezier(0.22, 0.68, 0, 1.15) forwards;
}

.card-shuffle-right {
  animation: deckCardFanRight var(--shuffle-duration, 1100ms) cubic-bezier(0.22, 0.68, 0, 1.15) forwards;
}

.card-shuffle-top {
  animation: deckCardTop var(--shuffle-duration, 1100ms) cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* ============================================
   RESPONSIVIDADE — PORTRAIT ≤ 480px
   ============================================ */

@media (orientation: portrait) and (max-width: 480px) {
  :root {
    --shuffle-dx:       16px;
    --shuffle-dy:       -7px;
    --shuffle-rot:       6deg;
    --shuffle-scale:     1.05;
    --shuffle-duration: 950ms;
  }
}

/* ============================================
   RESPONSIVIDADE — LANDSCAPE ≤ 480px
   ============================================ */

@media (orientation: landscape) and (max-height: 480px) {
  :root {
    --shuffle-dx:       20px;
    --shuffle-dy:       -8px;
    --shuffle-rot:       7deg;
    --shuffle-scale:     1.04;
    --shuffle-duration: 950ms;
  }
}

/* ============================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .card-shuffle-left,
  .card-shuffle-right,
  .card-shuffle-top {
    animation-duration: 1ms !important;
    animation-delay:    0ms !important;
  }
}