/* ============================================================
   BOTVIET CONNECTION ORBIT OVERLAP FIX R48
   Scope: ONLY upper orbit scene on /app/connections.
   Fixes duplicated/overlapping platform icons introduced by R46.
   ============================================================ */

/*
  R46 uses an approved reference image that ALREADY contains:
  Facebook, TikTok, TikTok Shop, Shopee and the central link block.
  It then overlaid the same live icons again, causing the exact
  double/stacked effect visible in the user's screenshot.

  R48 keeps the approved reference scene + scene 3D movement,
  light sweep, particles and orbit glow, but removes only the
  duplicated icon/core overlays.
*/

/* Remove ONLY duplicated live overlays that sit on top of the reference image. */
.connections-r42 .r42-orbit-visual .r42-float-platform,
.connections-r42 .r42-orbit-visual .r42-core-wrap{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Keep the original reference scene centered and prevent clipping. */
.connections-r42 .r42-orbit-visual{
  position:relative!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  perspective:1100px!important;
  background:none!important;
}

/* Make the approved scene itself feel alive without creating duplicates. */
.connections-r42 .r42-orbit-visual::before{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:28px!important;
  background:
    url("/assets/botviet-connections-orbit-reference-r46.png?v=48.0")
    center center / 100% 100% no-repeat!important;
  transform-origin:50% 58%!important;
  animation:r48SceneFloat 7.2s cubic-bezier(.45,.05,.55,.95) infinite!important;
  filter:
    saturate(1.05)
    contrast(1.02)
    brightness(1.01)
    drop-shadow(0 20px 28px rgba(0,0,0,.22))!important;
}

/* Softer sweep — no large white band over the icons. */
.connections-r42 .r42-orbit-visual::after{
  z-index:8!important;
  top:-16%!important;
  bottom:-16%!important;
  left:-30%!important;
  width:11%!important;
  opacity:.7!important;
  background:
    linear-gradient(90deg,transparent,rgba(99,220,255,.10),transparent)!important;
  filter:blur(5px)!important;
  mix-blend-mode:screen!important;
  animation:r48LightSweep 8.4s ease-in-out infinite!important;
}

/* Keep moving rings, but make them thinner/subtler so they enrich the scene
   instead of drawing a second heavy orbit on top of the reference image. */
.connections-r42 .r42-orbit-visual .r42-ring{
  z-index:4!important;
  opacity:.34!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}

.connections-r42 .r42-orbit-visual .r42-ring-a{
  border-width:1px!important;
  box-shadow:
    0 0 10px rgba(56,178,255,.28),
    inset 0 0 8px rgba(56,154,255,.10)!important;
  animation:r48RingA 8.4s linear infinite!important;
}
.connections-r42 .r42-orbit-visual .r42-ring-b{
  border-width:1px!important;
  box-shadow:0 0 10px rgba(103,82,255,.18)!important;
  animation:r48RingB 11.4s linear infinite!important;
}
.connections-r42 .r42-orbit-visual .r42-ring-c{
  border-width:1px!important;
  box-shadow:0 0 12px rgba(44,137,255,.12)!important;
  animation:r48RingC 15.5s linear infinite!important;
}

/* Orbit particles stay visible, but reduced so they don't collide visually. */
.connections-r42 .r42-orbit-visual .r42-star-field{
  z-index:6!important;
}
.connections-r42 .r42-orbit-visual .r42-star-field i{
  width:4px!important;
  height:4px!important;
  box-shadow:
    0 0 7px #86f4ff,
    0 0 14px #43b6ff,
    0 0 24px #326dff!important;
  animation:r48Star 2.7s ease-in-out infinite!important;
}

/* Hide the R42 badges because the approved reference already contains them.
   This also removes any accidental double label overlap. */
.connections-r42 .r42-orbit-visual .r42-orbit-badge{
  display:none!important;
  visibility:hidden!important;
}

/* Keep pedestal overlays hidden; the reference already contains the 3D podium. */
.connections-r42 .r42-orbit-visual .r42-pedestal{
  display:none!important;
}

/* Desktop exact sizing */
@media(min-width:901px){
  .connections-r42 .r42-orbit-visual{
    min-height:390px!important;
    border-radius:28px!important;
  }
}

/* Tablet/mobile: same clean scene, no duplicated overlays. */
@media(max-width:900px){
  .connections-r42 .r42-orbit-visual{
    width:100%!important;
    min-height:245px!important;
    aspect-ratio:823/368!important;
    border-radius:23px!important;
  }

  .connections-r42 .r42-orbit-visual::before{
    border-radius:23px!important;
    animation-duration:6.5s!important;
  }

  .connections-r42 .r42-ring{
    opacity:.28!important;
  }
}

@media(max-width:560px){
  .connections-r42 .r42-orbit-visual{
    min-height:200px!important;
    border-radius:19px!important;
  }

  .connections-r42 .r42-orbit-visual::before{
    border-radius:19px!important;
  }

  .connections-r42 .r42-ring{
    opacity:.22!important;
  }

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

/* Clean 3D movement for the complete approved scene. */
@keyframes r48SceneFloat{
  0%,100%{
    transform:perspective(1100px) rotateX(0deg) rotateY(-.7deg) translate3d(0,0,0) scale(1.004);
  }
  25%{
    transform:perspective(1100px) rotateX(.7deg) rotateY(.7deg) translate3d(1px,-3px,7px) scale(1.008);
  }
  50%{
    transform:perspective(1100px) rotateX(-.5deg) rotateY(1deg) translate3d(0,-5px,10px) scale(1.010);
  }
  75%{
    transform:perspective(1100px) rotateX(.4deg) rotateY(-.5deg) translate3d(-1px,-2px,5px) scale(1.007);
  }
}

@keyframes r48LightSweep{
  0%,26%{left:-30%;opacity:0}
  39%{opacity:.65}
  62%{left:116%;opacity:.5}
  72%,100%{left:116%;opacity:0}
}

@keyframes r48RingA{
  0%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-8deg)}
  100%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(352deg)}
}
@keyframes r48RingB{
  0%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(18deg)}
  100%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-342deg)}
}
@keyframes r48RingC{
  0%{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(33deg)}
  100%{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(393deg)}
}
@keyframes r48Star{
  0%,100%{opacity:.18;transform:scale(.65)}
  50%{opacity:.90;transform:scale(1.35)}
}

@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;
  }
}