/* ==========================================================================
   delight.css — 全ページ共通「気持ちよさ」レイヤー (2026-07-13)
   目的: 立体感(多層シャドウ+微細3D傾き) / 入場アニメ / 数字カウントアップ /
         Top3メタリック演出 / 背景オーロラ を、軽い動作のまま全ページに足す。
   方針:
   - 動かすのは transform / opacity のみ(GPU合成で完結・レイアウト再計算なし)。
     例外は Top3 の輝き(box-shadow/background-position)だが対象は数個の小要素のみ。
   - modern-polish.css の「後」に読み込む(後勝ち)。ページ内 <style>(本文側で
     さらに後に評価される)と競合する箇所だけ !important を使う。
   - 入場演出の初期非表示は html.dl-js が付いた時のみ有効(JS無効でも全表示)。
   - prefers-reduced-motion は modern-polish.css の全体無効化に加えて
     本ファイルでも個別に無効化する。
   - CLS対策の min-height 予約や広告関連には触れない。
   ========================================================================== */

:root {
  --dl-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dl-shadow-rest:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 14px 30px -16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --dl-shadow-hover:
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 24px 46px -18px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --dl-gold: rgba(255, 215, 0, 1);
  --dl-silver: rgba(210, 220, 240, 1);
  --dl-bronze: rgba(205, 127, 50, 1);
}

/* --------------------------------------------------------------------------
   1. 背景オーロラ(PCのみ)。transform だけを動かす=合成のみで描画コストほぼゼロ。
      body 背景(modern-polish の radial)を さらに ゆっくり漂わせる光で上塗りする。
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  body::before {
    content: "";
    position: fixed;
    z-index: -1;
    left: -18vw;
    top: -18vh;
    width: 136vw;
    height: 136vh;
    pointer-events: none;
    background:
      radial-gradient(42% 34% at 22% 28%, rgba(255, 61, 127, 0.07), transparent 70%),
      radial-gradient(46% 38% at 78% 16%, rgba(0, 212, 255, 0.065), transparent 70%),
      radial-gradient(38% 32% at 62% 86%, rgba(124, 77, 255, 0.05), transparent 70%);
    animation: dlAurora 48s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes dlAurora {
    from { transform: translate3d(-2.2vw, -1.6vh, 0) rotate(-1deg) scale(1); }
    to   { transform: translate3d(2.2vw, 1.8vh, 0) rotate(1deg) scale(1.05); }
  }
}

/* アンカー移動(TOPへ戻る等)を滑らかに */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   2. 立体感: 横長リスト行(急上昇/季節まとめ/アニメ/アーティスト/コメント)
      多層シャドウ+上端ハイライトで「厚み」を出す。Top3 の金銀銅グローは
      各ページ既存の演出を殺さないよう、ここで上塗りして再定義する。
      (これらのページはスタイルが本文 <style> にあり後勝ちされるため !important)
   -------------------------------------------------------------------------- */
.rise-item, .matome-item, .ar-item, .user-ranking-item, .popular-comment-item, .ranking-card {
  box-shadow: var(--dl-shadow-rest) !important;
}
.matome-item:nth-child(1), .ar-item:nth-child(1), .user-ranking-item[data-rank="1"] {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.16), var(--dl-shadow-rest) !important;
}
.matome-item:nth-child(2), .ar-item:nth-child(2), .user-ranking-item[data-rank="2"] {
  box-shadow: 0 0 16px rgba(210, 220, 240, 0.18), var(--dl-shadow-rest) !important;
}
.matome-item:nth-child(3), .ar-item:nth-child(3), .user-ranking-item[data-rank="3"] {
  box-shadow: 0 0 14px rgba(205, 127, 50, 0.16), var(--dl-shadow-rest) !important;
}

@media (hover: hover) and (pointer: fine) {
  .rise-item, .matome-item, .ar-item, .user-ranking-item, .popular-comment-item, .ranking-card {
    transition: transform 0.3s var(--dl-spring), box-shadow 0.3s ease,
                border-color 0.2s ease, background 0.2s ease !important;
  }
  .rise-item:hover, .matome-item:hover, .ar-item:hover,
  .user-ranking-item:hover, .popular-comment-item:hover, .ranking-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--dl-shadow-hover) !important;
  }
  .matome-item:nth-child(1):hover, .ar-item:nth-child(1):hover, .user-ranking-item[data-rank="1"]:hover {
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.26), var(--dl-shadow-hover) !important;
  }
  .matome-item:nth-child(2):hover, .ar-item:nth-child(2):hover, .user-ranking-item[data-rank="2"]:hover {
    box-shadow: 0 0 22px rgba(210, 220, 240, 0.28), var(--dl-shadow-hover) !important;
  }
  .matome-item:nth-child(3):hover, .ar-item:nth-child(3):hover, .user-ranking-item[data-rank="3"]:hover {
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.26), var(--dl-shadow-hover) !important;
  }
}

