/* Digital Flow — Business Type Selector (WIP)
   Standalone homepage section that follows Hero → M-49.
   Shares the approved Hero / M-49 design tokens.

   Selected state: the SAME five cards shrink into floating image mini-cards pinned
   over the story scene (not a navbar). Story motion: a vertical premium slider — the
   active scene card sits sharp in the centre, the next enters from below, the previous
   exits up, the ambient background takes the active scene's tone, and a large blurred
   tinted backdrop gives depth.

   Motion lineage (local references only): M-52 (card rail/hover-lift), M-50 (depth
   stacking), Digital Flow Hero card-sphere (palette/tone). No external code or imagery. */

*, *::before, *::after { box-sizing: border-box; }

.bts {
  --bg: #1C1D1B;
  --bg-warm: #1C1D1B;
  --surface: #222320;
  --ink: #F2EEE6;
  --muted: rgba(242, 238, 230, .70);
  --faint: rgba(242, 238, 230, .45);
  --line: rgba(242, 238, 230, .12);
  --accent: #B6FF2E;
  --accent-deep: #B6FF2E;
  --accent-soft: rgba(242, 238, 230, .06);
  --display: "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 20px;
}



.bts { background: #1C1D1B; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

.bts h1, .bts h2, .bts h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -.018em; margin: 0; }
.bts .soft { color: var(--muted); font-weight: 500; }
.bts .eyebrow { color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; }

/* ========================= INTRO ========================= */
.bts__intro { max-width: 1180px; margin: 0 auto; padding: clamp(3.5rem, 8vh, 6rem) clamp(1.25rem, 4vw, 3rem) 1.5rem; }
/* .bts__title was an <h1>; it is now an <h2> so the document has one h1.
   Both selectors are kept so the rule is tag-independent and the rendering is
   byte-identical to the approved design. */
.bts__intro h1, .bts__intro .bts__title { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.bts__lead { margin: 1.25rem 0 0; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; }

.bts.is-engaged {
  padding-top: clamp(1.75rem, 3.5vh, 2.75rem);
  padding-bottom: clamp(2.5rem, 4.5vh, 3.5rem);
}
.bts.is-engaged .bts__intro,
.bts.is-engaged .selector { display: none; }

/* ========================= SELECTOR (CHOOSE — UNBOXED GROUP) ========================= */
.selector {
  max-width: 1180px;
  margin: 0 auto clamp(1.5rem, 3vh, 2.5rem);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.cards { display: flex; gap: 14px; height: clamp(340px, 46vh, 410px); }

.card {
  position: relative; flex: 1 1 0; min-width: 0;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .7);
  transition: flex .55s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease), border-color .45s var(--ease);
  will-change: flex;
}
.card:hover, .card:focus-visible { flex: 2.4; outline: none; box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .85); }
.card:focus-visible { border-color: var(--accent); }

.card__thumb { position: absolute; inset: 0; filter: saturate(.55) brightness(.97); transition: filter .55s var(--ease), transform .55s var(--ease); }
.card__thumb svg { width: 100%; height: 100%; display: block; }
.card:hover .card__thumb, .card:focus-visible .card__thumb { filter: saturate(1) brightness(1); transform: scale(1.05); }

