/**
 * Poke Royale - Projectile Styles
 * Section 5: Projectile Styles
 * Contains: Basic projectile types, tower mega projectiles, animations
 */

/* ===== Base Projectile ===== */
.projectile {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 25;
    pointer-events: none;
}

/* ===== Type-Specific Projectiles ===== */

.projectile.electric {
    background: radial-gradient(circle, #fff 0%, #ffd700 40%, #ff8c00 100%);
    box-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00;
    animation: projectile-electric 0.15s linear infinite;
}

@keyframes projectile-electric {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-48%, -52%) scale(1.1); }
    50% { transform: translate(-52%, -48%) scale(0.95); }
    75% { transform: translate(-50%, -50%) scale(1.05); }
}

.projectile.fire {
    background: radial-gradient(circle, #fff 0%, #ff6b35 40%, #dc2626 100%);
    box-shadow: 0 0 15px #ff6b35, 0 0 30px #dc2626;
    animation: projectile-fire 0.2s linear infinite;
}

@keyframes projectile-fire {
    0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); filter: brightness(1.3); }
    100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

.projectile.water {
    background: radial-gradient(circle, #fff 0%, #60a5fa 40%, #2563eb 100%);
    box-shadow: 0 0 15px #60a5fa, 0 0 30px #2563eb;
    border-radius: 40% 60% 60% 40%;
    animation: projectile-water 0.3s linear infinite;
}

@keyframes projectile-water {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.projectile.psychic {
    background: radial-gradient(circle, #fff 0%, #f472b6 40%, #be185d 100%);
    box-shadow: 0 0 15px #f472b6, 0 0 30px #be185d;
    animation: projectile-psychic 0.4s ease-in-out infinite;
}

@keyframes projectile-psychic {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
}

.projectile.normal {
    background: radial-gradient(circle, #fff 0%, #a3a3a3 40%, #525252 100%);
    box-shadow: 0 0 10px #a3a3a3;
}

.projectile.dragon {
    background: radial-gradient(circle, #fff 0%, #a78bfa 40%, #7c3aed 100%);
    box-shadow: 0 0 15px #a78bfa, 0 0 30px #7c3aed;
    animation: projectile-dragon 0.25s linear infinite;
}

@keyframes projectile-dragon {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); box-shadow: 0 0 15px #a78bfa, 0 0 30px #7c3aed; }
    50% { transform: translate(-50%, -50%) scale(1.15) rotate(180deg); box-shadow: 0 0 25px #c084fc, 0 0 40px #9333ea; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); box-shadow: 0 0 15px #a78bfa, 0 0 30px #7c3aed; }
}

.projectile.fighting {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text y="18" font-size="18">👊</text></svg>') center/contain no-repeat;
    box-shadow: 0 0 15px #fb923c;
    animation: projectile-fighting 0.2s linear infinite;
}

@keyframes projectile-fighting {
    0%, 100% { transform: translate(-50%, -50%) rotate(-15deg); }
    50% { transform: translate(-50%, -50%) rotate(15deg) scale(1.1); }
}

.projectile.ghost {
    background: radial-gradient(circle, #fff 0%, #a855f7 40%, #7e22ce 100%);
    box-shadow: 0 0 15px #a855f7, 0 0 30px #7e22ce;
    animation: projectile-ghost 0.3s ease-in-out infinite;
}

@keyframes projectile-ghost {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
}

.projectile.grass {
    background: radial-gradient(circle, #fff 0%, #4ade80 40%, #16a34a 100%);
    box-shadow: 0 0 15px #4ade80, 0 0 30px #16a34a;
}

.projectile.rock {
    background: radial-gradient(circle, #fff 0%, #a8a29e 40%, #78716c 100%);
    box-shadow: 0 0 10px #a8a29e;
}

.projectile.ice {
    background: radial-gradient(circle, #fff 0%, #93c5fd 40%, #3b82f6 100%);
    box-shadow: 0 0 15px #93c5fd, 0 0 30px #60a5fa;
}

.projectile.poison {
    background: radial-gradient(circle, #fff 0%, #a855f7 40%, #7c3aed 100%);
    box-shadow: 0 0 15px #a855f7, 0 0 30px #9333ea;
    animation: projectile-poison 0.3s linear infinite;
}

@keyframes projectile-poison {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.2); }
}

.projectile.ground {
    background: radial-gradient(circle, #fff 0%, #d97706 40%, #92400e 100%);
    box-shadow: 0 0 10px #d97706;
}

/* ===== Tower Projectiles - Larger and More Impressive ===== */
.projectile.tower-projectile {
    width: 32px;
    height: 32px;
}

.projectile.tower-projectile.ice {
    width: 36px;
    height: 36px;
    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #67e8f9 30%, #0ea5e9 60%, #0369a1 100%);
    box-shadow: 0 0 25px #67e8f9, 0 0 50px #0ea5e9, 0 0 75px rgba(56, 189, 248, 0.5);
    animation: tower-ice-projectile 0.2s linear infinite;
}

@keyframes tower-ice-projectile {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1) rotate(0deg); 
        filter: brightness(1);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15) rotate(180deg); 
        filter: brightness(1.3);
    }
}

.projectile.tower-projectile.electric {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #fef08a 20%, #fcd34d 50%, #f59e0b 100%);
    box-shadow: 0 0 30px #fcd34d, 0 0 60px #fbbf24, 0 0 90px rgba(251, 191, 36, 0.6);
    animation: tower-electric-projectile 0.1s linear infinite;
    border-radius: 50%;
}

.projectile.tower-projectile.electric::before {
    content: '⚡';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    z-index: 2;
}

@keyframes tower-electric-projectile {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 30px #fcd34d, 0 0 60px #fbbf24; }
    25% { transform: translate(-48%, -52%) scale(1.2); box-shadow: 0 0 40px #fef08a, 0 0 80px #fcd34d; }
    50% { transform: translate(-52%, -50%) scale(0.9); box-shadow: 0 0 25px #f59e0b, 0 0 50px #d97706; }
    75% { transform: translate(-50%, -48%) scale(1.15); box-shadow: 0 0 35px #fcd34d, 0 0 70px #fbbf24; }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 30px #fcd34d, 0 0 60px #fbbf24; }
}

.projectile.tower-projectile.fire {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #fbbf24 20%, #f97316 50%, #dc2626 80%, #991b1b 100%);
    box-shadow: 0 0 30px #f97316, 0 0 60px #dc2626, 0 0 90px rgba(220, 38, 38, 0.6);
    animation: tower-fire-projectile 0.15s linear infinite;
}

@keyframes tower-fire-projectile {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: brightness(1); }
    33% { transform: translate(-50%, -50%) scale(1.2) rotate(120deg); filter: brightness(1.4); }
    66% { transform: translate(-50%, -50%) scale(0.95) rotate(240deg); filter: brightness(1.2); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); filter: brightness(1); }
}

.projectile.tower-projectile.psychic {
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #f9a8d4 20%, #ec4899 50%, #be185d 80%, #831843 100%);
    box-shadow: 0 0 25px #f472b6, 0 0 50px #ec4899, 0 0 75px rgba(236, 72, 153, 0.5);
    animation: tower-psychic-projectile 0.3s ease-in-out infinite;
}

@keyframes tower-psychic-projectile {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1; 
        box-shadow: 0 0 25px #f472b6, 0 0 50px #ec4899;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.4); 
        opacity: 0.7; 
        box-shadow: 0 0 40px #f9a8d4, 0 0 80px #f472b6;
    }
}

/* ===== Deploy Zone Indicator ===== */
.deploy-zone-indicator {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 15;
    background: repeating-linear-gradient(
        45deg,
        rgba(74, 222, 128, 0.1),
        rgba(74, 222, 128, 0.1) 10px,
        rgba(34, 197, 94, 0.2) 10px,
        rgba(34, 197, 94, 0.2) 20px
    );
    border: 2px dashed rgba(74, 222, 128, 0.6);
    opacity: 0;
    transition: opacity 0.3s, top 0.5s, height 0.5s;
}

.deploy-zone-indicator.active {
    opacity: 1;
    animation: deploy-zone-pulse 1.5s ease-in-out infinite;
}

@keyframes deploy-zone-pulse {
    0%, 100% { border-color: rgba(74, 222, 128, 0.6); }
    50% { border-color: rgba(74, 222, 128, 1); box-shadow: inset 0 0 30px rgba(74, 222, 128, 0.2); }
}

/* New zone unlocked flash effect */
.deploy-zone-extended {
    animation: zone-extended-flash 0.8s ease-out;
}

@keyframes zone-extended-flash {
    0% { background: rgba(74, 222, 128, 0.5); }
    100% { background: repeating-linear-gradient(45deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.1) 10px, rgba(34, 197, 94, 0.2) 10px, rgba(34, 197, 94, 0.2) 20px); }
}

/* Splash damage expand effect */
@keyframes splash-expand {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Tower impact ring for legendary attacks */
@keyframes tower-impact-ring {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-width: 4px; }
    60% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; border-width: 2px; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 1px; }
}