/* ================================================================
   HpChairside — "Hands on the patient. Not on the keyboard."
   Namespace: .chair-*  (light, sand-blue section)

   Motion model: pure CSS, keyed to `.chair-card.in` (the global .ios
   IntersectionObserver in app.js adds `.in` on reveal). Both panels run
   a shared ~9s master loop so the demo re-plays itself continuously —
   the voice panel charts a tooth in real time; the Skia panel sweeps a
   bitewing and pops findings on capture. No JS required.

   Palette: sand-blue everywhere. ONE restrained rose severity accent is
   reserved for clinical alerts (>=5 mm pockets, caries) and teal ONLY
   for the tiny "live" status dot.
   ================================================================ */

.chair-sec {
  padding: clamp(64px, 9vw, 116px) 0;
  background: linear-gradient(180deg, rgba(90, 130, 194, 0.06), rgba(90, 130, 194, 0) 42%);
  --chair-rose: #c2566f;
}

.chair-head { max-width: 64ch; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.chair-head .eyebrow { display: block; margin-bottom: 14px; }
.chair-head .hp-lead { margin-left: auto; margin-right: auto; max-width: 58ch; }

.chair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.2vw, 40px); align-items: stretch; }

/* ---------- the two product-mock surfaces ----------
   These are the ONE elevated element of the section (they read as real
   app UI): a hairline + a faint lift only. Everything inside them is
   open — no nested boxes. */
.chair-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: 0 1px 2px rgba(13, 27, 48, 0.03), 0 24px 56px -44px rgba(13, 27, 48, 0.22);
}

.chair-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.chair-mode { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }

/* the voice card's fluid middle so both cards balance to equal height */
.chair-stage { display: flex; flex-direction: column; justify-content: center; gap: 18px; flex: 1 1 auto; }

/* ================================================================
   LEFT · voice-driven perio charting
   ================================================================ */

/* listening pill + live waveform (always animating) */
.chair-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--indigo); background: var(--periwinkle); border-radius: 999px; padding: 7px 14px; }
.chair-pill-mic { font-size: 13px; line-height: 1; transform: translateY(-0.5px); }

.chair-wave { display: inline-flex; align-items: center; gap: 3px; height: 15px; margin-left: 2px; }
.chair-wave i { width: 2.5px; height: 14px; border-radius: 2px; background: var(--indigo); transform: scaleY(0.24); transform-origin: center; }
.chair-card.in .chair-wave i { animation: chair-wave 1.05s ease-in-out infinite; }
.chair-card.in .chair-wave i:nth-child(1) { animation-delay: 0s; }
.chair-card.in .chair-wave i:nth-child(2) { animation-delay: 0.11s; }
.chair-card.in .chair-wave i:nth-child(3) { animation-delay: 0.23s; }
.chair-card.in .chair-wave i:nth-child(4) { animation-delay: 0.09s; }
.chair-card.in .chair-wave i:nth-child(5) { animation-delay: 0.19s; }
.chair-card.in .chair-wave i:nth-child(6) { animation-delay: 0.31s; }
.chair-card.in .chair-wave i:nth-child(7) { animation-delay: 0.14s; }
@keyframes chair-wave { 0%, 100% { transform: scaleY(0.24); } 50% { transform: scaleY(1); } }

/* transcript — heard word-by-word, as if live (open quote, no box) */
.chair-transcript { display: flex; align-items: baseline; gap: 12px; border-left: 2px solid var(--indigo); padding: 4px 0 4px 16px; }
.chair-transcript-k { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); }
.chair-say { margin: 0; font-size: clamp(15px, 1.3vw, 17.5px); font-weight: 500; font-style: italic; letter-spacing: -0.01em; color: var(--ink); }
.chair-say-q { color: var(--ink-40); }
.chair-w { opacity: 0; display: inline-block; margin-right: 0.28em; }
.chair-card.in .chair-w { animation: chair-word 9s ease infinite backwards; }
.chair-card.in .chair-w:nth-child(2) { animation-delay: 0.20s; }
.chair-card.in .chair-w:nth-child(3) { animation-delay: 0.34s; }
.chair-card.in .chair-w:nth-child(4) { animation-delay: 0.48s; }
.chair-card.in .chair-w:nth-child(5) { animation-delay: 0.62s; }
.chair-card.in .chair-w:nth-child(6) { animation-delay: 0.76s; }
.chair-card.in .chair-w:nth-child(7) { animation-delay: 0.90s; }
@keyframes chair-word {
  0% { opacity: 0; transform: translateY(5px); }
  3% { opacity: 1; transform: none; }
  95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(5px); }
}

