/* 場面5「待っている時間を、数えてみると」
   2分 × 10回 = 20分 を、ナレーションに合わせて1項ずつ出す（数字は仮の計算であることを明記）。
   「10回」の数字は CSS だけで 1→10 と数え上げる（@property で整数を動かす）。 */

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 10;
}

@property --sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.scene-wait {
  padding: 56px 88px 60px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 24px;
}

.scene-wait .head {
  display: grid;
  gap: 16px;
}

.scene-wait .title {
  font-size: 56px;
}

.scene-wait .figure {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
}

.scene-wait .formula {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.scene-wait .term {
  padding: 22px 34px 20px;
  min-width: 250px;
  display: grid;
  grid-template-areas: "stack" "label";
  justify-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(27, 31, 42, 0.12);
  opacity: 0;
}

.scene-wait .dial,
.scene-wait .value {
  grid-area: stack;
}

.scene-wait .dial {
  width: 176px;
  aspect-ratio: 1;
  place-self: center;
  background: conic-gradient(var(--alert) var(--sweep), var(--paper-deep) 0);
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
}

.scene-wait .value {
  padding: 30px 0;
  display: flex;
  align-items: baseline;
  place-self: center;
  gap: 4px;
}

.scene-wait .num {
  font-family: var(--font-en);
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.scene-wait .unit {
  font-size: 40px;
  font-weight: 900;
}

.scene-wait .term-label {
  grid-area: label;
  color: var(--ink-soft);
  font-size: 22px;
  font-weight: 900;
}

.scene-wait .counter {
  min-width: 1.15em;
  text-align: right;
  counter-reset: count var(--count);
}

.scene-wait .counter::after {
  content: counter(count);
}

.scene-wait .term-total {
  background: var(--alert);
  color: #fff;
}

.scene-wait .term-total .term-label {
  color: rgba(255, 255, 255, 0.86);
}

.scene-wait .op {
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 800;
  opacity: 0;
}

.scene-wait .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.scene-wait .loop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scene-wait .loop .step {
  padding: 8px 18px;
  background: #fff;
  font-size: 24px;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.scene-wait .loop .to {
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
}

.scene-wait .loop-note {
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
}

.scene-wait .assume {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
}

/* ---- 動き ---- */

.scene-wait.is-active .chapter { animation: rise 0.5s var(--ease-out) 0.05s both; }
.scene-wait.is-active .title { animation: rise 0.6s var(--ease-out) 0.2s both; }

.scene-wait.is-active .term-wait { animation: pop 0.5s var(--ease-out) calc(var(--cue-1) + 0.2s) both; }
.scene-wait.is-active .dial { animation: sweep 1.3s linear calc(var(--cue-1) + 0.35s) 3 both; }

.scene-wait.is-active .op:nth-child(2) { animation: fade 0.4s ease calc(var(--cue-1) + 1.8s) both; }
.scene-wait.is-active .term-count { animation: pop 0.5s var(--ease-out) calc(var(--cue-1) + 2s) both; }
.scene-wait.is-active .counter { animation: count-up 1.5s linear calc(var(--cue-1) + 2.1s) both; }

.scene-wait.is-active .op:nth-child(4) { animation: fade 0.4s ease calc(var(--cue-2) + 0.25s) both; }
.scene-wait.is-active .term-total { animation: pop 0.55s var(--ease-pop) calc(var(--cue-2) + 0.45s) both; }

.scene-wait.is-active .assume { animation: fade 0.5s ease calc(var(--cue-1) + 0.6s) both; }
.scene-wait.is-active .loop { animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 0.1s) both; }
.scene-wait.is-active .loop-note { animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 1.2s) both; }

.scene-wait.is-active .loop .step:nth-child(1) { animation: loop-turn 2s steps(1) calc(var(--cue-3) + 0.6s) infinite; }
.scene-wait.is-active .loop .step:nth-child(3) { animation: loop-turn 2s steps(1) calc(var(--cue-3) + 1.1s) infinite; }
.scene-wait.is-active .loop .step:nth-child(5) { animation: loop-turn 2s steps(1) calc(var(--cue-3) + 1.6s) infinite; }
.scene-wait.is-active .loop .step:nth-child(7) { animation: loop-turn 2s steps(1) calc(var(--cue-3) + 2.1s) infinite; }

@keyframes sweep {
  from { --sweep: 0%; }
  to { --sweep: 100%; }
}

@keyframes count-up {
  from { --count: 1; }
  to { --count: 10; }
}

@keyframes loop-turn {
  0% { background: var(--ink); color: #fff; }
  25% { background: #fff; color: var(--ink); }
}