:root {
  --level: 0;            /* live audio amplitude 0..1, set from JS */
  --ink: #3a3a5c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: #ffffff;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overflow-x: hidden; /* the marketing panel slides off-screen left */
}

/* ── Split layout ────────────────────────────────────── */
.split {
  display: flex;
  min-height: 100dvh;
}
.marketing,
.app { flex: 1 1 50%; }

/* Left: white marketing panel */
.marketing {
  position: relative;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: clamp(32px, 5vw, 72px);
  transition: margin-left 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.45s ease;
}

/* Once a call begins, the marketing panel slides off-screen left and the app
   pane grows to fill (desktop only — mobile panels are stacked). */
@media (min-width: 821px) {
  body[data-state="connecting"] .marketing,
  body[data-state="call"] .marketing,
  body[data-state="done"] .marketing {
    flex-grow: 0; /* don't reclaim the freed space — let .app fill it */
    margin-left: -50%;
    opacity: 0;
    pointer-events: none;
  }
}
.marketing__logo {
  position: fixed;
  top: clamp(28px, 4vw, 48px);
  left: clamp(32px, 5vw, 72px); /* share the content's left edge */
  width: 88px;
  z-index: 7; /* stays above the panels through the slide */
  --fill-0: #463a8c; /* dark lavender */
}
.marketing__logo svg { display: block; width: 100%; height: auto; }

