/* Audio-Nerv: Die Synapse am Rand jedes Textblocks
   Konzept aus Friction mit Gemini:
   - Synapse ist klein/unsichtbar bis Hover oder Active
   - Aktiver Block: volle Farbe, gold-Punkt pulsiert
   - Andere Blocks: Text auf 85% Opacity gedaemmt
   - 600ms CSS-Transitions fuer organische Wanderbewegung
*/

:root {
  --nerv-gold: var(--gold-primary, #C9A961);
  --nerv-dormant-opacity: 0.18;     /* Immer subtil sichtbar als Einladung */
  --nerv-hover-opacity: 0.55;
  --nerv-active-opacity: 0.9;
  --nerv-suspended-opacity: 0.5;
  --nerv-invitation-min: 0.14;
  --nerv-invitation-max: 0.38;
  --nerv-text-active: var(--text-main, #d8d8d8);
  --nerv-text-muted: var(--text-muted, rgba(216, 216, 216, 0.5));
}

/* ───── Story Block (Wrapper um sprechbare Elemente) ───── */
.story-block {
  position: relative;
  transition: opacity 600ms ease, color 600ms ease, filter 600ms ease;
  /* default state: full opacity */

  /* Phase H Auto-Scroll (27.5.2026): wenn scrollIntoView den Block oben in
     den Viewport bringt, gibt scroll-margin-top etwas Vorschau-Sicht oberhalb
     — der vorherige Block bleibt sichtbar als Echo, das Atemkontinuum bricht
     nicht hart ab. ~25vh ist genug fuer 2-3 Zeilen Vorschau. */
  scroll-margin-top: 25vh;
}

.story-block.is-muted {
  color: var(--nerv-text-muted);
  filter: brightness(0.85);
}

.story-block.is-active {
  color: var(--nerv-text-active);
  filter: brightness(1);
}

/* paragraphs and dialogue text inside muted block also get muted */
.story-block.is-muted p,
.story-block.is-muted .dialogue-text,
.story-block.is-muted .speaker-name {
  color: var(--nerv-text-muted);
  transition: color 600ms ease;
}

.story-block.is-active p,
.story-block.is-active .dialogue-text,
.story-block.is-active .speaker-name {
  color: var(--nerv-text-active);
  transition: color 600ms ease;
}

/* ───── Synapse (der goldene Punkt) ───── */
.nerv-synapse {
  /* Position: links neben dem Textblock im Gutter */
  position: absolute;
  left: -28px;
  top: 0.5em;
  width: 8px;
  height: 8px;

  /* Visuell winzig, aber grosser Click-Bereich */
  padding: 14px;
  margin: -14px;
  box-sizing: content-box;

  /* Reset button styling */
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;

  /* Der Punkt selbst */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Default: dormant (unsichtbar) */
  opacity: var(--nerv-dormant-opacity);
  transition: opacity 600ms ease;
}

.nerv-synapse::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nerv-gold);
  box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.0);
  transition: box-shadow 600ms ease, background 600ms ease;
}

/* Hover auf den Block: Synapse wird sichtbar */
.story-block:hover .nerv-synapse {
  opacity: var(--nerv-hover-opacity);
}

/* Active block: Synapse pulsiert in Gold */
.story-block.is-active .nerv-synapse {
  opacity: var(--nerv-active-opacity);
  animation: nerv-breathing 2.4s ease-in-out infinite;
}

.story-block.is-active .nerv-synapse::before {
  background: var(--nerv-gold);
  box-shadow: 0 0 8px 1px rgba(201, 169, 97, 0.6);
}

/* Suspended (paused but current): static gold half-power */
body[data-audio-phase="suspended"] .story-block.is-active .nerv-synapse {
  animation: none;
  opacity: var(--nerv-suspended-opacity);
}

body[data-audio-phase="suspended"] .story-block.is-active .nerv-synapse::before {
  box-shadow: 0 0 4px 0 rgba(201, 169, 97, 0.3);
}

/* Invitation: erste Synapse pulsiert sehr subtil bevor User klickt */
.nerv-synapse.inviting {
  animation: nerv-invitation 4s ease-in-out infinite;
}

