/* visual-fx.css
 * Styles für die visuellen Feature-Module (assets/js/*.js):
 * Toggle-Panel, Shader-Canvas, Live-Visualizer (EKG +
 * pulsierende Status-Badges), Hologramm-Cards und Skills-Tree Seite.
 * Eingebunden über assets/visual-fx.php.
 */

/* ===== Toggle-Panel (Zahnrad unten rechts) ===== */
#fx-gear {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line, #26263a);
  background: var(--surface, #141420);
  color: var(--muted, #A3A6B3);
  font-size: 1.05rem;
  z-index: 100060; /* über Skelett-Walker (9999), Ladebalken & allem anderen */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  transition: color .2s ease, border-color .2s ease, transform .3s ease;
}
#fx-gear:hover {
  color: var(--text, #fff);
  border-color: var(--primary, #0066B1);
  transform: rotate(60deg);
}

#fx-panel {
  position: fixed;
  right: 18px;
  bottom: 72px;
  width: 230px;
  max-height: calc(100vh - 100px); /* 12+ Einträge: auf kleinen Screens scrollen */
  overflow-y: auto;
  background: var(--surface, #141420);
  border: 1px solid var(--line, #26263a);
  border-radius: 12px;
  padding: 12px 14px;
  z-index: 100061; /* immer über dem Zahnrad */
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.97);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#fx-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.fx-panel-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text, #fff);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line, #26263a);
}
.fx-panel-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: .84rem;
  color: var(--text, #e8e8f0);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.fx-panel-row:hover { color: #fff; }
.fx-panel-row input[type="checkbox"] {
  accent-color: var(--primary, #0066B1);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
body.eclipse-mode .fx-panel-row input[type="checkbox"] { accent-color: #cc0000; }

/* ===== Feature 4: Live-Visualizer ===== */
/* RAM: EKG ersetzt den Donut-Ring, solange das Feature aktiv ist */
.fx-ekg-wrap { display: none; }
body.fx-visualizer #ram-card .ram-ring-wrap { display: none; }
body.fx-visualizer #ram-card .fx-ekg-wrap {
  display: block;
  padding: 8px 0 4px;
}
.fx-ekg-inner {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line, #26263a);
  border-radius: 10px;
  overflow: hidden;
}
#fx-ram-ekg {
  display: block;
  width: 100%;
  height: 80px;
}
.fx-ekg-label {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #00bfff;
  text-shadow: 0 0 8px rgba(0, 191, 255, .6);
  font-family: monospace;
  pointer-events: none;
}
.fx-ekg-sub {
  text-align: center;
  font-size: .68rem;
  color: var(--muted, #A3A6B3);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Server-Status Badges pulsieren (grün = aktiv, rot = inaktiv) */
body.fx-visualizer #status-card .badge.text-bg-success {
  animation: fx-pulse-green 2.2s ease-in-out infinite;
}
body.fx-visualizer #status-card .badge.text-bg-danger {
  animation: fx-pulse-red 1.1s ease-in-out infinite;
}
@keyframes fx-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 195, 125, 0); }
  50%      { box-shadow: 0 0 14px 3px rgba(25, 195, 125, .55); }
}
@keyframes fx-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0); }
  50%      { box-shadow: 0 0 14px 3px rgba(240, 68, 56, .65); }
}

/* ===== Feature 5: Hologramm Cards ===== */
body.fx-holo .card,
body.fx-holo .dashboard-card {
  will-change: transform;
}
.fx-holo-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at var(--fx-hx, 50%) var(--fx-hy, 50%),
      rgba(190, 225, 255, .10) 0%,
      rgba(255, 255, 255, .05) 25%,
      transparent 60%);
}
body.fx-holo .card:hover > .fx-holo-shine,
body.fx-holo .dashboard-card:hover > .fx-holo-shine { opacity: 1; }
body.eclipse-mode .fx-holo-shine {
  background: radial-gradient(circle at var(--fx-hx, 50%) var(--fx-hy, 50%),
      rgba(255, 180, 180, .10) 0%,
      rgba(255, 220, 220, .05) 25%,
      transparent 60%);
}

