/* Sosen — homepage mid-section: newly incorporated companies (internal draft with sourced figures).
   Brand palette only. Timing is ~7 seconds from title to settled theme. */

.nc-section,
.nc-preview-root {
  --canvas: #100C0B;
  --night: #171614;
  --eerie: #1C1B17;
  --eerie-light: #282723;
  --hot: #EB4604;
  --wheel: #F77E0D;
  --moss: #99A57D;
  --white: #FFFFFF;
  --text: var(--white);
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.52);
  --line: var(--eerie-light);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1180px, calc(100% - 80px));
  --page-wide: min(1280px, calc(100% - 80px));

  --nc-t-title: 0ms;
  --nc-t-chrome: 600ms;
  --nc-t-y0: 1200ms;
  --nc-t-step: 800ms;
  --nc-t-theme1: 5200ms;
  --nc-t-theme2: 6000ms;
  --nc-t-source: 6600ms;
  --nc-duration: 7000ms;

  --font-sans: "Helvetica Neue", Helvetica, "PingFang HK", "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hiragino Mincho ProN",
    "Songti TC", "Yu Mincho", Georgia, "Times New Roman", ui-serif, serif;
}

html[data-lang="en"] .nc-section,
html[data-lang="en"] .nc-preview-root {
  --font-sans: "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", ui-serif, serif;
}

html[data-lang="zh"] .nc-section,
html[data-lang="zh"] .nc-preview-root {
  --font-sans: "PingFang HK", "PingFang TC", "Hiragino Sans GB", "Noto Sans TC",
    "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Songti TC", "PMingLiU", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
}

html[data-lang="ja"] .nc-section,
html[data-lang="ja"] .nc-preview-root {
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", "YuGothic", "Hiragino Sans GB", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP",
    "Iowan Old Style", Palatino, serif;
}

/* ---------- standalone preview chrome (not for later drop-in) ---------- */

.nc-preview-root {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(235, 70, 4, 0.07), transparent 52%),
    var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

.nc-preview-root,
.nc-preview-root *,
.nc-section,
.nc-section * {
  box-sizing: border-box;
}

.nc-preview-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  background: rgba(16, 12, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nc-preview-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--page-wide);
  margin: 0 auto;
  min-height: 64px;
  padding: 12px 0;
}

.nc-preview-kicker,
.nc-preview-note,
.nc-preview-context {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
}

.nc-preview-kicker {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--moss);
}

.nc-preview-note {
  margin-top: 4px;
  max-width: 52em;
}

.nc-preview-context {
  width: var(--page-wide);
  margin: 0 auto;
  padding: 28px 0;
  letter-spacing: 0.08em;
  text-transform: none;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  text-align: center;
}

.nc-preview-context.is-before {
  margin-top: 8px;
  border-top: 0;
}

.nc-preview-context.is-after {
  margin-bottom: 48px;
  border-bottom: 0;
}

.nc-preview-root .lang-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(16, 12, 11, 0.35);
}

.nc-preview-root .lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 6px 8px;
  min-width: 32px;
  cursor: pointer;
  border-radius: 1px;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nc-preview-root .lang-btn:hover { color: var(--white); }

.nc-preview-root .lang-btn.is-active,
.nc-preview-root .lang-btn[aria-pressed="true"] {
  color: var(--white);
  background: var(--eerie-light);
}

.nc-preview-root .lang-btn:focus-visible,
.nc-section button:focus-visible {
  outline: 2px solid var(--wheel);
  outline-offset: 3px;
}

/* ---------- section ---------- */

.nc-section {
  position: relative;
  padding: 80px 0 72px;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  color-scheme: dark;
}

.nc-wrap {
  width: var(--page-wide);
  margin: 0 auto;
}

.nc-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 0 28px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-head {
  margin-bottom: 40px;
}

.nc-title {
  margin: 0;
  max-width: 18em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Semantic table; desktop pivots to year columns via grid. */

.nc-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: inherit;
}

.nc-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nc-th-year,
.nc-th-count,
.nc-year,
.nc-cell {
  text-align: left;
  vertical-align: bottom;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
}

.nc-th-year,
.nc-th-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--eerie-light);
}

.nc-year {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
}

.nc-cell {
  font-variant-numeric: tabular-nums;
}

.nc-value {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}

.nc-cell.is-empty .nc-value {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
  letter-spacing: 0;
}

.nc-cell.is-filled .nc-value {
  color: var(--white);
}

.nc-theme {
  margin-top: 48px;
  max-width: 24em;
  font-size: clamp(19px, 2.2vw, 28px);
}

.nc-theme p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--white);
}

html[data-lang="zh"] .nc-title,
html[data-lang="ja"] .nc-title,
html[data-lang="zh"] .nc-theme,
html[data-lang="ja"] .nc-theme {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

.nc-theme p + p { margin-top: 0.7em; }

.nc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
}

