/* ===== RSK ロゴ：レインボーで色が流れ、輪っかの光が回る =====
 * 使い方：ロゴの <img> を <span class="rsk-anim"> で囲むだけ。
 *   <a href="#hero" class="logo"><span class="rsk-anim"><img src="images/logo/logo-rsk-silver.png" alt="RSK 株式会社ラスク RASUKU INC."></span></a>
 * このCSSは css/ に置く想定（下の url は css/ から見た画像の場所）。置き場所を変えたら url を直す。
 * 動きを減らす設定（OSの「視差効果を減らす」）の人には、止まった虹色で表示する。
 */
@property --rsk-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.rsk-anim { position: relative; display: inline-block; line-height: 0; isolation: isolate; }
.rsk-anim img { display: block; position: relative; z-index: 0; }

/* ① 虹色：ロゴの形だけに色をのせる（明るさ・立体感はロゴのまま） */
.rsk-anim::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, #ff3b3b, #ff8a00, #ffd400, #00c853, #00d4b4, #00b8ff, #2f6bff, #8f4bff, #ff3dc8, #ff3b3b);
  background-size: 200% 100%;
  mix-blend-mode: color;
  -webkit-mask: url(../images/logo/logo-rsk-silver.png) center / contain no-repeat;
          mask: url(../images/logo/logo-rsk-silver.png) center / contain no-repeat;
  animation: rsk-flow 4s linear infinite;
}

/* ② 輪っかの光：中心から回る細い光の帯が、輪（とロゴ）の上を一周する */
.rsk-anim::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--rsk-a) at 52% 50%,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 310deg,
      rgba(255,255,255,.55) 335deg, rgba(255,255,255,1) 354deg, rgba(255,255,255,0) 360deg);
  mix-blend-mode: screen;
  -webkit-mask: url(../images/logo/logo-rsk-silver.png) center / contain no-repeat;
          mask: url(../images/logo/logo-rsk-silver.png) center / contain no-repeat;
  animation: rsk-orbit 2.6s linear infinite;
}

/* ロゴのまわりの光も、ゆっくり色が変わる */
.rsk-anim img { animation: rsk-glow 4s linear infinite; }

@keyframes rsk-flow  { to { background-position: 200% 0; } }
@keyframes rsk-orbit { to { --rsk-a: 360deg; } }
@keyframes rsk-glow {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 60, 120, .55)); }
  33%  { filter: drop-shadow(0 0 6px rgba(255, 210, 0, .55)); }
  66%  { filter: drop-shadow(0 0 6px rgba(0, 190, 255, .6)); }
  100% { filter: drop-shadow(0 0 6px rgba(255, 60, 120, .55)); }
}

@media (prefers-reduced-motion: reduce) {
  .rsk-anim::after, .rsk-anim::before, .rsk-anim img { animation: none; }
  .rsk-anim::before { display: none; }
}

/* 2026-10-05 社長指示「ロゴ、全てシルバーで（左上の）」：虹色と色つきの光を止め、シルバーのまま。
 * 輪っかを回る白い光だけ、控えめに残す。 */
.rsk-anim::after { display: none !important; }
.rsk-anim img { animation: none !important; }
.rsk-anim::before { opacity: .55; }