/* 初始狀態副標題的緩慢呼吸效果。
   使用純 CSS，不依賴 Anime.js，也不接管其他介面動畫。 */

body.is-origin .brand-center p {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: subtitleBreathing 9s ease-in-out infinite;
}

/*
  一個完整循環：
  1. 由 10% 漸變至 96%，歷時 3 秒
  2. 高透明度停住 3 秒
  3. 由 96% 漸變回 10%，歷時 3 秒
  4. 到達低透明度後立即進入下一輪，不停留
*/
@keyframes subtitleBreathing {
  0% {
    opacity: .10;
    transform: scale(1);
  }

  33.333%,
  66.667% {
    opacity: .96;
    transform: scale(1.024);
  }

  100% {
    opacity: .10;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-origin .brand-center p {
    animation: none;
    opacity: .78;
    transform: none;
  }
}