.thumb--health       { background: linear-gradient(152deg, #2b3836 0%, #1e2928 100%); }
.thumb--restaurants  { background: linear-gradient(150deg, #332d26 0%, #201e1a 100%); }
.thumb--trades       { background: linear-gradient(150deg, #282b2e 0%, #1a1c1e 100%); }
.thumb--shops        { background: linear-gradient(150deg, #2b2834 0%, #1b1a20 100%); }
.thumb--professional { background: linear-gradient(150deg, #2c2f2b 0%, #1a1d19 100%); }

.card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 20, 16, .82) 0%, rgba(10, 20, 16, .28) 38%, transparent 70%);
  pointer-events: none; transition: opacity .45s var(--ease);
}
.card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.1rem, 2vw, 1.6rem); color: #f7f8f6; }
.card__label { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.28rem); letter-spacing: -.01em; }
.card__teaser { margin: .5rem 0 0; max-width: 30ch; color: rgba(247, 248, 246, .82); font-size: .95rem; line-height: 1.45; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease) .05s, transform .45s var(--ease) .05s; }
.card:hover .card__teaser, .card:focus-visible .card__teaser { opacity: 1; transform: translateY(0); }
.card__cue { display: inline-block; margin-top: .9rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--df-signal-green, #B6FF2E); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease) .12s, transform .45s var(--ease) .12s; }
.card:hover .card__cue, .card:focus-visible .card__cue { opacity: 1; transform: translateY(0); }

/* ========================= STORY (BRAND SYSTEM 2026 EDITORIAL EXPANSION) ========================= */
.story {
  position: relative;
  width: 100%;
}
.story__track {
  position: relative;
  width: 100%;
}
.story__stage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  animation: stageReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stageReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Local background layers completely removed - continuous page environment */
.story__amb,
.story__blur {
  display: none !important;
}

/* ========================= TOP CONTEXT BAR (MINIS + BACK CONTROL) ========================= */
.story__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(242, 238, 230, 0.08);
  position: relative;
  z-index: 20;
}

.minis {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  max-width: calc(100% - 210px);
}
.minis::-webkit-scrollbar {
  display: none;
}

.minis .card {
  position: relative;
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 5px;
  border-radius: 9px;
  background: #222320;
  border: 1px solid rgba(242, 238, 230, 0.12);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.minis .card .card__thumb {
  position: relative;
  inset: auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  filter: saturate(0.85);
}
.minis .card .card__body {
  position: static;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.minis .card .card__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.2;
}
.minis .card .card__teaser,
.minis .card .card__cue {
  display: none !important;
}
.minis .card::after {
  display: none !important;
}

.minis .card.is-min {
  opacity: 0.65;
}
.minis .card.is-min:hover,
.minis .card.is-min:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(242, 238, 230, 0.3);
  background: #282926;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
}
.minis .card.is-active {
  opacity: 1;
  background: #262724;
  border-color: rgba(182, 255, 46, 0.55);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.6), inset 0 -2px 0 0 #B6FF2E;
  transform: translateY(-1px);
}
.minis .card.is-active .card__label {
  font-weight: 600;
  color: #F2EEE6;
}
.minis .card.is-active .card__thumb {
  filter: saturate(1.1);
}

/* Subtle contextual return control */
.story__all {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(242, 238, 230, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 238, 230, 0.15);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.story__all:hover,
.story__all:focus-visible {
  color: #B6FF2E;
  border-color: rgba(182, 255, 46, 0.45);
  background: rgba(182, 255, 46, 0.08);
  transform: translateX(-2px);
  outline: none;
}

/* ========================= EDITORIAL SCENE SLIDER ========================= */
.slider {
  position: relative;
  width: 100%;
  min-height: auto;
  z-index: 5;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.slider.is-switching {
  opacity: 0;
  transform: translateY(-6px);
}

.scene {
  display: none;
  position: relative;
  width: 100%;
  opacity: 0;
}
.scene.is-active {
  display: block;
  opacity: 1;
  position: relative;
  animation: sceneFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sceneFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scene__card {
  display: grid;
  grid-template-columns: minmax(340px, 460px) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  min-height: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}

/* Left column: editorial text (integrated content block, not a boxed card) */
.scene__text {
  max-width: 460px;
  align-self: center;
  position: relative;
  z-index: 3;
}

.editorial-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--df-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--df-signal-green, #B6FF2E);
  margin-bottom: 0.55rem;
}
.editorial-meta .scene__sep {
  color: rgba(242, 238, 230, 0.25);
}
.editorial-meta .scene__num {
  color: rgba(242, 238, 230, 0.65);
}

.scene__kicker {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 238, 230, 0.5);
  margin: 0 0 0.55rem 0;
}

.scene h2 {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: #F2EEE6;
  margin: 0 0 0.95rem 0;
  text-wrap: balance;
}

.scene__body {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: clamp(0.96rem, 1.15vw, 1.02rem);
  line-height: 1.62;
  color: rgba(242, 238, 230, 0.76);
  margin: 0 0 1.15rem 0;
  max-width: 42ch;
}

.scene__pref {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.58;
  color: #F2EEE6;
  margin: 0 0 0.95rem 0;
}

.scene__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 1.25rem 0;
  padding: 0;
}
.scene__chips li {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 0.76rem;
  font-weight: 500;
  color: #F2EEE6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 238, 230, 0.12);
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.scene__note {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid #B6FF2E;
  background: rgba(182, 255, 46, 0.05);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(242, 238, 230, 0.85);
  max-width: 46ch;
}
.scene__note strong {
  color: #B6FF2E;
  font-weight: 600;
}

/* CTA Row in Brand System 2026 */
.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.25rem;
  align-items: center;
}
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn--primary {
  background: #B6FF2E !important;
  color: #1C1D1B !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 18px -4px rgba(182, 255, 46, 0.35) !important;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #c4ff4d !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(182, 255, 46, 0.45) !important;
  outline: none;
}
.btn--ghost {
  background: transparent !important;
  color: #F2EEE6 !important;
  border: 1px solid rgba(242, 238, 230, 0.25) !important;
  font-weight: 500 !important;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: rgba(242, 238, 230, 0.6) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-2px);
  outline: none;
}

.cta__support {
  margin: 0.55rem 0 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: rgba(242, 238, 230, 0.45);
  line-height: 1.4;
}

/* Right column: 16:9 visual proof (unboxed, loose, dimensional depth) */
.scene__visual--editorial {
  width: 100%;
  max-width: 630px;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 0;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}
.scene__visual--editorial::before {
  content: none;
}
.scene__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(242, 238, 230, 0.12);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.85),
    0 12px 28px -10px rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 2;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.scene__photo-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 98%;
  height: 98%;
  transform: translate(-50%, -46%) scale(1.08);
  object-fit: cover;
  filter: blur(40px) saturate(1.15);
  border-radius: 22px;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

/* ========================= BOTTOM CONTROLS & STEPPER ========================= */
.story__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(242, 238, 230, 0.08);
  position: relative;
  z-index: 10;
}

