/* ============================================================
   セクション別のサッカー演出（7種すべて別モチーフ）

     PROFILE       背番号10 ＋ ユニフォームのストライプ
     TRAINING      戦術ボードのパス矢印
     BENEFITS      アジリティラダーが順に点灯
     GALLERY       スタジアムの観客フラッシュ
     HOW IT WORKS  ステップ間をボールがパスされて進む
     PRICE         スコアボードのカウントアップ
     CONTACT       ゴールへのシュート ＋ ネットの揺れ

   共通ルール:
     - 演出は全て .sfx（position:absolute / z-index:-1）の中だけ
       → 本文レイアウトには一切影響しない
     - 画面に入ったら JS が section に .sfx-on を付ける
       → それまで再生しない
     - transform は使わず translate / scale / rotate を使う
       （Tailwind v4 の hover:translate-y-* と競合させないため）
   ============================================================ */

[data-sfx] { position: relative; }

.sfx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.sfx svg { display: block; width: 100%; height: 100%; }

/* 見出し帯の高さ（py-16 の 64px ＋ 見出しブロック）。
   セクション本文カードはほぼ不透明なので、演出はこの帯・左右の余白・
   下の余白といった「実際に見える場所」に置いている。 */
:root { --sfx-band: 180px; }

/* ============================================================
   1. PROFILE — 背番号10（見出し帯の右側）
   ============================================================ */
.sfx-profile .sfx-stripes {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--sfx-band);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(56, 232, 255, 0.07) 0 30px,
    transparent 30px 60px
  );
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 48%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 48%);
  opacity: 0;
  translate: -40px 0;
}
.sfx-on .sfx-stripes {
  animation: sfx-stripes-in 1.4s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sfx-profile .sfx-number {
  position: absolute;
  right: 3%;
  top: 4px;
  font-size: 150px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(56, 232, 255, 0.55);
  opacity: 0;
}
.sfx-on .sfx-number {
  animation:
    sfx-no-in 1.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    sfx-no-breathe 5s 1.9s ease-in-out infinite;
}
@media (max-width: 640px) {
  .sfx-profile .sfx-number { font-size: 96px; right: 4%; }
}

@keyframes sfx-stripes-in {
  to { opacity: 1; translate: 0 0; }
}
@keyframes sfx-no-in {
  from { opacity: 0; scale: 1.25; }
  to   { opacity: 0.5; scale: 1; }
}
@keyframes sfx-no-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.8; }
}

/* ============================================================
   2. TRAINING — 戦術ボードのパス矢印
   ============================================================ */
/* 盤面のマス目は全面に敷き、中央（カードの裏）はマスクで抜く。
   パス矢印は実際に見える見出し帯に配置する。 */
.sfx-training .sfx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 58% 46% at 50% 62%, transparent 42%, #000 88%);
  mask-image: radial-gradient(ellipse 58% 46% at 50% 62%, transparent 42%, #000 88%);
  opacity: 0;
}
.sfx-on .sfx-grid { animation: sfx-fade-to 1.2s ease forwards; }

.sfx-training svg {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--sfx-band);
  width: 100%;
}

