/* ═══════════════════════════════════════════════════════
   STILLNESS — WOW EFFECTS  v1
   Подключать ПОСЛЕ dark.css на всех страницах:
   <link rel="stylesheet" href="css/wow.css">
   ═══════════════════════════════════════════════════════ */

/* ── 1. CURSOR TRAIL ── частицы инжектируются из JS ── */
@media (hover: none) { .cursor-particle { display: none !important; } }

/* ── 2. STAGGERED BLUR-REVEAL ────────────────────────── */
/* Добавляем blur к существующему reveal из base.css */
.reveal {
  filter: blur(5px);
  transition:
    opacity    var(--dur-slower, 700ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
    transform  var(--dur-slower, 700ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
    filter     600ms              var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.reveal.visible { filter: blur(0); }
/* Элементы где blur даёт артефакты (overflow:hidden родители) */
.reveal.no-blur { filter: none !important; }

/* ── 3. AMBIENT GLOW ─────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 6px 24px var(--accent-glow, rgba(200,149,108,.22)); }
  50%       { box-shadow: 0 10px 40px rgba(200,149,108,.42), 0 0 28px 2px rgba(200,149,108,.14); }
}
.btn-primary.glow-pulse { animation: glowPulse 3.2s ease-in-out infinite; }
.btn-primary.glow-pulse:hover { animation-play-state: paused; }

html[data-theme="dark"] .btn-primary.glow-pulse {
  animation-name: glowPulseDark;
}
@keyframes glowPulseDark {
  0%, 100% { box-shadow: 0 6px 28px rgba(212,165,116,.28); }
  50%       { box-shadow: 0 12px 46px rgba(212,165,116,.52), 0 0 32px 4px rgba(212,165,116,.18); }
}

/* ── 4. MAGNETIC BUTTON ──────────────────────────────── */
.btn-xl,
.hero-cta-group .btn,
.nav-cta-btn {
  transition:
    transform    0.3s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow   var(--dur-base, 350ms) var(--ease, cubic-bezier(0.25,.46,.45,.94)),
    background   var(--dur-base, 350ms) var(--ease, cubic-bezier(0.25,.46,.45,.94));
  will-change: transform;
}
@media (hover: none) {
  .btn-xl,
  .hero-cta-group .btn,
  .nav-cta-btn { transform: none !important; will-change: auto; }
}

/* ── 6. WAVEFORM ─────────────────────────────────────── */
/* ── 6. WAVEFORM ─────────────────────────────────────── */
/* Тонкие волны снизу активной карточки — в такт музыке */
.sound-waveform {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 32px;
  pointer-events: none; overflow: hidden;
  border-radius: 0 0 var(--r-xl, 28px) var(--r-xl, 28px);
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Лёгкое затухание снизу вверх */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.sound-card.active .sound-waveform { opacity: 1; }
.sound-waveform canvas { width: 100%; height: 100%; display: block; }

/* Иконка — очень тихий glow, не кричащий */
@keyframes iconGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,149,108,0); background: var(--accent-pale, rgba(200,149,108,.10)); }
  50%      { box-shadow: 0 0 0 5px rgba(200,149,108,.10); background: rgba(200,149,108,.18); }
}
.sound-card.active .sound-icon-ring {
  animation: iconGlow 2.8s ease-in-out infinite;
}
html[data-theme="dark"] .sound-card.active .sound-icon-ring {
  animation: iconGlowDark 2.8s ease-in-out infinite;
}
@keyframes iconGlowDark {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,165,116,0); background: rgba(212,165,116,.10); }
  50%      { box-shadow: 0 0 0 5px rgba(212,165,116,.12); background: rgba(212,165,116,.20); }
}

/* ── 7. ROOMS PRESENCE PING ──────────────────────────── */
@keyframes presencePing {
  0%   { transform: scale(1); opacity: .65; }
  100% { transform: scale(2.4); opacity: 0; }
}
/* pres-dot усиленный ripple */
@keyframes dotRipple {
  0%   { box-shadow: 0 0 0 0 rgba(109,175,122,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(109,175,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(109,175,122,0); }
}
.pres-dot { animation: blink 2s ease-in-out infinite, dotRipple 2.4s ease-out infinite !important; }

/* ── 8. SCROLL-DRIVEN ────────────────────────────────── */
@supports (animation-timeline: scroll()) {
  @keyframes blobPx1 { to { transform: translate(28px,-55px) scale(1.05); } }
  @keyframes blobPx2 { to { transform: translate(-36px,-70px) scale(1.04); } }
  @keyframes blobPx3 { to { transform: translate(20px,-48px) scale(1.06); } }

  .blob-1 {
    animation:
      fadeInBlob 1.8s var(--ease-out,cubic-bezier(.22,1,.36,1)) 0s forwards,
      blobPx1 1s linear both;
    animation-timeline: auto, scroll(root);
    animation-range: auto, 0px 700px;
  }
  .blob-2 {
    animation:
      fadeInBlob 1.8s var(--ease-out,cubic-bezier(.22,1,.36,1)) .2s forwards,
      blobPx2 1s linear both;
    animation-timeline: auto, scroll(root);
    animation-range: auto, 0px 700px;
  }
  .blob-3 {
    animation:
      fadeInBlob 1.8s var(--ease-out,cubic-bezier(.22,1,.36,1)) .4s forwards,
      blobPx3 1s linear both;
    animation-timeline: auto, scroll(root);
    animation-range: auto, 0px 700px;
  }

  @keyframes sectionEntry {
    from { opacity: .35; transform: translateY(10px); }
    to   { opacity: 1;   transform: translateY(0); }
  }
  .scroll-driven {
    animation: sectionEntry linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }
}

/* ── prefers-reduced-motion — всё выключить ───────────  */
@media (prefers-reduced-motion: reduce) {
  .reveal            { filter: none !important; transition: opacity var(--dur-slower,700ms) var(--ease-out,cubic-bezier(.22,1,.36,1)) !important; }
  .btn-primary.glow-pulse { animation: none !important; }
  .sound-card.active .sound-icon-ring { animation: none !important; }
  .pres-dot          { animation: blink 2s ease-in-out infinite !important; }
  .scroll-driven     { animation: none !important; }
  .btn-xl, .hero-cta-group .btn, .nav-cta-btn { transition: box-shadow var(--dur-base,350ms) var(--ease), background var(--dur-base,350ms) var(--ease) !important; }
}