/* XEL effects — screen-level drama + reusable glow/pulse utilities.
   body classes (fx-flash / fx-shake / fx-ripple) are toggled by
   js/render/particles.js on `fx:screen`. utilities are for everyone. */

/* ============ screen fx ============ */

/* flash: one frame of cosmic overexposure (evolutions, revelations) */
body.fx-flash::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 44%,
    rgba(255, 255, 255, 0.95),
    rgba(125, 249, 224, 0.55) 40%,
    rgba(157, 123, 255, 0.28) 70%,
    rgba(7, 3, 18, 0) 100%
  );
  animation: xel-flash 0.7s ease-out forwards;
}

@keyframes xel-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* shake: the whole reality jitters. xel felt that. */
body.fx-shake {
  animation: xel-shake 0.56s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes xel-shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px) rotate(0.25deg); }
  30%, 50%, 70% { transform: translate(-8px, 3px) rotate(-0.4deg); }
  40%, 60% { transform: translate(7px, -3px) rotate(0.4deg); }
}

/* ripple: a seafoam ring expands from the center of everything */
body.fx-ripple::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 44vmax;
  height: 44vmax;
  margin: -22vmax 0 0 -22vmax;
  border-radius: 50%;
  border: 3px solid var(--seafoam);
  box-shadow:
    0 0 48px rgba(125, 249, 224, 0.55),
    inset 0 0 48px rgba(125, 249, 224, 0.3);
  pointer-events: none;
  z-index: 95;
  animation: xel-ripple 1s var(--ease-smooth) forwards;
}

@keyframes xel-ripple {
  from { transform: scale(0.04); opacity: 0.95; }
  to { transform: scale(3); opacity: 0; }
}

/* calmer ripple used under reduced motion */
@keyframes xel-ripple-calm {
  from { transform: scale(1.15); opacity: 0.45; }
  to { transform: scale(1.35); opacity: 0; }
}

/* ============ glow utilities (static) ============ */

.glow-seafoam { box-shadow: var(--glow-seafoam); }
.glow-violet { box-shadow: var(--glow-violet); }
.glow-gold { box-shadow: var(--glow-gold); }
.glow-pink { box-shadow: 0 0 24px rgba(255, 106, 213, 0.45); }
.glow-red { box-shadow: 0 0 24px rgba(255, 92, 122, 0.45); }

/* glows the text of whatever color it currently is */
.text-glow { text-shadow: 0 0 12px currentColor; }

/* ============ motion utilities ============ */

/* gentle scale breathing */
.fx-pulse { animation: xel-pulse 2.2s ease-in-out infinite; }

@keyframes xel-pulse {
  50% { transform: scale(1.045); }
}

/* breathing halo in currentColor */
.fx-glow-pulse { animation: xel-glow-pulse 2.6s ease-in-out infinite; }

@keyframes xel-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50% { filter: drop-shadow(0 0 16px currentColor); }
}

/* hovers like something with no legs (or exactly two) */
.fx-float { animation: xel-float 3.6s ease-in-out infinite; }

@keyframes xel-float {
  50% { transform: translateY(-8px); }
}

/* one-shot springy wobble (add class, remove on animationend) */
.fx-wobble { animation: xel-wobble 0.6s var(--ease-boing); }

@keyframes xel-wobble {
  25% { transform: rotate(-5deg) scale(1.04); }
  60% { transform: rotate(4deg); }
}

/* one-shot springy entrance */
.fx-appear { animation: xel-appear 0.5s var(--ease-boing) both; }

@keyframes xel-appear {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
}

/* jazz-grade gradient text sweep. use responsibly. or don't. */
.fx-shimmer {
  background: linear-gradient(
    110deg,
    var(--gold),
    var(--pink) 30%,
    var(--seafoam) 55%,
    var(--violet) 80%,
    var(--gold)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: xel-shimmer 4s linear infinite;
}

@keyframes xel-shimmer {
  to { background-position: -220% 0; }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  body.fx-shake { animation: none; }

  body.fx-flash::before {
    background: rgba(125, 249, 224, 0.22);
    animation-duration: 0.35s;
  }

  body.fx-ripple::after {
    animation: xel-ripple-calm 0.6s ease-out forwards;
  }

  .fx-pulse,
  .fx-glow-pulse,
  .fx-float,
  .fx-wobble {
    animation: none;
  }

  .fx-shimmer {
    animation: none;
    background-position: 30% 0;
  }

  .fx-appear { animation-duration: 0.01s; }
}