/* ── Text style CSS custom properties (dev-panel controllable) ── */

:root {
  --text-narration-opacity: 0.9;
  --text-timeline-label-opacity: 0.9;
  --text-timeline-desc-opacity: 0.9;
  --text-question-opacity: 0.9;
  --text-shadow-blur: 10px;
  --text-shadow-blur2: 20px;
  --text-shadow-opacity: 1.0;
}

body.creation-page {
  background:
    radial-gradient(circle at 20% 20%, rgba(46, 72, 116, 0.18), transparent 45%),
    radial-gradient(circle at 78% 34%, rgba(74, 114, 179, 0.12), transparent 42%),
    #050508;
}

.creation-page #overlay {
  bottom: 10%;
}

.creation-page #title-h1 {
  letter-spacing: clamp(0.18em, 1.0vmin, 0.38em);
}

.creation-page #taglines {
  max-width: min(60vw, 580px);
}

.creation-page .tagline {
  color: rgba(210, 225, 250, 0.72);
}

.creation-page .creation-main {
  position: relative;
  z-index: var(--cs-z-raised);
  padding-top: 140vh;
  /* Keep section content interactive while letting empty hero space pass drag events to the canvas. */
  pointer-events: none;
}

.creation-page .creation-main > * {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .creation-page #taglines {
    max-width: 82vw;
  }
}

/* ── Buttons using card style — text color fix ── */

.card.kesson-card.btn {
  color: rgba(var(--color-heading), 0.5);
  border-radius: 0.5rem;
  box-shadow: var(--ds-card-shadow-soft);
}

.card.kesson-card.btn:hover {
  color: rgba(var(--color-heading), 0.7);
  box-shadow: var(--ds-card-shadow-rich);
}

/* ── Section headings — high contrast + shadow ── */

.creation-page .section-heading {
  color: rgba(var(--color-sub-text), var(--text-narration-opacity));
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

/* ── Room narration bridges (cs#179 Phase A) ── */

/* 冒頭の問いと今の見方（#111）。3D の背景の上で読めるよう、語りと同じ影を付ける */
.cs-intro {
  position: relative;
  z-index: var(--cs-z-ui-mid-3);
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
  pointer-events: auto;
}

.cs-intro-question {
  font-family: 'Noto Serif JP', Georgia, serif;
  font-size: clamp(1.1rem, 3.2vmin, 1.5rem);
  font-weight: 400;
  color: rgba(225, 235, 252, 0.95);
  line-height: 1.8;
  margin: 0 0 1.2rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 1.0), 0 0 20px rgba(0, 0, 0, 0.67);
}

.cs-intro-body {
  font-size: clamp(0.92rem, 2.4vmin, 1.02rem);
  color: rgba(210, 225, 250, 0.9);
  line-height: 2;
  margin: 0 0 1rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 1.0), 0 0 20px rgba(0, 0, 0, 0.67);
}

.cs-intro-body a {
  color: rgb(var(--ds-color-link, 130, 170, 255));
  text-underline-offset: 3px;
}

.room-narration {
  position: relative;
  z-index: var(--cs-z-ui-mid-3);
  padding: 8rem 1.5rem 1.5rem;
  text-align: center;
}

.room-narration-text {
  font-family: 'Noto Serif JP', Georgia, serif;
  font-size: clamp(0.95rem, 2.8vmin, 1.35rem);
  font-weight: 300;
  color: rgba(210, 225, 250, 0.9);
  letter-spacing: 0.08em;
  line-height: 2.2;
  max-width: 580px;
  margin: 0 auto;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 1.0),
    0 0 20px rgba(0, 0, 0, 0.67);
}

/* ── Grid row stagger reveal (cs#179 Phase A) ── */

