/* =============================================================
   STORYAT v2.0 — MOTION LIBRARY
   Choreographed keyframes used across the app.
   Every animation respects prefers-reduced-motion at the bottom.
   ============================================================= */


/* ============================================================
   AURORA / BRAND
   ============================================================ */

@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes aurora-text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* ============================================================
   ATMOSPHERIC ORB DRIFT — three opposing paths
   ============================================================ */

@keyframes orb-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(8vw, -4vh, 0) scale(1.06); }
  66%  { transform: translate3d(-3vw, 6vh, 0) scale(0.96); }
  100% { transform: translate3d(5vw, 2vh, 0) scale(1.02); }
}

@keyframes orb-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-7vw, 3vh, 0) scale(1.04); }
  66%  { transform: translate3d(4vw, -5vh, 0) scale(0.97); }
  100% { transform: translate3d(-2vw, 2vh, 0) scale(1.01); }
}

@keyframes orb-drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(6vw, -3vh, 0); }
  50%  { transform: translate3d(0, -6vh, 0); }
  75%  { transform: translate3d(-6vw, -3vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


/* ============================================================
   SPATIAL CARDS — subtle ambient pulse + hover lift
   ============================================================ */

@keyframes card-tilt {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.001); }
}


/* ============================================================
   STAGE / CANVAS — breathing glow
   ============================================================ */

@keyframes stage-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.75;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes stage-reveal {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================
   TAB BAR — gradient indicator morph + tab press
   ============================================================ */

@keyframes tab-indicator-morph {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes tab-icon-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}


/* ============================================================
   BUTTON SHIMMER — one-shot light sweep
   ============================================================ */

@keyframes shimmer-sweep {
  from { transform: translateX(-120%) skewX(-12deg); }
  to   { transform: translateX(220%)  skewX(-12deg); }
}


/* ============================================================
   COMMAND PALETTE — open / dismiss
   ============================================================ */

@keyframes palette-open {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

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


/* ============================================================
   EMPTY STATE — floating story silhouettes
   ============================================================ */

@keyframes empty-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50%      { transform: translate3d(0, -8px, 0) rotate(-2deg); }
}
@keyframes empty-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50%      { transform: translate3d(0, -12px, 0) rotate(4deg); }
}
@keyframes empty-float-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(6deg); }
  50%      { transform: translate3d(0, -6px, 0) rotate(8deg); }
}


/* ============================================================
   HERO HEADER — gradient text shimmer
   ============================================================ */

@keyframes hero-text-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   ACCESSIBILITY GATES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Stop all decorative loops */
  .atmosphere-orb,
  .btn-aurora,
  .aurora-text,
  .stage-glow,
  .empty-story-card {
    animation: none !important;
  }
  /* Disable shimmer on hover too */
  .btn-aurora::before { display: none !important; }
}