/* No.19 見出しの現れ方 3種 */

.tr-stage {
  display: flex;
  align-items: center;
  padding: clamp(30px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(36px, 6vw, 72px);
  background:
    radial-gradient(circle at 78% 12%, rgba(83, 169, 175, 0.12), transparent 45%),
    radial-gradient(circle at 8% 88%, rgba(140, 172, 136, 0.1), transparent 40%),
    var(--surface-1);
}

.tr-wrap { width: min(880px, 100%); margin-inline: auto; }

.tr-canvas {
  min-height: clamp(230px, 34vh, 300px);
  padding: clamp(28px, 4vw, 46px) clamp(22px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px 24px 24px 24px;
  box-shadow: 0 20px 48px rgba(40, 107, 112, 0.1);
}

.tr-eyebrow {
  margin: 0 0 16px;
  color: var(--brand-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.tr-title {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(1.5rem, 4.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.tr-lead {
  margin: 0;
  color: var(--text-2);
  font-size: 14.9px;
  line-height: 1.9;
}

/* 分割された1片。CSS変数 --i で並び順を受け取り、遅延をずらす */
.tr-unit {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1);
  transition-delay: calc(var(--i) * var(--step, 0.03s));
}
.tr-canvas.is-in .tr-unit { opacity: 1; transform: none; }

/* 下からマスク: 行ごとに窓を作り、中身をせり上げる */
.tr-line {
  display: block;
  overflow: hidden;
}
.tr-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.75s cubic-bezier(0.22, 0.9, 0.2, 1);
  transition-delay: calc(var(--i) * 0.12s);
}
.tr-canvas.is-in .tr-line > span { transform: none; }

.tr-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.tr-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tr-mode {
  padding: 9px 17px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.tr-mode:hover { color: var(--brand-deep); }
.tr-mode.is-active { color: var(--surface); background: var(--brand-deep); }

.tr-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  color: var(--brand-deep);
  background: var(--surface);
  border: 1px solid rgba(83, 169, 175, 0.4);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tr-replay:hover { background: var(--surface-2); }
.tr-replay-icon { display: inline-block; transition: transform 0.5s ease; }
.tr-replay:hover .tr-replay-icon { transform: rotate(-180deg); }

.tr-hint {
  margin: 16px 0 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.75;
}

@media (max-width: 600px) {
  .tr-canvas { min-height: 250px; }
  .tr-controls { justify-content: stretch; }
  .tr-modes { width: 100%; justify-content: center; }
  .tr-replay { width: 100%; justify-content: center; }
}