.reports-domain-grid > .col {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reports-domain-grid > .col.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Prologue timeline (cs#179 Phase B) ── */

.prologue-timeline {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
}

.prologue-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  padding: 0 1rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

.prologue-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  cursor: pointer;
  z-index: var(--cs-z-content);
  padding: 0.5rem 0.25rem;
  transition: transform 0.3s ease;
}

.prologue-node:focus-visible {
  outline: 2px solid rgba(100, 150, 255, 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}

.prologue-node.is-active {
  transform: scale(1.12);
}

.prologue-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(210, 225, 250, 0.4);
  border: 2px solid rgba(210, 225, 250, 0.5);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.prologue-node.is-active .prologue-dot {
  background: var(--stage-color, rgba(100, 150, 255, 0.9));
  border-color: var(--stage-color, rgba(100, 150, 255, 0.9));
  box-shadow: 0 0 12px var(--stage-color, rgba(100, 150, 255, 0.4));
}

.prologue-label {
  font-family: 'Noto Serif JP', Georgia, serif;
  font-size: clamp(0.95rem, 2.5vmin, 1.2rem);
  font-weight: 400;
  color: rgba(210, 225, 250, 0.7);
  transition: color 0.3s ease;
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

.prologue-node.is-active .prologue-label {
  color: rgba(210, 225, 250, var(--text-timeline-label-opacity));
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

.prologue-sub {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 0.7rem;
  color: rgba(210, 225, 250, 0.5);
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

.prologue-node.is-active .prologue-sub {
  color: rgba(210, 225, 250, var(--text-narration-opacity));
}

/* 進行線 */
.prologue-progress-line {
  position: absolute;
  top: 18px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(100, 150, 255, 0.5) var(--progress, 20%),
    rgba(210, 225, 250, 0.1) var(--progress, 20%)
  );
  z-index: var(--cs-z-base);
  transition: background 0.4s ease;
  pointer-events: none;
}

/* 説明エリア */
.prologue-desc {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.prologue-note {
  text-align: center;
  max-width: 520px;
  margin: 1rem auto 0;
  font-family: var(--ds-font-serif-ui);
  font-size: clamp(0.75rem, 1.8vmin, 0.85rem);
  opacity: 0.75;
}

.prologue-definition-link {
  display: block;
  width: fit-content;
  margin: 0.5rem auto 0;
  font-family: var(--ds-font-serif-ui);
  font-size: clamp(0.8rem, 1.9vmin, 0.9rem);
  color: rgb(var(--ds-color-link));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ds-color-link), 0.4);
}

.prologue-definition-link:hover,
.prologue-definition-link:focus-visible {
  border-bottom-color: rgb(var(--ds-color-link));
}

.prologue-desc-title {
  font-family: var(--ds-font-serif-ui);
  font-size: clamp(1rem, 2.5vmin, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

.prologue-desc-text {
  font-family: var(--ds-font-serif-ui);
  font-size: clamp(0.82rem, 2vmin, 0.95rem);
  font-weight: 300;
  color: rgba(210, 225, 250, var(--text-timeline-desc-opacity));
  line-height: 1.8;
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

/* ── Next question block (cs#179 Phase C) ── */

.next-question {
  text-align: center;
  padding: 3rem 1.5rem;
  margin-top: 2rem;
}

.next-question-text {
  font-family: var(--ds-font-serif-ui);
  font-size: clamp(0.9rem, 2.5vmin, 1.1rem);
  font-weight: 300;
  color: rgba(210, 225, 250, var(--text-question-opacity));
  letter-spacing: 0.06em;
  line-height: 2;
  font-style: italic;
  text-shadow:
    0 0 var(--text-shadow-blur) rgba(0, 0, 0, var(--text-shadow-opacity)),
    0 0 var(--text-shadow-blur2) rgba(0, 0, 0, calc(var(--text-shadow-opacity) * 0.67));
}

/* ── Phase 9 collapse toggle ── */

.phase9-toggle {
  min-width: clamp(9rem, 22vw, 12rem);
}

/* ── Mobile timeline ── */

@media (max-width: 575.98px) {
  .prologue-nodes {
    gap: 0;
    padding: 0 0.5rem;
  }

  .prologue-label {
    font-size: 0.85rem;
  }

  .prologue-sub {
    font-size: 0.6rem;
  }

  .prologue-dot {
    width: 11px;
    height: 11px;
  }

  .prologue-progress-line {
    top: 15px;
  }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .reports-domain-grid > .col,
  .prologue-node,
  .prologue-dot,
  .prologue-label,
  .prologue-sub,
  .prologue-progress-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}