/* split — the thesis: one thread tears into two. */

[data-scene="split"] .split-track { height: 480vh; }
[data-scene="split"] .split-stage { padding: 52px var(--gutter) 0; }

.split-layout {
  width: 100%; max-width: 1240px; height: 100%;
  display: flex; align-items: center; gap: clamp(32px, 5vw, 88px);
}

/* captions: stacked in one cell so the column is as tall as the tallest */
.split-copy { flex: none; width: clamp(290px, 31vw, 440px); display: grid; }
.split-cap { grid-area: 1 / 1; align-self: center; will-change: opacity, transform; }
.split-cap h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 2.9vw, 42px); line-height: 1.08; letter-spacing: -0.024em;
  color: #000;
}
.split-cap p {
  margin-top: 16px; max-width: 25ch;
  font-size: clamp(19px, 1.65vw, 23px); line-height: 1.38; font-weight: 500;
  letter-spacing: -0.016em; color: var(--muted);
}

.split-area {
  flex: 1; align-self: stretch; min-width: 0; min-height: 0;
  display: grid; place-items: center; padding: 28px 0;
}
.split-phones { position: relative; width: var(--phone-w); aspect-ratio: 1293 / 2656; }
.split-phones > .split-phone,
.split-ghost { position: absolute; left: 0; top: 0; }
.split-phone { will-change: transform; transform-origin: 50% 50%; }
.split-a { z-index: 2; }
.split-b { z-index: 1; opacity: 0; }

/* Over a white screen, real glass and a translucent white read the same;
   dropping the backdrop filter keeps six moving glass controls cheap. */
.split-phone .glass {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, 0.94);
}

/* ---- top bar: ☰ · avatar over the title capsule · ✎ ---- */
.split-bar {
  position: absolute; top: calc(58 * var(--pt)); left: calc(12 * var(--pt)); right: calc(12 * var(--pt));
  display: flex; align-items: flex-start; justify-content: space-between; z-index: 3;
}
.split-bar .cbtn { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); margin-top: calc(3 * var(--pt)); }
.split-head { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: calc(39 * var(--pt)); }
.split-av {
  position: absolute; top: calc(3 * var(--pt)); left: 50%; margin-left: calc(-22 * var(--pt));
  width: calc(44 * var(--pt)); height: calc(44 * 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)); letter-spacing: 0;
  box-shadow: 0 0 0 calc(3 * var(--pt)) #fff, inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.split-title {
  display: grid; height: auto;
  padding: calc(10 * var(--pt)) calc(18 * var(--pt)) calc(9 * var(--pt));
  font-size: calc(17 * var(--pt)); letter-spacing: -0.02em;
}
.split-title > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
.split-a .split-title > span + span { opacity: 0; }

/* ---- the thread ---- */
.split-thread {
  position: absolute; left: 0; right: 0; bottom: calc(88 * var(--pt));
  display: flex; flex-direction: column; gap: calc(3 * var(--pt));
  padding: 0 calc(12 * var(--pt));
  will-change: transform;
}
.split-thread .bub { will-change: transform, opacity; }
.split-thread .bub.them { transform-origin: 0% 100%; }
.split-thread .bub.me { transform-origin: 100% 100%; }
.split-thread .split-g { margin-top: calc(5 * var(--pt)); }
.split-day {
  text-align: center; margin-bottom: calc(10 * var(--pt));
  font-size: calc(11 * var(--pt)); font-weight: 600; color: #8a8a8e;
  letter-spacing: 0; white-space: pre;
}

/* ---- composer: + · capsule with the send arrow ---- */
.split-comp {
  position: absolute; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(30 * var(--pt));
  display: flex; gap: calc(8 * var(--pt)); z-index: 3;
}
.split-plus {
  flex: none; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
}
.split-plus svg { width: 42%; height: 42%; }
.split-field {
  flex: 1; height: calc(48 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(7 * var(--pt)) 0 calc(18 * var(--pt));
  color: #b4b4b8; font-size: calc(17 * var(--pt));
}
.split-send {
  width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%;
  background: var(--coral); display: grid; place-items: center;
}
.split-send svg { width: 56%; height: 56%; }

/* ---- the carried message: one copy, above both phones ---- */
.split-ghost {
  width: var(--phone-w); aspect-ratio: 1293 / 2656;
  container-type: inline-size; pointer-events: none; z-index: 4;
}
.split-ghost .split-fly {
  --pt: calc(91.1833cqw / 393);
  position: absolute; left: 0; top: 0; margin: 0; max-width: none;
  font-size: calc(17 * var(--pt)); line-height: 1.29; letter-spacing: -0.02em;
  opacity: 0; will-change: transform, opacity;
}
.split-fly-sh {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  box-shadow: 0 calc(16 * var(--pt)) calc(36 * var(--pt)) rgba(0, 0, 0, 0.2),
              0 calc(3 * var(--pt)) calc(9 * var(--pt)) rgba(0, 0, 0, 0.1);
}

/* measuring pass: everything at rest */
.split-measuring .split-phone,
.split-measuring .split-thread,
.split-measuring .split-thread > * { transform: none !important; }

/* ---- phone width ---- */
@media (max-width: 760px) {
  [data-scene="split"] .split-track { height: 440vh; }
  [data-scene="split"] .split-stage { padding: 52px 16px 0; }
  .split-layout { flex-direction: column; justify-content: flex-start; gap: 0; }
  .split-copy { width: 100%; text-align: center; padding-top: 22px; }
  .split-cap { align-self: start; }
  .split-cap h2 { font-size: 27px; line-height: 1.1; }
  .split-cap p { font-size: 17px; margin: 10px auto 0; max-width: 30ch; }
  .split-area { width: 100%; padding: 18px 0 20px; }
}

/* ---- reduced motion: the end state, all words at once ---- */
.split-static .split-track { height: auto; }
.split-static .split-stage { position: relative; height: auto; padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 12vh, 140px); }
.split-static .split-copy { display: flex; flex-direction: column; gap: 28px; }
.split-static .split-cap { will-change: auto; align-self: stretch; }
.split-static .split-area { padding: 0; }
@media (max-width: 760px) {
  .split-static .split-layout { gap: 36px; }
  .split-static .split-copy { gap: 22px; }
}