/**
 * Ez2 StudioFX - Effects Styles
 *
 * 特效動畫 CSS
 *
 * @package    Ez2_StudioFX
 * @since      2.0.0
 */

/* ========================================
   閃光特效
   ======================================== */

.ez2-fx-flash {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 999999 !important;
}

/* ========================================
   粒子特效
   ======================================== */

.ez2-fx-particle-container {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 999998 !important;
    overflow: visible !important;
}

.ez2-fx-particle {
    position: absolute !important;
    pointer-events: none !important;
    will-change: transform, opacity;
}

/* 粒子動畫 */
@keyframes ez2-particle-float {
    0% {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translateY(-100px);
        opacity: 0;
    }
}

@keyframes ez2-particle-explode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes ez2-particle-fall {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0.5;
    }
}

@keyframes ez2-particle-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========================================
   Sprite 特效
   ======================================== */

.ez2-fx-sprite {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 999997 !important;
    image-rendering: pixelated;
}

/* ========================================
   文字特效
   ======================================== */

.ez2-fx-text {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 999996 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    will-change: transform, opacity;
}

/* 傷害數字樣式 */
.ez2-fx-text.ez2-damage {
    color: #ff4444;
    font-weight: bold;
}

.ez2-fx-text.ez2-damage-critical {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1.5em !important;
}

.ez2-fx-text.ez2-heal {
    color: #44ff44;
}

.ez2-fx-text.ez2-exp {
    color: #44aaff;
}

.ez2-fx-text.ez2-gold {
    color: #ffd700;
}

/* ========================================
   光環特效
   ======================================== */

.ez2-fx-aura {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 999995 !important;
    border-radius: 50% !important;
    will-change: transform, opacity;
}

@keyframes ez2-fx-pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

@keyframes ez2-fx-glow {
    0%, 100% {
        box-shadow: 0 0 20px currentColor;
    }
    50% {
        box-shadow: 0 0 40px currentColor;
    }
}

/* ========================================
   震動動畫 (CSS fallback)
   ======================================== */

@keyframes ez2-shake-light {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2px, -1px); }
    20% { transform: translate(2px, 1px); }
    30% { transform: translate(-1px, 2px); }
    40% { transform: translate(1px, -1px); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -2px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, 2px); }
    90% { transform: translate(-2px, -2px); }
}

@keyframes ez2-shake-strong {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-10px, -5px); }
    20% { transform: translate(10px, 5px); }
    30% { transform: translate(-5px, 10px); }
    40% { transform: translate(5px, -5px); }
    50% { transform: translate(-10px, 5px); }
    60% { transform: translate(10px, -10px); }
    70% { transform: translate(-5px, 5px); }
    80% { transform: translate(5px, 10px); }
    90% { transform: translate(-10px, -10px); }
}

@keyframes ez2-shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    50% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    70% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    90% { transform: translateX(-2px); }
}

@keyframes ez2-shake-vertical {
    0%, 100% { transform: translateY(0); }
    10% { transform: translateY(-10px); }
    20% { transform: translateY(10px); }
    30% { transform: translateY(-8px); }
    40% { transform: translateY(8px); }
    50% { transform: translateY(-6px); }
    60% { transform: translateY(6px); }
    70% { transform: translateY(-4px); }
    80% { transform: translateY(4px); }
    90% { transform: translateY(-2px); }
}

/* ========================================
   呼吸動畫
   ======================================== */

@keyframes ez2-breathing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes ez2-breathing-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

/* ========================================
   閃爍動畫
   ======================================== */

@keyframes ez2-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes ez2-flash-in {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========================================
   漸變動畫
   ======================================== */

@keyframes ez2-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ez2-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ez2-fade-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

@keyframes ez2-fade-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* ========================================
   縮放動畫
   ======================================== */

@keyframes ez2-scale-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ez2-scale-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes ez2-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ========================================
   旋轉動畫
   ======================================== */

@keyframes ez2-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ez2-spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* ========================================
   彈跳動畫
   ======================================== */

@keyframes ez2-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
}

@keyframes ez2-bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================
   濾鏡類別
   ======================================== */

.ez2-filter-grayscale {
    filter: grayscale(1);
}

.ez2-filter-sepia {
    filter: sepia(1);
}

.ez2-filter-blur {
    filter: blur(5px);
}

.ez2-filter-brightness {
    filter: brightness(1.5);
}

.ez2-filter-contrast {
    filter: contrast(1.5);
}

.ez2-filter-invert {
    filter: invert(1);
}

.ez2-filter-saturate {
    filter: saturate(2);
}

.ez2-filter-hue-rotate {
    filter: hue-rotate(90deg);
}

/* ========================================
   輔助類別
   ======================================== */

.ez2-fx-active {
    position: relative;
}

.ez2-fx-no-pointer {
    pointer-events: none !important;
}

.ez2-fx-hidden {
    visibility: hidden !important;
}

/* 減少動態效果 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}