.sfx-training .sfx-arrow {
  fill: none;
  stroke: rgba(56, 232, 255, 0.62);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(0, 183, 255, 0.6));
}
.sfx-on .sfx-arrow {
  animation: sfx-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.sfx-on .sfx-arrow:nth-of-type(1) { animation-delay: 0.25s; }
.sfx-on .sfx-arrow:nth-of-type(2) { animation-delay: 0.85s; }
.sfx-on .sfx-arrow:nth-of-type(3) { animation-delay: 1.45s; }

.sfx-training .sfx-mark circle {
  fill: none;
  stroke: rgba(255, 122, 26, 0.75);
  stroke-width: 2.5;
  opacity: 0;
  scale: 0.4;
  transform-box: fill-box;
  transform-origin: center;
}
.sfx-on .sfx-mark circle {
  animation: sfx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.sfx-on .sfx-mark circle:nth-child(1) { animation-delay: 0.15s; }
.sfx-on .sfx-mark circle:nth-child(2) { animation-delay: 0.75s; }
.sfx-on .sfx-mark circle:nth-child(3) { animation-delay: 1.35s; }
.sfx-on .sfx-mark circle:nth-child(4) { animation-delay: 1.95s; }

@keyframes sfx-pop {
  to { opacity: 0.8; scale: 1; }
}

/* ============================================================
   3. BENEFITS — アジリティラダー（下部の余白に横向きで敷く）
   ============================================================ */
.sfx-benefits svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 74px;
  width: 100%;
}
.sfx-benefits .sfx-rail {
  fill: none;
  stroke: rgba(223, 251, 255, 0.16);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sfx-on .sfx-rail {
  animation: sfx-draw 1.4s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.sfx-benefits .sfx-rung {
  stroke: rgba(56, 232, 255, 0.28);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.35;
}
/* 一段ずつ踏んでいくように点灯（ループ） */
.sfx-on .sfx-rung {
  animation: sfx-step 2.8s linear infinite;
}

@keyframes sfx-step {
  0%, 72%, 100% {
    stroke: rgba(56, 232, 255, 0.28);
    opacity: 0.35;
    filter: none;
  }
  8% {
    stroke: rgba(125, 239, 255, 1);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(0, 183, 255, 0.95));
  }
  26% {
    stroke: rgba(56, 232, 255, 0.28);
    opacity: 0.35;
    filter: none;
  }
}

/* ============================================================
   4. GALLERY — 観客席のフラッシュ
   ============================================================ */
.sfx-gallery .sfx-stand {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--sfx-band);
  background-image: radial-gradient(
    ellipse 120% 100% at 50% 0%,
    rgba(0, 183, 255, 0.16),
    transparent 72%
  );
}
.sfx-gallery .sfx-flash {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 10px 3px rgba(214, 245, 255, 0.9);
}
.sfx-on .sfx-flash {
  animation: sfx-flash 3.4s ease-out infinite;
}

@keyframes sfx-flash {
  0%, 100% { opacity: 0; scale: 0.6; }
  3%       { opacity: 1; scale: 1.5; }
  11%      { opacity: 0; scale: 0.8; }
}

/* ============================================================
   5. HOW IT WORKS — ステップ間のパス（位置は JS が計測）
   ============================================================ */
.sfx-flow .sfx-line {
  position: absolute;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(56, 232, 255, 0.75),
    rgba(56, 232, 255, 0.18)
  );
  transform-origin: top center;
  scale: 1 0;
}
.sfx-on .sfx-line { animation: sfx-line-grow 1.1s 0.15s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

.sfx-flow .sfx-node {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid rgba(56, 232, 255, 0.85);
  opacity: 0;
}
.sfx-flow .sfx-node::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(56, 232, 255, 0.7);
  opacity: 0;
}
.sfx-on .sfx-node { animation: sfx-fade-to 0.5s ease forwards; }
/* ボール到達時のリング（JS が .hit を付け外し） */
.sfx-flow .sfx-node.hit::after { animation: sfx-node-ring 0.7s ease-out; }

.sfx-flow .sfx-ball {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -10px;
  opacity: 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.sfx-flow .sfx-ball svg { width: 100%; height: 100%; }

@keyframes sfx-line-grow { to { scale: 1 1; } }
@keyframes sfx-node-ring {
  from { opacity: 0.9; scale: 0.7; }
  to   { opacity: 0;   scale: 2.1; }
}

/* ============================================================
   6. PRICE — スコアボード
   ============================================================ */
/* 中央の料金カードは不透明なので、LED とスキャンは左右の余白側に見せる */
.sfx-pricing .sfx-led {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 232, 255, 0.22) 1px, transparent 1.6px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 34% 52% at 50% 55%, transparent 55%, #000 92%);
  mask-image: radial-gradient(ellipse 34% 52% at 50% 55%, transparent 55%, #000 92%);
  opacity: 0;
}
.sfx-on .sfx-led { animation: sfx-fade-to 1.2s ease forwards; }

.sfx-pricing .sfx-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 44%,
    rgba(125, 239, 255, 0.16) 50%,
    transparent 56%
  );
  opacity: 0;
}
.sfx-on .sfx-scan { animation: sfx-scan 4.5s 1s ease-in-out infinite; }

