/* Дизайн-система Маша FRANKLY — дерзкий инди, фиолетовый/сиреневый */
:root {
  /* База — тёмная тема */
  --mf-bg:       #0E0A14;
  --mf-bg-2:     #17101F;
  --mf-bg-3:     #211830;
  --mf-ink:      #F5EEFF;
  --mf-ink-dim:  #B6AAC7;
  --mf-ink-mute: #6E5F86;
  --mf-line:     rgba(245,238,255,0.10);
  --mf-line-2:   rgba(245,238,255,0.18);

  /* Фиолет / сирень — акцент */
  --mf-violet:      #A974FF;
  --mf-violet-2:    #7C3DF2;
  --mf-violet-deep: #4B1F8F;
  --mf-lilac:       #D5B8FF;
  --mf-hot:         #FF4EA6; /* вторичный — для рок-акцента */
  --mf-acid:        #C3FF5C; /* редкий, для счётчиков / state */

  /* Типографика — рок-инди пара: Unbounded (дерзкий дисплей) + Manrope (нейтральный body) */
  --mf-font-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --mf-font-body:    "Manrope", "Inter", system-ui, sans-serif;
  --mf-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Скелет */
  --mf-gap: 24px;
  --mf-radius: 2px; /* острые углы — брутал-инди */
  --mf-radius-md: 6px;
  --mf-radius-lg: 14px;

  /* Motion */
  --mf-ease: cubic-bezier(.2,.7,.3,1);

  /* Поверхности с прозрачностью */
  --mf-nav-bg:    rgba(14,10,20,0.75);
  --mf-player-bg: rgba(14,10,20,0.85);
  --mf-on-accent: #0E0A14;
}

/* Якорные переходы: фиксированная шапка не должна накрывать начало секции.
   72px — высота шапки на десктопе, 60px на мобиле, плюс воздух. */
html {
  scroll-padding-top: 92px;
}
@media (max-width: 820px) {
  html { scroll-padding-top: 78px; }
}

/* Индикатор прямого эфира — спокойное мигание, без неона */
@keyframes mf-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Неоновое свечение — перелив синий → фиолетовый → розовый, мягкий градиент вдаль */
@keyframes mf-neon-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  #4EC9FF)
      drop-shadow(0 0 14px #4EC9FF)
      drop-shadow(0 0 36px rgba(78,201,255,0.55))
      drop-shadow(0 0 72px rgba(78,201,255,0.35))
      drop-shadow(0 0 120px rgba(78,201,255,0.18));
  }
  25% {
    filter:
      drop-shadow(0 0 6px  #A974FF)
      drop-shadow(0 0 20px #A974FF)
      drop-shadow(0 0 52px rgba(169,116,255,0.60))
      drop-shadow(0 0 96px rgba(169,116,255,0.40))
      drop-shadow(0 0 150px rgba(169,116,255,0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 4px  #FF4EA6)
      drop-shadow(0 0 16px #FF4EA6)
      drop-shadow(0 0 44px rgba(255,78,166,0.58))
      drop-shadow(0 0 84px rgba(255,78,166,0.38))
      drop-shadow(0 0 136px rgba(255,78,166,0.20));
  }
  75% {
    filter:
      drop-shadow(0 0 6px  #A974FF)
      drop-shadow(0 0 20px #A974FF)
      drop-shadow(0 0 52px rgba(169,116,255,0.60))
      drop-shadow(0 0 96px rgba(169,116,255,0.40))
      drop-shadow(0 0 150px rgba(169,116,255,0.22));
  }
}

/* Неоновая полоска-разделитель (бордер хедера): тот же перелив, свечение через box-shadow */
@keyframes mf-neon-border {
  0%, 100% {
    background: #4EC9FF;
    box-shadow:
      0 0 4px  #4EC9FF,
      0 0 14px #4EC9FF,
      0 0 36px rgba(78,201,255,0.55),
      0 0 72px rgba(78,201,255,0.35),
      0 0 120px rgba(78,201,255,0.18);
  }
  25% {
    background: #A974FF;
    box-shadow:
      0 0 6px  #A974FF,
      0 0 20px #A974FF,
      0 0 52px rgba(169,116,255,0.60),
      0 0 96px rgba(169,116,255,0.40),
      0 0 150px rgba(169,116,255,0.22);
  }
  50% {
    background: #FF4EA6;
    box-shadow:
      0 0 4px  #FF4EA6,
      0 0 16px #FF4EA6,
      0 0 44px rgba(255,78,166,0.58),
      0 0 84px rgba(255,78,166,0.38),
      0 0 136px rgba(255,78,166,0.20);
  }
  75% {
    background: #A974FF;
    box-shadow:
      0 0 6px  #A974FF,
      0 0 20px #A974FF,
      0 0 52px rgba(169,116,255,0.60),
      0 0 96px rgba(169,116,255,0.40),
      0 0 150px rgba(169,116,255,0.22);
  }
}

/* Эксперимент — фон хедера тоже переливается в синхроне с бордером */
@keyframes mf-neon-nav-bg {
  0%, 100% { background: rgba(78,201,255,0.32); }
  25%      { background: rgba(169,116,255,0.32); }
  50%      { background: rgba(255,78,166,0.32); }
  75%      { background: rgba(169,116,255,0.32); }
}