/* fx.css ― 躍動・未来感のモーション層。和の赤エネルギーを動かす。
   reduced-motion 時は base.css のグローバル無効化＋下記でも停止。 */

/* 動くグラデ文字（エネルギー） */
.fx-energy-text{background:var(--grad-energy);background-size:280% 280%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-flow 7s var(--ease) infinite}
@keyframes fx-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* グロー脈動 */
.fx-glow{animation:fx-glow 3.2s ease-in-out infinite}
@keyframes fx-glow{0%,100%{box-shadow:0 0 0 rgba(230,0,51,0)}50%{box-shadow:var(--glow-strong)}}

/* 日の丸エネルギーコア（回転リング＋脈動） */
.hinomaru{position:relative;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#ff5e3a 0%,#e60033 42%,#bc002d 70%,#8a0020 100%);
  box-shadow:var(--glow-strong);animation:fx-pulse 4.5s ease-in-out infinite}
.hinomaru::after{content:"";position:absolute;inset:-14%;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--c-crimson) 50%,transparent);
  border-top-color:transparent;border-left-color:transparent;animation:fx-spin 6s linear infinite}
@keyframes fx-pulse{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.04);filter:saturate(1.25)}}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* 動くグラデ・ボーダー（カード/ボタンの縁を流れる赤） */
.fx-grad-border{position:relative;z-index:0}
.fx-grad-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad-energy);background-size:300% 300%;animation:fx-flow 6s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}

/* スピードライン（集中線＝躍動） */
.speedlines{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5;z-index:0}
.speedlines::before,.speedlines::after{content:"";position:absolute;inset:-40%;
  background:repeating-linear-gradient(115deg,transparent 0 22px,color-mix(in srgb,var(--c-crimson) 9%,transparent) 22px 23px);
  animation:fx-slide 9s linear infinite}
.speedlines::after{animation-duration:14s;opacity:.5}
@keyframes fx-slide{to{transform:translateX(-23px)}}

/* スキャンライン（先端感） */
.fx-scan{position:relative;overflow:hidden}
.fx-scan::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 55%,transparent),transparent);
  animation:fx-scan 4s var(--ease) infinite}
@keyframes fx-scan{0%{left:-30%}60%,100%{left:130%}}

/* スクロール・リビール（読込時に下から立ち上がる） */
.fx-reveal{opacity:0;transform:translateY(22px);animation:fx-up .9s var(--ease-out) forwards}
.fx-reveal.d1{animation-delay:.08s}.fx-reveal.d2{animation-delay:.16s}.fx-reveal.d3{animation-delay:.24s}.fx-reveal.d4{animation-delay:.32s}
@keyframes fx-up{to{opacity:1;transform:none}}

/* 浮遊 */
.fx-float{animation:fx-float 7s ease-in-out infinite}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* hover加速（カード/ボタン） */
.fx-lift{transition:transform var(--mo-base) var(--ease-out),box-shadow var(--mo-base)}
.fx-lift:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--glow-strong)}

/* 動くアクセント帯（ヘッダー/フッター用） */
.fx-band{height:3px;background:var(--grad-energy);background-size:300% 100%;animation:fx-flow 5s linear infinite}

/* 数字カウント風（CSSのみ・装飾） */
.fx-tick{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .fx-energy-text{animation:none;background-position:0 50%}
  .fx-glow,.hinomaru,.hinomaru::after,.fx-grad-border::before,.speedlines::before,.speedlines::after,.fx-scan::after,.fx-float,.fx-band{animation:none!important}
  .fx-reveal{opacity:1;transform:none;animation:none}
}