/* Rail Lottie — large, transparent, behind glass cards */

.tp-body--rail {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-bottom: 0;
}

.tp-page--rail .tp-glass {
  background: rgba(255, 255, 255, 0.09);
}

.tp-page--rail .tp-body,
.tp-body--rail {
  background:
    radial-gradient(ellipse 55% 36% at 82% 10%, rgba(212, 175, 55, 0.12), transparent 52%),
    radial-gradient(ellipse 50% 38% at 14% 50%, rgba(66, 145, 139, 0.15), transparent 52%),
    var(--tp-ink);
  padding-bottom: 0;
}

.tp-body--rail .tp-body__inner,
.tp-body--rail .tp-cta-merge {
  position: relative;
  z-index: 2;
}

.tp-body--rail .tp-cta-merge {
  padding: 3.5rem 1.5rem 4.5rem;
}

@media (min-width: 1024px) {
  .tp-body--rail .tp-cta-merge {
    padding: 4.5rem 2.5rem 5.5rem;
  }
}

.rail-lottie-behind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.rail-lottie {
  position: sticky;
  top: 14vh;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 1920 / 1080;
  opacity: 0.48;
  background: transparent !important;
  line-height: 0;
  overflow: visible;
}

@media (min-width: 900px) {
  .rail-lottie {
    top: 10vh;
    opacity: 0.55;
  }
}

.rail-lottie svg,
.rail-lottie > svg {
  display: block;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  overflow: visible !important;
}

.rail-lottie svg rect[fill="#000028"],
.rail-lottie svg rect[fill="rgb(0,0,40)"] {
  fill: transparent !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .rail-lottie {
    opacity: 0.35;
  }
}