/* =====================================================================
   section.css — 場面の変わり目。

   斜めの帯が画面を横切り、章の名前を運んでいく。
   ただ薄くなって入れ替わるより、**場面が切り替わった**ことが体で分かる。

   色は章の役割で変える（結論＝橙／解説＝青／確かめ＝緑／まとめ＝紫）。
   右上の章ラベルと同じ色にしてあるので、帯が引いたあとも話がつながる。

   動きはすべてシーン内の時刻から計算する（CSS のアニメは使えない）。
   ===================================================================== */
#section {
  position: absolute; inset: 0; z-index: 8;
  display: none; overflow: hidden;
  pointer-events: none; background: none;
}

/* 斜めの帯。画面より大きく取って、傾けても角が見えないようにする */
#section .sec-panel {
  position: absolute; top: -12%; bottom: -12%; left: -40%; right: -40%;
  transform-origin: center;
  background: linear-gradient(120deg, #0ea5e9, #4f46e5);
}
#section[data-kind="結論"]  .sec-panel { background: linear-gradient(120deg, #fb923c, #ea580c); }
#section[data-kind="解説"]  .sec-panel { background: linear-gradient(120deg, #38bdf8, #4f46e5); }
#section[data-kind="確かめ"] .sec-panel { background: linear-gradient(120deg, #34d399, #059669); }
#section[data-kind="まとめ"] .sec-panel { background: linear-gradient(120deg, #c084fc, #7c3aed); }

/* 帯の上を走る光。動きに厚みが出る */
#section .sec-shine {
  position: absolute; top: -20%; bottom: -20%; width: 26%;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
  transform: skewX(-12deg);
}

#section .sec-in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #fff; text-align: center;
}
#section .sec-kicker {
  font-weight: 900; letter-spacing: .22em;
  opacity: .85;
  padding: 3px 14px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .55);
}
#section .sec-t {
  font-weight: 900; letter-spacing: .02em; white-space: pre-line;
  text-shadow: 0 6px 22px rgba(15, 23, 42, .35);
}
/* 見出しの下に引かれる線。左から右へ伸びる */
#section .sec-rule {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .92);
  width: 0;
}

body[data-orient="portrait"] #section .sec-kicker { font-size: 30px; padding: 5px 20px; }
body[data-orient="portrait"] #section .sec-t { font-size: 52px; }
body[data-orient="landscape"] #section .sec-kicker { font-size: 24px; padding: 4px 16px; }
body[data-orient="landscape"] #section .sec-t { font-size: 46px; }

/* 帯の中を舞う粒。動きは時刻から計算するので、コマ送りでも同じ絵になる */
#section .sec-dots { position: absolute; inset: 0; overflow: hidden; }
#section .sec-dots i {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .8);
}

/* 答えの瞬間の一瞬のひかり。白を薄く重ねるだけ（点滅させない） */
#flash {
  position: absolute; inset: 0; z-index: 7;
  background: #fff; opacity: 0; pointer-events: none;
}