/**
 * Poke Royale - Pokemon Unit Styles
 * Section 4: Pokemon Unit Styles
 * Contains: Unit sprites, team indicators, movement animations, attack animations, death effects
 */

/* ===== Pokemon Units ===== */
.pokemon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transition: left 0.08s linear, top 0.08s linear;
}

.pokemon-sprite {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    image-rendering: auto;
    transform-origin: center bottom;
}

/* ===== Movement Animations ===== */

/* Walking animation - ground units bob and sway */
.pokemon.walking .pokemon-sprite {
    animation: pokemon-walk 0.4s ease-in-out infinite;
}

@keyframes pokemon-walk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-2deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-4px) rotate(2deg); }
}

/* Flying animation - floats up and down with slight tilt */
.pokemon.flying .pokemon-sprite {
    animation: pokemon-fly 1.2s ease-in-out infinite;
}

.pokemon.flying {
    z-index: 22;
}

.pokemon.flying .pokemon-team-indicator {
    transform: scale(0.8) translateY(10px);
    opacity: 0.5;
}

@keyframes pokemon-fly {
    0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
    50% { transform: translateY(-12px) rotate(1deg) scale(1.02); }
}

/* Flying shadow effect */
.pokemon.flying::before {
    content: '';
    position: absolute;
    bottom: -15px;
    width: 40px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: fly-shadow 1.2s ease-in-out infinite;
}

@keyframes fly-shadow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(0.7); opacity: 0.2; }
}

/* Idle animation - breathing effect */
.pokemon.idle .pokemon-sprite {
    animation: pokemon-idle 2s ease-in-out infinite;
}

@keyframes pokemon-idle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Running animation - faster movement */
.pokemon.running .pokemon-sprite {
    animation: pokemon-run 0.25s ease-in-out infinite;
}

@keyframes pokemon-run {
    0%, 100% { transform: translateY(0) rotate(-3deg) scaleX(1.05); }
    50% { transform: translateY(-6px) rotate(3deg) scaleX(0.95); }
}

/* ===== Direction Flipping ===== */
.pokemon.facing-left .pokemon-sprite {
    transform: scaleX(-1);
}

.pokemon.facing-left.walking .pokemon-sprite {
    animation: pokemon-walk-left 0.4s ease-in-out infinite;
}

@keyframes pokemon-walk-left {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    25% { transform: scaleX(-1) translateY(-4px) rotate(2deg); }
    50% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    75% { transform: scaleX(-1) translateY(-4px) rotate(-2deg); }
}

.pokemon.enemy .pokemon-sprite {
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)) hue-rotate(-15deg) saturate(1.2);
}

/* ===== HP Bar ===== */
.pokemon-hp-bar {
    width: 50px;
    height: 6px;
    background: #111;
    border-radius: 3px;
    margin-top: -8px;
    overflow: hidden;
    border: 1px solid #333;
}

.pokemon-hp-fill {
    height: 100%;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    transition: width 0.15s ease;
}

.pokemon.enemy .pokemon-hp-fill {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
}

/* ===== Team Indicator ===== */
.pokemon-team-indicator {
    position: absolute;
    bottom: -2px;
    width: 56px;
    height: 56px;
    border: 3px solid;
    border-radius: 50%;
    pointer-events: none;
}

.pokemon.player .pokemon-team-indicator { border-color: rgba(59, 76, 202, 0.7); }
.pokemon.enemy .pokemon-team-indicator { border-color: rgba(204, 0, 0, 0.7); }

/* ===== Type-Specific Attack Animations ===== */

/* Default melee - lunge forward */
.pokemon.attacking .pokemon-sprite {
    animation: attack-lunge 0.3s ease-out !important;
}

@keyframes attack-lunge {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.2) translateY(-8px); }
    50% { transform: scale(1.25) translateY(-5px); filter: brightness(1.3); }
    100% { transform: scale(1) translateY(0); }
}

/* FIGHTING type - Punch animation with forward thrust */
.pokemon.attacking.type-fighting .pokemon-sprite {
    animation: attack-punch 0.35s ease-out !important;
}

@keyframes attack-punch {
    0% { transform: scale(1) translateX(0) rotate(0deg); }
    20% { transform: scale(0.95) translateX(-8px) rotate(-5deg); }
    40% { transform: scale(1.15) translateX(15px) rotate(3deg); filter: brightness(1.4); }
    60% { transform: scale(1.2) translateX(20px) rotate(5deg); }
    100% { transform: scale(1) translateX(0) rotate(0deg); }
}

