/* ==========================================================================
   ベーススタイル（リセット・タイポグラフィ既定・アニメーション定義）
   プロトタイプの helmet <style> に相当する。
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg-page);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--c-blue-200);
}

/* --------------------------------------------------------------------------
   フォーカスリング
   プロトタイプには :focus の定義が無いが、素の HTML ではキーボード操作が
   追えなくなるためトークンから導出したリングを追加する。
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-blue-600);
  outline-offset: 2px;
  border-radius: var(--r-4);
}

/* --------------------------------------------------------------------------
   スクロールバー装飾
   付与先: サイドバー・ドロワー・モーダル本体・目次のスクロール領域
   -------------------------------------------------------------------------- */
.lms-scroll {
  /* Firefox 向け */
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray-300) transparent;
}

.lms-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.lms-scroll::-webkit-scrollbar-thumb {
  background: var(--c-gray-300);
  border-radius: var(--r-4);
}

/* --------------------------------------------------------------------------
   アニメーション
   -------------------------------------------------------------------------- */

/* アコーディオン展開 */
@keyframes lmsAcc {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* モーダル本体・学習トースト */
@keyframes lmsToast {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 汎用トースト入場（移動）：画面外(上) → 定位置。
   拡大・不透明化とは進み方が違うため別アニメーションに分ける。transform を共有すると
   キーフレームの分割点で移動のイージングまで区切られてしまうので、個別 transform
   プロパティ（translate / scale）を使って 3 本を独立させている。 */
@keyframes lmsToastIn {
  from {
    translate: 0 -80px;
  }
  to {
    translate: 0 0;
  }
}

/* 汎用トースト入場（拡大）：点のまま 0.1s（33.33%）待機し、残る 0.2s で等倍まで膨らむ。
   拡大は単一のカーブで、中盤に伸びて終盤で滑らかに止まる。中間キーフレームを置いて
   linear でつなぐと、その折れ点で速度が急変し段差（ガタつき）として見えてしまうため、
   キーフレームは 2 点に留めてカーブで表現する。 */
@keyframes lmsToastInScale {
  0% {
    scale: 0.01;
  }
  33.33% {
    scale: 0.01;
    animation-timing-function: cubic-bezier(0.3, 0.2, 0.45, 1);
  }
  100% {
    scale: 1;
  }
}

/* 汎用トースト入場（不透明化）：点で降りている 0.1s（33.33%）の間は 0.15 までしか上げず、
   膨らみながら 0.3s で不透明になりきる。ほとんど見えない影が実体化していくように見せる。 */
@keyframes lmsToastInFade {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 0.15;
  }
  100% {
    opacity: 1;
  }
}

/* 汎用トースト退場：拡大しながらぼかしで弾けて消える。
   学習中トーストの lmsBurst（1.45 倍）より膨らみを抑えている。 */
@keyframes lmsToastBurst {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.2) translateY(-4px);
    filter: blur(8px);
  }
}

/* 学習中トーストの雫ドロップイン（上から落ちて潰れ、弾んで定位置に収まる） */
@keyframes lmsDrop {
  0% {
    opacity: 0;
    transform: translateY(-160px) scaleX(0.62) scaleY(1.7);
  }
  55% {
    opacity: 1;
    transform: translateY(7px) scaleX(1.14) scaleY(0.8);
  }
  72% {
    transform: translateY(-3px) scaleX(0.94) scaleY(1.08);
  }
  86% {
    transform: translateY(1px) scaleX(1.03) scaleY(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 学習中トーストのバースト退場（弾けて拡大しながらぼやけて消える） */
@keyframes lmsBurst {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.45) translateY(-4px);
    filter: blur(4px);
  }
}

/* オーバーレイ */
@keyframes lmsFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 部分更新のローディングバー: 左端から全幅まで伸びる（受講者 #13）。
   prefers-reduced-motion 下では下の @media が animation-duration を 0.01ms にするため
   即座に全幅（scaleX(1)）で静止する。どちらの場合も「バーが見えている＝通信中」が成立する。 */
@keyframes lmsProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* OS で「視差効果を減らす」が有効な場合はアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   汎用ユーティリティ（最小限）
   -------------------------------------------------------------------------- */
.lms-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 視覚的には隠すが支援技術には読ませる */
.lms-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}