/* effects.css
   Global theme + reusable glow utilities
*/

/* ============ THEME TOKENS ============ */
:root {
  /* Base neon color (cyan-ish) */
  --glow-hue: 190;
  --glow-sat: 100%;
  --glow-light: 60%;

  /* Derived colors */
  --glow-main: hsl(var(--glow-hue) var(--glow-sat) var(--glow-light));
  --glow-soft: hsla(var(--glow-hue) var(--glow-sat) 70% / 0.25);
  --glow-strong: hsla(var(--glow-hue) var(--glow-sat) 70% / 0.5);
  --glow-border: hsla(var(--glow-hue) var(--glow-sat) 80% / 0.4);

  --panel-bg: rgba(8,12,18,0.78);
  --panel-border: rgba(120,200,255,0.16);

  --glow-color: var(--glow-soft);
}

/* Helper: set theme in JS like:
   document.documentElement.style.setProperty('--glow-hue', '320');
*/

/* =========== GENERIC GLOWS =========== */

/* Base glow mixin – use on anything that should glow on hover */
.fx-glow {
  border: 1px solid var(--glow-border);
  box-shadow:
    0 0 14px var(--glow-soft),
    0 0 32px var(--glow-soft),
    inset 0 0 12px rgba(255,255,255,0.06);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.fx-glow:hover,
.fx-glow:focus-visible {
  border-color: var(--glow-main);
  box-shadow:
    0 0 22px var(--glow-strong),
    0 0 42px var(--glow-strong),
    inset 0 0 18px rgba(255,255,255,0.10);
  transform: translateY(-3px);
}

.fx-logo-glow {
  filter:
    drop-shadow(0 0 18px var(--glow-soft))
    drop-shadow(0 0 40px var(--glow-strong))
    drop-shadow(0 0 90px var(--glow-border));
}

/* universal reset utility for elements that should NOT glow. */
.fx-no-glow {
  box-shadow: none !important;
  border-color: transparent !important;
}
/* Panels / cards glass look */
.fx-panel {
  background: linear-gradient(
    180deg,
    rgba(8,12,18,.86),
    rgba(8,12,18,.70)
  );
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 40px 32px;
}

/* Strong outer halo (for big sections) */
.fx-rim {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.fx-rim::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  background:
    radial-gradient(60% 40% at 30% -10%, var(--glow-soft), transparent 60%),
    radial-gradient(60% 40% at 70% 110%, var(--glow-soft), transparent 60%);
}
.fx-rim::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 50% -20%, var(--glow-soft), transparent 60%),
    radial-gradient(80% 120% at 50% 120%, var(--glow-soft), transparent 60%);
  filter: blur(18px);
}

/* Make sure big rim panels can show the outer halo */
.container.panel.rim,
.panel.rim {
  overflow: visible;
}


/* Buttons that should share the glow style */
.fx-btn {
    /* just the glow; your shape/typography stays in .btn */
    border-radius: 10px;
}
.fx-btn-primary {
    background: radial-gradient(circle at 50% -40%, var(--glow-soft) 0%, rgba(0,0,0,.2) 100%);
    color: #fff;
}

html.animate-glow {
    animation: hueRotate 8s linear infinite;
}

.fx-pulse {
  animation: fx-pulse 3s ease-in-out infinite;
}

/* ---------------------------------------- */
/*  GLOW UTILITIES: STATIC vs HOVER-ONLY    */
/* ---------------------------------------- */

/* 1) Always-glowing surface (no hover change) */
.fx-glow-static {
  position: relative;
  border-radius: 16px;
  background: var(--panel-bg, rgba(10,10,20,0.9));
  border: 1px solid var(--glow-border, rgba(0, 255, 255, 0.35));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 22px var(--glow-soft, rgba(0, 255, 255, 0.35)),
    0 0 48px var(--glow-soft, rgba(0, 255, 255, 0.35));
}

