/* ═══ MAYKAGRUP Motion System v1 — scroll-driven TradeTech scenes ═══ */

[data-mg-scene] {
  position: relative;
  isolation: isolate;
  --mg-scene-p: 0;
  --mg-scene-focus: 0;
}

.mg-scene__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mg-scene__layer {
  position: absolute;
  inset: -8% -4%;
  will-change: transform, opacity;
}

.mg-scene__layer--bg {
  opacity: calc(0.35 + var(--mg-scene-p, 0) * 0.45);
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(52, 152, 219, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(232, 197, 71, 0.08), transparent 65%);
  transform: translate3d(0, calc(var(--mg-scene-p, 0) * -24px), 0);
}

.mg-scene--hero .mg-scene__layer--bg {
  opacity: calc(0.2 + var(--mg-scene-p, 0) * 0.3);
}

.mg-scene--consulting .mg-scene__layer--bg {
  background:
    radial-gradient(ellipse 70% 55% at 30% 50%, rgba(232, 197, 71, 0.1), transparent 68%),
    linear-gradient(135deg, rgba(7, 9, 13, 0.2), transparent 55%);
}

.mg-scene--gtos .mg-scene__layer--bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(52, 152, 219, 0.16), transparent 58%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      rgba(255, 255, 255, 0.02) 24px,
      rgba(255, 255, 255, 0.02) 25px
    );
  opacity: calc(0.25 + var(--mg-scene-focus, 0) * 0.55);
}

.mg-scene--agents .mg-scene__layer--bg {
  background:
    radial-gradient(ellipse 55% 45% at 50% 45%, rgba(155, 89, 182, 0.12), transparent 70%),
    radial-gradient(circle at 70% 30%, rgba(52, 152, 219, 0.08), transparent 50%);
}

.mg-scene--materials .mg-scene__layer--bg {
  background:
    radial-gradient(ellipse 65% 50% at 40% 60%, rgba(46, 204, 113, 0.08), transparent 68%),
    radial-gradient(circle at 80% 20%, rgba(232, 197, 71, 0.06), transparent 45%);
}

.mg-scene--operations .mg-scene__layer--bg {
  background: linear-gradient(
    180deg,
    rgba(7, 9, 13, 0.55) 0%,
    rgba(7, 9, 13, 0.15) 45%,
    rgba(7, 9, 13, 0.5) 100%
  );
}

.mg-scene__foreground,
.mg-scene [class*="__split"],
.mg-scene .uc-svc-band__content,
.mg-scene .uc-reliability__content,
.mg-scene .mg-section__head {
  position: relative;
  z-index: 2;
}

/* Trade routes SVG */
.mg-trade-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(0.15 + var(--mg-scene-p, 0) * 0.45);
}

.mg-trade-routes path {
  fill: none;
  stroke: rgba(232, 197, 71, 0.35);
  stroke-width: 1;
  stroke-dasharray: 6 10;
  animation: mgRouteFlow 14s linear infinite;
}

.mg-trade-routes path:nth-child(2) {
  stroke: rgba(52, 152, 219, 0.4);
  animation-delay: -4s;
}

@keyframes mgRouteFlow {
  to {
    stroke-dashoffset: -120;
  }
}

/* Data burst */
.mg-data-burst {
  --mg-burst-p: 0;
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(22rem, 46vw);
  height: min(22rem, 46vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--mg-burst-p, 0) * 0.95);
}

.mg-data-burst__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(8px + var(--mg-burst-p, 0) * 18px);
  height: calc(8px + var(--mg-burst-p, 0) * 18px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #f5e6a8 0%, rgba(232, 197, 71, 0.4) 55%, transparent 70%);
  box-shadow: 0 0 calc(20px + var(--mg-burst-p, 0) * 40px) rgba(232, 197, 71, 0.35);
}

.mg-data-burst__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(232, 197, 71, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.2 + var(--mg-burst-p, 0) * 1.1));
  opacity: calc(var(--mg-burst-p, 0) * 0.8);
}

.mg-data-burst__ring--1 {
  width: 35%;
  height: 35%;
}

.mg-data-burst__ring--2 {
  width: 62%;
  height: 62%;
  border-color: rgba(52, 152, 219, 0.28);
}

