/* ============================================
   VETUU — Combat Styles
   Projectiles, melee swipes, damage numbers
   ============================================ */

/* ---------- Weapon Effects ---------- */

/* Projectile (laser bolt) - GPU accelerated via transform */
.projectile {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color, oklch(0.75 0.18 160)), var(--color, oklch(0.75 0.18 160)));
  box-shadow: 0 0 8px var(--color, oklch(0.75 0.18 160)), 0 0 16px var(--color, oklch(0.75 0.18 160));
  pointer-events: none;
  z-index: 150;
  transform-origin: left center;
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) rotate3d(0, 0, 1, var(--angle, 0deg));
  animation: projectile-fly 0.2s linear forwards;
}

.projectile.enhanced {
  width: 24px;
  height: 6px;
  box-shadow: 0 0 12px var(--color, oklch(0.75 0.18 160)), 0 0 24px var(--color, oklch(0.75 0.18 160));
}

@keyframes projectile-fly {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
    transform: translate3d(calc(var(--pos-x, 0) + var(--dx, 0)), calc(var(--pos-y, 0) + var(--dy, 0)), 0) rotate3d(0, 0, 1, var(--angle, 0deg));
  }
}

/* Melee swipe - GPU accelerated via transform */
.melee-swipe {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--tile-size) * 2);
  height: calc(var(--tile-size) * 2);
  pointer-events: none;
  z-index: 150;
  transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) rotate3d(0, 0, 1, var(--angle, 0deg));
  animation: swipe-arc 0.25s ease-out forwards;
}

.melee-swipe::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 20%, var(--color, oklch(0.65 0.055 210)) 50%, var(--color, oklch(0.65 0.055 210)));
  box-shadow: 0 0 8px var(--color, oklch(0.65 0.055 210));
  transform-origin: left center;
  transform: translate3d(0, -50%, 0);
  animation: swipe-slash 0.2s ease-out forwards;
}

.melee-swipe.enhanced::before {
  height: 5px;
  box-shadow: 0 0 12px var(--color, oklch(0.78 0.130 85)), 0 0 24px var(--color, oklch(0.78 0.130 85));
}

@keyframes swipe-arc {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes swipe-slash {
  0% { transform: translate3d(0, -50%, 0) scale3d(0.3, 1, 1) rotate3d(0, 0, 1, -30deg); }
  50% { transform: translate3d(0, -50%, 0) scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); }
  100% { transform: translate3d(0, -50%, 0) scale3d(0.3, 1, 1) rotate3d(0, 0, 1, 30deg); opacity: 0; }
}

/* Cleave effect - GPU accelerated via transform */
.cleave-effect {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--tile-size) * 3);
  height: calc(var(--tile-size) * 3);
  border: 3px solid var(--accent);
  pointer-events: none;
  z-index: 150;
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0);
  animation: cleave-expand 0.3s ease-out forwards;
  box-shadow: 0 0 20px var(--accent), inset 0 0 20px oklch(0.58 0.075 205 / 0.3);
}

@keyframes cleave-expand {
  from { 
    transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(0.3, 0.3, 1);
    opacity: 1;
  }
  to { 
    transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(1.5, 1.5, 1);
    opacity: 0;
  }
}

/* ---------- Damage Numbers - GPU accelerated via transform ---------- */
.damage-number {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-rarity-legendary);
  text-shadow: 2px 2px 2px var(--alpha-black-90);
  pointer-events: none;
  z-index: 200;
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0);
  animation: damage-float 1s ease-out forwards;
}

.damage-number.crit {
  font-size: 1.4rem;
  color: oklch(0.70 0.180 25);
}

.damage-number.player-damage {
  color: var(--danger);
}

.damage-number.heal-number {
  color: var(--success);
  font-size: 1.2rem;
}

.damage-number.burn-damage {
  color: oklch(0.70 0.180 50);
  text-shadow: 2px 2px 4px oklch(0.60 0.200 35 / 0.8), 0 0 8px oklch(0.70 0.180 50 / 0.6);
}

/* Vehicle collision damage - electric blue with impact feel */
.damage-number.vehicle-damage {
  color: oklch(0.75 0.15 220);
  text-shadow: 2px 2px 4px oklch(0.40 0.10 240 / 0.8), 0 0 12px oklch(0.75 0.15 220 / 0.8);
  font-size: 1.3rem;
  animation: damage-float-vehicle 0.8s ease-out forwards;
}

@keyframes damage-float-vehicle {
  0% { 
    opacity: 1; 
    transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(1.4, 0.7, 1);
  }
  15% {
    transform: translate3d(var(--pos-x, 0), calc(var(--pos-y, 0) - 8px), 0) scale3d(0.9, 1.2, 1);
  }
  100% { 
    opacity: 0; 
    transform: translate3d(var(--pos-x, 0), calc(var(--pos-y, 0) - 50px), 0) scale3d(0.7, 0.7, 1);
  }
}

@keyframes damage-float {
  0% { opacity: 1; transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0) scale3d(1, 1, 1); }
  100% { opacity: 0; transform: translate3d(var(--pos-x, 0), calc(var(--pos-y, 0) - 40px), 0) scale3d(0.8, 0.8, 1); }
}

/* ---------- Sense Ability Effects ---------- */

/* Push effect - expanding ring (GPU-accelerated via transform) */
.push-effect {
  border-radius: 50%;
  box-shadow: 0 0 20px var(--player-stamina-color), inset 0 0 10px oklch(0.58 0.075 205 / 0.3);
}

@keyframes push-expand-gpu {
  0% {
    opacity: 1;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(0, 0, 1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(1, 1, 1);
  }
}

/* Pull effect - contracting ring (GPU-accelerated via transform) */
.pull-effect {
  border-radius: 50%;
  box-shadow: 0 0 20px var(--player-stamina-color), inset 0 0 10px oklch(0.58 0.075 205 / 0.3);
}

@keyframes pull-contract-gpu {
  0% {
    opacity: 0.8;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(1, 1, 1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(0.1, 0.1, 1);
  }
}

/* Guard push effect - expanding ring (GPU-accelerated via transform) */
@keyframes guard-push-expand {
  0% {
    opacity: 1;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(0, 0, 1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--pos-x, 0) - 50%), calc(var(--pos-y, 0) - 50%), 0) scale3d(1, 1, 1);
  }
}