/**
 * Advanced Gem Movement Styles
 * 
 * CSS styles for enhanced drag-and-drop gem interactions
 * Requirements: 7.1, 7.2, 7.3, 7.4, 7.5
 */

/* Enhanced Gem Interaction States */
.gem {
    cursor: pointer;
    touch-action: none; /* Prevent default touch behaviors */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Gem Pressed State */
.gem.gem-pressed {
    transform: scale(0.95);
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transition: all 0.1s ease-out;
}

/* Gem Dragging State */
.gem.dragging {
    z-index: 100 !important;
    cursor: grabbing;
    filter: brightness(1.3) saturate(1.2);
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.2);
    transition: none; /* Disable transitions during drag */
}

/* Swap Target Highlight */
.gem.swap-target {
    z-index: 50 !important;
    border: 3px solid rgba(0, 255, 255, 0.8) !important;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.6),
        inset 0 0 15px rgba(0, 255, 255, 0.2);
    animation: swapTargetPulse 0.8s ease-in-out infinite;
}

/* Enhanced Gem Selection States */
.gem.selected {
    transform: scale(1.15);
    border: 3px solid #FFD700;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.9),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
    filter: brightness(1.3) saturate(1.2);
    animation: selectedGemPulse 1s ease-in-out infinite;
    z-index: 10;
}

.gem.selected::before {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 16px;
    animation: sparkleRotate 2s linear infinite;
    z-index: 11;
}

.gem.selected::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #FFD700;
    border-radius: 12px;
    animation: selectedBorder 2s linear infinite;
    z-index: 9;
}

/* Gem Hover Effects */
.gem:hover:not(.dragging):not(.selected) {
    transform: scale(1.08);
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* Gem Fall Animation States */
.gem.falling {
    z-index: 20;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gem.bouncing {
    animation: gemBounce 0.3s ease-out;
}

/* Enhanced Gem Entry Animation */
.gem.gem-entering {
    animation: gemEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 15;
}

.gem.gem-entering::before {
    content: '⭐';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    animation: entrySparkle 0.6s ease-out;
    z-index: 16;
}

/* Swap Animation Effects */
.gem.swapping {
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gem.swap-invalid {
    animation: invalidSwapShake 0.4s ease-in-out;
}

/* Physics-based Fall Effects */
.gem.physics-fall {
    transition: none;
    z-index: 25;
}

/* Enhanced Particle Effects for Gem Interactions */
.gem-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

.selection-sparkle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #FFD700, #FFA500);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

.destruction-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 0 10px currentColor;
}

/* Animation Keyframes */
@keyframes swapTargetPulse {
    0%, 100% {
        border-color: rgba(0, 255, 255, 0.8);
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.6),
            inset 0 0 15px rgba(0, 255, 255, 0.2);
    }
    50% {
        border-color: rgba(0, 255, 255, 1);
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.8),
            inset 0 0 20px rgba(0, 255, 255, 0.3);
    }
}

@keyframes selectedGemPulse {
    0%, 100% {
        transform: scale(1.15);
        filter: brightness(1.3) saturate(1.2);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.5) saturate(1.4);
    }
}

@keyframes sparkleRotate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes selectedBorder {
    0% {
        border-color: #FFD700;
        opacity: 1;
    }
    50% {
        border-color: #FFA500;
        opacity: 0.7;
    }
    100% {
        border-color: #FFD700;
        opacity: 1;
    }
}

