/* ==========================================================================
   Showcase motion layer (loaded after showcase.css)
   --------------------------------------------------------------------------
   VoZara motion rules: ease-out-quint, 0.2-0.5s, fade + short upward
   translate, staggered. No bounce, no spin, no parallax. Looping motion is
   kept for "live" moments only: the voice ring, the waveform and the
   idle pipeline.
   ========================================================================== */

:root {
  --m-ease: var(--ease-out-quint, cubic-bezier(.23, 1, .32, 1));
  --m-ease-expo: var(--ease-out-expo, cubic-bezier(.19, 1, .22, 1));
  --m-ease-in-out: var(--ease-in-out-cubic, cubic-bezier(.455, .03, .515, .955));
}

/* --- Shared entrance ---------------------------------------------------- */
@keyframes motionRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.motion-rise {
  animation: motionRise 0.5s var(--m-ease) both;
}

/* --- Idle hero: cascade, voice ring, pipeline --------------------------- */
.motion-cascade > * {
  animation: motionRise 0.6s var(--m-ease-expo) both;
}
.motion-cascade > :nth-child(1) { animation-delay: 0.05s; }
.motion-cascade > :nth-child(2) { animation-delay: 0.15s; }
.motion-cascade > :nth-child(3) { animation-delay: 0.25s; }
.motion-cascade > :nth-child(4) { animation-delay: 0.38s; }
.motion-cascade > :nth-child(5) { animation-delay: 0.52s; }

.idle-card-inner { max-width: 540px; }

