/* ==========================================================================
   Launch Labs — Section: "Every great website does two things brilliantly"
   Philosophy, not process: the central belief behind Launch Labs. Minimal,
   editorial, on the same white surface / local tokens as .hub, .diagnostic
   and .team — no dramatic dark break this time, the interaction itself is
   the visual interest.

   Structure: section shell -> centered intro (heading, short two-line sub)
              -> two vertical cards, narrow at rest. Hovering (or focusing,
              or tapping on touch) one expands it — larger quote, copy
              fades in, background deepens a shade — while the other
              narrows. Classic `container:hover .card:not(:hover)` pattern,
              mirrored for focus and for the JS tap-toggle on touch (see
              js/split.js). Closing statement underneath, treated almost
              like a conclusion.
   ========================================================================== */

.split {
  --ink: #0b0a0d;
  --ink-muted: rgba(11, 10, 13, 0.64);
  --ink-faint: rgba(11, 10, 13, 0.42);
  --hairline: rgba(11, 10, 13, 0.1);
  --contrast: #D92632;
  --surface: #FAFAF9;
  --surface-active: #F0EFEC;
  --card-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: #FFFFFF;
  color: var(--ink);
  padding: clamp(6rem, 13vw, 10rem) clamp(1.5rem, 4vw, 4rem);
}

/* ==========================================================================
   Intro
   ========================================================================== */
.split__intro {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.split__heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.15rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
}

.split__sub {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(14px);
}

.split.is-visible .split__heading,
.split.is-visible .split__sub {
  animation: split-rise 0.75s var(--ease) forwards;
}

.split.is-visible .split__heading { animation-delay: 0s; }
.split.is-visible .split__sub     { animation-delay: 0.12s; }

/* ==========================================================================
   Cards
   ========================================================================== */
.split__cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
}

.split__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 12.5rem;
  height: 30rem;
  flex: 0 0 auto;
  padding: 2.25rem 2rem;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 10, 13, 0.03);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: width 0.45s var(--card-ease), background-color 0.45s var(--card-ease), box-shadow 0.45s var(--card-ease);
}

.split.is-visible .split__card {
  animation: split-rise 0.8s var(--ease) forwards;
}

.split.is-visible .split__card[data-card="emotion"] { animation-delay: 0.24s; }
.split.is-visible .split__card[data-card="logic"]   { animation-delay: 0.34s; }

.split__cards:hover .split__card:hover,
.split__cards:focus-within .split__card:focus,
.split__card.is-expanded {
  width: 23.75rem;
  background: var(--surface-active);
  box-shadow: 0 30px 60px rgba(11, 10, 13, 0.08);
}

.split__cards:hover .split__card:not(:hover),
.split__card.is-shrunk {
  width: 9rem;
}

.split__kicker {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.split__quote {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.3;
  transition: font-size 0.45s var(--card-ease);
}

.split__cards:hover .split__card:hover .split__quote,
.split__cards:focus-within .split__card:focus .split__quote,
.split__card.is-expanded .split__quote {
  font-size: 2.15rem;
}

.split__copy {
  margin-top: 1.5rem;
  max-width: 18rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--card-ease), transform 0.4s var(--card-ease);
}

.split__cards:hover .split__card:hover .split__copy,
.split__cards:focus-within .split__card:focus .split__copy,
.split__card.is-expanded .split__copy {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.split__card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ==========================================================================
   Closing statement
   ========================================================================== */
.split__closing {
  max-width: 40rem;
  margin: clamp(4.5rem, 9vw, 7rem) auto 0;
  text-align: center;
}

.split__closing-statement {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
}

.split__closing.is-visible .split__closing-statement,
.split.is-visible .split__closing-statement {
  animation: split-rise 0.8s var(--ease) forwards;
  animation-delay: 0.1s;
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes split-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 40rem) {
  .split__cards { gap: 1rem; }
  .split__card { width: 8.5rem; height: 26rem; }
  .split__cards:hover .split__card:hover,
  .split__card.is-expanded { width: 15rem; }
  .split__cards:hover .split__card:not(:hover),
  .split__card.is-shrunk { width: 6rem; }
}