.marketing__body { max-width: 500px; margin-top: -5vh; }
.marketing__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a5be0;
  background: rgba(106, 91, 224, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 20px;
}
.marketing__title {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #221b3d;
  text-wrap: balance;
}
.marketing__lede {
  margin-top: 20px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: #5a5475;
}
.marketing__lede strong { color: #463a8c; font-weight: 600; }
.marketing__btn {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #6a5be0;
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}
.marketing__btn:hover { color: #463a8c; gap: 9px; }
.marketing__btn-arrow { font-weight: 400; }
.marketing__cta {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #8079a0;
}

/* Right: the app (lavender) */
.app {
  position: relative;
  overflow: hidden;
  background: radial-gradient(70% 60% at 50% 42%, #ffffff 0%, #f1f3fd 45%, #e7eafb 100%);
}

.stage {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  transition: padding-bottom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Once the call starts, lift the orb to make room for the cards below. */
body[data-state="connecting"] .stage,
body[data-state="call"] .stage,
body[data-state="done"] .stage {
  padding-bottom: 26vh;
}

/* Stack on narrow screens: marketing on top, the orb its own screen below. */
@media (max-width: 820px) {
  .split { flex-direction: column; }
  .marketing { min-height: 100dvh; justify-content: center; padding-top: 110px; }
  .app { min-height: 100dvh; }
}

/* Four cards won't fit one narrow row — wrap them to a 2x2 grid. */
@media (max-width: 560px) {
  .cards { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 12px; width: min(300px, 90vw); }
  .card { width: 132px; padding: 13px 10px 12px; }
  .card__icon { width: 42px; height: 42px; font-size: 21px; }
  .card__label { font-size: 12.5px; }
  .card__check { width: 19px; height: 19px; font-size: 11px; }
}

/* ── Orb ─────────────────────────────────────────────────
   The orb (geometry, morph/float/drift/halo, audio-reactivity, label, hover)
   is the shared component at /orb.css (packages/orb/orb.css). Here we only set
   this app's hand-tuned soft-blue→lavender theme via the orb's variables, plus
   the state choreography further down. */
:root {
  --orb-birth: 0.56;                /* small at idle; swells on tap, pops open */
  --orb-glow-op-base: 0.5;          /* halo: 0.5 + level*0.6 */

  /* Hand-tuned lavender (not derived from a single --glow). */
  --orb-surface:
    radial-gradient(circle at 34% 28%, #ffffff 0%, #dfe9ff 24%, #bcccff 50%, #c4b8ff 76%, #ab9cf0 100%);
  --orb-shadow:
    inset 0 0 46px rgba(255, 255, 255, 0.65),
    inset -16px -20px 56px rgba(150, 140, 220, 0.45),
    0 0 calc(46px + var(--level) * 70px) rgba(150, 170, 255, 0.55),
    0 0 calc(100px + var(--level) * 120px) rgba(175, 160, 255, 0.32);
  --orb-glow-bg:
    radial-gradient(circle, rgba(150, 170, 255, 0.5), rgba(180, 165, 255, 0.22) 45%, transparent 70%);
  --orb-sheen-1: radial-gradient(circle at 65% 70%, rgba(190, 205, 255, 0.8), transparent 55%);
  --orb-sheen-2: radial-gradient(circle at 30% 75%, rgba(200, 185, 255, 0.6), transparent 55%);

  /* Quiet, airy label. */
  --orb-label-color: #6a5fb5;
  --orb-label-size: 13.5px;
  --orb-label-weight: 500;
  --orb-label-spacing: 0.09em;
  --orb-label-line: normal;
  --orb-label-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}

/* ── Hand-drawn "tap here" arrow ─────────────────────── */
/* Desktop: full-viewport SVG, path drawn in real px by layoutArrow(). */
.tap-arrow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translate(-120px, -12px); /* nudge up + left */
  transition: opacity 0.5s ease;
}
/* Mobile: a small arrow above the orb. */
.tap-arrow-m {
  position: absolute;
  left: 50%;
  top: calc(50% - 168px);
  transform: translateX(-50%);
  width: 168px;
  height: 126px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: none;
}
.tap-arrow__line,
.tap-arrow__head {
  stroke: #8579f0;
  stroke-width: 1.9;
  fill: none;
}
.tap-arrow-m .tap-arrow__line,
.tap-arrow-m .tap-arrow__head { stroke-width: 2.6; }
.tap-arrow__label {
  fill: #6a5be0;
  font-family: "Caveat", cursive;
  font-size: 34px;
  font-weight: 600;
}
.tap-arrow-m .tap-arrow__label { font-size: 24px; }

@media (min-width: 821px) {
  body[data-state="idle"] .tap-arrow { opacity: 1; }
  .orb-label { display: none; } /* the arrow replaces "tap me" on desktop */
}
@media (max-width: 820px) {
  .tap-arrow { display: none; }
  .tap-arrow-m { display: block; }
  body[data-state="idle"] .tap-arrow-m { opacity: 1; }
  .orb-label { display: none; } /* mobile uses the little arrow instead */
}
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(26px, 5vh, 54px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.cards {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  max-width: 100%;
  pointer-events: auto;
}

/* Trading-card style: portrait card with an icon badge, a holographic sheen,
   accent glow, and a gentle living bob. */
.card {
  --accent: #7b6ef0;
  --accent-2: #a99cf5;
  position: relative;
  overflow: hidden;
  width: 152px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 19px 16px 17px;
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 18%, #fff), #fff 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
  box-shadow: 0 12px 28px rgba(90, 80, 160, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* hidden until the session starts; pop up from the bottom with a bounce */
  transform: translateY(150%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}
.card[data-topic="work"] { --accent: #5b9bf0; --accent-2: #93c2f8; }
.card[data-topic="personal"] { --accent: #46c08a; --accent-2: #92e0bd; }
.card[data-topic="goals"] { --accent: #2bb6c6; --accent-2: #7fd9e2; }

/* Living bob (on an inner-free element so it doesn't fight the pop transform). */
.cards.is-in .card { transform: translateY(0); opacity: 1; }
.cards.is-in .card:nth-child(1) { transition-delay: 0.04s; }
.cards.is-in .card:nth-child(2) { transition-delay: 0.11s; }
.cards.is-in .card:nth-child(3) { transition-delay: 0.18s; }
.cards.is-in .card:nth-child(4) { transition-delay: 0.25s; }

.cards.is-out .card { transform: translateY(170%); opacity: 0; }
.cards.is-out .card:nth-child(1) { transition-delay: 0.21s; }
.cards.is-out .card:nth-child(2) { transition-delay: 0.14s; }
.cards.is-out .card:nth-child(3) { transition-delay: 0.07s; }
.cards.is-out .card:nth-child(4) { transition-delay: 0s; }

/* Holographic sheen sweeping across — the "life". */
.card__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: sheen 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.card:nth-child(2) .card__sheen { animation-delay: 0.6s; }
.card:nth-child(3) .card__sheen { animation-delay: 1.2s; }
.card:nth-child(4) .card__sheen { animation-delay: 1.8s; }
@keyframes sheen {
  0%, 55% { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}

.card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border-radius: 50%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 55%, #fff), color-mix(in srgb, var(--accent) 35%, #fff));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: bob 3.2s ease-in-out infinite;
}
.card:nth-child(2) .card__icon { animation-delay: 0.4s; }
.card:nth-child(3) .card__icon { animation-delay: 0.8s; }
.card:nth-child(4) .card__icon { animation-delay: 1.2s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

.card__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #3a3458;
}
.card__check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, #fff);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: transparent;
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.card.done {
  border-color: var(--accent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.card.done .card__check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkPop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── Continue button ─────────────────────────────────── */
.sauna-btn {
  display: inline-flex;
  pointer-events: auto;
  align-items: center;
  gap: 9px;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #8b8bf0, #6a5be0);
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: 0 8px 24px rgba(106, 91, 224, 0.4);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.sauna-btn.is-on { opacity: 1; transform: translateY(0) scale(1); }
.sauna-btn:active { transform: scale(0.96); }
.sauna-btn__arrow { font-weight: 400; }

/* ── States ──────────────────────────────────────────── */

/* From tap until Sauna's first word, the orb sits small + desaturated — calm,
   not bubbling. It only comes alive (is-open) when she actually speaks. */
body[data-state="connecting"] .orb-core,
body[data-state="call"]:not(.is-open) .orb-core {
  --birth: 0.42;
  filter: saturate(0.32) brightness(1.04);
  /* Settle to "thinking" promptly but not instantly (override the slow
     open-swell), and stay there until Sauna's first word. */
  transition: transform 0.28s ease-out, filter 0.28s ease-out;
}

/* The moment Sauna first speaks: pull fully open, fast. */
body.is-open .orb-core { --birth: 1; }

/* ── Who's speaking ──────────────────────────────────── */
/* Sauna talking → its own lavender/blue, calm and smooth (default). */
/* You talking → shifts to a fresh cyan and gets a touch livelier. */
body[data-speaker="user"] .orb-core { filter: hue-rotate(-55deg) saturate(1.12); }
body[data-speaker="user"] .orb { animation-duration: 5.5s; }
body[data-speaker="user"] .orb-float { animation-duration: 5s; }
body[data-speaker="sauna"] .orb-glow { --orb-glow-op-base: 0.6; }

/* Listening — Sauna's done, waiting on you: the orb settles down small. */
body.is-open[data-speaker="listening"] .orb-core { --birth: 0.6; }

/* Thinking — after you stop, before Sauna replies: smaller still and
   desaturated so the pause clearly reads as "considering". */
body.is-open[data-speaker="thinking"] .orb-core { --birth: 0.48; filter: saturate(0.38) brightness(1.03); }

/* ── Done — sealed, one-shot. Orb goes inert with a check, button appears. */
body[data-state="done"] .orb-core { --birth: 0.72; filter: saturate(0.95); }
body[data-state="done"] .orb-float { animation: none; cursor: default; }
body[data-state="done"] .orb { animation: none; }
body[data-state="done"] .orb-label {
  font-size: 34px;
  font-weight: 700;
  color: #4a3aa8;
  opacity: 1;
  animation: none;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}

/* Paused — reveal the label and calm the orb (the session stays alive). */
body.is-paused .orb-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a3aa8;
  max-width: 150px;
  line-height: 1.3;
  opacity: 1;
  animation: none;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}
body.is-paused .orb { filter: saturate(0.45) brightness(0.98); }
body.is-paused .orb-glow { opacity: 0.4; }

body[data-state="error"] .orb { filter: grayscale(0.5) brightness(0.95); }

@media (max-height: 640px) {
  .orb-float { width: 220px; height: 220px; }
  .orb { width: 150px; height: 150px; }
  .orb-glow { width: 220px; height: 220px; }
}