phasing.css

@keyframes pulseAlpha {
    0%   { opacity: 0.2; }
    50%  { opacity: 0.7; }
    100% { opacity: 0.2; }
}

.ring {
    animation: pulseAlpha 1.2s ease-in-out infinite;
}

@keyframes phaseSprite {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.phase-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--map-cell-width);
    height: var(--map-cell-height);
    pointer-events: none;
    image-rendering: pixelated;
    animation: phaseSprite 1.2s ease-in-out infinite;
}

.phase-frame.frame1 {
    z-index: 1;
    animation-delay: 0s;
}

.phase-frame.frame2 {
    z-index: 0;
    animation-delay: 0.6s; /* offset by half the duration */
}