/* Split-screen chooser */
.chooser-page { background: var(--charcoal); overflow: hidden; }

.split {
  --agent: 50%;
  position: relative;
  display: flex;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
.split.is-agent  { --agent: 65%; }
.split.is-notary { --agent: 35%; }
.split.commit-agent  { --agent: 100%; }
.split.commit-notary { --agent: 0%; }

.half {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: flex-basis 0.4s ease-out;
  outline: none;
  container-type: inline-size;
}
.half--agent  { flex: 0 0 var(--agent); background: var(--charcoal); color: var(--cream); }
.half--notary { flex: 0 0 calc(100% - var(--agent)); background: var(--cream); color: var(--charcoal); }

/* dim the side that isn't chosen */
.half::after {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
.split.is-agent .half--notary::after,
.split.is-notary .half--agent::after { opacity: 0.35; }
.split.is-agent .half--notary::after { opacity: 0.2; }

/* Content column: fixed width so it doesn't reflow while the half resizes.
   Agent copy hugs the outer left edge, notary copy hugs the outer right edge. */
.half__inner {
  position: absolute;
  top: clamp(28px, 6vh, 64px);
  /* scales with its half, so the narrowed side shrinks instead of colliding with the art */
  width: clamp(220px, 54cqw, 400px);
  z-index: 2;
}
.half--agent .half__inner  { left: clamp(24px, 5vw, 80px); }
.half--notary .half__inner { right: clamp(24px, 5vw, 80px); text-align: right; }
.half--notary .lockup { margin-left: auto; }

.eyebrow {
  margin: 0 0 18px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.half--agent .eyebrow { color: var(--gold); }
.half--notary .eyebrow { color: var(--teal); }

.half .lockup { width: clamp(220px, 54cqw, 400px); }

.half__headline {
  margin-top: clamp(18px, 3vh, 30px);
  font: 700 clamp(22px, 2.2vw, 32px)/1.15 var(--font-body);
  letter-spacing: -0.01em;
}
.half__sub {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  opacity: 0.82;
}

.half__offer {
  margin-top: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease-out 0.08s, transform 0.35s ease-out 0.08s;
}
.half__offer p { margin: 0 0 16px; font-size: 16px; }
.split.is-agent .half--agent .half__offer,
.split.is-notary .half--notary .half__offer {
  opacity: 1;
  transform: none;
}

/* Figures sit against the seam so the fist bump meets in the middle */
.half__figure {
  position: absolute;
  bottom: 0;
  height: min(64vh, 720px);
  aspect-ratio: 780 / 900;
  z-index: 1;
  pointer-events: none;
}
.half__figure img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.half--agent .half__figure  { right: 0; }
.half--notary .half__figure { left: 0; }

/* Book spine rides the seam. The figures sit in front of it (z-index 1 vs 0),
   so the fist bump happens over the spine. Top half gold (title agent side),
   bottom half teal (notary side), text flipped like the flip book. */
.split { --spine-w: clamp(38px, 3.2vw, 52px); }
.spine {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--agent);
  width: var(--spine-w);
  transform: translateX(-50%);
  z-index: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  box-shadow: inset 4px 0 6px -4px rgba(0,0,0,.35), inset -4px 0 6px -4px rgba(0,0,0,.35);
  transition: left 0.4s ease-out, opacity 0.3s;
}
.spine::after { /* the little ridges near the ends of a real spine */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(transparent 14px, rgba(28,28,28,.25) 14px, rgba(28,28,28,.25) 16px, transparent 16px),
    linear-gradient(to top, transparent 14px, rgba(245,239,230,.3) 14px, rgba(245,239,230,.3) 16px, transparent 16px);
}
.spine__top, .spine__bottom {
  flex: 1;
  display: flex;
  justify-content: center;
}
.spine__top { background: var(--gold); color: var(--charcoal); align-items: flex-start; padding-top: 2.6vh; }
.spine__bottom { background: var(--teal); color: var(--cream); align-items: flex-end; padding-bottom: 2.6vh; }

/* Gold half: title, then the handwritten line. Sized in vh so both always end
   above the figures' heads (which start at 100vh - 64vh). */
.spine__stack {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
  line-height: 1;
}
.spine__stack > span { display: inline-block; vertical-align: middle; }
.spine__hand { margin-inline-start: 1.6vh; }
.spine__title {
  text-transform: uppercase;
  font: 400 1.9vh/1 var(--font-display);
  letter-spacing: 0.04em;
}
.spine__title b { font-weight: 400; opacity: .72; }
.spine__hand {
  font: 400 1.95vh/1 var(--font-hand);
  word-spacing: var(--hand-word-spacing);
}
/* Teal half reads the other way up, like flipping the book over */
.spine__author {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  white-space: nowrap;
  text-transform: uppercase;
  font: 700 clamp(9px, 1.2vh, 12px)/1 var(--font-body);
  letter-spacing: 0.3em;
}
.split[class*="commit-"] .spine { opacity: 0; }

/* Commit: chosen half fills the screen, the other slides away */
.split[class*="commit-"] .half { transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.split.commit-agent .half--notary .half__inner,
.split.commit-notary .half--agent .half__inner { opacity: 0; transition: opacity 0.2s; }

/* Short desktop windows: shrink the figures so copy and art don't collide */
@media (min-width: 769px) and (max-height: 760px) {
  .half__figure { height: 54vh; }
  .half__offer p { display: none; }
}

/* Mobile: stack, agent on top, tap to commit, no hover */
@media (max-width: 768px) {
  .chooser-page { overflow: auto; }
  .split { flex-direction: column; height: auto; min-height: 100svh; }
  .half { flex: 0 0 auto !important; min-height: 50svh; transition: none; }
  .half::after { display: none; }
  .half__inner {
    position: relative;
    top: auto; left: auto !important; right: auto !important;
    width: auto;
    max-width: 62%;
    padding: 28px 0 28px 20px;
    text-align: left !important;
  }
  .half--notary .half__inner { margin-left: auto; padding: 28px 20px 28px 0; text-align: right !important; }
  .half .lockup { width: min(52vw, 250px); }
  .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .half__headline { font-size: 20px; margin-top: 14px; }
  .half__sub { font-size: 14px; }
  .half__offer { opacity: 1; transform: none; margin-top: 16px; }
  .half__offer p { display: none; }
  .half__offer .btn { font-size: 14px; padding: 12px 16px; }
  .half__figure { height: 82%; max-height: 360px; }
  .half--agent .half__figure { right: -8%; }
  .half--notary .half__figure { left: -8%; }
  /* the spine lies flat between the stacked halves */
  .half--agent { order: 0; }
  .spine {
    order: 1; position: relative; left: auto; transform: none;
    width: 100%; height: 60px; flex-direction: row; z-index: 2;
    transition: none;
  }
  .spine::after { display: none; }
  .spine__top, .spine__bottom { align-items: center; }
  .spine__top { justify-content: flex-start; }
  .spine__bottom { justify-content: flex-end; }
  .spine__top, .spine__bottom { padding: 0 16px; }
  .spine__stack, .spine__author { writing-mode: horizontal-tb; transform: none; }
  .spine__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .spine__hand { margin: 0; }
  .spine__title { font-size: 16px; }
  .spine__hand { font-size: 16px; }
  .spine__author { font-size: 9px; }
  .half--notary { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .half, .half::after, .half__offer, .spine { transition: none !important; }
}