/* ========================================
   transitions.css — animaciones y transiciones
   incluye el sistema de glow de equivalencia
   ======================================== */

/* --- glow de equivalencia durante transformacion --- */
.card.transform-glow {
  z-index: 5;
}

.card.transform-glow[data-equiv="0"] {
  box-shadow: var(--shadow-glow-0);
}
.card.transform-glow[data-equiv="1"] {
  box-shadow: var(--shadow-glow-1);
}
.card.transform-glow[data-equiv="2"] {
  box-shadow: var(--shadow-glow-2);
}
.card.transform-glow[data-equiv="3"] {
  box-shadow: var(--shadow-glow-3);
}

/* --- flip de transformacion --- */
.card.transform-flip {
  animation: equivFlip 500ms var(--ease-smooth) both;
}

@keyframes equivFlip {
  0%   { transform: rotateY(0deg) scale(1); }
  40%  { transform: rotateY(90deg) scale(0.9); }
  60%  { transform: rotateY(90deg) scale(0.9); }
  100% { transform: rotateY(0deg) scale(1); }
}

/* --- carta que aparece (juego nuevo tiene mas cartas) --- */
.card.transform-appear {
  animation: equivAppear 400ms var(--ease-out-back) both;
}

@keyframes equivAppear {
  0%   { opacity: 0; transform: scale(0) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- carta que desaparece --- */
.card.transform-disappear {
  animation: equivDisappear 300ms ease both;
  pointer-events: none;
}

@keyframes equivDisappear {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0) rotate(15deg); }
}

/* --- transiciones de pantalla --- */
.screen {
  animation: none;
}

.screen.active {
  animation: screenIn 300ms var(--ease-smooth) both;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- error shake --- */
.shake {
  animation: shake 400ms ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* --- seleccion de carta con glow --- */
.card.selected[data-equiv="0"] { box-shadow: var(--shadow-glow-0); }
.card.selected[data-equiv="1"] { box-shadow: var(--shadow-glow-1); }
.card.selected[data-equiv="2"] { box-shadow: var(--shadow-glow-2); }
.card.selected[data-equiv="3"] { box-shadow: var(--shadow-glow-3); }
.card.selected:not([data-equiv]) { box-shadow: 0 0 16px 4px rgba(255,255,255,0.4); }

/* --- hero card transform (mas dramatico) --- */
.hero-card.transform-flip {
  animation: heroFlip 600ms var(--ease-smooth) both;
}

@keyframes heroFlip {
  0%   { transform: rotateY(0deg) scale(1); filter: brightness(1); }
  35%  { transform: rotateY(90deg) scale(0.85); filter: brightness(1.3); }
  65%  { transform: rotateY(90deg) scale(0.85); filter: brightness(1.3); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}

.hero-card.transform-glow[data-equiv="0"] { box-shadow: 0 0 24px 8px rgba(245,166,35,0.6); }
.hero-card.transform-glow[data-equiv="1"] { box-shadow: 0 0 24px 8px rgba(231,76,60,0.6); }
.hero-card.transform-glow[data-equiv="2"] { box-shadow: 0 0 24px 8px rgba(52,152,219,0.6); }
.hero-card.transform-glow[data-equiv="3"] { box-shadow: 0 0 24px 8px rgba(39,174,96,0.6); }

/* --- franja de equivalencias --- */
.equiv-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
  flex-wrap: wrap;
}

.equiv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-ui);
  transition: all 300ms var(--ease-smooth);
}

.equiv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.equiv-arrow {
  opacity: 0.4;
  font-size: 0.65rem;
}

.equiv-name {
  text-transform: lowercase;
  opacity: 0.9;
}

/* --- modal transitions --- */
#modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}

#modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

#modal-overlay.active .modal-content {
  animation: modalIn 300ms var(--ease-out-back);
}

@keyframes modalIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- color picker --- */
.color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.color-choice {
  padding: 16px 24px;
  background: var(--choice-bg);
  color: var(--choice-text);
  border-radius: 10px;
  font-weight: 900;
  font-family: var(--font-ui);
  border: 2px solid rgba(255,255,255,0.3);
  font-size: 0.85rem;
  text-transform: lowercase;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.color-choice:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}