/* ===== Feature 6: Skills-Tree ===== */
#skills-tree-wrap {
  position: relative;
  width: 100%;
  height: min(72vh, 760px);
  background: radial-gradient(ellipse at 50% 0%, rgba(58, 0, 0, .35) 0%, rgba(0, 0, 0, .0) 60%), #050000;
  border: 1px solid #3a0000;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
}
#skills-tree-wrap.dragging { cursor: grabbing; }
#skills-tree-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* Pan/Pinch gehen an den Graph, nicht an die Seite */
}
#skills-tooltip {
  position: absolute;
  min-width: 180px;
  max-width: 280px;
  background: rgba(10, 0, 0, .95);
  border: 1px solid #3a0000;
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .7), 0 0 18px rgba(139, 0, 0, .25);
}
#skills-tooltip.visible { opacity: 1; }
#skills-tooltip .stt-name {
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  margin-bottom: 3px;
}
#skills-tooltip .stt-desc {
  font-size: .74rem;
  color: #b08484;
  line-height: 1.4;
  margin-bottom: 6px;
}
#skills-tooltip .stt-ram {
  font-size: .74rem;
  color: #00bfff;
  font-family: monospace;
}
#skills-tooltip .stt-status { font-size: .74rem; font-weight: 700; margin-top: 3px; }
#skills-tooltip .stt-status.on  { color: #00ff88; }
#skills-tooltip .stt-status.off { color: #ff4444; }
#skills-tooltip .stt-status.unknown { color: #8a8aa0; }
.skills-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--muted, #A3A6B3);
  margin-top: 10px;
}
.skills-legend .lg-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* ===== Feature: Page Transitions =====
 * Overlay-Wipe in Dunkelrot: .fx-pt-cover wischt von links rein,
 * .fx-pt-leave wischt nach rechts raus. .fx-pt-instant setzt den
 * Deckzustand ohne Transition (Einblend-Start auf der Zielseite). */
#fx-page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(105deg, #1a0000 0%, #4a0000 45%, #2a0000 100%);
  box-shadow: 0 0 60px rgba(139, 0, 0, .6);
  transform: translateX(-101%);
  transition: transform .3s ease;
}
#fx-page-transition.fx-pt-cover { transform: translateX(0); pointer-events: all; }
#fx-page-transition.fx-pt-leave { transform: translateX(101%); }
#fx-page-transition.fx-pt-instant { transition: none; }

/* ===== Feature: Scroll-Triggered Animationen ===== */
.fx-so-init {
  opacity: 0;
  transform: translateY(26px);
}
.fx-so-init.fx-so-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
}

/* ===== Feature: Sticky Header mit Frosted Glass ===== */
body.fx-sticky-header .app-topbar {
  position: sticky;
  top: 0;
  z-index: 1035; /* unter der Sidebar (1040), über den Cards */
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.fx-sticky-header .app-topbar.fx-stuck {
  background: rgba(10, 10, 20, .8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
body.fx-sticky-header.eclipse-mode .app-topbar.fx-stuck {
  background: rgba(18, 0, 0, .8);
  border-bottom-color: rgba(204, 0, 0, .25);
}

/* ===== Feature: Frosted Glass Cards =====
 * Glassmorphism passend zum dunklen BERSERK-Theme: fast schwarzes Glas,
 * dezenter heller Border, weiße Schimmer-Linie oben. */
body.fx-frosted .card {
  background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
}
body.fx-frosted .card > .card-header {
  background: rgba(255, 255, 255, .02);
  border-bottom-color: rgba(255, 255, 255, .06);
}
/* Subtiler weißer Schimmer oben an der Card */
body.fx-frosted .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
  z-index: 6;
}
body.fx-frosted.eclipse-mode .card {
  background: rgba(60, 0, 0, .06);
  border-color: rgba(255, 120, 120, .1);
}
body.fx-frosted.eclipse-mode .card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 140, 140, .3), transparent);
}

