/* Animated status symbols for the three homepage story shelves. */
#app .rail-status-icon {
  display: inline-grid;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  margin-right: .12rem;
  color: #bca8ff;
  filter: drop-shadow(0 0 3px rgba(188,168,255,.2));
  transform-origin: 50% 16%;
}

#app .rail-status-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

#app .tone-cyan .rail-status-icon {
  color: #bca8ff;
  filter: drop-shadow(0 0 3px rgba(188,168,255,.28));
}

#app .tone-violet .rail-status-icon {
  color: #e6c47b;
  filter: drop-shadow(0 0 3px rgba(230,196,123,.24));
}

#app .tone-blue .rail-status-icon {
  color: #69e6f3;
  filter: drop-shadow(0 0 3px rgba(105,230,243,.24));
}

/* Live waveform: five independent beats rather than scaling the whole icon. */
#app .rail-status-icon-live .rail-wave {
  transform-box: fill-box;
  transform-origin: center;
  animation: rail-wave-beat 1.18s ease-in-out infinite;
}
#app .rail-panel.is-icon-visible .rail-status-icon-live .rail-wave-1 { animation-delay: -.48s; }
#app .rail-panel.is-icon-visible .rail-status-icon-live .rail-wave-2 { animation-delay: -.24s; }
#app .rail-panel.is-icon-visible .rail-status-icon-live .rail-wave-3 { animation-delay: 0s; }
#app .rail-panel.is-icon-visible .rail-status-icon-live .rail-wave-4 { animation-delay: -.24s; }
#app .rail-panel.is-icon-visible .rail-status-icon-live .rail-wave-5 { animation-delay: -.48s; }

/* Completed badge: a restrained notification-bell-style shake with a long rest. */
#app .rail-status-icon-complete {
  animation: rail-medal-ring 2.8s ease-in-out infinite;
}
#app .rail-status-icon-complete .rail-icon-medal { fill: rgba(230,196,123,.045); }
#app .rail-status-icon-complete .rail-icon-check { stroke-width: 1.8; }
#app .rail-status-icon-complete .rail-icon-ribbon { opacity: .82; }

/* Upcoming hourglass: sand drains, then the frame turns over and starts again. */
#app .rail-status-icon-upcoming .rail-icon-hourglass {
  transform-box: fill-box;
  transform-origin: center;
  animation: rail-hourglass-turn 3.8s cubic-bezier(.65,0,.35,1) infinite;
}
#app .rail-status-icon-upcoming .rail-icon-sand-top {
  fill: currentColor;
  stroke: none;
  animation: rail-sand-top 3.8s linear infinite;
}
#app .rail-status-icon-upcoming .rail-icon-sand-bottom {
  fill: currentColor;
  stroke: none;
  animation: rail-sand-bottom 3.8s linear infinite;
}
#app .rail-status-icon-upcoming .rail-icon-sand-stream {
  stroke-dasharray: 1.2 1.5;
  animation: rail-sand-stream .42s linear infinite;
}

@keyframes rail-wave-beat {
  0%, 100% { transform: scaleY(.3); opacity: .46; }
  45% { transform: scaleY(1.12); opacity: 1; }
}

@keyframes rail-medal-ring {
  0%, 60%, 100% { transform: rotate(0deg); filter: drop-shadow(0 0 3px rgba(230,196,123,.24)); }
  67% { transform: rotate(-12deg); }
  74% { transform: rotate(10deg); filter: drop-shadow(0 0 7px rgba(230,196,123,.48)); }
  81% { transform: rotate(-7deg); }
  88% { transform: rotate(4deg); }
  94% { transform: rotate(0deg); filter: drop-shadow(0 0 3px rgba(230,196,123,.24)); }
}

@keyframes rail-hourglass-turn {
  0%, 70% { transform: rotate(0deg); }
  84%, 100% { transform: rotate(180deg); }
}

@keyframes rail-sand-top {
  0%, 8% { opacity: .9; transform: scaleY(1); transform-origin: 50% 100%; }
  64%, 70% { opacity: .15; transform: scaleY(.12); transform-origin: 50% 100%; }
  84%, 100% { opacity: .9; transform: scaleY(1); }
}

@keyframes rail-sand-bottom {
  0%, 8% { opacity: .15; transform: scaleY(.14); transform-origin: 50% 100%; }
  64%, 70% { opacity: .9; transform: scaleY(1); transform-origin: 50% 100%; }
  84%, 100% { opacity: .15; transform: scaleY(.14); }
}

@keyframes rail-sand-stream {
  to { stroke-dashoffset: -2.7; }
}

@media (max-width: 640px) {
  #app .rail-status-icon {
    flex-basis: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .rail-status-icon,
  #app .rail-status-icon * {
    animation: none !important;
  }
}