/* カウントアップ中だけ数字を光らせる */
[data-count].is-counting {
  color: #7defff;
  text-shadow: 0 0 22px rgba(0, 183, 255, 0.95);
}
[data-count] {
  transition: color 0.5s ease, text-shadow 0.5s ease;
  font-variant-numeric: tabular-nums;
}

@keyframes sfx-scan {
  0%       { translate: 0 -55%; opacity: 0; }
  15%      { opacity: 1; }
  70%      { opacity: 1; }
  85%, 100% { translate: 0 55%; opacity: 0; }
}

/* ============================================================
   7. CONTACT — ゴールへのシュート
   ============================================================ */
.sfx-contact .sfx-goal {
  fill: none;
  stroke: rgba(223, 251, 255, 0.55);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sfx-on .sfx-goal { animation: sfx-draw 1.5s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

.sfx-contact .sfx-net {
  stroke: rgba(223, 251, 255, 0.2);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center top;
}
.sfx-on .sfx-net { animation: sfx-net 5s 1.2s ease-out infinite; }

.sfx-contact .sfx-shot {
  fill: none;
  stroke: rgba(255, 47, 179, 0.5);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
  opacity: 0;
}
.sfx-on .sfx-shot { animation: sfx-shot-trail 5s 1.2s ease-out infinite; }

.sfx-contact .sfx-ball-wrap { opacity: 0; }
.sfx-on .sfx-ball-wrap { animation: sfx-shot-ball 5s 1.2s ease-out infinite; }
.sfx-contact .sfx-ball-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: sfx-spin 0.5s linear infinite;
}

@keyframes sfx-net {
  0%, 32%   { opacity: 0.55; scale: 1 1; }
  38%       { opacity: 1;    scale: 1.03 1.14; }
  46%       { opacity: 0.8;  scale: 0.99 0.95; }
  54%       { opacity: 0.65; scale: 1.01 1.04; }
  62%, 100% { opacity: 0.55; scale: 1 1; }
}
@keyframes sfx-shot-trail {
  0%        { opacity: 0; }
  8%        { opacity: 1; }
  35%       { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes sfx-shot-ball {
  0%        { opacity: 0; }
  6%        { opacity: 1; }
  34%       { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes sfx-spin { to { rotate: 360deg; } }

/* ============================================================
   共通 keyframes
   ============================================================ */
@keyframes sfx-fade-to { to { opacity: 1; } }
@keyframes sfx-draw    { to { stroke-dashoffset: 0; } }

/* ============================================================
   視差軽減設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sfx-flash,
  .sfx-scan,
  .sfx-flow .sfx-ball {
    display: none;
  }
  .sfx-on .sfx-rung,
  .sfx-on .sfx-net,
  .sfx-on .sfx-shot,
  .sfx-on .sfx-ball-wrap,
  .sfx-contact .sfx-ball-spin,
  .sfx-on .sfx-number {
    animation: none;
  }
  .sfx-stripes,
  .sfx-grid,
  .sfx-led,
  .sfx-node {
    opacity: 1;
    translate: none;
  }
  .sfx-number { opacity: 0.16; }
  .sfx-arrow,
  .sfx-rail,
  .sfx-goal {
    stroke-dashoffset: 0;
    animation: none;
  }
  .sfx-mark circle { opacity: 0.8; scale: 1; animation: none; }
  .sfx-net { opacity: 0.55; }
  .sfx-line { scale: 1 1; animation: none; }
}