/* Sleep Studio — motion primitives
   Custom eased curves only (no default ease/linear on UI), transform +
   opacity only, nothing animates from scale(0), every keyframe has a
   reduced-motion counterpart. Frequency gate: list rows and card grids
   animate once on mount (occasional, not repeated), so a deliberate
   30-45ms stagger earns its keep; hover/press states stay near-instant. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Origin-aware entrance for popovers anchored to a trigger (transform-origin
   set on the element itself, e.g. top left) -- scale-only, no translateY, so
   the pop reads as growing out of the trigger rather than rising up the page. */
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* the master meter's idle "breathing" -- only ever runs while a signal
   is actually live (see js/app.js), never purely decorative */
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes needle-flash {
  0%   { opacity: 0; transform: scaleY(0.9); }
  18%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.96); }
}

/* hero signature: a slow, calm waveform breath -- audio + sleep in one
   idle gesture. Amplitude is subtle on purpose; this is a night product,
   not a spectrum analyzer. */
@keyframes wave-breathe {
  0%, 100% { transform: scaleY(var(--wave-min, 0.35)); }
  50%      { transform: scaleY(var(--wave-max, 1)); }
}

.stagger-in > * {
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}
.stagger-in > *:nth-child(1) { animation-delay: calc(var(--stagger-step) * 0); }
.stagger-in > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.stagger-in > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.stagger-in > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.stagger-in > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
.stagger-in > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 5); }
.stagger-in > *:nth-child(n+7) { animation-delay: calc(var(--stagger-step) * 6); }

.hero-wave { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.hero-wave i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ember-strong), var(--ember-soft));
  transform-origin: bottom center;
  animation: wave-breathe var(--dur-ambient) var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 130ms);
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in > * { animation: fade-in var(--dur-fast) linear both; animation-delay: 0ms !important; }
  .hero-wave i { animation: none; transform: scaleY(0.7); }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}