/* ============================================================
   BOTVIET CONNECTION SCENE EXACT R50
   Scope: ONLY the visual scene at the top-right of /app/connections.
   Uses the approved user reference image as the exact base visual.
   No duplicate platform icons are drawn on top.
   Desktop + Mobile responsive.
   ============================================================ */

.connections-r42 .r42-orbit-visual{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1672 / 941!important;
  align-self:start!important;
  overflow:hidden!important;
  border-radius:28px!important;
  isolation:isolate!important;
  perspective:1200px!important;
  transform-style:preserve-3d!important;
  background:#03142f!important;
  box-shadow:
    inset 0 0 0 1px rgba(65,153,255,.12),
    0 18px 42px rgba(0,0,0,.24),
    0 0 28px rgba(26,119,255,.10)!important;
  contain:layout paint style!important;
}

/* Exact reference image. */
.connections-r42 .r42-orbit-visual::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  display:block!important;
  pointer-events:none!important;
  background:
    url("/assets/botviet-connections-scene-exact-r50.png?v=50.0")
    center center / 100% 100% no-repeat!important;
  transform-origin:50% 58%!important;
  will-change:transform,filter!important;
  backface-visibility:hidden!important;
  animation:r50SceneFloat 8.2s cubic-bezier(.45,.05,.55,.95) infinite!important;
}

/* Moving light sweep — subtle, so the approved colors stay intact. */
.connections-r42 .r42-orbit-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  top:-24%!important;
  bottom:-24%!important;
  left:-28%!important;
  width:10%!important;
  display:block!important;
  pointer-events:none!important;
  transform:rotate(14deg)!important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(99,222,255,.04) 24%,
      rgba(134,236,255,.16) 50%,
      rgba(79,140,255,.04) 76%,
      transparent 100%
    )!important;
  filter:blur(5px)!important;
  mix-blend-mode:screen!important;
  animation:r50LightSweep 8.8s ease-in-out infinite!important;
}

/* The reference image already contains all Facebook/TikTok/TikTok Shop/Shopee
   objects and the central link object. Hide old live overlays to prevent overlap. */
.connections-r42 .r42-orbit-visual .r42-float-platform,
.connections-r42 .r42-orbit-visual .r42-core-wrap,
.connections-r42 .r42-orbit-visual .r42-pedestal,
.connections-r42 .r42-orbit-visual .r42-orbit-badge{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Reuse the existing R42 rings only as a very light moving energy overlay. */
.connections-r42 .r42-orbit-visual .r42-ring{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:57%!important;
  display:block!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:transparent!important;
  transform-style:preserve-3d!important;
  mix-blend-mode:screen!important;
  opacity:.20!important;
  will-change:transform,opacity!important;
}

.connections-r42 .r42-orbit-visual .r42-ring::after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#b9ffff!important;
  box-shadow:
    0 0 7px #8df9ff,
    0 0 16px #48bfff,
    0 0 27px #326fff!important;
}

.connections-r42 .r42-orbit-visual .r42-ring-a{
  width:74%!important;
  height:44%!important;
  border:1px solid rgba(96,201,255,.66)!important;
  box-shadow:0 0 12px rgba(64,178,255,.22)!important;
  animation:r50RingA 9s linear infinite!important;
}
.connections-r42 .r42-orbit-visual .r42-ring-b{
  width:58%!important;
  height:34%!important;
  border:1px solid rgba(111,88,255,.46)!important;
  box-shadow:0 0 11px rgba(108,76,255,.16)!important;
  animation:r50RingB 12.5s linear infinite!important;
}
.connections-r42 .r42-orbit-visual .r42-ring-c{
  width:86%!important;
  height:52%!important;
  border:1px solid rgba(55,145,255,.27)!important;
  box-shadow:0 0 14px rgba(43,134,255,.12)!important;
  animation:r50RingC 16.5s linear infinite!important;
}