/* 2) Hover-only glow (plain by default, glow when you hover/focus) */
.fx-glow-hover {
  position: relative;
  border-radius: 16px;
  background: var(--panel-bg, rgba(10,10,20,0.9));
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: none;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.fx-glow-hover:hover,
.fx-glow-hover:focus-visible {
  border-color: var(--glow-border, rgba(0, 255, 255, 0.35));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 22px var(--glow-soft, rgba(0, 255, 255, 0.35)),
    0 0 48px var(--glow-soft, rgba(0, 255, 255, 0.35));
  transform: translateY(-1px);
}

/* ---------------------------------------- */
/*  “NO GLOW” SURFACE + HOVER HIGHLIGHT     */
/* ---------------------------------------- */

/* Base: no glow at all, just a clean panel */
.fx-plain {
  position: relative;
  border-radius: 16px;
  background: var(--panel-bg, rgba(10,10,20,0.9));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}

/* Same as .fx-plain but gets a light glow when hovered */
.fx-plain-hover {
  position: relative;
  border-radius: 16px;
  background: var(--panel-bg, rgba(10,10,20,0.9));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.fx-plain-hover:hover,
.fx-plain-hover:focus-visible {
  border-color: var(--glow-border, rgba(0, 255, 255, 0.35));
  box-shadow:
    0 0 18px var(--glow-soft, rgba(0, 255, 255, 0.35));
  transform: translateY(-1px);
}

/* ---------------------------------------- */
/*              Dialog Effects              */
/* ---------------------------------------- */
/* generic dialog wrapper */
.fx-dialog {
  border: none;
  padding: 0;
  background: transparent;
}

/* dim/glow the background behind the dialog */
.fx-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 0,
      rgba(0, 162, 255, 0.25),
      transparent 55%)
    rgba(0, 0, 0, 0.85);
}

/* -------------------------------------------------- */
/*  UNIVERSAL CLOSE BUTTON (fx-close)                  */
/* -------------------------------------------------- */

.fx-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;

  width: 32px;
  height: 32px;
  border-radius: 10px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;

  color: #fff;
  border: 1px solid rgba(255, 120, 120, 0.5);

  background: radial-gradient(
    circle at 50% 30%,
    rgba(255, 70, 70, 0.6),
    rgba(160, 0, 0, 0.35)
  );

  box-shadow:
    0 0 10px rgba(255, 70, 70, 0.7),
    0 0 28px rgba(200, 40, 40, 0.5),
    inset 0 0 8px rgba(255, 255, 255, 0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fx-closePulse 2.5s ease-in-out infinite;
}

.fx-close:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 0 16px rgba(255, 90, 90, 0.9),
    0 0 40px rgba(255, 60, 60, 0.7),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.fx-close:active {
  transform: scale(0.92);
}

/* pulse animation */
@keyframes fx-closePulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.4) saturate(1.3);
  }
}


/* ---------------------------------------- */
/*       ANIMATION UTILITIES                */
/* ---------------------------------------- */

/* Pulse animation you can reuse for “hero” bits */
@keyframes fx-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 0 18px var(--glow-soft),
      0 0 44px var(--glow-soft);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 0 26px var(--glow-strong),
      0 0 60px var(--glow-strong);
  }
}

/* Animated glow cycling (RGB neon wave) */
@keyframes hueRotate {
  from { --glow-hue: 0; }
  to   { --glow-hue: 360; }
}

/* -------------------------------------------------- */
/*  OPTIONAL ADD-ON: Glow Animation                   */
/*  Apply to ANY element using fx-glow or fx-panel     */
/* -------------------------------------------------- */

.fx-animate-glow {
  animation: fxGlowPulse 3s ease-in-out infinite;
}

/* Pulse animation for glow halos */
@keyframes fxGlowPulse {
  0% {
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 20px var(--glow-color, rgba(0, 255, 255, 0.28)),
      0 0 50px var(--glow-color, rgba(0, 180, 255, 0.22)),
      0 0 90px var(--glow-color, rgba(0, 120, 255, 0.18));
  }
  50% {
    filter: brightness(1.25) saturate(1.25);
    box-shadow:
      0 0 28px var(--glow-color, rgba(0, 255, 255, 0.45)),
      0 0 64px var(--glow-color, rgba(0, 200, 255, 0.38)),
      0 0 120px var(--glow-color, rgba(0, 160, 255, 0.32));
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 20px var(--glow-color, rgba(0, 255, 255, 0.28)),
      0 0 50px var(--glow-color, rgba(0, 180, 255, 0.22)),
      0 0 90px var(--glow-color, rgba(0, 120, 255, 0.18));
  }
}