.motion-voice-ring { position: relative; }
.motion-voice-ring::before,
.motion-voice-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(13, 148, 136, 0.35);
  animation: voiceRing 3.2s var(--m-ease) infinite;
  pointer-events: none;
}
.motion-voice-ring::after { animation-delay: 1.6s; }
@keyframes voiceRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.motion-pipeline {
  --pipe-cycle: 6s;
  list-style: none;
  position: relative;
  display: flex;
  width: 100%;
  margin: 6px 0 2px;
  padding: 0;
}
/* Track and travelling pulse sit behind the icons, centre to centre. */
.motion-pipeline::before,
.motion-pipeline::after {
  content: '';
  position: absolute;
  top: 19px;
  height: 2px;
  border-radius: 2px;
}
.motion-pipeline::before {
  left: 12.5%;
  right: 12.5%;
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.18), rgba(6, 182, 212, 0.18));
}
.motion-pipeline::after {
  width: 36px;
  margin-left: -18px;
  top: 18px;
  height: 4px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0), #06B6D4 60%, #0D9488);
  filter: blur(0.3px);
  animation: pipePulse var(--pipe-cycle) var(--m-ease-in-out, ease-in-out) infinite;
}
@keyframes pipePulse {
  0%   { left: 12.5%; opacity: 0; }
  4%   { opacity: 1; }
  75%  { left: 87.5%; opacity: 1; }
  82%, 100% { left: 87.5%; opacity: 0; }
}
.pipeline-node {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pipeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(13, 148, 136, 0.22);
  color: var(--accent-teal, #0D9488);
  animation: pipeNode var(--pipe-cycle) var(--m-ease) infinite;
}
.pipeline-icon .material-symbols-rounded { font-size: 20px; }
.pipeline-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-600, #45474D);
  text-align: center;
  line-height: 1.25;
}
.pipeline-node:nth-child(2) .pipeline-icon { animation-delay: 1.5s; }
.pipeline-node:nth-child(3) .pipeline-icon { animation-delay: 3s; }
.pipeline-node:nth-child(4) .pipeline-icon { animation-delay: 4.5s; }
@keyframes pipeNode {
  0%   { background: #ffffff; color: var(--accent-teal, #0D9488); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
  6%   { background: var(--voice-gradient); color: #ffffff; border-color: transparent; box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.12); }
  22%  { background: #ffffff; color: var(--accent-teal, #0D9488); border-color: rgba(13, 148, 136, 0.22); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
  100% { background: #ffffff; color: var(--accent-teal, #0D9488); }
}

/* The old arrow bounce is off-brand; nudge once on entrance instead. */
.idle-cta-guide .material-symbols-rounded {
  animation: ctaNudge 0.9s var(--m-ease) 1.2s 2 both;
}
@keyframes ctaNudge {
  0%, 100% { transform: none; }
  40% { transform: translateX(-5px); }
}

/* --- Sidebar: calmer step choreography ---------------------------------- */
/* Active step: one soft settle, no endless blinking border. */
.sidebar-step-card.active {
  animation: stepSettle 0.45s var(--m-ease);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08);
}
@keyframes stepSettle {
  from { box-shadow: 0 0 0 7px rgba(13, 148, 136, 0.14); }
  to   { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08); }
}
.sidebar-step-card.completed { box-shadow: none; }

/* Redefined so the existing classes play a gentle version. */
@keyframes step1CompletionFlash {
  0%   { background: #ffffff; }
  100% { background: var(--status-supported-bg, #E9FBEE); border-color: rgba(52, 199, 89, 0.35); }
}
@keyframes step2ActivationFlash {
  0%   { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
  35%  { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.16); }
  100% { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08); }
}
@keyframes pageTransitionFlash {
  0%, 100% { box-shadow: none; }
}
/* Connector fills downward once, then holds. */
.step-connector-line.active { box-shadow: none; }
.step-connector-line.streaming::after {
  background: var(--voice-gradient);
  animation: connectorFill 0.6s var(--m-ease) both;
}
@keyframes connectorFill {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

.step-wait-dots { display: inline-flex; gap: 2px; align-items: center; }
.step-wait-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  animation: waitDot 1.2s var(--m-ease) infinite;
}
.step-wait-dots i:nth-child(2) { animation-delay: 0.15s; }
.step-wait-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes waitDot {
  0%, 60%, 100% { opacity: 0.3; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Sub-step pills light up as they become active. */
.q-pill { transition: background 0.3s var(--m-ease), border-color 0.3s var(--m-ease), color 0.3s var(--m-ease); }
.q-pill.completed .q-pill-num { animation: tickIn 0.35s var(--m-ease); }
@keyframes tickIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- Live dialogue ------------------------------------------------------- */
.turn-card { transition: border-color 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease), background 0.35s var(--m-ease), opacity 0.35s var(--m-ease); }
.turn-card.completed-turn { opacity: 0.88; }
/* Rows rise in via .motion-rise; drop the older per-bubble pop. */
.turn-card .bubble-student { animation: none; }

/* 7-bar waveform. Without the analyser it loops; with it each bar follows
   Clara's audio (.is-driven). */
.wave-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.wave-bars .wave-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--voice-gradient);
  transform-origin: center;
  transform: scaleY(0.3);
  animation: waveLoop 1.1s var(--m-ease-in-out, ease-in-out) infinite;
}
.wave-bars .wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bars .wave-bar:nth-child(2) { animation-delay: 0.12s; }
.wave-bars .wave-bar:nth-child(3) { animation-delay: 0.24s; }
.wave-bars .wave-bar:nth-child(4) { animation-delay: 0.36s; }
.wave-bars .wave-bar:nth-child(5) { animation-delay: 0.24s; }
.wave-bars .wave-bar:nth-child(6) { animation-delay: 0.12s; }
.wave-bars .wave-bar:nth-child(7) { animation-delay: 0s; }
@keyframes waveLoop {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.9); }
}
.speaking-live-badge.is-driven .wave-bar {
  animation: none;
  transition: transform 60ms linear;
}

/* Clara's avatar ring follows the live voice level. */
.turn-card.active-turn .avatar-placeholder-clara-sm {
  box-shadow: 0 0 0 calc(2px + var(--voice-level, 0) * 9px) rgba(13, 148, 136, 0.16);
  transition: box-shadow 80ms linear;
}

/* New transcript words fade in where they land. */
.motion-words { animation: wordsIn 0.45s var(--m-ease) both; }
@keyframes wordsIn {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: none; }
}

/* --- Tool traces --------------------------------------------------------- */
.via-trace { animation: motionRise 0.4s var(--m-ease) both; }
.via-trace.is-pending .via-trace-head {
  position: relative;
  overflow: hidden;
}
.via-trace.is-pending .via-trace-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.16), transparent);
  transform: translateX(-100%);
  animation: traceScan 1.3s var(--m-ease-in-out, ease-in-out) infinite;
  pointer-events: none;
}
@keyframes traceScan { to { transform: translateX(100%); } }
.via-trace.is-pending .via-trace-spinner { display: none; }
.via-trace.is-resolved .via-trace-check svg polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: drawCheck 0.4s var(--m-ease) 0.1s forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.via-trace-latency { font-variant-numeric: tabular-nums; }
/* Show only the hint that matches the drawer state. */
.via-trace.collapsed .hint-expanded,
.via-trace:not(.collapsed) .hint-collapsed { display: none; }

