/* =========================================================================
   Clawdia — middle section · "A Day at Work" timeline
   Extracted from the design exploration. Loaded AFTER styles.css; reuses its
   editorial-coffee tokens (--color-*, --font-*, --fs-*, --hairline-*,
   --elevation-*, --accent-tint, --rhythm-loose, etc.).
   ========================================================================= */

/* ---- section shell ----------------------------------------------------- */
.mid { position: relative; padding-top: clamp(64px, 4vw, 120px); }
/* .visually-hidden is defined once in styles.css (loaded first) — not redefined here. */

/* ---- shared eyebrow ---------------------------------------------------- */
.opt-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================================
   OPTION A — "The Working Day"
   A center timeline spine that draws as you scroll. Each point is a moment
   in a shift, alternating across the spine, with a compact live artifact.
   ========================================================================= */
.opt-a { padding-bottom: var(--rhythm-default); }
.a-head { text-align: center; margin-bottom: clamp(56px, 4vw, 92px); }
.a-head .opt-eyebrow { justify-content: center; }
.a-head h2 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  text-wrap: balance;
}
.a-head h2 em { font-style: italic; color: var(--color-accent-deep); }

.a-timeline {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
}
.a-spine {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--hairline-strong);
}
.a-spine-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep));
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
}
.a-moment {
  position: relative;
  padding-left: 44px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.a-moment:last-child { margin-bottom: 0; }
.a-node {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--hairline-strong);
  transition: border-color 360ms ease, background 360ms ease, box-shadow 360ms ease;
}
.a-moment.is-on .a-node {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--accent-tint);
}
.a-time {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  transition: color 360ms ease;
}
.a-moment.is-on .a-time { color: var(--color-accent-deep); }
.a-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-bullet);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin: 6px 0 12px;
  text-wrap: balance;
}
.a-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-ink);
  max-width: 34rem;
}
.a-body em { font-style: italic; }
.a-artifact { margin-top: 20px; }

@media (min-width: 820px) {
  .a-timeline { display: grid; grid-template-columns: 1fr 1fr; column-gap: 100px; }
  .a-spine { left: 50%; transform: translateX(-1px); }
  .a-moment { width: auto; padding-left: 0; margin-bottom: clamp(44px, 6vw, 96px); }
  .a-moment.a-left  { grid-column: 1; text-align: right; }
  .a-moment.a-right { grid-column: 2; text-align: left; margin-top: clamp(64px, 8vw, 120px); }
  /* center the 16px node on the spine (the 50% line). right/left:-50px lands the
     node's EDGE on the line; translateX by half its own width slides it so the
     CENTER sits on the line instead. */
  .a-left .a-node  { left: auto; right: -50px; transform: translateX(50%); }
  .a-right .a-node { left: -50px; transform: translateX(-50%); }
  .a-left .a-body  { margin-left: auto; }
  .a-left .a-artifact { display: flex; justify-content: flex-end; }
}

/* A — artifacts ---------------------------------------------------------- */
.a-chat {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  text-align: left;
}
.a-bubble {
  max-width: 86%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-ink);
  border: 1px solid var(--hairline-soft);
  background: var(--color-surface);
  box-shadow: var(--highlight-card-inset);
  border-radius: 16px;
}
.a-bubble b { font-weight: 500; }
/* incoming (Eugenia): left, neutral surface, tail notch on the bottom-left */
.a-bubble:not(.from-c) {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
/* outgoing (Clawdia): right, accent tint, tail notch on the bottom-right */
.a-bubble.from-c {
  align-self: flex-end;
  background: var(--accent-tint);
  border-color: color-mix(in oklab, var(--color-accent), transparent 70%);
  border-bottom-right-radius: 5px;
}
.a-bubble .who {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 3px;
}
.a-bubble.from-c .who { color: var(--color-accent-deep); }
.a-msg { display: block; }

/* typing indicator — three bouncing dots; hidden until middle.js runs the sequence */
.a-typing { display: none; align-items: center; gap: 5px; padding: 4px 1px; }
.a-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  animation: a-typing 1.3s ease-in-out infinite;
}
.a-typing i:nth-child(2) { animation-delay: .18s; }
.a-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes a-typing {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-4px); opacity: 1;   }
}

/* Scroll-driven sequence. middle.js adds .a-chat--play and then, in order,
   .is-shown (pop the bubble in), .is-typing (Clawdia's dots), .is-said (stream
   the words). With no JS / reduced motion, none of this applies and the chat
   rests in its final state: both bubbles shown, full text, no dots. */
.a-chat--play .a-bubble { opacity: 0; transform: translateY(8px) scale(.985); }
.a-chat--play .a-bubble.is-shown {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.a-chat--play .a-bubble.from-c.is-typing .a-typing { display: inline-flex; }
.a-chat--play .a-bubble.from-c.is-typing .a-msg    { display: none; }
.a-chat--play .a-bubble.from-c .a-msg .w           { opacity: 0; transition: opacity .3s ease; }
.a-chat--play .a-bubble.from-c.is-said .a-msg .w   { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .a-typing i { animation: none; }
}

.a-rails {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 340px;
}
.a-left .a-rails { justify-content: flex-end; }
.a-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-veil);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink);
  transition: opacity .45s ease, transform .5s cubic-bezier(0.22,1,0.36,1);
}
/* channel pills cascade in (rise + fade) when the section scrolls into view —
   middle.js arms each with .a-pill--enter, then releases them on a stagger.
   Reduced-motion / no-JS never get the class, so the pills simply rest visible. */
.a-pill--enter { opacity: 0; transform: translateY(10px); }
.a-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.a-bar {
  display: inline-block;
  width: min(340px, 100%);
  text-align: left;
}
.a-bar-track {
  display: flex;
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-subtle);
}
.a-bar-seg { height: 100%; width: var(--w, 0); transition: width 900ms cubic-bezier(0.22,1,0.36,1); }
.a-bar-seg.s1 { background: var(--color-accent); }
.a-bar-seg.s2 { background: color-mix(in oklab, var(--color-accent), var(--color-surface) 45%); }
.a-bar-seg.s3 { background: color-mix(in oklab, var(--color-accent), var(--color-surface) 72%); }
.a-bar-legend {
  display: flex;
  gap: 0;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-ink-soft);
}
/* Each label spans the width of the segment it describes, so the three labels
   line up under their bar segments. The widths mirror the data-w values on the
   .a-bar-seg spans in index.html — keep them in sync if you retune the bar. */
.a-bar-legend span { white-space: nowrap; }
.a-bar-legend span:nth-child(1) { width: 25%; text-align: left; }
.a-bar-legend span:nth-child(2) { width: 40%; text-align: center; }
.a-bar-legend span:nth-child(3) { width: 35%; text-align: right; }
/* the 25% slot gets tight for "$487k direct" once the bar narrows on phones */
@media (max-width: 600px) { .a-bar-legend { font-size: 0.62rem; } }
.a-bar-legend b { color: var(--color-ink); font-weight: 500; }

.a-price {
  display: inline-block;
  border: 1px solid var(--hairline-soft);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface-panel);
  padding: 13px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-ink);
  text-align: left;
}
.a-price b { color: var(--color-accent); margin: 0 3px; }
.a-price small {
  display: block;
  margin-top: 5px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}