/* ==========================================================================
   LP03 · UNIT 11 · FINAL CTA — "Keep Your System. Make Room for E-Invoicing."
   --------------------------------------------------------------------------
   The headline made visual. A panel in the brand "Transmission" gradient:
   copy + Sign Up Free at inline-start; at inline-end a stack of four
   "your system" blocks. As the panel scrolls through the viewport the
   stack parts in the middle — the upper blocks rise, the lower ones sink —
   and an e-invoice block slides into the room that was made.
   The motion is two CSS custom properties written from a LIVE rect read:
     --open (0 → 1): the stack parts      --in (0 → 1): the e-invoice slots in
   All positions are calc() on those vars, so the composition scales with
   its box and nothing is cached. Default (no JS / no motion) = 1 / 1:
   the finished picture.
   ========================================================================== */

.bcta {
  background-color: var(--c-white);
  padding-block-end: clamp(4rem, 8vw, 6rem);
}

.bcta__panel {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: var(--r-panel);
  /* brand Transmission gradient, teal end placed behind the visual */
  background: linear-gradient(315deg, #00A9B6 0%, #013E6A 45%, #02113A 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}

[dir="rtl"] .bcta__panel {
  background: linear-gradient(45deg, #00A9B6 0%, #013E6A 45%, #02113A 100%);
}

@media (min-width: 48rem) {
  .bcta__panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* scattered, fading pixel clusters (the F-mark motif — never a grid) */
.bcta__pixels {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bcta__pixels i {
  position: absolute;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: var(--r-pixel);
  background-color: rgba(255, 255, 255, 0.12);
}

.bcta__pixels i:nth-child(1) { inset-block-start: 10%; inset-inline-start: 6%; }
.bcta__pixels i:nth-child(2) { inset-block-start: 10%; inset-inline-start: calc(6% + 0.8rem); opacity: 0.6; }
.bcta__pixels i:nth-child(3) { inset-block-start: calc(10% + 0.8rem); inset-inline-start: 6%; opacity: 0.35; }
.bcta__pixels i:nth-child(4) { inset-block-end: 12%; inset-inline-start: 44%; opacity: 0.5; }
.bcta__pixels i:nth-child(5) { inset-block-end: calc(12% + 0.8rem); inset-inline-start: calc(44% + 0.8rem); opacity: 0.25; }

/* ---------------------------------------------------------------------------
   Copy
   --------------------------------------------------------------------------- */
.bcta__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

.bcta__copy h2 {
  max-inline-size: 18ch;
  color: var(--c-on-dark);
}

.bcta__copy p {
  max-inline-size: 34rem;
  color: var(--c-on-dark-body);
}

@media (min-width: 48rem) {
  .bcta__copy {
    justify-items: start;
    text-align: start;
  }
}

/* ---------------------------------------------------------------------------
   The stack (box with fixed aspect; blocks placed in %)
   --------------------------------------------------------------------------- */
.bcta__stack {
  --open: 1;
  --in: 1;
  position: relative;
  inline-size: min(100%, 22rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;               /* the incoming block never widens the page */
}

/* system blocks: closed stack top = --t0, open top = --t1 */
.bcta__block {
  position: absolute;
  inset-inline: 6%;
  inset-block-start: calc(var(--t0) + (var(--t1) - var(--t0)) * var(--open));
  block-size: 14%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.875rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: rgba(255, 255, 255, 0.75);
}

/* four system blocks: 17% pitch; closed = centred, open = split around the slot */
.bcta__block:nth-child(1) { --t0: 17.5%; --t1: 9%; }
.bcta__block:nth-child(2) { --t0: 34.5%; --t1: 26%; }
.bcta__block:nth-child(3) { --t0: 51.5%; --t1: 60%; }
.bcta__block:nth-child(4) { --t0: 68.5%; --t1: 77%; }

.bcta__block svg {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.bcta__block span,
.bcta__einv span {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}

.bcta__block i,
.bcta__einv i {
  display: block;
  block-size: 0.3rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.25);
}

.bcta__block i:last-child,
.bcta__einv i:last-child {
  inline-size: 55%;
}

/* the e-invoice block that takes the room */
.bcta__einv {
  position: absolute;
  inset-inline: 6%;
  inset-block-start: 43%;
  block-size: 14%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.875rem;
  border-radius: 12px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 4px rgba(0, 169, 182, 0.35), 0 18px 40px -12px rgba(0, 0, 0, 0.5);
  color: var(--c-teal);
  opacity: var(--in);
  transform: translateX(calc((1 - var(--in)) * 70%));
}

[dir="rtl"] .bcta__einv {
  transform: translateX(calc((1 - var(--in)) * -70%));
}

.bcta__einv svg {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.bcta__einv i {
  background-color: rgba(11, 31, 68, 0.18);
}

.bcta__einv img {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}