/* Tiny particles: enough motion to feel premium, not enough to cover the artwork. */
.connections-r42 .r42-orbit-visual .r42-star-field{
  position:absolute!important;
  z-index:6!important;
  inset:0!important;
  display:block!important;
  pointer-events:none!important;
}
.connections-r42 .r42-orbit-visual .r42-star-field i{
  position:absolute!important;
  display:block!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:#c9ffff!important;
  box-shadow:
    0 0 7px #8ffaff,
    0 0 15px #45bdff,
    0 0 24px #306dff!important;
  animation:r50Star 2.7s ease-in-out infinite!important;
}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(1){left:15%!important;top:31%!important;animation-delay:0s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(2){left:35%!important;top:10%!important;animation-delay:.4s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(3){right:14%!important;top:16%!important;animation-delay:.8s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(4){right:8%!important;top:51%!important;animation-delay:1.2s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(5){left:43%!important;bottom:12%!important;animation-delay:1.6s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(6){right:31%!important;bottom:7%!important;animation-delay:2s!important}

/* Desktop: keep the right scene proportional and inside the existing hero grid. */
@media(min-width:901px){
  .connections-r42 .r42-hero{
    display:grid!important;
    grid-template-columns:minmax(420px,.92fr) minmax(540px,1.08fr)!important;
    gap:28px!important;
    align-items:start!important;
    width:100%!important;
    max-width:1540px!important;
    margin:0 auto 18px!important;
    overflow:visible!important;
  }

  .connections-r42 .r42-hero>.r42-orbit-visual{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Tablet/mobile: stack cleanly, keep exact scene aspect ratio, never distort. */
@media(max-width:900px){
  .connections-r42 .r42-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .connections-r42 .r42-orbit-visual{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:1672 / 941!important;
    min-height:0!important;
    border-radius:22px!important;
  }

  .connections-r42 .r42-orbit-visual::before{
    animation-duration:7s!important;
  }

  .connections-r42 .r42-orbit-visual .r42-ring{
    opacity:.15!important;
  }
}

/* Small phones: reduce overlay intensity to stay smooth and clear. */
@media(max-width:560px){
  .connections-r42 .r42-orbit-visual{
    border-radius:18px!important;
  }

  .connections-r42 .r42-orbit-visual .r42-ring{
    opacity:.10!important;
  }

  .connections-r42 .r42-orbit-visual .r42-star-field i{
    width:3px!important;
    height:3px!important;
  }

  .connections-r42 .r42-orbit-visual::after{
    width:8%!important;
    filter:blur(4px)!important;
  }
}

/* GPU-friendly motion */
@keyframes r50SceneFloat{
  0%,100%{
    transform:perspective(1200px) rotateX(0deg) rotateY(-.55deg) translate3d(0,0,0) scale(1.002);
    filter:brightness(1) saturate(1);
  }
  25%{
    transform:perspective(1200px) rotateX(.45deg) rotateY(.55deg) translate3d(1px,-2px,5px) scale(1.004);
    filter:brightness(1.012) saturate(1.01);
  }
  50%{
    transform:perspective(1200px) rotateX(-.35deg) rotateY(.7deg) translate3d(0,-4px,8px) scale(1.006);
    filter:brightness(1.02) saturate(1.015);
  }
  75%{
    transform:perspective(1200px) rotateX(.25deg) rotateY(-.35deg) translate3d(-1px,-2px,4px) scale(1.004);
    filter:brightness(1.008) saturate(1.008);
  }
}

@keyframes r50LightSweep{
  0%,24%{left:-28%;opacity:0}
  36%{opacity:.70}
  62%{left:118%;opacity:.52}
  72%,100%{left:118%;opacity:0}
}

@keyframes r50RingA{
  0%{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-8deg)}
  100%{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(352deg)}
}
@keyframes r50RingB{
  0%{transform:translate(-50%,-50%) rotateX(71deg) rotateZ(18deg)}
  100%{transform:translate(-50%,-50%) rotateX(71deg) rotateZ(-342deg)}
}
@keyframes r50RingC{
  0%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(33deg)}
  100%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(393deg)}
}
@keyframes r50Star{
  0%,100%{opacity:.16;transform:scale(.62)}
  50%{opacity:.92;transform:scale(1.38)}
}

/* Respect accessibility settings if the device explicitly asks for less motion. */
@media(prefers-reduced-motion:reduce){
  .connections-r42 .r42-orbit-visual::before,
  .connections-r42 .r42-orbit-visual::after,
  .connections-r42 .r42-orbit-visual .r42-ring,
  .connections-r42 .r42-orbit-visual .r42-star-field i{
    animation:none!important;
  }
}