/**
 * THATCHESS - FEEL INCREÍBLE
 * Animaciones perfeccionadas y micro-interacciones
 */

/* ===================================================
   ANIMACIONES DE PIEZAS - PERFECCIONADAS
   =================================================== */

/* Movimiento suave de piezas */
.piece {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 200ms var(--tc-ease-out);
  will-change: transform;
}

/* Hover sobre pieza - Lift effect más sutil */
.square.hover .piece,
.square:hover .piece:not(.captured) {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pieza seleccionada - Breathing effect */
.square.selected .piece {
  animation: tc-piece-breathe 1.5s ease-in-out infinite;
}

@keyframes tc-piece-breathe {
  0%, 100% {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
  }
  50% {
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  }
}

/* Animación de movimiento - Mejorada */
.piece-moving {
  animation: tc-piece-move 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 100;
}

@keyframes tc-piece-move {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2) translateY(-8px);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* Animación de captura - Dramática */
.piece-captured {
  animation: tc-piece-capture 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}

@keyframes tc-piece-capture {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  40% {
    transform: scale(1.3) rotate(15deg) translateY(-12px);
    opacity: 0.8;
    filter: brightness(1.2);
  }
  70% {
    transform: scale(0.8) rotate(45deg) translateY(8px);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.2) rotate(90deg) translateY(20px);
    opacity: 0;
    filter: brightness(0.5);
  }
}

/* Preview de movimiento - Ghost piece */
.piece-preview {
  opacity: 0.35;
  filter: grayscale(50%);
  animation: tc-piece-preview-pulse 1.5s ease-in-out infinite;
}

@keyframes tc-piece-preview-pulse {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.55;
  }
}

/* ===================================================
   FEEDBACK VISUAL DE CASILLAS
   =================================================== */

/* Casilla clickeada - Micro-feedback */
.square:active {
  transform: scale(0.98);
  transition: transform 80ms var(--tc-ease-out);
}

/* Legal move dots - Mejorados */
.dot {
  animation: tc-dot-appear 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-dot-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Hover sobre legal move */
.square.legal-move:hover .dot {
  transform: scale(1.3);
  transition: transform 150ms var(--tc-ease-out);
}

/* Capture ring - Mejorado */
.capture-ring {
  animation: tc-ring-appear 250ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-ring-appear {
  0% {
    transform: scale(0.5) rotate(0deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* ===================================================
   MATCH FOUND - CELEBRATION
   =================================================== */

/* Match found - Confetti particles */
.tc-match-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1000;
}

.tc-confetti-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: tc-confetti-fall 3s ease-out forwards;
}

@keyframes tc-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* Match found - Screen flash */
.tc-match-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  animation: tc-flash 600ms ease-out forwards;
}

@keyframes tc-flash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Match found - Icon bounce */
.tc-match-found-icon {
  animation: tc-icon-bounce 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-icon-bounce {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(10deg);
  }
  70% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ===================================================
   CELEBRATION STATES - WIN/LOSE/DRAW
   =================================================== */

/* Victory celebration */
.tc-victory-state {
  animation: tc-victory-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-victory-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  60% {
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Victory icon - Trophy bounce */
.tc-victory-icon {
  animation: tc-trophy-bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes tc-trophy-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-5deg);
  }
  75% {
    transform: translateY(-15px) rotate(5deg);
  }
}

/* Victory glow effect */
.tc-victory-glow {
  position: relative;
}

.tc-victory-glow::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
  animation: tc-glow-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes tc-glow-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Defeat state - Subtle fade in */
.tc-defeat-state {
  animation: tc-defeat-entrance 500ms ease-out forwards;
}

@keyframes tc-defeat-entrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Draw state - Balance animation */
.tc-draw-icon {
  animation: tc-balance 2s ease-in-out infinite;
}

@keyframes tc-balance {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* ===================================================
   MICRO-INTERACCIONES - BUTTONS
   =================================================== */

/* Button click - Ripple effect */
.tc-btn {
  position: relative;
  overflow: hidden;
}

.tc-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.tc-btn:active::after {
  width: 300px;
  height: 300px;
  transition: width 0s, height 0s;
}

/* Button hover - Subtle lift mejorado */
.tc-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tc-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 80ms ease-out;
}

/* ===================================================
   INPUT FOCUS - ENHANCED
   =================================================== */

.tc-input:focus {
  border-color: var(--tc-accent-red);
  box-shadow: 0 0 0 4px rgba(255, 62, 62, 0.1);
  transform: scale(1.01);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===================================================
   LOADING STATES - ENHANCED
   =================================================== */

/* Spinner - Smooth rotation */
.tc-spinner {
  animation: tc-spin-smooth 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes tc-spin-smooth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loading dots - Wave effect */
.tc-loading-dots span {
  animation: tc-dot-wave 1.4s ease-in-out infinite;
}

.tc-loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.tc-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.tc-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes tc-dot-wave {
  0%, 60%, 100% {
    transform: translateY(0) scale(1);
    background: var(--tc-gray-600);
  }
  30% {
    transform: translateY(-10px) scale(1.3);
    background: var(--tc-white-pure);
  }
}

/* ===================================================
   SCREEN TRANSITIONS
   =================================================== */

/* Panel slide in - Mejorado */
.panel-content.active {
  animation: tc-panel-slide-smooth 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-panel-slide-smooth {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===================================================
   TOAST NOTIFICATIONS - ENHANCED
   =================================================== */

/* Toast slide up con bounce */
@keyframes tc-toast-slide-up {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(100px) scale(0.9);
  }
  60% {
    transform: translateX(-50%) translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ===================================================
   SCORE/ELO CHANGE ANIMATION
   =================================================== */

/* Score pop */
.tc-score-change {
  animation: tc-score-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-score-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ELO increase - Green glow */
.tc-elo-increase {
  color: var(--tc-accent-green);
  animation: tc-elo-glow-green 1s ease-out forwards;
}

@keyframes tc-elo-glow-green {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}

/* ELO decrease - Red glow */
.tc-elo-decrease {
  color: var(--tc-accent-red);
  animation: tc-elo-glow-red 1s ease-out forwards;
}

@keyframes tc-elo-glow-red {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 62, 62, 0.8);
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}

/* ===================================================
   PROGRESSIVE DISCLOSURE
   =================================================== */

/* Reveal animation for new content */
.tc-reveal {
  animation: tc-reveal-slide 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tc-reveal-slide {
  0% {
    opacity: 0;
    transform: translateY(20px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

/* ===================================================
   ACCESSIBILITY - REDUCED MOTION
   =================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .piece,
  .tc-btn {
    transition: none !important;
  }
  
  .tc-btn:hover {
    transform: none !important;
  }
}

/* ===================================================
   PERFORMANCE OPTIMIZATION
   =================================================== */

/* GPU acceleration for animated elements */
.piece,
.tc-btn,
.panel-content,
.tc-match-found-icon,
.tc-victory-icon {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}