/* css/animations.css — Keyframes + transition utilities */

/* ── Page Load Sequence ─────────────────────────────────── */
body {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

body.loaded {
  opacity: 1;
}

.app-header {
  transform: translateY(calc(-1 * var(--header-height)));
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-entry),
    opacity var(--dur-slow) var(--ease-out);
}

body.loaded .app-header {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 60ms;
}

.live-hud {
  transform: translateY(var(--hud-height));
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-entry),
    opacity var(--dur-base) var(--ease-out);
}

body.loaded .live-hud {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 340ms;
}

/* ── Keyframes ──────────────────────────────────────────── */

/* Breathing pulse for permission overlay */
@keyframes permission-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* REC dot pulse */
@keyframes rec-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

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

/* Fade up */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tile stagger animation — applied via JS */
@keyframes tile-appear {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tile-animate {
  animation: tile-appear 0.35s var(--ease-entry) both;
}

/* Silence state pulse */
@keyframes silence-pulse {
  0%, 100% { opacity: 0.06; transform: scale(1); }
  50%       { opacity: 0.12; transform: scale(1.04); }
}

/* Data readout flicker on update */
@keyframes value-tick {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Entry overlay open */
.entry-overlay:not([hidden]) {
  animation: entry-open 0.32s var(--ease-entry) both;
}

@keyframes entry-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Gallery filter bar appear */
.filter-bar {
  animation: fade-in 0.4s var(--ease-out) both;
  animation-delay: 80ms;
}

/* ── Transition utility classes ─────────────────────────── */
.transition-opacity {
  transition: opacity var(--dur-base) var(--ease-out);
}

.transition-transform {
  transition: transform var(--dur-base) var(--ease-spring);
}