/* ============================================
   VISIBLEMILES — Visual Effects
   Non-combat visual effects (fog reveal)
   
   Combat effects stripped in Phase 0 of combat overhaul.
   Status indicators (burning, stunned, etc.) are in actors.css
   alongside the hit flash rules.
   ============================================ */

/* ============================================
   FOG REVEAL FADE
   Dithered fade elements for smooth fog transitions
   ============================================ */
.fog-fade {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile-size, 24px);
  height: var(--tile-size, 24px);
  pointer-events: none;
  animation: fog-reveal 250ms ease-out forwards;
  /* GPU compositing - position via transform */
  transform: translate3d(var(--pos-x, 0), var(--pos-y, 0), 0);
  /* PERF: Removed will-change - animation auto-promotes to compositor */
}

/* Inner ring fade: sparse 50% dither pattern (8/16 Bayer cells) */
.fog-fade-inner {
  background-color: transparent;
  background-image: 
    linear-gradient(var(--fog-reveal), var(--fog-reveal));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white'/%3E%3Crect x='0' y='1' width='1' height='1' fill='white'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white'/%3E%3Crect x='2' y='1' width='1' height='1' fill='white'/%3E%3Crect x='3' y='1' width='1' height='1' fill='white'/%3E%3Crect x='1' y='2' width='1' height='1' fill='white'/%3E%3Crect x='3' y='2' width='1' height='1' fill='white'/%3E%3Crect x='0' y='3' width='1' height='1' fill='white'/%3E%3Crect x='2' y='3' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  mask-size: 4px 4px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white'/%3E%3Crect x='0' y='1' width='1' height='1' fill='white'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white'/%3E%3Crect x='2' y='1' width='1' height='1' fill='white'/%3E%3Crect x='3' y='1' width='1' height='1' fill='white'/%3E%3Crect x='1' y='2' width='1' height='1' fill='white'/%3E%3Crect x='3' y='2' width='1' height='1' fill='white'/%3E%3Crect x='0' y='3' width='1' height='1' fill='white'/%3E%3Crect x='2' y='3' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 4px 4px;
}

/* Outer ring fade: the DIFFERENCE between solid and outer dither (4/16 cells) */
.fog-fade-outer {
  background-color: transparent;
  background-image: 
    linear-gradient(var(--fog-reveal), var(--fog-reveal));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='1' y='0' width='1' height='1' fill='white'/%3E%3Crect x='3' y='0' width='1' height='1' fill='white'/%3E%3Crect x='1' y='2' width='1' height='1' fill='white'/%3E%3Crect x='3' y='2' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  mask-size: 4px 4px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='1' y='0' width='1' height='1' fill='white'/%3E%3Crect x='3' y='0' width='1' height='1' fill='white'/%3E%3Crect x='1' y='2' width='1' height='1' fill='white'/%3E%3Crect x='3' y='2' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 4px 4px;
}

/* Transition from outer dither to inner dither (4/16 cells fade out) */
.fog-fade-mid {
  background-color: transparent;
  background-image: 
    linear-gradient(var(--fog-reveal), var(--fog-reveal));
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white'/%3E%3Crect x='0' y='2' width='1' height='1' fill='white'/%3E%3Crect x='2' y='2' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  mask-size: 4px 4px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white'/%3E%3Crect x='0' y='2' width='1' height='1' fill='white'/%3E%3Crect x='2' y='2' width='1' height='1' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 4px 4px;
}

@keyframes fog-reveal {
  0% { opacity: 0.4; }
  100% { opacity: 0; }
}