/**
 * ====================================================================
 * ESTILOS DE CÂMERA E IMPACTO DE BATALHA: (battle-camera.css)
 * ====================================================================
 * Fornece isolamento de viewport, aceleração por hardware (GPU),
 * classes utilitárias de tremor (shake), micro zoom (punch) e overlay
 * de hit flash para a Battle Arena (Fase PBA-012).
 *
 * Princípios Fundamentais:
 * - CAMERA SYSTEM ≠ GAME RULES;
 * - O wrapper de câmera isola os transforms, protegendo o restante da página;
 * - Animações utilizam estritamente 'transform' e 'opacity' (zero layout thrashing);
 * - Acessibilidade completa com suporte a prefers-reduced-motion.
 */

/* Contêiner da Câmera: envolve o palco de combate */
.battle-camera-wrapper,
[data-battle-camera] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Camada de Overlay para Flash de Impacto */
.hit-flash-overlay,
[data-hit-flash] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  will-change: opacity;
  border-radius: inherit;
}

/* Keyframes de Tremor (Shake) — LIGHT (2.5px) */
@keyframes cameraShakeLight {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(-2.5px, 1.8px); }
  40% { transform: translate(2px, -1.5px); }
  60% { transform: translate(-1.2px, 0.8px); }
  80% { transform: translate(0.6px, -0.4px); }
  100% { transform: translate(0px, 0px); }
}

/* Keyframes de Tremor (Shake) — MEDIUM (5.0px) */
@keyframes cameraShakeMedium {
  0% { transform: translate(0px, 0px); }
  15% { transform: translate(-5px, 3.5px); }
  35% { transform: translate(4px, -3px); }
  55% { transform: translate(-2.5px, 1.8px); }
  75% { transform: translate(1.2px, -0.8px); }
  100% { transform: translate(0px, 0px); }
}

/* Keyframes de Tremor (Shake) — HEAVY (8.5px) */
@keyframes cameraShakeHeavy {
  0% { transform: translate(0px, 0px); }
  15% { transform: translate(-8.5px, 6px); }
  35% { transform: translate(7px, -5px); }
  55% { transform: translate(-4px, 3px); }
  75% { transform: translate(2px, -1.5px); }
  90% { transform: translate(-1px, 0.5px); }
  100% { transform: translate(0px, 0px); }
}

/* Keyframes de Micro Zoom (Punch) */
@keyframes cameraPunchLight {
  0% { transform: scale(1); }
  30% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes cameraPunchMedium {
  0% { transform: scale(1); }
  30% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@keyframes cameraPunchHeavy {
  0% { transform: scale(1); }
  30% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Classes utilitárias opcionais */
.camera-shake-light {
  animation: cameraShakeLight 150ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.camera-shake-medium {
  animation: cameraShakeMedium 250ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.camera-shake-heavy {
  animation: cameraShakeHeavy 350ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.camera-punch-light {
  animation: cameraPunchLight 120ms ease-out forwards;
}

.camera-punch-medium {
  animation: cameraPunchMedium 180ms ease-out forwards;
}

.camera-punch-heavy {
  animation: cameraPunchHeavy 240ms ease-out forwards;
}

/* Acessibilidade — Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .battle-camera-wrapper,
  [data-battle-camera] {
    animation: none !important;
    transform: none !important;
  }

  .hit-flash-overlay,
  [data-hit-flash] {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Override explícito para modo sem animações via classe */
.reduced-motion .battle-camera-wrapper,
.reduced-motion [data-battle-camera] {
  animation: none !important;
  transform: none !important;
}

.reduced-motion .hit-flash-overlay,
.reduced-motion [data-hit-flash] {
  animation: none !important;
  opacity: 0 !important;
}