/* SoulEQ - subtle motion graphics, gated by html[data-motion].
   Default = subtle. "off" disables decorative motion (and reveals content
   immediately); "full" turns up amplitude/speed. Respects reduced-motion. */

/* ---------- SCROLL REVEAL ---------- */
[data-reveal] {
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
html[data-motion="subtle"] [data-reveal]:not(.in),
html[data-motion="full"] [data-reveal]:not(.in) {
  opacity: 0;
  transform: translateY(28px);
}
html[data-motion="full"] [data-reveal]:not(.in) {
  transform: translateY(40px);
}

/* ---------- HERO PHONE FLOAT ---------- */
@keyframes phone-float {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-14px); }
}
@keyframes phone-float-sm {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-7px); }
}
@keyframes phone-float-demo {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-12px); }
}
@keyframes phone-float-demo-sm {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-6px); }
}
html[data-motion="subtle"] .hero-visual .device { animation: phone-float-sm 9s ease-in-out infinite; }
html[data-motion="full"]   .hero-visual .device { animation: phone-float 6.5s ease-in-out infinite; }
html[data-motion="subtle"] .demo-visual .device { animation: phone-float-demo-sm 10s ease-in-out infinite; }
html[data-motion="full"]   .demo-visual .device { animation: phone-float-demo 7.5s ease-in-out infinite; }

/* secondary peek card counter-drifts */
@keyframes peek-drift {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(10px); }
}
html[data-motion="subtle"] .hero-secondary { animation: peek-drift 9s ease-in-out infinite; }
html[data-motion="full"]   .hero-secondary { animation: peek-drift 6.5s ease-in-out infinite; }

/* ---------- BREATHING AMBIENT GLOW ---------- */
@keyframes glow-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
html[data-motion="subtle"] .hero-glow { animation: glow-breathe 11s ease-in-out infinite; }
html[data-motion="full"]   .hero-glow { animation: glow-breathe 8s ease-in-out infinite; }

/* ---------- LAYER-CHIP EQUALIZERS ---------- */
@keyframes eq-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
.layer-chip .lv i { transform-origin: bottom; }
html[data-motion="subtle"] .layer-chip .lv i,
html[data-motion="full"]   .layer-chip .lv i {
  animation: eq-bar 1.6s ease-in-out infinite;
}
html[data-motion="full"] .layer-chip .lv i { animation-duration: 1.1s; }
/* stagger each bar + each chip a little */
.layer-chip .lv i:nth-child(1) { animation-delay: 0s; }
.layer-chip .lv i:nth-child(2) { animation-delay: 0.25s; }
.layer-chip .lv i:nth-child(3) { animation-delay: 0.5s; }
.layer-chip:nth-child(2) .lv i { animation-delay: 0.15s; }
.layer-chip:nth-child(3) .lv i { animation-delay: 0.35s; }
.layer-chip:nth-child(4) .lv i { animation-delay: 0.1s; }
.layer-chip:nth-child(5) .lv i { animation-delay: 0.45s; }
.layer-chip:nth-child(6) .lv i { animation-delay: 0.3s; }

/* ---------- NOW-PLAYING WAVEFORM PULSE ---------- */
@keyframes wave-pulse {
  0%, 100% { transform: scaleY(0.45); opacity: 0.6; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
.scr-play .wave i { transform-origin: center; }
html[data-motion="subtle"] .scr-play .wave i,
html[data-motion="full"]   .scr-play .wave i {
  animation: wave-pulse 1.8s ease-in-out infinite;
}
html[data-motion="full"] .scr-play .wave i { animation-duration: 1.3s; }

/* ---------- HUMAN-RECORD WAVEFORM SHIMMER ---------- */
@keyframes wave-shimmer { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
html[data-motion="subtle"] .record-wave i,
html[data-motion="full"]   .record-wave i {
  animation: wave-shimmer 2.6s ease-in-out infinite;
}

/* ---------- LIVE DOT / SEAL PULSES ---------- */
@keyframes soft-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
html[data-motion="subtle"] .scr-play .coh .dot,
html[data-motion="full"]   .scr-play .coh .dot { animation: soft-pulse 2.4s ease-in-out infinite; }
@keyframes seal-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(232,201,122,0.22); } 50% { box-shadow: 0 0 36px rgba(232,201,122,0.4); } }
html[data-motion="subtle"] .record-seal,
html[data-motion="full"]   .record-seal { animation: seal-pulse 3.4s ease-in-out infinite; }

/* ---------- OFF + REDUCED MOTION ---------- */
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Creator phone cluster: keep both screens fully static (no scroll-in motion) */
.side-phones.creator,
.side-phones.creator[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-visual .device, .demo-visual .device, .hero-secondary, .hero-glow,
  .layer-chip .lv i, .scr-play .wave i, .record-wave i,
  .scr-play .coh .dot, .record-seal { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* index-staggered reveal delays for flow + cards */
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }

/* grain toggle */
body.no-grain .grain,
body.no-grain .scr-grain { display: none !important; }