/* =============================================================================
  Sponsors Page Styles (refactored)
  - 目的：読みやすさ/保守性/一貫性UP、パフォーマンスや可読性の微改善
  - 既存のHTML/JS（クラス・データ属性）を壊さない範囲で整理
============================================================================= */

/* ---------------------------------------------
  基本トークン（カラー / スペーシング / タイポ / アニメ既定値）
--------------------------------------------- */
:root{
  /* Color */
  --ink:         #eef3ff;
  --muted:       #b9c3ff;
  --accent:      #ffd60a;
  --bg-deep:     #020517;

  /* Layout */
  --container:   1080px;
  --gap:         clamp(16px, 3vw, 28px);
  --pad-bottom:  clamp(88px, 12vh, 160px);

  /* List (fade-in) animation defaults → JS 上書き可 */
  --list-duration: 640ms;
  --list-step:     60ms;
  --list-ease:     cubic-bezier(.17,.9,.2,1);

  /* Crawl (OP) defaults → JS 上書き可（数値は初期値） */
  --tilt:           36deg;  /* 俯角 */
  --startY:         60vh;   /* 開始位置 */
  --endY:           -420vh; /* 終了Y（上に抜ける） */
  --endZ:           -340px; /* 終了Z（少し遠ざける） */
  --crawl-duration: 45s;    /* 再生時間 */

  /* Typography */
  --body-wght:    450;
  --heading-wght: 700;

  /* Stars (背景の点滅星) */
  --star-size:    2px;
  --twinkle-dur:  2s;

  /* UI */
  --hr-color:     rgba(255,255,255,.12);
  --hairline:     rgba(255,255,255,.06);
}

