@charset "UTF-8";
/*
 * 子テーマのアニメーション定義
 * Cocoonが自動的に読み込みます（functions.phpでの記述は不要）。
 * すべて「目で追えない遅さ」に揃えています。速くすると本文から注意が逸れます。
 */

/* ゆっくり回転 */
@keyframes ls-spin      { from { transform: rotate(0);    } to { transform: rotate(360deg);  } }
@keyframes ls-spin-rev  { from { transform: rotate(0);    } to { transform: rotate(-360deg); } }

/* ふわりと浮遊 */
@keyframes ls-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes ls-float-s   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px);  } }

/* 漂う */
@keyframes ls-drift     { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, 12px); } }

/* 下からふわっと表示（読み込み時に1回だけ） */
@keyframes ls-fadeup    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 使い方の例
   .ls-mark  { animation: ls-float 9s ease-in-out infinite; }
   .ls-ring  { animation: ls-spin 72s linear infinite; }
   .ls-reveal{ animation: ls-fadeup .9s var(--ls-ease) both; }
*/

/* 動きを減らす設定にしている方には、すべて止めます（アクセシビリティ対応） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}