@keyframes gemBounce {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-8px) scale(1.05); }
    60% { transform: translateY(0) scale(0.98); }
    80% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes gemEnter {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
        filter: brightness(2);
    }
    50% {
        transform: scale(1.2) rotate(90deg);
        opacity: 0.8;
        filter: brightness(1.5);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes entrySparkle {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes invalidSwapShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gem.dragging {
        box-shadow: 
            0 6px 20px rgba(255, 215, 0, 0.5),
            0 0 25px rgba(255, 255, 255, 0.2);
    }
    
    .gem.selected {
        transform: scale(1.1);
    }
    
    .gem:hover:not(.dragging):not(.selected) {
        transform: scale(1.05);
    }
}

@media (max-width: 480px) {
    .gem.dragging {
        box-shadow: 
            0 4px 15px rgba(255, 215, 0, 0.4),
            0 0 20px rgba(255, 255, 255, 0.15);
    }
    
    .gem.selected {
        transform: scale(1.08);
        border-width: 2px;
    }
    
    .gem.selected::before {
        font-size: 14px;
        top: -8px;
        right: -8px;
    }
}

/* Performance Optimizations */
.gem {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.gem.dragging,
.gem.falling,
.gem.swapping {
    will-change: transform;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .gem,
    .gem.selected,
    .gem.dragging,
    .gem.swap-target {
        animation: none !important;
        transition: none !important;
    }
    
    .gem:hover {
        transform: scale(1.02);
    }
    
    .gem.selected {
        transform: scale(1.05);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .gem.selected {
        border-color: #FFFF00;
        box-shadow: 0 0 10px #FFFF00;
    }
    
    .gem.swap-target {
        border-color: #00FFFF !important;
        box-shadow: 0 0 10px #00FFFF;
    }
}
/*
 Enhanced Particle Effects and Screen Juice */
.animation-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    will-change: transform, opacity;
}

.combo-flow-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1001;
    will-change: transform, opacity;
    filter: blur(0.5px);
}

.sparkle-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1002;
    will-change: transform, opacity;
    background: linear-gradient(45deg, #FFD700, #FFF);
    box-shadow: 0 0 12px #FFD700;
}

/* Enhanced Screen Shake Effects */
.screen-shake-impact {
    animation: screenShakeImpact 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.screen-shake-horizontal {
    animation: screenShakeHorizontal 0.3s ease-out;
}

.screen-shake-vertical {
    animation: screenShakeVertical 0.3s ease-out;
}

.screen-shake-circular {
    animation: screenShakeCircular 0.5s ease-out;
}

@keyframes screenShakeImpact {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-8px, -4px) rotate(-1deg); }
    20% { transform: translate(6px, -2px) rotate(0.5deg); }
    30% { transform: translate(-4px, 3px) rotate(-0.5deg); }
    40% { transform: translate(3px, -1px) rotate(0.3deg); }
    50% { transform: translate(-2px, 2px) rotate(-0.2deg); }
    60% { transform: translate(1px, -1px) rotate(0.1deg); }
    70% { transform: translate(-1px, 1px) rotate(-0.1deg); }
    80% { transform: translate(0.5px, -0.5px) rotate(0.05deg); }
    90% { transform: translate(-0.3px, 0.3px) rotate(-0.03deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes screenShakeHorizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes screenShakeVertical {
    0%, 100% { transform: translateY(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-4px); }
    20%, 40%, 60%, 80% { transform: translateY(4px); }
}

@keyframes screenShakeCircular {
    0% { transform: rotate(0deg) translate(0px) rotate(0deg); }
    25% { transform: rotate(90deg) translate(3px) rotate(-90deg); }
    50% { transform: rotate(180deg) translate(3px) rotate(-180deg); }
    75% { transform: rotate(270deg) translate(3px) rotate(-270deg); }
    100% { transform: rotate(360deg) translate(0px) rotate(-360deg); }
}

/* Color Flash Effects */
.color-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: screen;
    opacity: 0;
}

.color-flash-gold {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
}

.color-flash-red {
    background: radial-gradient(circle, rgba(255, 107, 107, 0.4) 0%, transparent 70%);
}

.color-flash-blue {
    background: radial-gradient(circle, rgba(0, 245, 255, 0.4) 0%, transparent 70%);
}

.color-flash-purple {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, transparent 70%);
}

/* Combo Chain Effects */
.combo-gem-highlight {
    position: relative;
    z-index: 10;
}

.combo-gem-highlight::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid;
    border-radius: 12px;
    animation: comboGlow 0.6s ease-in-out;
    z-index: -1;
}

.combo-level-1::before { border-color: #FFD700; box-shadow: 0 0 15px #FFD700; }
.combo-level-2::before { border-color: #FF6B6B; box-shadow: 0 0 20px #FF6B6B; }
.combo-level-3::before { border-color: #4ECDC4; box-shadow: 0 0 25px #4ECDC4; }
.combo-level-4::before { border-color: #8A2BE2; box-shadow: 0 0 30px #8A2BE2; }
.combo-level-5::before { border-color: #FF0080; box-shadow: 0 0 35px #FF0080; }

@keyframes comboGlow {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Performance Optimizations */
.animation-particle,
.combo-flow-particle,
.sparkle-particle {
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animation-particle,
    .combo-flow-particle,
    .sparkle-particle {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
    }
    
    .screen-shake-impact,
    .screen-shake-horizontal,
    .screen-shake-vertical,
    .screen-shake-circular {
        animation: none !important;
    }
}