/*
 * Original MVRPAY motion surfaces.
 * Replaces the repeated illustration backgrounds with two distinct,
 * lightweight CSS systems: an orchestration grid and a secure network horizon.
 */

/* Homepage hero — orchestration grid */
.section1-container .video-wrapper {
  isolation: isolate;
  background-color: #030b15 !important;
  background-image:
    radial-gradient(circle at 50% 43%, rgba(39, 215, 209, 0.2), transparent 21%),
    radial-gradient(circle at 18% 28%, rgba(75, 169, 245, 0.13), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(108, 124, 255, 0.14), transparent 25%),
    linear-gradient(180deg, #071423 0%, #030b15 62%, #020811 100%) !important;
}

.section1-container .Hero-video {
  display: none !important;
}

.section1-container .spotlights {
  display: none !important;
}

.section1-container .video-wrapper::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.68;
  background:
    radial-gradient(circle at 50% 50%, rgba(39, 215, 209, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 25% 35%, rgba(75, 169, 245, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 34%, rgba(108, 124, 255, 0.55) 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(87, 196, 224, 0.075) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(87, 196, 224, 0.055) 0 1px, transparent 1px 76px);
  transform: perspective(900px) rotateX(60deg) translate3d(0, 13%, 0) scale(1.25);
  transform-origin: center 64%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 12%, rgba(0, 0, 0, 0.8) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 12%, rgba(0, 0, 0, 0.8) 48%, transparent 76%);
  animation: mvrpay-grid-drift 18s linear infinite;
}

.section1-container .video-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  width: min(54vw, 48rem);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.78;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(39, 215, 209, 0.2) 22.4% 22.8%, transparent 23.2% 35%, rgba(75, 169, 245, 0.16) 35.4% 35.8%, transparent 36.2% 49%, rgba(108, 124, 255, 0.13) 49.4% 49.8%, transparent 50.2%),
    conic-gradient(from 0deg, transparent 0 13%, rgba(39, 215, 209, 0.42) 14%, transparent 16% 45%, rgba(108, 124, 255, 0.36) 47%, transparent 49% 78%, rgba(75, 169, 245, 0.34) 80%, transparent 82%);
  filter: drop-shadow(0 0 28px rgba(39, 215, 209, 0.16));
  transform: translate(-50%, -50%);
  animation: mvrpay-core-rotate 24s linear infinite;
}

.section1-container .hero-text {
  z-index: 4 !important;
}

.section1-container .platform-features-bar {
  position: relative;
  z-index: 5;
}

@keyframes mvrpay-grid-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 0 0, 76px 0, 0 76px;
  }
}

@keyframes mvrpay-core-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Footer CTA — secure network horizon */
.ftr-cta-wrap {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(39, 215, 209, 0.16), transparent 34%),
    radial-gradient(ellipse at 50% 16%, rgba(108, 124, 255, 0.16), transparent 38%),
    linear-gradient(180deg, #020811 0%, #061321 54%, #020811 100%) !important;
}

.ftr-cta-video {
  display: none !important;
}

.ftr-cta-char {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  overflow: hidden;
  opacity: 1;
}

.ftr-cta-char::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 67%;
  width: min(106vw, 98rem);
  aspect-ratio: 2.15 / 1;
  transform: translate(-50%, -50%) perspective(800px) rotateX(64deg);
  border-radius: 50%;
  opacity: 0.7;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 46px, rgba(39, 215, 209, 0.12) 47px 48px, transparent 49px 92px),
    repeating-linear-gradient(90deg, rgba(75, 169, 245, 0.08) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(75, 169, 245, 0.06) 0 1px, transparent 1px 84px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, rgba(0, 0, 0, 0.85) 54%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 20%, rgba(0, 0, 0, 0.85) 54%, transparent 78%);
  animation: mvrpay-horizon-pulse 8s ease-in-out infinite;
}

.ftr-cta-char::after {
  content: "";
  position: absolute;
  inset: -22% -55%;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(39, 215, 209, 0.08) 47%, rgba(75, 169, 245, 0.5) 50%, rgba(108, 124, 255, 0.1) 53%, transparent 58%);
  mix-blend-mode: screen;
  filter: blur(14px);
  transform: translate3d(-30%, 0, 0);
  animation: mvrpay-horizon-scan 7.5s ease-in-out infinite;
}

.ftr-cta-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(39, 215, 209, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 32% 72%, rgba(75, 169, 245, 0.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 68% 29%, rgba(108, 124, 255, 0.68) 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 68%, rgba(39, 215, 209, 0.72) 0 1px, transparent 1.7px);
  background-size: 23rem 19rem, 29rem 23rem, 31rem 27rem, 37rem 29rem;
}

.ftr-cta-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 12%, rgba(2, 8, 17, 0.16) 48%, rgba(2, 8, 17, 0.72) 100%);
}

.ftr-cta-glass {
  z-index: 2 !important;
  width: min(92%, 58rem) !important;
  border: 1px solid rgba(111, 231, 226, 0.2) !important;
  border-radius: 1.5rem !important;
  background:
    linear-gradient(135deg, rgba(10, 25, 43, 0.78), rgba(4, 13, 25, 0.6)) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 248, 252, 0.1),
    0 0 0 1px rgba(108, 124, 255, 0.05),
    0 2rem 7rem rgba(0, 0, 0, 0.45),
    0 0 4rem rgba(39, 215, 209, 0.05) !important;
  backdrop-filter: blur(24px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
}

.ftr-cta-glass::before {
  width: 72% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: radial-gradient(circle at 50% 40%, rgba(108, 124, 255, 0.12), transparent 68%) !important;
}

@keyframes mvrpay-horizon-pulse {
  0%,
  100% {
    opacity: 0.48;
    transform: translate(-50%, -50%) perspective(800px) rotateX(64deg) scale(0.98);
  }
  50% {
    opacity: 0.78;
    transform: translate(-50%, -50%) perspective(800px) rotateX(64deg) scale(1.02);
  }
}

@keyframes mvrpay-horizon-scan {
  0% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0);
  }
  22%,
  70% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate3d(30%, 0, 0);
  }
}

@media (max-width: 768px) {
  .section1-container .video-wrapper::after {
    width: 42rem;
  }

  .ftr-cta-char::before {
    width: 62rem;
    top: 68%;
  }

  .ftr-cta-glass {
    width: calc(100% - 2rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section1-container .video-wrapper::before,
  .section1-container .video-wrapper::after,
  .ftr-cta-char::before,
  .ftr-cta-char::after {
    animation: none !important;
  }

  .ftr-cta-char::after {
    opacity: 0.14;
    transform: none;
  }
}