/* Threads — the drawer (built like your AI chats) and branching.
   Everything inside a phone is sized in iPhone points: calc(N * var(--pt)). */

.threads-track { height: 420vh; }
[data-scene="threads"] .threads-stage { padding: 52px var(--gutter) 0; }
[data-scene="threads"] .threads-static.stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; }

.threads-inner {
  width: 100%; max-width: 1180px; height: 100%;
  display: flex; align-items: center; gap: clamp(32px, 5vw, 80px);
}

/* ---------- copy ---------- */
.threads-copy { flex: none; width: min(400px, 34vw); display: grid; }
.threads-capt { grid-area: 1 / 1; will-change: transform, opacity; }
.threads-capt .h2 { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 20px; }
.threads-capt .lede { max-width: 30ch; }
.threads-cb { opacity: 0; }

/* ---------- devices ---------- */
.threads-devices { position: relative; flex: 1; align-self: stretch; margin: 24px 0; min-width: 0; }
.threads-devices .phone { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.threads-p2 { opacity: 0; }
[data-scene="threads"] .status { z-index: 10; }

.threads-link { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 5; }
.threads-link-path { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.threads-dot { fill: var(--coral); stroke: #fff; stroke-width: 2; opacity: 0; }

.threads-quote {
  position: absolute; left: 0; top: 0; z-index: 6;
  transform-origin: 0 0; will-change: transform, opacity; opacity: 0;
  font-family: var(--sans); font-size: calc(17 * var(--qpt)); line-height: 1.29; letter-spacing: -0.02em;
  padding: calc(9 * var(--qpt)) calc(15 * var(--qpt)) calc(11 * var(--qpt));
  white-space: nowrap; color: #000; pointer-events: none;
}
.threads-quote i { position: absolute; inset: 0; border-radius: calc(20 * var(--qpt)); background: var(--them); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.threads-quote span { position: relative; }

/* ---------- in-phone: layers, transcript ---------- */
.threads-layer { position: absolute; inset: 0; }
.threads-sat, .threads-land { opacity: 0; }
.threads-tx {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 0 calc(12 * var(--pt));
}
.threads-tx .bub + .bub { margin-top: calc(3 * var(--pt)); }
.threads-tx .bub.threads-gap { margin-top: calc(9 * var(--pt)); }
.threads-tx .bub.them { transform-origin: 0 100%; }
.threads-tx .bub.me { transform-origin: 100% 100%; }
.threads-tx-bottom { bottom: calc(92 * var(--pt)); }
.threads-tx-top { top: calc(156 * var(--pt)); }
.threads-tx-top .bub, .threads-tx-branch .bub { opacity: 0; }
.threads-tx-branch { top: calc(221 * var(--pt)); }
.threads-edge {
  position: absolute; left: 0; right: 0; top: 0; height: calc(160 * var(--pt));
  background: linear-gradient(#fff 58%, rgba(255, 255, 255, 0));
}

/* ---------- top bar ----------
   The small chrome is drawn as an opaque-ish glass stand-in, not with
   backdrop-filter: it only ever floats over white, and a live backdrop under a
   moving phone would be re-sampled every frame of the camera move. */
.threads-btn {
  position: absolute; top: calc(65 * var(--pt)); z-index: 2;
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; color: #000;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 calc(3 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.08);
}
.threads-btn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.threads-btn-l { left: calc(16 * var(--pt)); }
.threads-btn-r { right: calc(16 * var(--pt)); }
.threads-btn .threads-badge { position: absolute; top: calc(-4 * var(--pt)); right: calc(-4 * var(--pt)); }

.threads-badge {
  min-width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); padding: 0 calc(5 * var(--pt));
  border-radius: 999px; background: #ff3b30; color: #fff;
  font-size: calc(12 * var(--pt)); font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 calc(1.5 * var(--pt)) #fff, 0 0.5px 1.5px rgba(0, 0, 0, 0.18);
}

.threads-head-av {
  position: absolute; z-index: 3; left: 50%; top: calc(68 * var(--pt));
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); margin-left: calc(-22 * var(--pt));
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 72%, #fff)); color: #fff;
  font-weight: 600; font-size: calc(20 * var(--pt));
  box-shadow: 0 0 0 calc(3 * var(--pt)) #fff, 0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.16);
}
.threads-cap-pill {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(104 * var(--pt));
  width: fit-content; max-width: calc(257 * var(--pt)); margin: 0 auto;
  height: calc(38 * var(--pt)); padding: 0 calc(16 * var(--pt));
  display: flex; align-items: center; gap: calc(4 * var(--pt));
  border-radius: 999px; font-weight: 600; font-size: calc(17 * var(--pt)); white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 calc(3 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.08);
}
.threads-cap-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.threads-chev { display: inline-grid; flex: none; color: #8e8e93; }
.threads-chev svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.threads-sat-head { opacity: 0; }

/* ---------- composer ---------- */
.threads-composer {
  position: absolute; z-index: 2; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(30 * var(--pt));
  height: calc(44 * var(--pt)); display: flex; gap: calc(8 * var(--pt));
}
.threads-plus, .threads-field {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 calc(3 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.07);
}
.threads-plus { flex: none; width: calc(44 * var(--pt)); border-radius: 50%; display: grid; place-items: center; color: #000; }
.threads-plus svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.threads-field {
  flex: 1; border-radius: 999px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(5 * var(--pt)) 0 calc(16 * var(--pt)); color: #a1a1a6;
}
.threads-field i { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; background: #d1d1d6; color: #fff; display: grid; place-items: center; }
.threads-field svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }

/* ---------- landing: name the thread first ---------- */
.threads-land-hero {
  position: absolute; left: 0; right: 0; top: calc(156 * var(--pt));
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 40%;
}
.threads-land-av {
  width: calc(94 * var(--pt)); height: calc(94 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: calc(44 * var(--pt));
  background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 72%, #fff)); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.threads-land-name {
  font-family: var(--serif); font-weight: 700; font-size: calc(36 * var(--pt)); line-height: 1.1;
  letter-spacing: -0.02em; margin-top: calc(12 * var(--pt));
}
.threads-land-strip { display: flex; gap: calc(28 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.threads-land-strip > span {
  display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--pt));
  font-size: calc(12 * var(--pt)); font-weight: 500; line-height: 1.2;
}
.threads-land-strip i {
  position: relative; width: calc(47 * var(--pt)); height: calc(47 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; color: #fff; font-weight: 600; font-size: calc(21 * var(--pt));
  background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 72%, #fff));
}
.threads-land-strip i .threads-badge { position: absolute; top: calc(-3 * var(--pt)); right: calc(-5 * var(--pt)); }
.threads-land-strip i.threads-land-add {
  background: #fff; color: #000;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 calc(3 * var(--pt)) calc(12 * var(--pt)) rgba(0, 0, 0, 0.07);
}
.threads-land-add svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }

.threads-namefield {
  position: absolute; left: calc(23.5 * var(--pt)); top: calc(398 * var(--pt));
  width: calc(346 * var(--pt)); height: calc(56 * var(--pt)); border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.13), 0 calc(4 * var(--pt)) calc(18 * var(--pt)) rgba(0, 0, 0, 0.07);
}
.threads-ph, .threads-typed {
  position: absolute; left: calc(24 * var(--pt)); top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-size: calc(21 * var(--pt)); line-height: 1.2; white-space: nowrap; letter-spacing: -0.01em;
}
.threads-ph { color: #b4b4b8; }
.threads-typed { color: #000; }
.threads-typed span { opacity: 0; }
.threads-caret {
  position: absolute; left: calc(24 * var(--pt)); top: 28%; height: 44%;
  width: calc(2.5 * var(--pt)); margin-left: calc(-1 * var(--pt)); border-radius: 2px; background: var(--coral);
}
.threads-caret::after { content: ""; position: absolute; inset: 0; background: #fff; animation: threads-blink 1.1s steps(1) infinite; }
@keyframes threads-blink { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }
.threads-nf-bolt, .threads-nf-go {
  position: absolute; top: 50%; margin-top: calc(-16 * var(--pt));
  width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
}
.threads-nf-bolt { right: calc(54 * var(--pt)); background: rgba(0, 0, 0, 0.06); color: #000; }
.threads-nf-go { right: calc(12 * var(--pt)); background: #d1d1d6; color: #fff; }
.threads-nf-go i { position: absolute; inset: 0; border-radius: 50%; background: var(--coral); opacity: 0; }
.threads-nf-bolt svg, .threads-nf-go svg { position: relative; width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }

/* ---------- the field → title morph (one copy of the name) ---------- */
.threads-morph { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.threads-mshape, .threads-mtext { position: absolute; left: 0; top: 0; will-change: transform; }
.threads-mshape { transform-origin: 0 0; }
.threads-mring, .threads-mfill { position: absolute; left: 0; top: 0; }
.threads-mshape i {
  position: absolute; left: 0; top: 0; background: #fff;
  width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: 50%;
}
.threads-mshape i.m { width: 100px; border-radius: 0; transform-origin: 0 0; }
.threads-mring i { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.13); }
.threads-mtext {
  transform-origin: 0 50%; white-space: nowrap;
  display: flex; align-items: center; gap: calc(4 * var(--pt));
  font-weight: 600; font-size: calc(17 * var(--pt));
}
.threads-mtext .threads-chev { opacity: 0; }

/* ---------- long press: dim, lift, menu ---------- */
.threads-dim {
  position: absolute; inset: 0; z-index: 5; opacity: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(9px) saturate(120%); backdrop-filter: blur(9px) saturate(120%);
}
.threads-tx .bub.threads-lift, .phone-screen > .bub.threads-lift {
  position: absolute; z-index: 6; margin: 0; max-width: none; opacity: 0; white-space: nowrap;
  transform-origin: 0 50%;
  box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.16);
}
.threads-menu {
  position: absolute; z-index: 6; width: calc(250 * var(--pt)); opacity: 0;
  transform-origin: 0 0; border-radius: calc(22 * var(--pt)); overflow: hidden;
  background: rgba(252, 252, 252, 0.84);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(12 * var(--pt)) calc(40 * var(--pt)) rgba(0, 0, 0, 0.18);
}
.threads-palette {
  display: flex; justify-content: space-between; padding: calc(9 * var(--pt)) calc(12 * var(--pt));
  font-size: calc(23 * var(--pt)); line-height: 1;
}
.threads-palette span { width: calc(34 * var(--pt)); text-align: center; }
.threads-msec { border-top: 0.5px solid rgba(60, 60, 67, 0.2); padding: calc(3 * var(--pt)) 0; }
.threads-mrow {
  height: calc(44 * var(--pt)); padding: 0 calc(18 * var(--pt));
  display: flex; align-items: center; justify-content: space-between;
}
.threads-mrow svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.threads-mrow.is-hot { background: rgba(0, 0, 0, 0.09); }

/* ---------- the drawer ---------- */
.threads-scrim { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.32); opacity: 0; }
.threads-drawer {
  position: absolute; z-index: 8; left: calc(10 * var(--pt)); top: calc(60 * var(--pt)); bottom: calc(10 * var(--pt));
  width: calc(330 * var(--pt)); overflow: hidden; will-change: transform;
  transform: translate3d(-120%, 0, 0);
  border-radius: calc(22 * var(--pt)) calc(22 * var(--pt)) calc(22 * var(--pt)) calc(47 * var(--pt));
  background: rgba(246, 246, 246, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 0 0 0.5px rgba(0, 0, 0, 0.06), calc(6 * var(--pt)) 0 calc(24 * var(--pt)) rgba(0, 0, 0, 0.22);
}
.threads-wordmark {
  position: absolute; left: calc(10.9 * var(--pt)); top: calc(20 * var(--pt));
  height: calc(46 * var(--pt)); width: calc(46 * 403 / 131 * var(--pt));
}
.threads-close, .threads-gear {
  position: absolute; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 calc(3 * var(--pt)) calc(12 * var(--pt)) rgba(0, 0, 0, 0.08);
}
.threads-close { right: calc(20 * var(--pt)); top: calc(20 * var(--pt)); width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); color: #6e6e73; }
.threads-close svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.threads-gear { right: calc(20 * var(--pt)); bottom: calc(20 * var(--pt)); width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); color: #000; }
.threads-gear svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }

.threads-strip {
  position: absolute; left: calc(20 * var(--pt)); top: calc(90 * var(--pt));
  display: flex; align-items: center; gap: calc(8 * var(--pt));
}
.threads-pill {
  height: calc(38 * var(--pt)); padding: 0 calc(15 * var(--pt)) 0 calc(5 * var(--pt));
  display: flex; align-items: center; gap: calc(8 * var(--pt));
  border-radius: 999px; background: var(--coral); color: #fff;
  font-weight: 600; font-size: calc(17 * var(--pt));
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 calc(2 * var(--pt)) calc(8 * var(--pt)) color-mix(in srgb, var(--coral) 30%, transparent);
}
.threads-pill i {
  width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: calc(12 * var(--pt));
  background: rgba(255, 255, 255, 0.22);
}
.threads-pav, .threads-padd {
  position: relative; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
}
.threads-pav { background: linear-gradient(160deg, var(--coral), color-mix(in srgb, var(--coral) 72%, #fff)); color: #fff; font-weight: 600; font-size: calc(16 * var(--pt)); }
.threads-pav .threads-badge { position: absolute; top: calc(-6 * var(--pt)); right: calc(-7 * var(--pt)); }
.threads-padd { background: rgba(255, 255, 255, 0.8); color: #000; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 calc(3 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.08); }
.threads-padd svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }

.threads-dbody { position: absolute; left: 0; right: 0; top: calc(137 * var(--pt)); }
.threads-drow {
  height: calc(46 * var(--pt)); padding: 0 calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(16 * var(--pt));
  transform-origin: 30% 50%;
}
.threads-drow.is-pressed { background: rgba(0, 0, 0, 0.07); }
.threads-dico { width: calc(24 * var(--pt)); display: grid; place-items: center; color: #000; }
.threads-dico svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
.threads-coral { color: var(--coral); }
.threads-search { height: calc(42 * var(--pt)); gap: calc(12 * var(--pt)); color: rgba(60, 60, 67, 0.32); }
.threads-search .threads-dico { color: #6e6e73; }
.threads-dsec {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8 * var(--pt)) calc(20 * var(--pt)) calc(4 * var(--pt));
  font-size: calc(13 * var(--pt)); line-height: calc(18 * var(--pt)); color: rgba(60, 60, 67, 0.62);
}
.threads-dsec svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.threads-recents-h { padding-top: calc(18 * var(--pt)); }
.threads-rrow {
  height: calc(46 * var(--pt)); padding: 0 calc(20 * var(--pt));
  display: flex; align-items: center; justify-content: space-between; opacity: 0;
}
.threads-rrow.is-active { color: var(--coral); background: rgba(0, 0, 0, 0.06); }

/* ---------- branch banner ---------- */
.threads-banner {
  position: absolute; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); top: calc(152 * var(--pt));
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  padding: calc(12 * var(--pt)); border-radius: calc(14 * var(--pt));
  background: #f2f2f7; opacity: 0; transform-origin: 50% 0;
}
.threads-banner-ico { color: var(--coral); display: grid; }
.threads-banner-ico svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.threads-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--pt)); }
.threads-banner-txt small { font-size: calc(11 * var(--pt)); line-height: calc(13 * var(--pt)); color: rgba(60, 60, 67, 0.6); }
.threads-banner-q { font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.threads-banner-chev { color: #c7c7cc; display: grid; }
.threads-banner-chev svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }

/* ---------- phone-width layout ---------- */
@media (max-width: 760px) {
  [data-scene="threads"] .threads-stage { padding: 52px 16px 0; }
  .threads-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0 14px; }
  .threads-copy { width: 100%; text-align: center; }
  .threads-capt .h2 { font-size: 32px; margin-bottom: 8px; }
  .threads-capt .lede { font-size: 16px; line-height: 1.38; max-width: 34ch; margin: 0 auto; }
  .threads-devices { flex: 1; margin: 0; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .threads-caret::after { animation: none; }
}