/* =========================================================
  Index: Fighters preview (coverflow carousel)

  ▼ ここを触れば “微調整” できます（CSS）

    1) 真ん中の写真サイズ
      --ftprev-cardW

    2) 左右の距離（1枚目/2枚目/3枚目）
      --ftprev-shift1 / --ftprev-shift2 / --ftprev-shift3

    3) ステージ高さ（写真エリアの高さ）
      --ftprev-stageH

    4) ◀ 1/7 ▶ の見た目＆位置
      --ftprev-pagerH / --ftprev-pagerOffsetY など

    5) 名前とプロフィール
      --ftprev-nameSize / --ftprev-bioSize

    6) 名前の「1文字ずつ出る」速度
      --ftprev-nameDelay / --ftprev-nameDur / --ftprev-nameMoveX

    7) プロフィール欄の高さ（プロフィール無しでも下のセクションが動かない）
      --ftprev-bioBoxH

    8) ドラッグ中の追従（JSが --ftprev-dragX を動かします）
      --ftprev-dragX
========================================================= */



/* =========================================================
  Fighters header (Title + red line + flowing text)
  - Index の #fighters だけ
  - ▼ 微調整ポイント（CSS変数）
    --ftprev-titleSize        : "Fighters" 文字サイズ
    --ftprev-titleStagger     : 1文字ずつ落ちる間隔
    --ftprev-titleDur         : 1文字の落ちる時間
    --ftprev-marqueeDur       : 下の英文の流れる速さ（小さいほど速い）
========================================================= */

#fighters .ftprevHead{
  /* --- tuning vars --- */
  --ftprev-titleSize: clamp(48px, 7vw, 72px);
  --ftprev-titleStagger: 90ms;
  --ftprev-titleDur: 720ms;

  /* "Fighters" は 8文字なので (7 * stagger) + dur */
  --ftprev-titleTotal: calc((7 * var(--ftprev-titleStagger)) + var(--ftprev-titleDur));

  --ftprev-headLineW: min(320px, 70%);
  --ftprev-headLineH: 3px;
  --ftprev-headLineDelay: 140ms;
  --ftprev-headLineDur: 320ms;

  --ftprev-marqueeSize: 14px;
  --ftprev-marqueeDur: 18s;
  --ftprev-marqueeGap: 48px;
  --ftprev-marqueeDelay: 260ms;

  margin: 0 0 16px;
}

#fighters .ftprevHead__title{
  margin: 0;
  font-size: var(--ftprev-titleSize);
  line-height: 1.05;
  letter-spacing: .04em;
  font-weight: 900;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

#fighters .ftprevHead__ch{
  display: inline-block;
  opacity: 0;
  transform: translate(36px, -36px) rotate(8deg);
  animation: ftprevTitleDrop var(--ftprev-titleDur) cubic-bezier(.18,.9,.2,1) forwards;
  animation-delay: calc(var(--i) * var(--ftprev-titleStagger));
  will-change: transform, opacity;
}

@keyframes ftprevTitleDrop{
  0%{ opacity:0; transform: translate(36px, -36px) rotate(8deg); filter: blur(1px); }
  60%{ opacity:1; transform: translate(-2px, 2px) rotate(0deg); filter: blur(0); }
  100%{ opacity:1; transform: translate(0,0) rotate(0deg); filter: blur(0); }
}

#fighters .ftprevHead__line{
  margin-top: 10px;
  width: var(--ftprev-headLineW);
  height: var(--ftprev-headLineH);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(225,6,0,1), rgba(255,59,48,0));
  box-shadow: 0 10px 22px rgba(225,6,0,.18);

  transform-origin: left;
  transform: scaleX(0);
  animation: ftprevHeadLineIn var(--ftprev-headLineDur) ease forwards;
  animation-delay: calc(var(--ftprev-titleTotal) + var(--ftprev-headLineDelay));
}

@keyframes ftprevHeadLineIn{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

/* 下の英文：右→左へずっと流す（Marquee） */
#fighters .ftprevHead__marquee{
  margin-top: 14px; /* ラインより少し下（= 1文字分くらい） */
  overflow: hidden;
  white-space: nowrap;

  font-size: var(--ftprev-marqueeSize);
  color: rgba(255,255,255,.74);
  letter-spacing: .02em;

  /* 左右をほんのりフェード */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

  /* Fightersが出て → ラインが出て → ふわっと表示 */
  opacity: 0;
  transform: translateY(4px);
  animation: ftprevMarqueeIn 320ms ease forwards;
  animation-delay: calc(var(--ftprev-titleTotal) + var(--ftprev-headLineDelay) + var(--ftprev-marqueeDelay));
}