/* --------------------------------------------------------------------------
   3. 立体感: タイル型カード(TOP3ヒーロー/曲カード/新作アニメ/季節一覧)
      マウス追従の微細3D傾き(--dl-rx / --dl-ry は delight.js が設定)+浮き上がり。
      .ranking-feature-card は背景透明なので影はサムネ側に付ける。
   -------------------------------------------------------------------------- */
.ranking-overlay-card, .ranking-feature-card .feature-thumb, .anime-item, .mi-card {
  box-shadow: var(--dl-shadow-rest);
}

@media (hover: hover) and (pointer: fine) {
  .ranking-overlay-card, .ranking-feature-card, .anime-item, .mi-card {
    transform: perspective(900px) rotateX(var(--dl-rx, 0deg)) rotateY(var(--dl-ry, 0deg));
    transition: transform 0.35s var(--dl-spring), box-shadow 0.35s ease, border-color 0.2s ease !important;
  }
  .ranking-overlay-card:hover, .ranking-feature-card:hover, .anime-item:hover, .mi-card:hover {
    transform: perspective(900px) translateY(-4px)
               rotateX(var(--dl-rx, 0deg)) rotateY(var(--dl-ry, 0deg)) scale(1.004) !important;
  }
  .ranking-overlay-card:hover { box-shadow: var(--dl-shadow-hover); }
  .anime-item:hover, .mi-card:hover { box-shadow: var(--dl-shadow-hover) !important; }
  .ranking-feature-card:hover .feature-thumb { box-shadow: var(--dl-shadow-hover); }

  /* サムネのズームを既存(1.03/1.05)から少しだけ気持ちよく(バネ緩急+明度) */
  .ranking-feature-card .feature-thumb img,
  .ranking-overlay-card .overlay-thumb-link img {
    transition: transform 0.5s var(--dl-spring), filter 0.3s ease !important;
  }
  .ranking-feature-card:hover .feature-thumb img { transform: scale(1.045); filter: brightness(1.08) saturate(1.05); }
  .ranking-overlay-card:hover .overlay-thumb-link img { transform: scale(1.055); filter: brightness(1.06) saturate(1.05); }
  /* ラッパーの無い生 <img> サムネは明度のみ(拡大するとはみ出すため) */
  .rise-item:hover .rise-thumb, .matome-item:hover .matome-thumb, .ar-item:hover .ar-thumb img {
    filter: brightness(1.1) saturate(1.06);
  }
  .rise-thumb, .matome-thumb, .ar-thumb img { transition: filter 0.25s ease; }
  /* 新作アニメカードは既存ラッパーをクリップしてズーム */
  .anime-item .anime-thumbnail { overflow: hidden; }
  .anime-item .anime-thumbnail img { transition: transform 0.5s var(--dl-spring), filter 0.3s ease; }
  .anime-item:hover .anime-thumbnail img { transform: scale(1.04); filter: brightness(1.06); }
}

/* --------------------------------------------------------------------------
   4. TOP3ヒーローカード: ホバーで光が斜めに走る(シーン)。transformのみ。
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ranking-overlay-card::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -75%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.11), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
  }
  .ranking-overlay-card:hover::after {
    opacity: 1;
    animation: dlSheen 0.85s cubic-bezier(0.4, 0, 0.2, 1) 1;
  }
  @keyframes dlSheen {
    to { transform: skewX(-18deg) translateX(340%); }
  }
}

/* 1位バッジは静かに鼓動するグロー(小さな要素1つなので描画コスト極小) */
@media (prefers-reduced-motion: no-preference) {
  .ranking-top3 .ranking-overlay-card:first-child .rank-badge {
    animation: dlGlowPulse 3s ease-in-out infinite;
  }
  @keyframes dlGlowPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.45); }
    50%      { box-shadow: 0 0 26px rgba(255, 215, 0, 0.85); }
  }
}

/* --------------------------------------------------------------------------
   5. リスト系ページの Top3 順位数字をメタリック(金/銀/銅)のきらめき文字に。
      ページ内 <style> の単色指定(後勝ち)を上書きするため !important。
      ※アーティストランキングの1〜3位はメダル絵文字(🥇🥈🥉)のため対象外
        (文字クリップすると絵文字が単色シルエット化してしまう)。
   -------------------------------------------------------------------------- */