/* ELECTRIC type - Zap with vibration */
.pokemon.attacking.type-electric .pokemon-sprite {
    animation: attack-zap 0.4s ease-out !important;
}

@keyframes attack-zap {
    0% { transform: scale(1); filter: brightness(1); }
    10% { transform: scale(1.05) skewX(3deg); filter: brightness(1.8) drop-shadow(0 0 15px #ffd700); }
    20% { transform: scale(1.02) skewX(-3deg); filter: brightness(1.3); }
    30% { transform: scale(1.08) skewX(2deg); filter: brightness(2) drop-shadow(0 0 25px #ffff00); }
    50% { transform: scale(1.1); filter: brightness(2.5) drop-shadow(0 0 30px #fff700); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* FIRE type - Blaze burst */
.pokemon.attacking.type-fire .pokemon-sprite {
    animation: attack-fire 0.4s ease-out !important;
}

@keyframes attack-fire {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.15) translateY(-5px); filter: brightness(1.5) drop-shadow(0 0 20px #ff6b35) hue-rotate(-10deg); }
    50% { transform: scale(1.2) translateY(-8px); filter: brightness(1.8) drop-shadow(0 0 30px #ff4500); }
    100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

/* WATER type - Blast wave */
.pokemon.attacking.type-water .pokemon-sprite {
    animation: attack-water 0.4s ease-out !important;
}

@keyframes attack-water {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(0.9) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(3deg); filter: brightness(1.3) drop-shadow(0 0 20px #60a5fa); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1) rotate(0deg); }
}

/* PSYCHIC type - Mind pulse with glow */
.pokemon.attacking.type-psychic .pokemon-sprite {
    animation: attack-psychic 0.5s ease-out !important;
}

@keyframes attack-psychic {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.05); filter: brightness(1.5) drop-shadow(0 0 15px #f472b6); }
    50% { transform: scale(1.15); filter: brightness(2) drop-shadow(0 0 30px #e879f9) saturate(1.5); }
    75% { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 20px #c026d3); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* GHOST type - Phase in/out attack */
.pokemon.attacking.type-ghost .pokemon-sprite {
    animation: attack-ghost 0.45s ease-out !important;
}

@keyframes attack-ghost {
    0% { transform: scale(1); opacity: 1; }
    20% { transform: scale(0.9) translateY(5px); opacity: 0.4; }
    40% { transform: scale(1.3) translateY(-15px); opacity: 0.7; filter: drop-shadow(0 0 25px #a855f7); }
    60% { transform: scale(1.2); opacity: 1; filter: brightness(1.5); }
    100% { transform: scale(1); opacity: 1; }
}

/* DRAGON type - Roar with power surge */
.pokemon.attacking.type-dragon .pokemon-sprite {
    animation: attack-dragon 0.5s ease-out !important;
}

@keyframes attack-dragon {
    0% { transform: scale(1) rotate(0); }
    20% { transform: scale(1.1) rotate(-3deg); }
    40% { transform: scale(1.25) rotate(2deg); filter: brightness(1.6) drop-shadow(0 0 25px #7c3aed); }
    60% { transform: scale(1.3) rotate(-1deg); filter: brightness(1.8) drop-shadow(0 0 35px #a855f7); }
    100% { transform: scale(1) rotate(0); }
}

/* GRASS type - Vine whip motion */
.pokemon.attacking.type-grass .pokemon-sprite {
    animation: attack-grass 0.4s ease-out !important;
}

@keyframes attack-grass {
    0% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.05) rotate(-8deg); }
    50% { transform: scale(1.15) rotate(10deg); filter: brightness(1.4) drop-shadow(0 0 15px #4ade80); }
    75% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* NORMAL type - Body slam */
.pokemon.attacking.type-normal .pokemon-sprite {
    animation: attack-normal 0.35s ease-out !important;
}

@keyframes attack-normal {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.3) translateY(-12px); }
    70% { transform: scale(0.9) translateY(5px); }
    100% { transform: scale(1) translateY(0); }
}

/* ===== Hit & Death Effects ===== */

/* Hit flash with knockback feel */
.pokemon.hit .pokemon-sprite,
.tower.hit .tower-sprite {
    animation: hit-flash 0.15s ease-out !important;
    filter: brightness(2.5) drop-shadow(0 0 15px white) !important;
}

@keyframes hit-flash {
    0% { transform: scale(1); }
    50% { transform: scale(0.9) translateX(3px); }
    100% { transform: scale(1); }
}

/* Death animation */
.pokemon.dying {
    animation: death-fade 0.5s ease-out forwards;
}

@keyframes death-fade {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(0) rotate(360deg); opacity: 0; }
}