@keyframes ftprevMarqueeIn{
  to{ opacity: 1; transform: translateY(0); }
}

#fighters .ftprevHead__marqueeTrack{
  display: inline-flex;
  width: max-content;
  animation: ftprevMarquee var(--ftprev-marqueeDur) linear infinite;
}

#fighters .ftprevHead__marqueeText{
  padding-right: var(--ftprev-marqueeGap);
}

@keyframes ftprevMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

@media (max-width: 640px){
  #fighters .ftprevHead{
    --ftprev-titleSize: clamp(42px, 12vw, 64px);
    --ftprev-marqueeSize: 13px;
  }
}


#fighters .ftprev{
  /* ドラッグ（JSが操作） */
  --ftprev-dragX: 0px;

  /* ------------------------------------------------------
    1) 真ん中の写真サイズ（＝カードの幅）
  ------------------------------------------------------ */
  --ftprev-cardW: clamp(220px, 34vw, 420px);

  /* ------------------------------------------------------
    2) 左右の距離（何pxズラすか）
  ------------------------------------------------------ */
  --ftprev-shift1: clamp(140px, 16vw, 260px);
  --ftprev-shift2: clamp(260px, 30vw, 480px);
  --ftprev-shift3: clamp(360px, 44vw, 680px);

  /* ------------------------------------------------------
    3) ステージ（写真エリア）の高さ
  ------------------------------------------------------ */
  --ftprev-stageH: clamp(260px, 44vw, 460px);

  /* ------------------------------------------------------
    4) ◀ 1/7 ▶（コントロール）の見た目
  ------------------------------------------------------ */
  --ftprev-pagerH: 44px;
  --ftprev-pagerPadX: 12px;
  --ftprev-pagerGap: 10px;
  --ftprev-pagerBg: #ffffff;
  --ftprev-pagerText: #000000;
  --ftprev-pagerShadow: 0 12px 30px rgba(0,0,0,.35);

  /* ▼位置の微調整（+ 下へ / - 上へ） */
  --ftprev-pagerOffsetY: 0px;

  /* ------------------------------------------------------
    5) 名前 & プロフィール
  ------------------------------------------------------ */
  --ftprev-nameSize: 24px;
  --ftprev-bioSize: 18px;

  /* ✅ プロフィールが空でも高さキープ（PC: 約3行） */
  --ftprev-bioBoxH: 4.95em;

  /* ------------------------------------------------------
    6) 名前の「1文字ずつ出る」アニメ
    ※基本は JS の SETTINGS で上書きされます
  ------------------------------------------------------ */
  --ftprev-nameDelay: 80ms;
  --ftprev-nameDur: 560ms;
  --ftprev-nameMoveX: -14px;

  margin-top: 14px;
}


/* =========================================================
  Stage (写真エリア)
  - 「枠」を消す：border / box-shadow / background を無くす
========================================================= */

#fighters .ftprev__stage{
  position: relative;
  height: var(--ftprev-stageH);

  /* ✅ “写真一覧の周りの枠”を消す */
  border: 0;
  background: transparent;
  box-shadow: none;

  border-radius: var(--radius);
  overflow: hidden;
  outline: none;

  /* ✅ スマホスワイプが気持ちよく動くため */
  touch-action: pan-y;
}

#fighters .ftprev__stage:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 6px;
}

#fighters .ftprev__stack{
  position: absolute;
  inset: 0;
  perspective: 1100px;
  transform-style: preserve-3d;
}

/* ドラッグ中：指に追従させる（transitionを切る） */
#fighters .ftprev.is-dragging .ftprev__card{
  transition: none !important;
}


/* =========================================================
  Cards (写真)
========================================================= */

#fighters .ftprev__card{
  /* ホバーで少し上に上がる量（デフォルト0） */
  --ftprev-hoverLift: 0px;

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ftprev-cardW);
  aspect-ratio: 1 / 1;

  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateZ(-520px)
    scale(.62);

  opacity: 0;
  pointer-events: none;

  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);

  transition: transform 240ms ease, opacity 240ms ease, filter 240ms ease;
  will-change: transform;
}

/* ✅ PC：ホバーで優しく上に上がる */
@media (hover:hover) and (pointer:fine){
  #fighters .ftprev__card:hover{
    --ftprev-hoverLift: -20px;
  }
}