.matome-item:nth-child(1) .matome-rank, .ar-item:nth-child(1) .ar-rank {
  background-image: linear-gradient(100deg, #9a6a00 8%, #ffdf7e 34%, #fff6d8 50%, #ffd700 64%, #8a5a00 92%) !important;
  background-size: 220% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.matome-item:nth-child(2) .matome-rank, .ar-item:nth-child(2) .ar-rank {
  background-image: linear-gradient(100deg, #77808f 8%, #dde5f2 34%, #ffffff 50%, #cfd8e8 64%, #6d7686 92%) !important;
  background-size: 220% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.matome-item:nth-child(3) .matome-rank, .ar-item:nth-child(3) .ar-rank {
  background-image: linear-gradient(100deg, #6d3f14 8%, #e0a568 34%, #f6d3ab 50%, #cd7f32 64%, #5f370f 92%) !important;
  background-size: 220% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .matome-item:nth-child(-n+3) .matome-rank,
  .ar-item:nth-child(-n+3) .ar-rank {
    animation: dlShimmer 3.6s ease-in-out infinite;
  }
}
@keyframes dlShimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* --------------------------------------------------------------------------
   6. 入場演出(html.dl-js が付いた時のみ)。
      delight.js が画面に入る直前の要素へ .dl-in を付け、時間差(--dl-d)で
      ふわっと立ち上がる。終了後は JS がクラスを外す(残留 transform を残さない)。
      ※ keyframes ではなく transition を使う理由: profile.css 等の既存モバイル
        高速化ルール(* { animation: none !important })に消されても、transition
        なら短縮されるだけで必ず「表示(opacity:1)」に到達する(不可視事故ゼロ)。
   -------------------------------------------------------------------------- */
html.dl-js .dl-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
}
html.dl-js .dl-reveal.dl-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.55s var(--dl-spring), transform 0.55s var(--dl-spring);
  transition-delay: var(--dl-d, 0ms);
}

/* --------------------------------------------------------------------------
   7. 数字演出(カウントアップ対象 / マイルストーン)。
      .dl-count は delight.js が付与。桁揃えフォント+右詰めで幅ブレを防ぐ。
      .dl-milestone = 再生数1億以上の曲だけ、金のきらめき文字で祝う。
   -------------------------------------------------------------------------- */
.views-main, .matome-score-value, .ar-score-value, .user-score-value, .rise-gain {
  font-variant-numeric: tabular-nums;
}
.dl-count { display: inline-block; text-align: right; }

.dl-milestone {
  background-image: linear-gradient(100deg, #f3a832 8%, #ffdf7e 35%, #fff6d8 50%, #ffd700 65%, #e09520 92%) !important;
  background-size: 220% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 205, 70, 0.3));
}
@media (prefers-reduced-motion: no-preference) {
  .dl-milestone { animation: dlShimmer 3.2s ease-in-out infinite; }
}

/* カウントアップ完了時のポン(1回だけ) */
.dl-pop { animation: dlPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1 !important; }
@keyframes dlPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   8. 押し心地: ボタン類は押した瞬間だけ縮む(:active)。ホバーはふわっと。
   -------------------------------------------------------------------------- */
.action-btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important; }
@media (hover: hover) and (pointer: fine) {
  .action-btn:hover { transform: translateY(-2px) scale(1.06); }
}
button:active, .btn:active, .action-btn:active, .compact-btn:active, .arc-btn:active,
.tab-item:active, .metric-pill:active, .rise-sort a:active, .matome-sort a:active {
  transform: scale(0.95) !important;
  transition-duration: 0.08s !important;
}
.like-btn-mini:active { transform: scale(0.88) !important; }

/* 星評価はホバーした星だけ弾む */
@media (hover: hover) and (pointer: fine) {
  .star-rating-compact .star { display: inline-block; transition: transform 0.15s var(--dl-spring); }
  .star-rating-compact .star:hover { transform: scale(1.3); }
}

/* --------------------------------------------------------------------------
   9. 描画の軽量化: 画面外の下位行はレンダリングをスキップ(スクロールで順次描画)。
      100件表示にしても初期描画は画面内ぶんだけになる。
   -------------------------------------------------------------------------- */
.matome-item:nth-child(n+16), .ar-item:nth-child(n+16),
.user-ranking-item:nth-child(n+16), .rise-item:nth-child(n+16),
.popular-comment-item:nth-child(n+13) {
  content-visibility: auto;
  contain-intrinsic-size: auto 104px;
}
.ranking-rest-row .ranking-feature-card:nth-child(n+7) {
  content-visibility: auto;
  contain-intrinsic-size: auto 330px;
}

/* --------------------------------------------------------------------------
   10. 動きを減らす設定では本ファイルの演出をすべて止める(保険)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.dl-js .dl-reveal { opacity: 1; transform: none; }
  body::before { animation: none; }
}