@keyframes nerv-breathing {
  0%, 100% {
    opacity: var(--nerv-active-opacity);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes nerv-invitation {
  0%, 100% {
    opacity: var(--nerv-invitation-min);
  }
  50% {
    opacity: var(--nerv-invitation-max);
  }
}

/* ───── Globaler Puls (Stop/Resume ohne Synapse zu suchen) ───── */
.nerv-pulse {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only visible when audio has been engaged */
body[data-audio-phase="resonating"] .nerv-pulse,
body[data-audio-phase="suspended"] .nerv-pulse {
  opacity: 0.65;
  pointer-events: auto;
}

.nerv-pulse:hover {
  opacity: 1 !important;
}

.nerv-pulse__dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nerv-gold);
  box-shadow: 0 0 8px 1px rgba(201, 169, 97, 0.5);
  transition: all 600ms ease;
}

/* Playing: gentle slow breathing */
body[data-audio-phase="resonating"] .nerv-pulse__dot {
  animation: nerv-pulse-breathe 2.4s ease-in-out infinite;
}

/* Paused: static, half-power */
body[data-audio-phase="suspended"] .nerv-pulse__dot {
  animation: none;
  box-shadow: 0 0 4px 0 rgba(201, 169, 97, 0.3);
  opacity: 0.6;
}

.nerv-pulse:hover .nerv-pulse__dot {
  transform: scale(1.2);
  box-shadow: 0 0 12px 2px rgba(201, 169, 97, 0.7);
}

@keyframes nerv-pulse-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px 1px rgba(201, 169, 97, 0.5);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 14px 2px rgba(201, 169, 97, 0.75);
  }
}

@media (max-width: 768px) {
  .nerv-pulse {
    bottom: 20px;
    left: 20px;
  }
}

/* ───── Audio-Settings (in Sidebar) ───── */
.audio-nerv-settings {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0.5rem;
}

.audio-nerv-settings__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(216, 216, 216, 0.55));
  font-style: italic;
  letter-spacing: 0.04em;
}

.audio-nerv-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.audio-nerv-settings input[type="range"] {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(201, 169, 97, 0.25);
  outline: none;
  cursor: pointer;
}

.audio-nerv-settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nerv-gold);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(201, 169, 97, 0.5);
}

.audio-nerv-settings input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nerv-gold);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 4px rgba(201, 169, 97, 0.5);
}

.audio-nerv-settings input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 12px;
  border-radius: 6px;
  background: rgba(201, 169, 97, 0.2);
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}

.audio-nerv-settings input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nerv-gold);
  transition: transform 0.3s ease;
}

.audio-nerv-settings input[type="checkbox"]:checked {
  background: rgba(201, 169, 97, 0.4);
}

.audio-nerv-settings input[type="checkbox"]:checked::after {
  transform: translateX(10px);
}

/* ───── Reduced Motion ───── */
@media (prefers-reduced-motion: reduce) {
  .story-block,
  .story-block p,
  .story-block .dialogue-text,
  .story-block .speaker-name,
  .nerv-synapse,
  .nerv-synapse::before {
    transition: none;
  }

  .story-block.is-active .nerv-synapse,
  .nerv-synapse.inviting {
    animation: none;
  }
}

/* ───── Mobile Adjustments ───── */
@media (max-width: 768px) {
  .nerv-synapse {
    left: -22px;
    width: 7px;
    height: 7px;
    padding: 12px;
    margin: -12px;
  }
  .nerv-synapse::before {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 480px) {
  .nerv-synapse {
    left: -18px;
    padding: 10px;
    margin: -10px;
  }
}

/* ───── Touch-Sichtbarkeit ─────
   Touch-Geräte haben kein :hover — sonst blieben die Synapsen dormant (0.18)
   und auf Mobil damit praktisch unsichtbar. Auf Touch zeigen wir sie immer auf
   dem "sichtbar"-Niveau (wie Desktop beim Hover). Der aktive Block geht weiterhin
   über die spezifischere .is-active-Regel auf 0.9 + nerv-breathing. */
@media (hover: none) {
  .nerv-synapse {
    opacity: var(--nerv-hover-opacity);
  }
}