#fighters .ftprev__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.01);
}

/* subtle red vibe */
#fighters .ftprev__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(225,6,0,.18), transparent 60%),
    radial-gradient(700px 420px at 92% 16%, rgba(255,59,48,.10), transparent 60%);
  pointer-events:none;
}

/* bottom shade */
#fighters .ftprev__card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.38));
  pointer-events:none;
}

#fighters .ftprev__card:not(.is-center){
  filter: saturate(.92) brightness(.90);
}

/* ---- positions ---- */
#fighters .ftprev__card.is-center{
  opacity: 1;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateZ(0)
    scale(1);
  z-index: 7;
}

#fighters .ftprev__card.is-left1{
  opacity: .72;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(calc(-1 * var(--ftprev-shift1)))
    translateZ(-140px)
    rotateY(22deg)
    scale(.88);
  z-index: 6;
}

#fighters .ftprev__card.is-right1{
  opacity: .72;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(var(--ftprev-shift1))
    translateZ(-140px)
    rotateY(-22deg)
    scale(.88);
  z-index: 6;
}

#fighters .ftprev__card.is-left2{
  opacity: .40;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(calc(-1 * var(--ftprev-shift2)))
    translateZ(-310px)
    rotateY(30deg)
    scale(.74);
  z-index: 5;
}

#fighters .ftprev__card.is-right2{
  opacity: .40;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(var(--ftprev-shift2))
    translateZ(-310px)
    rotateY(-30deg)
    scale(.74);
  z-index: 5;
}

#fighters .ftprev__card.is-left3{
  opacity: .22;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(calc(-1 * var(--ftprev-shift3)))
    translateZ(-520px)
    rotateY(36deg)
    scale(.62);
  z-index: 4;
}

#fighters .ftprev__card.is-right3{
  opacity: .22;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translateX(var(--ftprev-dragX, 0px))
    translateY(var(--ftprev-hoverLift, 0px))
    translateX(var(--ftprev-shift3))
    translateZ(-520px)
    rotateY(-36deg)
    scale(.62);
  z-index: 4;
}

#fighters .ftprev__card.is-hidden{
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
  Pager (◀ 1/7 ▶)
  - 真ん中写真の下あたりに「半分かぶせる」
========================================================= */

#fighters .ftprev__pager{
  position: absolute;
  left: 50%;
  top: 50%;

  /*
    ✅ “真ん中写真の下の方に、上半分かぶる” 位置
    - 50%（写真の中心）から、写真の半分だけ下へ移動
    - さらに、コントロールの半分だけ上に戻す
  */
  transform: translate(
    -50%,
    calc(
      (var(--ftprev-cardW) / 2) - (var(--ftprev-pagerH) / 2) + var(--ftprev-pagerOffsetY)
    )
  );

  height: var(--ftprev-pagerH);
  padding: 0 var(--ftprev-pagerPadX);
  display:flex;
  align-items:center;
  gap: var(--ftprev-pagerGap);
  border-radius: 999px;
  background: var(--ftprev-pagerBg);
  color: var(--ftprev-pagerText);
  box-shadow: var(--ftprev-pagerShadow);

  z-index: 20;
}

#fighters .ftprev__btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ftprev-pagerText);

  width: calc(var(--ftprev-pagerH) - 6px);
  height: calc(var(--ftprev-pagerH) - 6px);
  border-radius: 999px;
  cursor: pointer;

  font-weight: 900;
  letter-spacing: .02em;
  user-select: none;
  transition: background 140ms ease, transform 140ms ease;
}

#fighters .ftprev__btn:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
}

#fighters .ftprev__btn:active{
  transform: translateY(0);
}

#fighters .ftprev__btn[disabled]{
  opacity: .35;
  cursor: default;
}

#fighters .ftprev__btn[disabled]:hover{
  background: transparent;
  transform: none;
}

#fighters .ftprev__count{
  /* ✅ “1/9の枠”を消す */
  border: 0;
  background: transparent;
  box-shadow: none;

  min-width: 80px;
  text-align:center;
  font-weight: 900;
  letter-spacing: .10em;
  font-variant-numeric: tabular-nums;
}


/* =========================================================
  Text (名前 & プロフィール)
========================================================= */

#fighters .ftprev__text{
  text-align: center;
  margin-top: 18px;
  padding: 0 8px;
}