/* ---------------------------------------------
  Reset / 基本
--------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body.sp{
  margin: 0;
  color: var(--ink);
  background: var(--bg-deep);
  font-family: "Kaisei Decol", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: var(--body-wght);
  font-feature-settings: "palt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sr-only{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  padding: 0; border: 0; height: 1px; width: 1px;
  overflow: hidden; white-space: nowrap;
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding: min(4vh, 28px) var(--gap) var(--pad-bottom);
}

/* ---------------------------------------------
  背景の星（常時点滅）
--------------------------------------------- */
.global-stars{
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.star{
  position: absolute;
  width: var(--star-size); height: var(--star-size);
  background: #fff; border-radius: 50%;
  opacity: 0;
  animation: twinkle var(--twinkle-dur) infinite;
}
@keyframes twinkle{ 0%,100%{opacity:0} 50%{opacity:1} }

/* ---------------------------------------------
  ヒーロー（透明：背景の星を見せる）
--------------------------------------------- */
.title, .gratitude h2, .sp-subtitle{
  font-family: "Orbitron", "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-weight: var(--heading-wght);
  letter-spacing: .06em;
}
.space-hero{
  background: transparent;
  perspective: none;
  min-height: clamp(44vh, 62vh, 76vh);
  display: grid; place-items: center;
  overflow: visible; z-index: 1;
  font-family: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
}
.space-hero::before, .space-hero::after { content: none; }
.hero-inner{ text-align: center; padding: 28px; }
.title{
  font-size: clamp(22px, 4vw, 40px);
  margin: 0 0 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.subtitle{
  color: var(--muted);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ---------------------------------------------
  感謝ブロック
--------------------------------------------- */
.gratitude{
  max-width: 900px;
  margin: 24px auto 12px;
  text-align: center;
  padding: 0 var(--gap);
  position: relative;
  z-index: 1;
}
.gratitude h2{
  margin: .1em 0 .35em;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--accent);
}
.gratitude p{ margin: .35em 0; }
.gratitude .note{ color: var(--muted); }

/* ---------------------------------------------
  OP ⇔ 一覧（同座標で切替）
--------------------------------------------- */
.op-area{
  position: relative;
  height: 82vh; max-height: 960px;
  margin-block: clamp(22px, 6vh, 80px);
  z-index: 1;
}
.op-area > .stage,
.op-area > .panel{
  position: absolute; inset: 0;
}

/* ---------------------------------------------
  OP ステージ / スターウォーズ風クロール
--------------------------------------------- */
.stage{
  overflow: hidden;
  perspective: 600px; transform-style: preserve-3d;
  background: transparent;
  border-block: 1px solid var(--hairline);
}

/* JSが --tilt / --startY / --endY / --endZ / --crawl-duration を上書きします */
.crawl{
  width: min(86vw, 840px);
  margin: 0 auto;
  font-weight: 600;
  color: var(--accent);
  text-align: justify;

  transform-origin: bottom center;
  transform: rotateX(var(--tilt)) translate3d(0, var(--startY), 0);
  will-change: transform, opacity;
  text-shadow: 0 8px 26px rgba(0,0,0,.5);

  /* 1.0s は開始の小さな待機。必要に応じてCSS側で調整可 */
  animation: crawlDyn var(--crawl-duration) linear forwards 1.0s;
}
@keyframes crawlDyn{
  from { transform: rotateX(var(--tilt)) translate3d(0, var(--startY), 0); opacity: 1; }
  to   { transform: rotateX(var(--tilt)) translate3d(0, var(--endY), var(--endZ)); opacity: .85; }
}
.crawl-sub{
  margin: .6em 0 .6em;
  text-align: center;
  font-size: clamp(16px, 2.6vw, 22px);
}
.crawl-list{
  list-style: none; padding: 0; margin: 0;
  columns: 1; column-gap: 32px;
}
.crawl-list li{ break-inside: avoid; padding: .1em 0; }
@media (min-width: 720px){  .crawl-list{ columns: 2; column-gap: 48px } }
@media (min-width: 1440px){ .crawl-list{ columns: 3 } }

/* ---------------------------------------------
  一覧（OP終了後に同座標でフェードイン）
--------------------------------------------- */
.panel[hidden]{ display: none; }
.panel{ display: grid; place-items: stretch; }
.sp-main{ display: block; }

.sp-subtitle{
  text-align: center;
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 28px 0 8px;
}
.sp-hr{
  width: 88px; height: 2px;
  background: var(--hr-color);
  border: 0; margin: 12px auto 24px;
}

.sp-list{
  list-style: none;
  margin: 0; padding: 0;
  column-count: 1; column-gap: 36px;
  transform-style: preserve-3d;
  letter-spacing: .01em;
}
.sp-list li{
  break-inside: avoid;
  padding: .35em 0;
  opacity: 0;
  transform: translate3d(0, 10px, -30px) scale(.992);
  filter: blur(1.6px);
}
.sp-list a{
  color: #b8c8ff; text-decoration: none;
  border-bottom: 1px dashed rgba(184,200,255,.72);
  transition: border-color .15s ease;
}
.sp-list a:hover{ border-bottom-color: rgba(184,200,255,.95); }

/* JS が --list-duration / --list-ease / --list-step を上書きします */
@keyframes popIn3D{
  from{ opacity: 0; transform: translate3d(0,10px,-30px) scale(.992); filter: blur(1.6px) }
  to  { opacity: 1; transform: translate3d(0,0,0)        scale(1);    filter: blur(0) }
}
body.sp.is-done .sp-list li{
  animation: popIn3D var(--list-duration) var(--list-ease) both;
  animation-delay: calc(var(--i) * var(--list-step));
}

/* 段組レスポンシブ */
@media (min-width: 720px){  .sp-list{ column-count: 2; column-gap: 64px } }
@media (min-width: 1440px){ .sp-list{ column-count: 3 } }

/* ---------------------------------------------
  操作ボタン
--------------------------------------------- */
.sp-controls{
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  display: flex; gap: 8px;
}
.sp-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(5,8,33,.6);
  color: #fff;
  padding: .45em .9em;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.sp-btn:hover{ border-color: rgba(255,255,255,.6); }
.sp-btn:focus-visible{
  outline: 2px solid #b8c8ff; outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(184,200,255,.25);
}

/* ---------------------------------------------
  印刷向け
--------------------------------------------- */
@media print{
  .global-stars, .space-hero, .op-area, .sp-controls{ display: none !important; }
  .container{ padding: 8mm 6mm; }
  .sp-list{ column-gap: 20mm; }
}








/* ...（冒頭はそのまま）... */

/* ---------------------------------------------
  OP ステージ / スターウォーズ風クロール
--------------------------------------------- */
.stage{
  overflow: hidden;
  /* ★ 可変perspective（JSまたは:rootから --stage-perspective を設定可能） */
  perspective: var(--stage-perspective, 600px);
  transform-style: preserve-3d;
  background: transparent;
  border-block: 1px solid var(--hairline);
}

/* JSが --tilt / --startY / --endY / --endZ / --crawl-duration を上書きします */
.crawl{
  width: min(86vw, 840px);
  margin: 0 auto;
  font-weight: 600;
  color: var(--accent);
  text-align: justify;

  transform-origin: bottom center;
  transform: rotateX(var(--tilt)) translate3d(0, var(--startY), 0);
  will-change: transform, opacity;
  text-shadow: 0 8px 26px rgba(0,0,0,.5);

  /* 1.0s は開始の小さな待機。必要に応じてCSS側で調整可 */
  animation: crawlDyn var(--crawl-duration) linear forwards 1.0s;
}

/* ...（残りは前回のリファクタ版と同じ。省略せず使ってOK）... */