/*
 * TFM Global CSS — Orbs, Cursor Trail, Settings FAB, Toggle Switches
 * /wp-content/themes/blocksy-child/css/tfm-global.css
 *
 * Wird auf jeder Seite geladen (via php/tfm-global.php).
 * Nutzt --area-accent wo verfügbar, fällt auf neutrales Lila zurück.
 * Ersetzt den Site Settings CSS Code Snippet komplett.
 */

/* ============================================================
   1. PARALLAX ORBS — Atmende Hintergrund-Glüher
   Zwei große unscharfe Kreise, reagieren auf Mouse via JS.
   ============================================================ */

.tfm-parallax-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Großer Orb — links oben, blau-lila */
.tfm-parallax-orb-1 {
  width:  560px;
  height: 560px;
  top:    -140px;
  left:   -140px;
  background: radial-gradient(
    circle,
    rgba(120, 40, 220, 0.22) 0%,
    rgba(80,  10, 180, 0.10) 50%,
    transparent              100%
  );
  animation: tfmOrbBreath1 8s ease-in-out infinite alternate;
}

/* Kleiner Orb — rechts unten, dunkler lila */
.tfm-parallax-orb-2 {
  width:  420px;
  height: 420px;
  bottom: -100px;
  right:  -100px;
  background: radial-gradient(
    circle,
    rgba(80, 20, 180, 0.18) 0%,
    rgba(50,  5, 140, 0.08) 50%,
    transparent             100%
  );
  animation: tfmOrbBreath2 11s ease-in-out infinite alternate;
}

@keyframes tfmOrbBreath1 {
  0%   { opacity: 0.70; transform: scale(1.00); }
  100% { opacity: 1.00; transform: scale(1.12); }
}
@keyframes tfmOrbBreath2 {
  0%   { opacity: 0.60; transform: scale(1.00); }
  100% { opacity: 0.90; transform: scale(1.10); }
}

/* Tageszeit-Varianten — Farbe der Orbs passt sich an */
body.tfm-time-sunrise .tfm-parallax-orb-1 {
  background: radial-gradient(circle,
    rgba(180, 100, 40, 0.18) 0%,
    rgba(140,  60, 20, 0.08) 50%,
    transparent              100%
  );
}
body.tfm-time-sunrise .tfm-parallax-orb-2 {
  background: radial-gradient(circle,
    rgba(120,  50, 160, 0.16) 0%,
    transparent               100%
  );
}
body.tfm-time-sunset .tfm-parallax-orb-1 {
  background: radial-gradient(circle,
    rgba(160,  40,  80, 0.20) 0%,
    rgba(120,  20,  60, 0.08) 50%,
    transparent               100%
  );
}
body.tfm-time-sunset .tfm-parallax-orb-2 {
  background: radial-gradient(circle,
    rgba(100,  20,  80, 0.16) 0%,
    transparent               100%
  );
}

/* Time Colors deaktiviert — Orbs bleiben neutral */
body.tfm-time-disabled .tfm-parallax-orb-1 {
  background: radial-gradient(circle,
    rgba(120, 40, 220, 0.22) 0%,
    transparent              100%
  );
}
body.tfm-time-disabled .tfm-parallax-orb-2 {
  background: radial-gradient(circle,
    rgba(80, 20, 180, 0.16) 0%,
    transparent             100%
  );
}

/* ============================================================
   2. SETTINGS FAB — Floating Action Button unten rechts
   ============================================================ */

.tfm-settings-fab {
  position:    fixed;
  bottom:      1.8rem;
  right:       1.8rem;
  z-index:     9998;
  display:     flex;
  flex-direction: column;
  align-items: flex-end;
  gap:         0.6rem;
}

/* Der kreisförmige Button */
.tfm-settings-fab-btn {
  width:            44px;
  height:           44px;
  border-radius:    50%;
  border:           1px solid rgba(176, 110, 255, 0.35);
  background:       rgba(12, 7, 26, 0.92);
  color:            rgba(176, 110, 255, 0.80);
  font-size:        1.1rem;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  backdrop-filter:  blur(10px);
  transition:       border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  line-height:      1;
}
.tfm-settings-fab-btn:hover {
  border-color: rgba(212, 168, 67, 0.60);
  color:        rgba(232, 201, 122, 0.95);
  box-shadow:   0 0 16px rgba(212, 168, 67, 0.18);
}