/* --- Audit wait ---------------------------------------------------------- */
.eval-checklist-item {
  transition: background 0.4s var(--m-ease), color 0.4s var(--m-ease), transform 0.4s var(--m-ease);
  border-radius: 8px;
}
.eval-checklist-item.is-scanning {
  background: rgba(13, 148, 136, 0.07);
  color: var(--ink-950, #121317);
  transform: translateX(3px);
}

/* --- Results ------------------------------------------------------------- */
.audit-scoreboard {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.score-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-950, #121317);
}
.score-total { font-size: 11.5px; font-weight: 500; color: var(--ink-500, #6A6A71); }
.score-bar {
  display: flex;
  gap: 3px;
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--status-pending-bg);
}
.score-seg {
  flex-basis: 0;
  border-radius: 9999px;
  transform-origin: left center;
  animation: segGrow 0.7s var(--m-ease) both;
}
.score-seg[style*="flex-grow: 0"] { display: none; }
.seg-supported { background: #34C759; }
.seg-issue-observed { background: #F59E0B; }
.seg-unable-to-assess { background: #B7BFD9; }
@keyframes segGrow {
  from { transform: scaleX(0); }
  to   { transform: none; }
}
.score-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.score-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--status-pending-bg);
}
.score-tile .material-symbols-rounded { grid-row: 1 / 3; font-size: 18px; }
.score-num { font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.score-label { font-size: 11px; color: var(--ink-600, #45474D); line-height: 1.2; }
.tile-supported { background: var(--status-supported-bg); color: var(--status-supported-text); }
.tile-issue-observed { background: var(--status-issue-bg); color: var(--status-issue-text); }
.score-tile.is-zero { opacity: 0.55; }

/* Helpfulness board: same frame as the scoreboard; "not answered" gets its own red so it
   isn't read as an honesty warning. */
.seg-help-delivered { background: #34C759; }
.seg-help-partial { background: #F59E0B; }
.seg-help-missed { background: #E5484D; }
.seg-help-unassessed { background: #B7BFD9; }
.help-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.help-item { border-left: 3px solid #B7BFD9; padding: 6px 10px; border-radius: 6px; background: var(--status-pending-bg); }
.help-delivered { border-left-color: #34C759; }
.help-partial { border-left-color: #F59E0B; }
.help-missed { border-left-color: #E5484D; }
.help-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-600, #45474D); }
.help-status .material-symbols-rounded { font-size: 16px; }
.help-delivered .help-status { color: var(--status-supported-text); }
.help-missed .help-status { color: #B42318; }
.help-asked { margin: 4px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-950, #121317); }
.help-summary { margin: 0; font-size: 12.5px; color: var(--ink-600, #45474D); }
.help-note { margin: 0; font-size: 11px; color: var(--ink-500, #6A6A71); }

.finding-status-badge .finding-badge-icon {
  animation: tickIn 0.4s var(--m-ease) 0.2s both;
}
.post-run-card { animation: motionRise 0.5s var(--m-ease) 0.3s both; }

/* Hover lift on cards the visitor can open. */
.finding-card, .tool-eval-card {
  transition: transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease);
}
@media (hover: hover) {
  .finding-card:hover, .tool-eval-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* --- Narrow screens ------------------------------------------------------ */
@media (max-width: 480px) {
  .pipeline-icon { width: 34px; height: 34px; }
  .pipeline-icon .material-symbols-rounded { font-size: 17px; }
  .motion-pipeline::before, .motion-pipeline::after { top: 16px; }
  .motion-pipeline::after { top: 15px; }
  .pipeline-label { font-size: 10.5px; }
  .score-tiles { grid-template-columns: 1fr; }
}

/* --- Reduced motion: show the end state, nothing loops ------------------- */
@media (prefers-reduced-motion: reduce) {
  .motion-pipeline::after,
  .motion-voice-ring::before,
  .motion-voice-ring::after { display: none; }
  .pipeline-icon { animation: none; }
  .wave-bars .wave-bar { animation: none; transform: scaleY(0.6); }
  .via-trace.is-pending .via-trace-head::after { display: none; }
  .via-trace.is-resolved .via-trace-check svg polyline { stroke-dashoffset: 0; }
}