/*
  Keyframes from "Achrona Challenge Site.dc.html".
  Namespaced with an ach- prefix because @keyframes names are global even when
  they are referenced from a Blazor scoped stylesheet.
*/

/* Particles drifting up and out of frame. */
@keyframes ach-rise {
  0%   { transform: translateY(40px) rotate(0deg); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateY(-180px) rotate(200deg); opacity: 0; }
}

/* Slow inhale/exhale for orbs and moons. */
@keyframes ach-breathe {
  0%, 100% { transform: scale(1); opacity: 0.78; }
  50%      { transform: scale(1.13); opacity: 1; }
}

/* Pulsing glow on display headings. */
@keyframes ach-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Expanding halo ring. */
@keyframes ach-ring {
  0%   { transform: scale(0.85); opacity: 0.65; }
  100% { transform: scale(2); opacity: 0; }
}

/* Orbit rotation. */
@keyframes ach-spin-slow {
  to { transform: rotate(360deg); }
}

/* Oracle: slow blink of the familiar's eyes. */
@keyframes ach-blink-eye {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}

/* Oracle: "online" status dot. */
@keyframes ach-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Oracle: chat panel and speech bubble entrance. */
@keyframes ach-bubble-in {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Oracle: typing indicator dots. */
@keyframes ach-dot-fade {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-2px); }
}

/* Journey: pulsing halo on the node the team is standing on. */
@keyframes ach-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--faction-accent-rgb) / 0.55), 0 0 22px rgb(var(--faction-accent-rgb) / 0.7); }
  50%      { box-shadow: 0 0 0 16px rgb(var(--faction-accent-rgb) / 0), 0 0 34px rgb(var(--faction-accent-rgb) / 0.95); }
}

/* Home hero: stars fading in and out of the night sky. */
@keyframes ach-twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  /*
    Everything above is decorative, so hold each animation on a legible frame
    instead of letting it run.
  */
  [class^="ach-"],
  [class*=" ach-"] {
    animation: none !important;
  }
}