/* ============================================================
   3. SETTINGS PANEL — Popup über dem FAB-Button
   ============================================================ */

.tfm-settings-panel {
  width:            280px;
  max-width:        calc(100vw - 3.6rem);
  background:       rgba(10, 6, 22, 0.97);
  border:           1px solid rgba(176, 110, 255, 0.25);
  border-radius:    14px;
  padding:          1.3rem 1.4rem;
  backdrop-filter:  blur(14px);
  box-shadow:       0 20px 56px rgba(0, 0, 0, 0.65);
  display:          none;
  animation:        tfmPanelIn 0.22s ease;
}
.tfm-settings-panel.open {
  display: block;
}
@keyframes tfmPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.tfm-settings-panel-title {
  font-family:     'Jost', sans-serif;
  font-size:       0.65rem;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  color:           rgba(196, 160, 255, 0.70);
  margin-bottom:   1.1rem;
}

/* ── Einzelne Einstellungszeile ── */
.tfm-setting-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.8rem;
  padding:         0.65rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.06);
}
.tfm-setting-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tfm-setting-label {
  font-family: 'Jost', sans-serif;
  font-size:   0.80rem;
  color:       rgba(221, 212, 240, 0.90);
  line-height: 1.2;
}
.tfm-setting-sublabel {
  font-family: 'Jost', sans-serif;
  font-size:   0.65rem;
  color:       rgba(154, 143, 187, 0.65);
  margin-top:  0.15rem;
  line-height: 1.3;
}

/* ============================================================
   4. TOGGLE SWITCH
   ============================================================ */

.tfm-toggle-switch {
  position:      relative;
  display:       inline-block;
  width:         42px;
  height:        24px;
  flex-shrink:   0;
}

/* Checkbox verstecken — nur für Accessibility da */
.tfm-toggle-switch input {
  opacity: 0;
  width:   0;
  height:  0;
  position: absolute;
}

/* Track — der Hintergrund des Toggles */
.tfm-toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: 12px;
  background:    rgba(255, 255, 255, 0.10);
  border:        1px solid rgba(255, 255, 255, 0.12);
  cursor:        pointer;
  transition:    background 0.3s ease, border-color 0.3s ease;
}

/* Kreisförmiger Schieber */
.tfm-toggle-track::before {
  content:       '';
  position:      absolute;
  left:          3px;
  top:           50%;
  transform:     translateY(-50%);
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.35);
  transition:    transform 0.3s ease, background 0.3s ease;
}

/* Aktiver Zustand */
.tfm-toggle-switch input:checked + .tfm-toggle-track {
  background:    rgba(212, 168, 67, 0.30);
  border-color:  rgba(212, 168, 67, 0.55);
}
.tfm-toggle-switch input:checked + .tfm-toggle-track::before {
  transform:  translateY(-50%) translateX(18px);
  background: #d4a843;
}

/* Focus-Ring für Keyboard-Zugänglichkeit */
.tfm-toggle-switch input:focus-visible + .tfm-toggle-track {
  outline:        2px solid rgba(212, 168, 67, 0.70);
  outline-offset: 2px;
}

/* ============================================================
   5. SCROLL REVEAL — .tfm-reveal Elemente werden eingeblendet
   Klasse wird von JS via IntersectionObserver gesetzt.
   ============================================================ */

.tfm-reveal {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tfm-reveal--visible {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tfm-reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }
  .tfm-parallax-orb {
    animation: none !important;
  }
}

/* ============================================================
   6. TIME COLORS DEAKTIVIERT
   Wenn der User Time Colors ausschaltet, setzt JS
   .tfm-time-disabled auf Body — Zeit-abhängige Klassen
   (tfm-time-night, sunrise, sunset) werden dadurch wirkungslos.
   Die Color Theme CSS-Variablen gelten dann nicht mehr.
   ============================================================ */

body.tfm-time-disabled {
  /* Alle tageszeit-spezifischen CSS-Variablen zurücksetzen */
  --time-bg:          #0d0a1a;
  --time-overlay:     rgba(0, 0, 0, 0);
}

/* Tageszeit-Klassen haben keine Wirkung mehr wenn disabled */
body.tfm-time-disabled.tfm-time-night,
body.tfm-time-disabled.tfm-time-sunrise,
body.tfm-time-disabled.tfm-time-sunset {
  --area-accent:      #d4a843;
  --area-accent-soft: #e8c97a;
  --area-accent-glow: rgba(212, 168, 67, 0.40);
}