/* public/sites/competition/css/scon.css
 * ソロ部門Sコース（/scon/index）専用スタイル。
 *
 * このページは code-page.html.twig（管理画面から直接HTMLを編集できるraw HTMLページ）で運用する。
 * codehtmlに貼るHTMLはTailwindのビルド時content-scan対象外（DBの生データのため）なので、
 * Tailwindのブラケット記法（例: text-[color:var(--s-accent)]、tracking-[6px]）は
 * 使っても実際のCSSが生成されずスタイルが当たらない。
 * そのためこのページ固有の値は、すべて素のCSSクラス（s-接頭辞）としてここに定義し、
 * HTML側は "s-xxx" という意味のあるクラス名を貼るだけにしてある。
 * pc: ブレークポイントは tailwind.config.js の screens.pc（900px）に合わせている。
 */

/* ===== テーマ変数（ダーク・プレミアムトーン） ===== */
.s-scope {
  --s-bg: #221013;
  --s-surface: #2b1418;
  --s-surface-2: #34191d;
  --s-line: rgba(235, 215, 195, 0.15);
  --s-line-strong: rgba(235, 215, 195, 0.3);
  --s-ink: #f5f0eb;
  --s-muted: #c4b0a8;
  --s-accent: #e6c56b;
  --s-accent-soft: rgba(230, 197, 107, 0.1);
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: "Noto Serif JP", serif;
}
.s-scope .font-disp {
  font-family: "Noto Serif JP", serif;
}
.s-scope .font-gothic {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.s-hero-glow {
  background:
    radial-gradient(60% 50% at 50% 20%, rgba(140, 40, 52, 0.5) 0%, rgba(34, 16, 19, 0) 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(45, 15, 20, 0.9) 0%, rgba(34, 16, 19, 0) 60%);
}
.s-keyline {
  background: linear-gradient(90deg, transparent 0%, var(--s-accent) 50%, transparent 100%);
}
.s-watermark {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(16rem, 42vw, 34rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 220, 190, 0.08);
  user-select: none;
}
.s-text-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--s-accent);
}
.s-marquee-track {
  display: flex;
  width: max-content;
  animation: s-marquee 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .s-marquee-track { animation: none; }
}
@keyframes s-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- スクロールに応じたテキストアニメーション（サイト共通の .fade-up 機構を利用） --- */
.s-scope .fade-up {
  transition-property: opacity, transform;
}
.s-scope .fade-up.d1 { transition-delay: 120ms; }
.s-scope .fade-up.d2 { transition-delay: 240ms; }
.s-scope .fade-up.d3 { transition-delay: 360ms; }
.s-scope .fade-up.d4 { transition-delay: 480ms; }
.s-scope .fade-up.d5 { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .s-scope .fade-up {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* --- アコーディオン（審査について／審査員実績） --- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content.open {
  max-height: 3000px;
  transition: max-height 0.6s ease-in;
}
.accordion-button .accordion-icon {
  transition: transform 0.3s ease-out;
}
.accordion-button.open .accordion-icon {
  transform: rotate(-180deg);
}

/* --- ENTRYバー：下からせり上がるアニメーション（Topページと同じ仕組み） --- */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.cvtslide-up {
  animation: slideUp 0.3s ease-out forwards;
}
.cvtslide-down {
  animation: slideDown 0.3s ease-in forwards;
}

/* =====================================================================
 * ここから下: Tailwindのブラケット記法だと生成されない値の置き換えクラス
 * ===================================================================== */

/* ----- カラートークン（このページ専用デザイントークン） ----- */
.s-text-ink { color: var(--s-ink); }
.s-text-muted { color: var(--s-muted); }
.s-text-accent { color: var(--s-accent); }
.s-text-onaccent { color: #141210; } /* ENTRYボタン等、accent背景の上の文字色 */

.s-bg-bg { background-color: var(--s-bg); }
.s-bg-surface { background-color: var(--s-surface); }
.s-bg-surface-2 { background-color: var(--s-surface-2); }
.s-bg-accent { background-color: var(--s-accent); }
.s-bg-accent-soft { background-color: var(--s-accent-soft); }
.s-bg-surface-55 { background-color: rgba(43, 20, 24, 0.55); }
.s-bg-line { background-color: var(--s-line); }
.s-bg-line-strong { background-color: var(--s-line-strong); }

.s-border-line { border-color: var(--s-line); }
.s-border-line-strong { border-color: var(--s-line-strong); }
.s-border-accent { border-color: var(--s-accent); }
.s-border-accent-70 { border-color: rgba(230, 197, 107, 0.7); }
.s-border-accent-60 { border-color: rgba(230, 197, 107, 0.6); }
.s-border-accent-50 { border-color: rgba(230, 197, 107, 0.5); }
.s-border-accent-40 { border-color: rgba(230, 197, 107, 0.4); }

.s-divide-line > * + * { border-color: var(--s-line); }
.s-stroke-accent { stroke: var(--s-accent); }

/* hover / group-hover （元は hover:text-[color:var(--s-accent)] 等） */
.s-hover-text-accent:hover { color: var(--s-accent); }
.s-hover-bg-surface:hover { background-color: var(--s-surface); }
.s-hover-bg-surface-2:hover { background-color: var(--s-surface-2); }
.group:hover .s-group-hover-text-accent { color: var(--s-accent); }
.group:hover .s-group-hover-border-accent { border-color: var(--s-accent); }

/* ----- 字間（Tailwind標準スケールは最大でも widest = 0.1em までしかなく、
   このページの「高級感」の肝である広い字間を表現できないため個別定義） ----- */
.s-tracking-002em { letter-spacing: 0.02em; }
.s-tracking-03 { letter-spacing: 0.3px; }
.s-tracking-05 { letter-spacing: 0.5px; }
.s-tracking-1 { letter-spacing: 1px; }
.s-tracking-2 { letter-spacing: 2px; }
.s-tracking-3 { letter-spacing: 3px; }
.s-tracking-4 { letter-spacing: 4px; }
.s-tracking-6 { letter-spacing: 6px; }
.s-tracking-8 { letter-spacing: 8px; }
.s-tracking-10 { letter-spacing: 10px; }
.s-tracking-eyebrow { letter-spacing: 8px; } /* SOLO — S COURSEラベル。SPは8px、PCは10px */
@media (min-width: 900px) {
  .s-tracking-eyebrow { letter-spacing: 10px; }
}

/* ----- ヒーローの可変フォントサイズ（clampはTailwind標準クラスに存在しない） ----- */
.s-hero-tagline { font-size: clamp(1.3rem, 5vw, 2.6rem); } /* "Beyond Technique" */
.s-hero-letter-s { font-size: clamp(4.5rem, 16vw, 9rem); } /* 大きい "S" */
.s-hero-word-course { font-size: clamp(2.4rem, 8vw, 5rem); } /* "course" */

/* ----- その他、標準スケールに変換先が無い値 ----- */
.s-leading-085 { line-height: 0.85; } /* 標準最小値 leading-none(1) を下回るため */

.s-hero-min-h { min-height: 560px; }
@media (min-width: 900px) {
  .s-hero-min-h { min-height: 720px; }
}

.s-table-schedule { min-width: 720px; } /* 横スクロール用の実寸。近似不可 */
.s-table-fee { min-width: 460px; }
.s-table-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

.s-scroll-hint-max-w { max-width: 220px; } /* SCROLLインジケーターの幅 */

.s-z-1 { z-index: 1; }
.s-z-2 { z-index: 2; }
.s-z-3 { z-index: 3; }
.s-z-100 { z-index: 100; }

.s-stroke-12 { stroke-width: 1.2; }
.s-stroke-15 { stroke-width: 1.5; }

.s-shadow-bar { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }

/* ヒーロー背景に敷くうっすらしたノイズ模様 */
.s-hero-noise {
  background-image: repeating-linear-gradient(180deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
}

/* ヒーロー写真に重ねるグラデーション（左からのフェードと上からのフェード） */
.s-hero-fade-x {
  background-image: linear-gradient(to right, var(--s-bg) 0%, rgba(34, 16, 19, 0.85) 50%, transparent 100%);
}
@media (min-width: 900px) {
  .s-hero-fade-x {
    background-image: linear-gradient(to right, var(--s-bg) 0%, rgba(34, 16, 19, 0.6) 50%, transparent 100%);
  }
}
.s-hero-fade-y {
  background-image: linear-gradient(to top, var(--s-bg) 0%, transparent 50%, transparent 100%);
}

/* 受賞演奏カードのプレースホルダー背景（動画サムネイル未設定時） */
.s-video-placeholder-bg {
  background-image: linear-gradient(to bottom right, #241d12, #151210, #0b0a08);
}

/* 箇条書きの「・」の代わりの丸ポチ（本文中に多数使用）
   元は pl-4（選曲・演奏の注意事項）と pl-5（審査の観点等）の2種類の余白があったため、
   置き換え後もそれぞれ別クラスにして見た目の差を保っている */
.s-bullet-item,
.s-bullet-item-lg {
  position: relative;
}
.s-bullet-item { padding-left: 1rem; }
.s-bullet-item-lg { padding-left: 1.25rem; }
.s-bullet-item::before,
.s-bullet-item-lg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: var(--s-accent);
}