/* ===== Feature: Neon Glow Borders ===== */
body.fx-neon .card {
  transition: border-color .3s ease, box-shadow .3s ease;
}
body.fx-neon .card:hover {
  border-color: rgba(139, 0, 0, .85);
  box-shadow: 0 0 20px rgba(139, 0, 0, .45),
              0 0 46px rgba(139, 0, 0, .18),
              inset 0 0 14px rgba(139, 0, 0, .08);
}
/* Aktive Sidebar-Links: Cyan-Glow */
body.fx-neon .sidebar-nav .nav-link.active {
  border-left-color: #00bfff;
  box-shadow: inset 4px 0 14px -8px #00bfff, 0 0 14px rgba(0, 191, 255, .22);
}
body.fx-neon .sidebar-nav .nav-link.active i {
  color: #00bfff;
  filter: drop-shadow(0 0 6px rgba(0, 191, 255, .7));
}
/* Buttons: Glow passend zur Button-Farbe */
body.fx-neon .btn { transition: box-shadow .3s ease, border-color .3s ease; }
body.fx-neon .btn-primary:hover,
body.fx-neon .btn-outline-primary:hover { box-shadow: 0 0 16px rgba(0, 122, 210, .55); }
body.fx-neon .btn-danger:hover,
body.fx-neon .btn-outline-danger:hover  { box-shadow: 0 0 16px rgba(240, 68, 56, .55); }
body.fx-neon .btn-success:hover,
body.fx-neon .btn-outline-success:hover { box-shadow: 0 0 16px rgba(25, 195, 125, .55); }
body.fx-neon .btn-outline-light:hover,
body.fx-neon .btn-secondary:hover       { box-shadow: 0 0 14px rgba(220, 220, 235, .35); }
/* Eclipse: Card-Glow kräftiger rot, aktive Links bleiben cyan (Kontrast) */
body.fx-neon.eclipse-mode .card:hover {
  border-color: rgba(204, 0, 0, .9);
  box-shadow: 0 0 22px rgba(204, 0, 0, .5),
              0 0 50px rgba(204, 0, 0, .2),
              inset 0 0 14px rgba(204, 0, 0, .1);
}
body.fx-neon.eclipse-mode .btn-primary:hover { box-shadow: 0 0 16px rgba(204, 0, 0, .6); }

/* ===== Feature: Swipeable Sidebar (Mobile) ===== */
/* Während des Finger-Drags: keine Transition, Sidebar folgt 1:1 */
.app-sidebar.fx-sb-dragging { transition: none !important; }

#fx-sb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1039; /* direkt unter der Sidebar (1040) */
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
#fx-sb-backdrop.visible { opacity: 1; visibility: visible; }

/* Altes ::before-Overlay ausblenden, wenn das Swipe-Modul (mit eigenem
 * klickbaren Backdrop) aktiv ist — sonst dunkelt es doppelt ab */
body.fx-swipebar .app-sidebar.is-open + .app-content::before { display: none; }

/* ===== Feature: Light Rays (Kirchenfenster) =====
 * Gleiches Layering-Prinzip wie der Shader: Layer auf z-index -1,
 * body transparent, Seiten-Hintergrund auf <html>. */
html.fx-rays-on { background: #0B0B0F; }
html.fx-rays-on.eclipse-mode { background: #0a0000; }
html.fx-rays-on body { background: transparent !important; }

#fx-light-rays {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.fx-ray {
  position: absolute;
  top: -30%;
  height: 170%;
  transform: rotate(32deg);
  transform-origin: top center;
  background: linear-gradient(to bottom,
      rgba(255, 223, 130, .07) 0%,
      rgba(212, 175, 55, .05) 40%,
      transparent 85%);
  filter: blur(6px);
  animation: fx-ray-drift 26s ease-in-out infinite;
  will-change: opacity, transform;
}
/* Sichtbare Stärke = Gradient-Alpha (.04–.07) × animierte Opacity (.35–1) */
.fx-ray-1 { left: 6%;  width: 90px;  animation-duration: 24s; }
.fx-ray-2 { left: 26%; width: 150px; animation-duration: 30s; animation-delay: -8s; }
.fx-ray-3 { left: 49%; width: 70px;  animation-duration: 21s; animation-delay: -14s; }
.fx-ray-4 { left: 68%; width: 120px; animation-duration: 28s; animation-delay: -5s; }

@keyframes fx-ray-drift {
  0%, 100% { opacity: .35; transform: rotate(32deg) translateX(0); }
  50%      { opacity: 1;   transform: rotate(33.5deg) translateX(26px); }
}