/* ============================================================
   VAPOR-FX — the "behavior" layer of the vaporwave system.
   Physics-inspired motion. Requires vaporwave.css (tokens).
   Every effect respects prefers-reduced-motion.
   ============================================================ */

/* --- Thermal drift: warm↔cool oscillation inside a stroke/fill --- */
.vw-thermal-text {
  background: var(--vw-thermal);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vw-thermal 8s ease-in-out infinite;
}
@keyframes vw-thermal { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* --- Diffusion: color spreads/fades like vapor in low pressure --- */
.vw-diffuse { animation: vw-diffuse 6s ease-in-out infinite; }
@keyframes vw-diffuse {
  0%,100% { filter: blur(0px);   opacity: 1; }
  50%     { filter: blur(1.5px); opacity: .78; }
}

/* --- Condensation node: bright point where vapor collects, then pulses out --- */
.vw-condense { position: relative; }
.vw-condense::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--vw-glow-cyan); opacity: 0;
  animation: vw-condense 4.5s ease-out infinite;
}
@keyframes vw-condense { 0%{opacity:.9;transform:scale(.96)} 60%{opacity:0;transform:scale(1.08)} 100%{opacity:0} }

/* --- Shear-flow streak: directional smear implying movement --- */
.vw-shear {
  background: linear-gradient(100deg, transparent 0%, rgba(1,205,254,.0) 40%,
              rgba(1,205,254,.55) 50%, rgba(255,113,206,.0) 60%, transparent 100%);
  background-size: 250% 100%;
  animation: vw-shear 3.2s linear infinite;
}
@keyframes vw-shear { from{background-position:120% 0} to{background-position:-120% 0} }

/* --- Refractive shimmer: light warps around strokes like heat haze --- */
.vw-refract:hover, .vw-refract:focus-visible {
  animation: vw-refract .9s ease-in-out;
}
@keyframes vw-refract {
  0%,100% { transform: skewX(0deg);   filter: hue-rotate(0deg); }
  50%     { transform: skewX(1.5deg); filter: hue-rotate(18deg); }
}

/* --- Particle drift: micro-specks floating outward (decorative layer) --- */
.vw-drift { position: relative; overflow: visible; }
.vw-drift::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px;
  border-radius: 50%; background: var(--vw-mint); box-shadow: var(--vw-glow-cyan);
  animation: vw-drift 5s ease-in infinite;
}
@keyframes vw-drift {
  0%   { transform: translate(-50%,0)   scale(1);  opacity: .9; }
  100% { transform: translate(-50%,-60px) scale(.2); opacity: 0; }
}

/* --- Ink-as-vapor: calligraphy edges feather/bloom outward --- */
.vw-ink-vapor { filter: drop-shadow(0 0 6px rgba(185,103,255,.5)) drop-shadow(0 0 14px rgba(1,205,254,.3)); }

@media (prefers-reduced-motion: reduce) {
  .vw-thermal-text,.vw-diffuse,.vw-condense::after,.vw-shear,.vw-refract,.vw-drift::before { animation: none !important; }
}