.chair-caret { display: inline-block; width: 2px; height: 1.02em; margin-left: 3px; vertical-align: -2px; background: var(--indigo); border-radius: 1px; }
.chair-card.in .chair-caret { animation: chair-blink 1s steps(1) infinite; }
@keyframes chair-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* perio row */
.chair-perio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.chair-perio-head strong { font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.chair-perio-head span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-40); }

/* ---------- tooth #3 — an ACTUAL molar with the six probing sites ----------
   Replaces the old numeric-cell grid: the six depth numbers now live on the
   tooth itself (buccal MB·B·DB above the crown, lingual ML·L·DL below), each
   with a probe dot + a pocket-depth bar. A probe hops site to site and the
   numbers fill IN SEQUENCE, in sync with the transcript + progress bar; the
   >=5 mm pockets flag rose right after they fill. De-boxed: no card, the
   tooth breathes on the open panel. */
.chair-tooth { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; overflow: visible; }
.chair-tooth text { font-family: inherit; }

.chair-surface { fill: var(--ink-40); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; opacity: 0.7; }

.chair-tooth-roots path { fill: none; stroke: #c4d1ec; stroke-width: 13; stroke-linecap: round; opacity: 0.85; }
.chair-tooth-crown { stroke: #9fb4de; stroke-width: 2; }
.chair-gum { fill: none; stroke: #8aa6dd; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.chair-groove { fill: none; stroke: #9fb4de; stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }

/* site pieces — hidden until their turn, then revealed in sequence */
.chair-site-num { fill: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; text-anchor: middle; transform-box: fill-box; transform-origin: center; transform: scale(0.4); opacity: 0; }
.chair-site-label { fill: var(--ink-40); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-anchor: middle; opacity: 0; }
.chair-site-bar { fill: #5a82c2; transform-box: fill-box; transform: scaleY(0); }
.chair-site-buccal .chair-site-bar { transform-origin: center top; }
.chair-site-lingual .chair-site-bar { transform-origin: center bottom; }
.chair-site-dot { fill: #5a82c2; opacity: 0; }
.chair-site-ring { fill: none; stroke: var(--chair-rose); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0.6); opacity: 0; }

/* >=5 mm sites read rose */
.chair-site-flag .chair-site-num { fill: var(--chair-rose); }
.chair-site-flag .chair-site-bar,
.chair-site-flag .chair-site-dot { fill: var(--chair-rose); }

/* per-site sequencing via inherited custom props (--d fill, --dr flag ring) */
.chair-site { --d: 0s; --dr: 0s; }
.chair-sites .chair-site:nth-of-type(1) { --d: 1.55s; }
.chair-sites .chair-site:nth-of-type(2) { --d: 1.80s; --dr: 2.00s; }
.chair-sites .chair-site:nth-of-type(3) { --d: 2.05s; --dr: 2.25s; }
.chair-sites .chair-site:nth-of-type(4) { --d: 2.30s; }
.chair-sites .chair-site:nth-of-type(5) { --d: 2.55s; }
.chair-sites .chair-site:nth-of-type(6) { --d: 2.80s; }

.chair-card.in .chair-site-num { animation: chair-num-in 9s cubic-bezier(0.16, 1, 0.3, 1) infinite backwards; animation-delay: var(--d); }
.chair-card.in .chair-site-dot,
.chair-card.in .chair-site-label { animation: chair-site-in 9s ease infinite backwards; animation-delay: var(--d); }
.chair-card.in .chair-site-bar { animation: chair-bar-grow 9s cubic-bezier(0.16, 1, 0.3, 1) infinite backwards; animation-delay: var(--d); }
.chair-card.in .chair-site-flag .chair-site-ring { animation: chair-flagring 9s ease infinite; animation-delay: var(--dr); }

@keyframes chair-num-in {
  0% { opacity: 0; transform: scale(0.4); }
  4% { opacity: 1; transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
@keyframes chair-site-in { 0% { opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chair-bar-grow {
  0% { transform: scaleY(0); }
  6% { transform: scaleY(1); }
  94% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes chair-flagring {
  0%, 20% { opacity: 0; transform: scale(0.6); }
  24% { opacity: 0.9; transform: scale(1); }
  34% { opacity: 0.3; transform: scale(1.28); }
  44% { opacity: 0.7; transform: scale(1); }
  54% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* the probe — a periwinkle indicator that visits each site in order */
.chair-probe { opacity: 0; }
.chair-probe circle { fill: none; stroke: #5a82c2; stroke-width: 1.6; }
.chair-probe .chair-probe-tip { fill: #5a82c2; stroke: none; }
.chair-card.in .chair-probe { animation: chair-probe 9s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes chair-probe {
  0% { opacity: 0; transform: translate(116px, 82px); }
  15% { opacity: 0; transform: translate(116px, 82px); }
  17% { opacity: 1; transform: translate(116px, 82px); }
  20% { transform: translate(150px, 75px); }
  23% { transform: translate(184px, 82px); }
  26% { transform: translate(120px, 170px); }
  29% { transform: translate(150px, 176px); }
  32% { opacity: 1; transform: translate(180px, 170px); }
  38% { opacity: 0.55; transform: translate(180px, 170px); }
  42% { opacity: 0; transform: translate(180px, 170px); }
  100% { opacity: 0; transform: translate(180px, 170px); }
}

/* live status row — carries the flag copy + a progress fill that tracks the chart */
.chair-live { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; }
.chair-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal, #2f9e8f); box-shadow: 0 0 0 0 rgba(47, 158, 143, 0.5); }
.chair-card.in .chair-live-dot { animation: chair-livedot 2.4s ease-in-out infinite; }
@keyframes chair-livedot { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 143, 0.45); } 55% { box-shadow: 0 0 0 5px rgba(47, 158, 143, 0); } }
.chair-live-k { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-60); }
.chair-live-prog { flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgba(90, 130, 194, 0.14); overflow: hidden; }
.chair-live-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--indigo), #6b8fd0); }
.chair-card.in .chair-live-prog i { animation: chair-prog 9s ease infinite; }
@keyframes chair-prog {
  0%, 15% { width: 0; }
  34% { width: 100%; }
  94% { width: 100%; }
  100% { width: 0; }
}
.chair-live-flag { flex: none; font-weight: 700; letter-spacing: 0.02em; color: var(--chair-rose); }

/* ================================================================
   RIGHT · Skia X-ray reads
   ================================================================ */

.chair-skia { display: inline-flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.chair-skia em { font-size: 12px; font-weight: 600; font-style: normal; letter-spacing: 0.04em; color: var(--ink-40); }

/* deep-BLUE radiograph inset (blue family, never black) */
.chair-xray {
  position: relative;
  flex: 1 1 auto;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, #1c3c66 0%, #0e2340 74%);
  box-shadow: inset 0 0 0 1px rgba(138, 166, 221, 0.18), inset 0 0 60px rgba(6, 18, 38, 0.55);
}
.chair-film { display: block; width: 100%; height: auto; }
.chair-roots path { fill: none; stroke: #b6c0d2; stroke-width: 13; stroke-linecap: round; opacity: 0.6; }

/* faint viewer grid — texture, subtly breathing */
.chair-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(138, 166, 221, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 166, 221, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.5;
}

/* scan sweep — re-reads the film on every loop */
.chair-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -42%;
  height: 40%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(138, 166, 221, 0) 0%, rgba(90, 130, 194, 0.16) 60%, rgba(174, 205, 255, 0.6) 100%);
  box-shadow: 0 2px 14px rgba(174, 205, 255, 0.35);
}
.chair-card.in .chair-scan { animation: chair-scan 9s cubic-bezier(0.4, 0, 0.4, 1) infinite; }
@keyframes chair-scan {
  0% { opacity: 0; transform: translateY(0); }
  3% { opacity: 1; }
  17% { opacity: 1; transform: translateY(320%); }
  21% { opacity: 0; transform: translateY(345%); }
  100% { opacity: 0; transform: translateY(345%); }
}

/* finding annotations — pop in one-by-one after the sweep, with connector ring */
.chair-find { position: absolute; display: flex; align-items: center; gap: 9px; transform: translate(-13px, -50%); opacity: 0; pointer-events: none; }
.chair-find-flip { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -50%); }
.chair-card.in .chair-find { animation: chair-find-in 9s ease infinite backwards; }
.chair-card.in .chair-find:nth-of-type(1) { animation-delay: 2.05s; }
.chair-card.in .chair-find:nth-of-type(2) { animation-delay: 2.65s; }
.chair-card.in .chair-find:nth-of-type(3) { animation-delay: 3.25s; }
@keyframes chair-find-in {
  0% { opacity: 0; }
  3% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

.chair-find-ring { position: relative; flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid currentColor; box-shadow: 0 0 0 3px rgba(9, 24, 46, 0.45), 0 0 14px currentColor; }
.chair-find-ring::before { content: ""; position: absolute; inset: -1.5px; border-radius: 8px; border: 1.5px solid currentColor; opacity: 0; }
.chair-card.in .chair-find-ring::before { animation: chair-ring 9s ease infinite; }
.chair-card.in .chair-find:nth-of-type(1) .chair-find-ring::before { animation-delay: 2.05s; }
.chair-card.in .chair-find:nth-of-type(2) .chair-find-ring::before { animation-delay: 2.65s; }
.chair-card.in .chair-find:nth-of-type(3) .chair-find-ring::before { animation-delay: 3.25s; }
@keyframes chair-ring {
  0%, 1% { opacity: 0.9; transform: scale(1); }
  9% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}

.chair-find-tag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: #eaf0fb; background: rgba(12, 32, 60, 0.9); border: 1px solid rgba(138, 166, 221, 0.3); border-radius: 999px; padding: 4px 10px; }

/* blue findings; one restrained rose severity accent for caries */
.chair-find { color: #8aa6dd; }
.chair-find-sev { color: #e0708c; }
.chair-find-sev .chair-find-tag { border-color: rgba(224, 112, 140, 0.45); }

/* read badge + findings counter */
.chair-read-badge { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: #0d2340; background: #9ec4ff; border-radius: 999px; padding: 5px 11px; opacity: 0; transform: translateY(-6px); }
.chair-card.in .chair-read-badge { animation: chair-badge 9s cubic-bezier(0.16, 1, 0.3, 1) infinite backwards; animation-delay: 1.75s; }
@keyframes chair-badge {
  0% { opacity: 0; transform: translateY(-6px); }
  4% { opacity: 1; transform: translateY(0); }
  94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.chair-count { position: absolute; left: 12px; bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(214, 226, 247, 0.6); opacity: 0; }
.chair-card.in .chair-count { animation: chair-count 9s ease infinite backwards; animation-delay: 3.85s; }
@keyframes chair-count {
  0% { opacity: 0; }
  4% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; }
}

/* disclaimer */
.chair-disclaimer { margin: 14px 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-60); }
.chair-disclaimer strong { color: var(--ink); font-weight: 600; }

/* ---------- shared tags — plain text run above a hairline, no pills ---------- */
.chair-tags { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.chair-tags li { font-size: 12.5px; font-weight: 600; color: var(--indigo); white-space: nowrap; }
.chair-tags li + li::before { content: "\00B7"; margin: 0 9px; color: var(--ink-40); font-weight: 400; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .chair-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .chair-tooth { max-width: 260px; }
  .chair-find-tag { font-size: 10.5px; padding: 3px 8px; }
  .chair-live-k { display: none; }
}

/* ---------- reduced motion: settle on the finished frame, nothing moves ---------- */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .chair-card.in .chair-wave i,
  .chair-card.in .chair-w,
  .chair-card.in .chair-caret,
  .chair-card.in .chair-site-num,
  .chair-card.in .chair-site-dot,
  .chair-card.in .chair-site-label,
  .chair-card.in .chair-site-bar,
  .chair-card.in .chair-site-flag .chair-site-ring,
  .chair-card.in .chair-probe,
  .chair-card.in .chair-live-dot,
  .chair-card.in .chair-live-prog i,
  .chair-card.in .chair-scan,
  .chair-card.in .chair-find,
  .chair-card.in .chair-find-ring::before,
  .chair-card.in .chair-read-badge,
  .chair-card.in .chair-count { animation: none !important; }
  .chair-wave i { transform: scaleY(0.7); }
  .chair-w,
  .chair-site-num,
  .chair-site-dot,
  .chair-site-label,
  .chair-find,
  .chair-read-badge,
  .chair-count { opacity: 1 !important; }
  .chair-site-num { transform: scale(1) !important; }
  .chair-site-bar { transform: scaleY(1) !important; }
  .chair-probe { opacity: 0 !important; }
  .chair-read-badge { transform: translateY(0) !important; }
  .chair-live-prog i { width: 100% !important; }
  .chair-caret { display: none; }
  .chair-scan { display: none; }
}