.mg-data-burst__ring--3 {
  width: 88%;
  height: 88%;
  opacity: calc(var(--mg-burst-p, 0) * 0.45);
}

.mg-data-burst__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: calc(18% + var(--mg-burst-p, 0) * 38%);
  background: linear-gradient(180deg, rgba(232, 197, 71, 0.5), transparent);
  transform-origin: 50% 0;
  opacity: calc(var(--mg-burst-p, 0) * 0.75);
}

.mg-data-burst__spoke--1 { transform: translate(-50%, 0) rotate(0deg); }
.mg-data-burst__spoke--2 { transform: translate(-50%, 0) rotate(60deg); }
.mg-data-burst__spoke--3 { transform: translate(-50%, 0) rotate(120deg); }
.mg-data-burst__spoke--4 { transform: translate(-50%, 0) rotate(180deg); }
.mg-data-burst__spoke--5 { transform: translate(-50%, 0) rotate(240deg); }
.mg-data-burst__spoke--6 { transform: translate(-50%, 0) rotate(300deg); }

.mg-data-burst--gtos .mg-data-burst__core {
  background: radial-gradient(circle, #7ec8ff 0%, rgba(52, 152, 219, 0.35) 55%, transparent 72%);
  box-shadow: 0 0 calc(24px + var(--mg-burst-p, 0) * 48px) rgba(52, 152, 219, 0.35);
}

.mg-data-burst--agents .mg-data-burst__core {
  background: radial-gradient(circle, #d4b5ff 0%, rgba(155, 89, 182, 0.35) 55%, transparent 72%);
}

.mg-data-burst--materials .mg-data-burst__core {
  background: radial-gradient(circle, #8fdfa8 0%, rgba(46, 204, 113, 0.3) 55%, transparent 72%);
}

/* Particles */
.mg-scene__particle-field {
  position: absolute;
  inset: 0;
}

.mg-scene__particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(232, 197, 71, 0.45);
  animation: mgParticleDrift 8s ease-in-out infinite alternate;
  opacity: calc(0.2 + var(--mg-scene-p, 0) * 0.5);
}

@keyframes mgParticleDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--mg-p-drift, 8) * 1px), calc(var(--mg-p-drift, 8) * -1px), 0);
  }
}

/* Trade flow pipeline */
.mg-trade-flow-viz {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mg-trade-flow-viz__step {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  opacity: calc(0.35 + var(--mg-scene-focus, 0) * 0.65);
  transform: translateY(calc((1 - var(--mg-scene-focus, 0)) * 8px));
  transition: color 0.2s ease, border-color 0.2s ease;
}

.mg-trade-flow-viz__step.is-partner {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.58rem;
}

.mg-trade-flow-viz__step.is-active {
  border-color: rgba(232, 197, 71, 0.45);
  color: var(--mayka-gold-bright, #f5e6a8);
  opacity: 1;
}

.mg-trade-flow-viz__arrow {
  color: rgba(255, 255, 255, 0.25);
  align-self: center;
}

/* Hero title fix */
.mg-hero--centered .mg-hero__title {
  max-width: 18ch !important;
}

.mg-hero--centered .mg-hero__title .line--break {
  display: block;
}

/* Section transition scrim */
.mg-scene.is-scene-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 9, 13, 0.65) 0%,
    transparent 18%,
    transparent 82%,
    rgba(7, 9, 13, 0.55) 100%
  );
  opacity: calc(0.35 + var(--mg-scene-p, 0) * 0.25);
}

.uc-svc-band.mg-scene {
  overflow: hidden;
}

.uc-svc-band.mg-scene .uc-svc-band__photo {
  position: relative;
  z-index: 1;
}

.uc-svc-band.mg-scene .uc-svc-band__content {
  z-index: 2;
}

@media (max-width: 719px) {
  .mg-data-burst {
    width: min(16rem, 70vw);
    height: min(16rem, 70vw);
    top: 28%;
    opacity: calc(var(--mg-burst-p, 0) * 0.55);
  }

  .mg-trade-flow-viz {
    font-size: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-trade-routes path,
  .mg-scene__particle {
    animation: none !important;
  }

  .mg-data-burst,
  [data-mg-parallax] {
    transform: none !important;
  }

  .mg-scene__layer--bg {
    opacity: 0.25;
  }
}