/* 名前：白で太い字 + 1文字ずつ出る */
#fighters .ftprev__name{
  color: rgba(255,255,255,.98);
  font-weight: 900;
  font-size: var(--ftprev-nameSize);
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: 12px;
  padding-bottom: 12px;
  position: relative;
  text-shadow: 0 12px 26px rgba(0,0,0,.38);

  /* 文字のアニメがズレないように */
  display: inline-block;
  max-width: 100%;
}
/* ✅ 名前の下に “赤いライン” を追加（プロフィールページっぽい） */
#fighters .ftprev__name::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(280px, 72%);
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(225,6,0,0), rgba(225,6,0,1), rgba(255,59,48,0));
  box-shadow:0 10px 22px rgba(225,6,0,.18);
}


/* 1文字ずつ */
#fighters .ftprev__name .ftprev__ch{
  display:inline-block;
  opacity: 0;
  transform: translateX(var(--ftprev-nameMoveX));
  animation: ftprevCharIn var(--ftprev-nameDur) ease forwards;
  animation-delay: calc(var(--i) * var(--ftprev-nameDelay));
  will-change: transform, opacity;
}

@keyframes ftprevCharIn{
  0%{ opacity: 0; transform: translateX(var(--ftprev-nameMoveX)); }
  70%{ opacity: 1; transform: translateX(2px); }
  100%{ opacity: 1; transform: translateX(0); }
}

/* プロフィール：太くしない（今の大きさ） */
#fighters .ftprev__bio{
  margin: 0 auto;
  max-width: 72ch;
  color: rgba(255,255,255,.88);
  font-weight: 400;
  font-size: var(--ftprev-bioSize);
  line-height: 1.65;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);

  /* ✅ プロフィールが空でも“高さキープ”して、下のセクションが動かない */
  height: var(--ftprev-bioBoxH);
  overflow: hidden;
}

/* プロフィールが無い選手：何も見せない（でも高さは残す） */
#fighters .ftprev__bio.is-empty{
  visibility: hidden;
  pointer-events: none;
}

/* Bioの「l l l...」→ 1文字ずつ本文字に切り替える */
#fighters .ftprev__bch{
  display: inline-block;
  font-weight: 900;             /* 太めの l */
  color: rgba(255,255,255,.34); /* placeholder */
  transform: translateY(1px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
  will-change: transform, opacity;
}
#fighters .ftprev__bch.is-on{
  font-weight: inherit; /* = 400 */
  color: inherit;       /* = 本文色 */
  transform: translateY(0);
}

/* ✅ "...More"（末尾に自然に入る / 外に出ない） */
#fighters .ftprev__more{
  display: inline;
  white-space: nowrap;

  margin-left: 0; /* "...More" にしたいので余白は付けない */

  color: rgba(255,255,255,.92);
  font-weight: 900;
  text-decoration: none;
  opacity: .92;
}
#fighters .ftprev__more:hover{ opacity: 1; }


/* =========================================================
  Mobile
  - スマホ：左右1枚ずつ（JS側で制御）
========================================================= */

@media (max-width: 640px){
  #fighters .ftprev{
    /* ✅ 真ん中の画像を約10%小さくして、両端が見えやすい */
    --ftprev-cardW: min(80vw, 342px);

    --ftprev-shift1: clamp(140px, 52vw, 240px);
    --ftprev-shift2: clamp(220px, 80vw, 320px);
    --ftprev-shift3: clamp(260px, 96vw, 380px);
    --ftprev-stageH: clamp(280px, 98vw, 420px);

    --ftprev-nameSize: 22px;
    --ftprev-bioSize: 16px;

    /* ✅ スマホは4行ぶん（1.65em×4） */
    --ftprev-bioBoxH: 6.6em;
  }

  /* ✅ スマホはステージを“画面いっぱい”使う（左右の写真が見える） */
  #fighters .ftprev__stage{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}


/* =========================================================
  Motion reduction (動きを減らしたい人向け)
========================================================= */

@media (prefers-reduced-motion: reduce){
  #fighters .ftprev__card,
  #fighters .ftprev__btn{
    transition: none !important;
  }
  #fighters .ftprev__btn:hover{ transform: none; }

  #fighters .ftprev__name .ftprev__ch{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  /* Fighters 見出し（落下/ライン/流れる文字）を止める */
  #fighters .ftprevHead__ch{
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  #fighters .ftprevHead__line{
    animation: none !important;
    transform: none;
  }
  #fighters .ftprevHead__marquee{
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  #fighters .ftprevHead__marqueeTrack{
    animation: none !important;
    transform: none;
  }

}