/* =========================================
   MAGMA WAVE EFFECT
   ========================================= */

.wave-burst {
    /* 
       ИСПРАВЛЕНИЕ: Меняем fixed на absolute.
       На iOS fixed элементы обрезаются границами "безопасной зоны".
    */
    position: absolute;

    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;

    /* Используем переменную из style.css */
    z-index: var(--z-wave);
}

/* Остальной CSS без изменений */
.magma-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    mix-blend-mode: screen; 
}

.ring-main {
    width: 20px;
    height: 20px;
    background: radial-gradient(
        circle, 
        transparent 30%, 
        rgba(255, 69, 0, 0.8) 40%, 
        rgba(255, 140, 0, 0.6) 60%, 
        transparent 70%
    );
    animation: expand-main 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ring-secondary {
    width: 10px;
    height: 10px;
    background: radial-gradient(
        circle, 
        rgba(139, 0, 0, 0.5) 0%, 
        transparent 60%
    );
    animation: expand-secondary 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0.1s;
}

.ring-flash {
    width: 40px;
    height: 40px;
    background: radial-gradient(
        circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 215, 0, 0.4) 40%, 
        transparent 70%
    );
    animation: flash 0.6s ease-out forwards;
}

@keyframes expand-main {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(150); }
}

@keyframes expand-secondary {
    0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(120); }
}

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