.nc-source {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

.nc-source.is-pending {
  color: var(--text-faint);
}

.nc-definition {
  margin: 0 0 10px;
  max-width: 46rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.65;
}

.nc-internal-note {
  margin: 10px 0 0;
  max-width: 46rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

.nc-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(247, 126, 13, 0.55);
}

.nc-source a:hover,
.nc-source a:focus-visible {
  color: var(--white);
  text-decoration-color: var(--wheel);
}



.nc-replay {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.4s var(--ease);
}

.nc-replay:hover,
.nc-replay:focus-visible {
  color: var(--white);
  border-bottom-color: var(--wheel);
}

.nc-section.nc-is-idle .nc-replay,
.nc-section.nc-is-playing .nc-replay {
  opacity: 0.45;
}

.nc-section.nc-is-complete .nc-replay { opacity: 1; }

/* ---------- motion: idle hides staged pieces ---------- */

.nc-section.nc-is-idle .nc-rule,
.nc-section.nc-is-idle .nc-title,
.nc-section.nc-is-idle .nc-th-year,
.nc-section.nc-is-idle .nc-th-count,
.nc-section.nc-is-idle .nc-year,
.nc-section.nc-is-idle .nc-cell,
.nc-section.nc-is-idle .nc-theme p,
.nc-section.nc-is-idle .nc-source,
.nc-section.nc-is-idle .nc-definition,
.nc-section.nc-is-idle .nc-internal-note {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
}

.nc-section.nc-is-idle .nc-rule {
  filter: none;
  transform: scaleX(0);
}

/* playing: staged entrance, total 7s */

@keyframes nc-rise {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes nc-draw {
  from { transform: scaleX(0); opacity: 1; }
  to { transform: scaleX(1); opacity: 1; }
}

.nc-section.nc-is-playing .nc-rule {
  animation: nc-draw 0.9s var(--ease) var(--nc-t-title) both;
}

.nc-section.nc-is-playing .nc-title {
  animation: nc-rise 0.9s var(--ease-out) var(--nc-t-title) both;
}

.nc-section.nc-is-playing .nc-th-year,
.nc-section.nc-is-playing .nc-th-count {
  animation: nc-rise 0.7s var(--ease-out) var(--nc-t-chrome) both;
}

.nc-section.nc-is-playing .nc-row[data-year] .nc-year,
.nc-section.nc-is-playing .nc-row[data-year] .nc-cell {
  animation: nc-rise 0.7s var(--ease-out) both;
  animation-delay: calc(var(--nc-t-y0) + var(--nc-i, 0) * var(--nc-t-step));
}

.nc-section.nc-is-playing .nc-row:nth-child(1) .nc-year,
.nc-section.nc-is-playing .nc-row:nth-child(1) .nc-cell { animation-delay: 1200ms; }
.nc-section.nc-is-playing .nc-row:nth-child(2) .nc-year,
.nc-section.nc-is-playing .nc-row:nth-child(2) .nc-cell { animation-delay: 2000ms; }
.nc-section.nc-is-playing .nc-row:nth-child(3) .nc-year,
.nc-section.nc-is-playing .nc-row:nth-child(3) .nc-cell { animation-delay: 2800ms; }
.nc-section.nc-is-playing .nc-row:nth-child(4) .nc-year,
.nc-section.nc-is-playing .nc-row:nth-child(4) .nc-cell { animation-delay: 3600ms; }
.nc-section.nc-is-playing .nc-row:nth-child(5) .nc-year,
.nc-section.nc-is-playing .nc-row:nth-child(5) .nc-cell { animation-delay: 4400ms; }

.nc-section.nc-is-playing .nc-row:nth-child(1) .nc-year::after { animation-delay: 1380ms; }
.nc-section.nc-is-playing .nc-row:nth-child(2) .nc-year::after { animation-delay: 2180ms; }
.nc-section.nc-is-playing .nc-row:nth-child(3) .nc-year::after { animation-delay: 2980ms; }
.nc-section.nc-is-playing .nc-row:nth-child(4) .nc-year::after { animation-delay: 3780ms; }
.nc-section.nc-is-playing .nc-row:nth-child(5) .nc-year::after { animation-delay: 4580ms; }

.nc-section.nc-is-playing .nc-theme p:nth-child(1) {
  animation: nc-rise 0.8s var(--ease-out) var(--nc-t-theme1) both;
}

.nc-section.nc-is-playing .nc-theme p:nth-child(2) {
  animation: nc-rise 0.8s var(--ease-out) var(--nc-t-theme2) both;
}

.nc-section.nc-is-playing .nc-source,
.nc-section.nc-is-playing .nc-definition,
.nc-section.nc-is-playing .nc-internal-note {
  animation: nc-rise 0.6s var(--ease-out) var(--nc-t-source) both;
}

.nc-section.nc-is-complete .nc-rule,
.nc-section.nc-is-complete .nc-title,
.nc-section.nc-is-complete .nc-th-year,
.nc-section.nc-is-complete .nc-th-count,
.nc-section.nc-is-complete .nc-year,
.nc-section.nc-is-complete .nc-cell,
.nc-section.nc-is-complete .nc-theme p,
.nc-section.nc-is-complete .nc-source,
.nc-section.nc-is-complete .nc-definition,
.nc-section.nc-is-complete .nc-internal-note {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
}

.nc-section.nc-is-complete .nc-rule {
  transform: scaleX(1);
}

/* A quiet underline grows under each year as it arrives. */

.nc-year {
  position: relative;
}

.nc-year::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1.75em;
  height: 1px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-section.nc-is-playing .nc-year::after {
  animation: nc-draw 0.55s var(--ease) both;
  animation-delay: calc(var(--nc-t-y0) + var(--nc-i, 0) * var(--nc-t-step) + 180ms);
}

.nc-section.nc-is-complete .nc-year::after {
  transform: scaleX(1);
  animation: none;
}

/* ---------- desktop: years as columns ---------- */

@media (min-width: 861px) {
  .nc-table {
    display: grid;
    grid-template-columns: minmax(13rem, 1.2fr) repeat(5, minmax(0, 1fr));
    column-gap: 8px;
    border-bottom: 1px solid var(--line);
  }

  .nc-table thead,
  .nc-table tbody,
  .nc-table tr {
    display: contents;
  }

  .nc-th-year,
  .nc-th-count,
  .nc-year,
  .nc-cell {
    border-bottom: 0;
    padding: 18px 16px 22px 0;
  }

  .nc-th-year {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .nc-th-count {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    border-bottom: 0;
    padding-top: 8px;
  }

  .nc-row[data-year="2022"] .nc-year { grid-column: 2; grid-row: 1; }
  .nc-row[data-year="2023"] .nc-year { grid-column: 3; grid-row: 1; }
  .nc-row[data-year="2024"] .nc-year { grid-column: 4; grid-row: 1; }
  .nc-row[data-year="2025"] .nc-year { grid-column: 5; grid-row: 1; }
  .nc-row[data-year="2026"] .nc-year { grid-column: 6; grid-row: 1; }

  .nc-row[data-year="2022"] .nc-cell { grid-column: 2; grid-row: 2; }
  .nc-row[data-year="2023"] .nc-cell { grid-column: 3; grid-row: 2; }
  .nc-row[data-year="2024"] .nc-cell { grid-column: 4; grid-row: 2; }
  .nc-row[data-year="2025"] .nc-cell { grid-column: 5; grid-row: 2; }
  .nc-row[data-year="2026"] .nc-cell { grid-column: 6; grid-row: 2; }

  .nc-year {
    font-size: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .nc-cell {
    padding-top: 22px;
  }

  .nc-year { white-space: normal; }
}

/* ---------- mobile ---------- */

@media (max-width: 860px) {
  .nc-section,
  .nc-preview-root {
    --page: calc(100% - 40px);
    --page-wide: calc(100% - 40px);
  }

  .nc-section { padding: 64px 0 48px; }

  .nc-head { margin-bottom: 28px; }

  .nc-th-year,
  .nc-th-count {
    padding: 10px 12px 10px 0;
  }

  .nc-year,
  .nc-cell {
    padding: 14px 8px 14px 0;
  }

  .nc-cell,
  .nc-th-count { text-align: right; }

  .nc-value { font-size: clamp(26px, 7vw, 36px); }

  .nc-theme { margin-top: 36px; }

  .nc-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .nc-preview-bar-inner {
    flex-wrap: wrap;
  }
}

/* ---------- reduced motion: final structure, no animation ---------- */

@media (prefers-reduced-motion: reduce) {
  .nc-section .nc-rule,
  .nc-section .nc-title,
  .nc-section .nc-th-year,
  .nc-section .nc-th-count,
  .nc-section .nc-year,
  .nc-section .nc-year::after,
  .nc-section .nc-cell,
  .nc-section .nc-theme p,
  .nc-section .nc-source,
  .nc-section.nc-is-idle .nc-rule,
  .nc-section.nc-is-idle .nc-title,
  .nc-section.nc-is-idle .nc-th-year,
  .nc-section.nc-is-idle .nc-th-count,
  .nc-section.nc-is-idle .nc-year,
  .nc-section.nc-is-idle .nc-cell,
  .nc-section.nc-is-idle .nc-theme p,
  .nc-section.nc-is-idle .nc-source,
  .nc-section.nc-is-playing .nc-rule,
  .nc-section.nc-is-playing .nc-title,
  .nc-section.nc-is-playing .nc-th-year,
  .nc-section.nc-is-playing .nc-th-count,
  .nc-section.nc-is-playing .nc-row[data-year] .nc-year,
  .nc-section.nc-is-playing .nc-row[data-year] .nc-cell,
  .nc-section.nc-is-playing .nc-year::after,
  .nc-section.nc-is-playing .nc-theme p,
  .nc-section.nc-is-playing .nc-source {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .nc-section .nc-rule,
  .nc-section .nc-year::after {
    transform: scaleX(1) !important;
  }

  .nc-replay { opacity: 0.45; }
}