.story__deck-nav {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(34, 35, 32, 0.65);
  border: 1px solid rgba(242, 238, 230, 0.12);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.5);
}
.deck-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 238, 230, 0.15);
  color: #F2EEE6;
  font-size: 0.85rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.deck-btn:hover:not(:disabled),
.deck-btn:focus-visible:not(:disabled) {
  border-color: #B6FF2E;
  color: #B6FF2E;
  background: rgba(182, 255, 46, 0.1);
  transform: translateY(-1px);
  outline: none;
}
.deck-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(242, 238, 230, 0.08);
  color: rgba(242, 238, 230, 0.35);
  background: transparent;
}
.deck-count {
  font-family: var(--df-font-mono, "IBM Plex Mono", monospace);
  font-size: 0.80rem;
  font-weight: 600;
  color: #F2EEE6;
  min-width: 56px;
  text-align: center;
  letter-spacing: 0.06em;
}

.story__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.story__dots li {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.story__dots li button {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(242, 238, 230, 0.25);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.story__dots li button:hover {
  background: rgba(242, 238, 230, 0.5);
}
.story__dots li.is-active button {
  background: #B6FF2E;
  transform: scale(1.35);
}

.story__hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: rgba(242, 238, 230, 0.4);
  margin: 0;
}


/* ============================================================================
   PASS 3 — CINEMATIC MOTION REFINEMENT: DELIBERATE, EDITORIAL, LAYERED
   Layer 1: Atmospheric ambient response & soft illumination field
   Layer 2: Quiet, dignified eyebrow arrival
   Layer 3: Powerful headline editorial focus-reveal (blur -> sharp, unhurried rise)
   Layer 4: Secondary supporting copy settling naturally
   Layer 5: Intentional pause / moment of poetic breath
   Layer 6: Weighty, controlled card assembly (Left to Right, soft glide landing)
   Layer 7: Settle stillness before interactive states activate
   ============================================================================ */

/* Atmospheric light field behind title */
.bts__intro {
  position: relative;
}

.bts__intro::before {
  display: none !important;
}

.bts.is-revealed .bts__intro::before {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Initial unrevealed state */
  .bts:not(.is-revealed) .bts-opening-bridge,
  .bts:not(.is-revealed) .bts__intro .eyebrow {
    opacity: 0;
    transform: translateY(12px);
  }
  .bts:not(.is-revealed) .bts__intro .bts__title {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(12px);
    clip-path: inset(0 0 -12px 0);
  }
  .bts:not(.is-revealed) .bts__intro .bts__lead {
    opacity: 0;
    transform: translateY(14px);
  }
  .bts:not(.is-revealed) .selector {
    opacity: 0;
    transform: translateY(8px);
  }
  .bts:not(.is-revealed) .cards .card,
  .bts.is-revealed:not(.bts-assembled) .cards .card {
    opacity: 0;
    transform: translateX(-60px) scale(0.965);
    filter: blur(4px);
    will-change: transform, opacity, filter;
  }

  /* Phase 1: Quiet Eyebrow Entrance */
  .bts.is-revealed .bts-opening-bridge,
  .bts.is-revealed .bts__intro .eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1) 150ms,
                transform 750ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
  }

  /* Phase 2: Strong Cinematic Headline Reveal (Editorial Focus & Rise) */
  .bts.is-revealed .bts__intro .bts__title {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
    clip-path: inset(0 0 0 0);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1) 350ms,
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 350ms,
                filter 1000ms cubic-bezier(0.16, 1, 0.3, 1) 350ms,
                clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
  }

  /* Phase 3: Secondary Supporting Copy Follows */
  .bts.is-revealed .bts__intro .bts__lead {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1) 800ms,
                transform 750ms cubic-bezier(0.16, 1, 0.3, 1) 800ms;
  }

  /* Structural Selector Chassis Grounding */
  .bts.is-revealed .selector {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms,
                transform 750ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms;
  }

  /* Phase 4: Intentional Pause (1550ms -> 1800ms), then Cinematic Card Assembly */
  @keyframes btsCardAssembleCinematic {
    0% {
      opacity: 0;
      transform: translateX(-60px) scale(0.965);
      filter: blur(4px);
    }
    30% {
      opacity: 0.7;
    }
    75% {
      opacity: 1;
      transform: translateX(-3px) scale(0.998);
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0px);
    }
  }

  /* Stagger: 150ms between card starts, 850ms deliberate travel, soft landing */
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(1) {
    animation: btsCardAssembleCinematic 850ms cubic-bezier(0.16, 1, 0.25, 1) 1800ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(2) {
    animation: btsCardAssembleCinematic 850ms cubic-bezier(0.16, 1, 0.25, 1) 1950ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(3) {
    animation: btsCardAssembleCinematic 850ms cubic-bezier(0.16, 1, 0.25, 1) 2100ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(4) {
    animation: btsCardAssembleCinematic 850ms cubic-bezier(0.16, 1, 0.25, 1) 2250ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(5) {
    animation: btsCardAssembleCinematic 850ms cubic-bezier(0.16, 1, 0.25, 1) 2400ms both;
  }

  /* Phase 5: Settle Stillness, then Restored Interactive Authority */
  .bts.bts-assembled .cards .card {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    will-change: auto;
    transition: flex .55s var(--ease),
                box-shadow .45s var(--ease),
                transform .35s var(--ease),
                border-color .45s var(--ease);
  }

  .bts.bts-assembled .cards .card:hover,
  .bts.bts-assembled .cards .card:focus-visible {
    transform: translateY(-3px) !important;
    flex: 2.4;
  }
}

/* Mobile responsive cinematic choreography */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  @keyframes btsCardAssembleMobileCinematic {
    0% {
      opacity: 0;
      transform: translateX(-34px) scale(0.975);
      filter: blur(3px);
    }
    30% {
      opacity: 0.7;
    }
    80% {
      opacity: 1;
      transform: translateX(-2px) scale(0.998);
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0px);
    }
  }

  .bts:not(.is-revealed) .cards .card,
  .bts.is-revealed:not(.bts-assembled) .cards .card {
    transform: translateX(-34px) scale(0.975);
    filter: blur(3px);
  }

  .bts.is-revealed .bts-opening-bridge,
  .bts.is-revealed .bts__intro .eyebrow {
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 100ms,
                transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
  }

  .bts.is-revealed .bts__intro .bts__title {
    transition: opacity 950ms cubic-bezier(0.16, 1, 0.3, 1) 250ms,
                transform 950ms cubic-bezier(0.16, 1, 0.3, 1) 250ms,
                filter 850ms cubic-bezier(0.16, 1, 0.3, 1) 250ms,
                clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1) 250ms;
  }

  .bts.is-revealed .bts__intro .bts__lead {
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1) 600ms,
                transform 650ms cubic-bezier(0.16, 1, 0.3, 1) 600ms;
  }

  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(1) {
    animation: btsCardAssembleMobileCinematic 750ms cubic-bezier(0.16, 1, 0.25, 1) 1400ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(2) {
    animation: btsCardAssembleMobileCinematic 750ms cubic-bezier(0.16, 1, 0.25, 1) 1530ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(3) {
    animation: btsCardAssembleMobileCinematic 750ms cubic-bezier(0.16, 1, 0.25, 1) 1660ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(4) {
    animation: btsCardAssembleMobileCinematic 750ms cubic-bezier(0.16, 1, 0.25, 1) 1790ms both;
  }
  .bts.is-revealed:not(.bts-assembled) .cards .card:nth-child(5) {
    animation: btsCardAssembleMobileCinematic 750ms cubic-bezier(0.16, 1, 0.25, 1) 1920ms both;
  }

  .bts.bts-assembled .cards .card:hover,
  .bts.bts-assembled .cards .card:focus-visible {
    transform: none !important;
    flex: 0 0 78% !important;
  }
}

/* Reduced Motion: Instant Visibility */
@media (prefers-reduced-motion: reduce) {
  .bts__intro::before,
  .bts .bts-opening-bridge,
  .bts .bts__intro > *,
  .bts .selector,
  .bts .cards .card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}