/* ═══════════════════════════════════════════════════════
   Talpek Moments — 5 cut-in slides for the meta-demo
   Only appears when XAPI.talpekActive === true
   See prototypes/talpek-meta-demo/STORYBOARD.md for narrative
   ═══════════════════════════════════════════════════════ */

.tm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  min-height: 0;
}

.tm-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-1, #a8c4b4);
  margin-bottom: 14px;
  opacity: 0;
  animation: tm-fadeup 0.7s 0.1s ease forwards;
}

.tm-line {
  font-family: 'DM Serif Display', 'Fraunces', serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cream, #f4f1e8);
  margin-bottom: 6px;
  max-width: 760px;
  opacity: 0;
  transform: translateY(12px);
  animation: tm-fadeup 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.tm-line.xlarge { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin-bottom: 14px; max-width: 880px; }
.tm-line.large  { font-size: clamp(24px, 3.6vw, 36px); }
.tm-line.medium { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; color: var(--ink-soft, #b8c4be); font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: 0; max-width: 720px; margin-bottom: 14px; }
/* Italic is font-style ONLY — does NOT imply accent color.
   Add .accent explicitly where accent color is wanted. */
.tm-line.italic  { font-style: italic; }
.tm-line.accent  { color: #a8c4b4; }

.tm-line.d1 { animation-delay: 0.5s; }
.tm-line.d2 { animation-delay: 1.2s; }
.tm-line.d3 { animation-delay: 1.9s; }
.tm-line.d4 { animation-delay: 2.5s; }
.tm-line.d5 { animation-delay: 3.1s; }

@keyframes tm-fadeup {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Signal card (Moment 2) ─── */
.tm-signal-card {
  background: var(--cream, #f4f1e8);
  color: #1a1f24;
  border-radius: 14px;
  padding: 22px 32px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 20px 50px rgba(0,0,0,0.3), 0 40px 100px rgba(0,0,0,0.25);
  min-width: 440px;
  max-width: 520px;
  margin-top: 16px;
  text-align: left;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: tm-card-in 1s 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes tm-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Signal card uses hardcoded Talpek palette (NOT course CSS vars) so the
   branding stays consistent regardless of the course's own theme. */
.tm-signal-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a3629; /* pine — higher contrast on cream than sage */
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-signal-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(26,54,41,0.25), transparent);
}
.tm-signal-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: #1a3629; /* pine */
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.tm-signal-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(26,54,41,0.1);
  opacity: 0;
}
.tm-signal-row:last-of-type { border-bottom: none; }
.tm-signal-row.show { animation: tm-row-in 0.4s ease forwards; }
@keyframes tm-row-in {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}
.tm-signal-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; /* was 10 — WCAG pass for small mono on cream */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a3629; /* pine — 10.3:1 on cream, passes AAA */
  font-weight: 600;
}
.tm-signal-label::after { content: ' →'; color: rgba(26,54,41,0.55); font-weight: 400; }
.tm-signal-value {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a3629; /* pine */
  letter-spacing: -0.005em;
}
.tm-signal-value .cursor {
  display: inline-block;
  width: 2px; height: 16px;
  background: #3e7361; /* sage — cursor is OK at this contrast, it blinks */
  vertical-align: -3px;
  margin-left: 2px;
  animation: tm-blink 0.8s infinite;
}
.tm-signal-value.done .cursor { display: none; }
@keyframes tm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.tm-signal-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(26,54,41,0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(26,54,41,0.65);
  text-transform: uppercase;
  opacity: 0;
}
.tm-signal-footer.show { animation: tm-fadeup 0.5s ease forwards; }
.tm-signal-footer span { white-space: nowrap; }
/* Only Talpek pops — the other nodes stay in muted pine with the rest */
.tm-signal-footer .arrow-flow { color: #3e7361; font-weight: 700; }

/* On narrow widths, stack the flow vertically so each step reads cleanly */
@media (max-width: 520px) {
  .tm-signal-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─── Flow diagram (Moment 3) ─── */
.tm-flow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  opacity: 0;
  animation: tm-fadeup 0.9s 1.6s ease forwards;
  flex-wrap: wrap;
  justify-content: center;
}
.tm-flow-node {
  padding: 12px 18px;
  border: 1px solid rgba(168, 196, 180, 0.35);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--cream, #f4f1e8);
  background: rgba(168, 196, 180, 0.06);
  min-width: 100px;
  text-align: center;
}
.tm-flow-node.small {
  padding: 8px 14px;
  font-size: 12px;
  min-width: 0;
  white-space: nowrap;
}
.tm-flow-node.talpek {
  border-color: var(--accent-1, #a8c4b4);
  background: rgba(168, 196, 180, 0.1);
  color: var(--accent-1, #a8c4b4);
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  padding: 10px 18px;
  min-width: 80px;
}
.tm-flow-arrow {
  color: var(--accent-1, #a8c4b4);
  font-size: 18px;
  letter-spacing: -2px;
}
/* Fanout from warehouse → multiple stakeholders.
   Layout uses a vertical border-left as the rail so it's guaranteed to align
   with the nodes; each node gets a short horizontal branch pseudo-element.
   `align-items: stretch` ensures all three fan nodes have the SAME width and
   therefore the SAME left edge — branch lines all terminate consistently. */
.tm-flow-fan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  position: relative;
  margin-left: 6px;
  padding: 4px 0 4px 22px;
  border-left: 1px solid rgba(168, 196, 180, 0.45);
}
/* Short horizontal arm into the rail from the warehouse (joins rail at top) */
.tm-flow-fan::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  width: 8px; height: 1px;
  background: rgba(168, 196, 180, 0.45);
}
/* Horizontal branch from rail to each node — fixed 22px to match padding */
.tm-flow-fan .fan-node { position: relative; }
.tm-flow-fan .fan-node::before {
  content: '';
  position: absolute;
  left: -22px; top: 50%;
  width: 22px; height: 1px;
  background: rgba(168, 196, 180, 0.45);
}
@media (max-width: 760px) {
  .tm-flow-fan {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 6px;
  }
  .tm-flow-fan::before,
  .tm-flow-fan .fan-node::before { display: none; }
}

/* ─── Report container (Moment 5) ─── */
.tm-report-container {
  width: 100%;
  max-width: 940px;
  margin: 28px auto 0;
  opacity: 0;
  animation: tm-fadeup 1.2s 1s ease forwards;
}
/* Embedded narrative report styles — overrides the standalone
   .gt-report-viewport chrome so the page sits inline inside the slide. */
.tm-report-embed .gt-report-page {
  width: 100%;
  max-width: 880px;
  min-height: 0;               /* was 1100px for standalone letter-aspect */
  margin: 0 auto;
  padding: 56px 64px 48px;     /* tighter than standalone 72/88 */
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(26,54,41,0.08), 0 12px 48px rgba(26,54,41,0.22), 0 40px 120px rgba(26,54,41,0.25);
  border-radius: 6px;
  color: #1a1f24;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
.tm-report-embed .gt-report-page::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(62,115,97,0.015), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(201,169,97,0.02), transparent 40%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .tm-report-embed .gt-report-page {
    padding: 36px 28px 32px;
    border-radius: 3px;
  }
}

/* ─── Report loading state (pre-render) ─── */
.tm-report-loading {
  color: #f4f1e8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  opacity: 0.72;
  padding: 28px 20px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
  letter-spacing: 0.02em;
}
.tm-loading-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
}
.tm-loading-dots i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #a8c4b4;
  animation: tm-loading-bounce 1.1s ease-in-out infinite both;
}
.tm-loading-dots i:nth-child(1) { animation-delay: -0.32s; }
.tm-loading-dots i:nth-child(2) { animation-delay: -0.16s; }
.tm-loading-dots i:nth-child(3) { animation-delay: 0s; }
@keyframes tm-loading-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.35; }
  40% { transform: scale(1); opacity: 1; }
}

/* ─── Continue button ─── */
.tm-continue {
  margin-top: 14px;
  opacity: 0;
}
.tm-continue.show { animation: tm-fadeup 0.7s ease forwards; }
.tm-continue button {
  background: transparent;
  border: 1px solid rgba(168, 196, 180, 0.6);
  color: var(--cream, #f4f1e8);
  padding: 12px 26px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tm-continue button:hover {
  background: rgba(168, 196, 180, 0.1);
  border-color: var(--cream, #f4f1e8);
}

/* ─── Hide bottom nav during Talpek Moment animations ───
   Applied to <body> during a first-time Moment render. Removed when the
   Continue button is revealed or the user clicks Continue. On review visits
   (seen before), the nav stays visible throughout. */
body.moment-playing .bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body .bottom-nav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Tighter spacing on mobile */
@media (max-width: 600px) {
  .tm-signal-card { min-width: 0; width: 100%; padding: 22px 20px; }
  .tm-signal-row { grid-template-columns: 64px 1fr; gap: 12px; }
  .tm-signal-value { font-size: 14px; }
  .tm-flow { flex-direction: column; gap: 10px; }
  .tm-flow-arrow { transform: rotate(90deg); }
}