/* === NEON MELT EFFECT === */
.melt {
  animation: neon-melt 2.5s forwards ease-in-out;
  filter: hue-rotate(45deg) saturate(2.2) contrast(1.6);
  position: relative;
  overflow: hidden;
}

.melt::before,
.melt::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.6;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 0, 255, 0.05) 0,
    rgba(0, 255, 255, 0.05) 2px,
    transparent 4px
  );
  animation: neon-scan 0.15s infinite linear alternate;
}

.melt::after {
  filter: blur(2px) brightness(1.5) hue-rotate(180deg);
  opacity: 0.4;
  animation: neon-scan 0.2s infinite reverse;
}

@keyframes neon-melt {
  0% {
    transform: none;
    opacity: 1;
    filter: brightness(1) contrast(1);
  }
  10% {
    transform: skew(1deg, -1deg);
    filter: hue-rotate(15deg) saturate(1.5) brightness(1.2);
  }
  25% {
    transform: translate(2px, -2px) skew(-1deg, 1deg);
    filter: hue-rotate(60deg) saturate(2) brightness(1.4);
  }
  40% {
    transform: translate(-3px, 3px) skew(2deg, -2deg);
    filter: hue-rotate(120deg) brightness(1.8) contrast(1.5);
  }
  60% {
    transform: scale(1.05) rotate(0.5deg);
    filter: hue-rotate(240deg) saturate(3) brightness(2);
    opacity: 0.85;
  }
  80% {
    transform: scale(1.1) skew(-2deg);
    filter: hue-rotate(300deg) brightness(2.4) saturate(3.5);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.25) rotate(3deg);
    filter: hue-rotate(360deg) brightness(3) saturate(4);
    opacity: 0;
  }
}

@keyframes neon-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}