/* ============================================================
   BOTVIET CONNECTION ORBIT 3D R46
   Scope: ONLY the upper hero/orbit visual of /app/connections.
   Works after R42 + R45 and does not change the four platform cards.
   ============================================================ */

/* Restore live hero structure that R45 visually hid. R46 overrides it later. */
.connections-r42 .r42-hero{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(420px,.92fr) minmax(540px,1.08fr)!important;
  gap:28px!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:1540px!important;
  aspect-ratio:auto!important;
  min-height:390px!important;
  height:auto!important;
  margin:0 auto 18px!important;
  overflow:visible!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

.connections-r42 .r42-hero::before,
.connections-r42 .r42-hero::after{
  content:none!important;
  display:none!important;
}

.connections-r42 .r42-hero>.r42-hero-copy,
.connections-r42 .r42-hero>.r42-orbit-visual{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:initial!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  overflow:visible!important;
}

/* Keep left copy exactly as live HTML; only restore its original spacing. */
.connections-r42 .r42-hero>.r42-hero-copy{
  padding:14px 6px 0 10px!important;
}

/* ============================================================
   Exact reference scene + 3D animated overlays
   ============================================================ */
.connections-r42 .r42-orbit-visual{
  position:relative!important;
  min-height:390px!important;
  overflow:visible!important;
  perspective:1100px!important;
  transform-style:preserve-3d!important;
  background:none!important;
  border-radius:30px!important;
  contain:layout paint style!important;
}

/* Exact visual from the approved reference screenshot. */
.connections-r42 .r42-orbit-visual::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:4px 0 0!important;
  border-radius:28px!important;
  pointer-events:none!important;
  background:
    url("/assets/botviet-connections-orbit-reference-r46.png?v=46.0")
    center center / 100% 100% no-repeat!important;
  transform-origin:50% 58%!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,filter!important;
  filter:
    saturate(1.06)
    contrast(1.03)
    drop-shadow(0 24px 30px rgba(0,0,0,.24))!important;
  animation:r46Scene3D 7.4s cubic-bezier(.45,.05,.55,.95) infinite!important;
}

/* Moving light sweep on top of the exact image. */
.connections-r42 .r42-orbit-visual::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:9!important;
  pointer-events:none!important;
  top:-18%!important;
  bottom:-18%!important;
  left:-35%!important;
  width:16%!important;
  border-radius:50%!important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(95,216,255,.02) 20%,
      rgba(119,231,255,.17) 50%,
      rgba(83,135,255,.05) 78%,
      transparent
    )!important;
  filter:blur(4px)!important;
  transform:rotate(16deg)!important;
  mix-blend-mode:screen!important;
  animation:r46LightSweep 7.8s ease-in-out infinite!important;
}

/* Hide duplicated reference labels/pedestal elements generated by R42. */
.connections-r42 .r42-orbit-visual .r42-orbit-badge,
.connections-r42 .r42-orbit-visual .r42-pedestal{
  display:none!important;
}

/* ============================================================
   3D orbit rings — separate movement over the reference image
   ============================================================ */
.connections-r42 .r42-orbit-visual .r42-ring{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:55%!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:transparent!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,filter,opacity!important;
  mix-blend-mode:screen!important;
  opacity:.58!important;
}

.connections-r42 .r42-orbit-visual .r42-ring::after{
  content:""!important;
  position:absolute!important;
  display:block!important;
  width:11px!important;
  height:11px!important;
  border-radius:50%!important;
  background:#a5fbff!important;
  box-shadow:
    0 0 9px #74eeff,
    0 0 20px #3eafff,
    0 0 34px #286eff!important;
}

.connections-r42 .r42-orbit-visual .r42-ring-a{
  width:76%!important;
  height:43%!important;
  border:2px solid rgba(73,183,255,.78)!important;
  box-shadow:0 0 18px rgba(48,173,255,.42),inset 0 0 15px rgba(57,137,255,.18)!important;
  animation:r46RingA 6.8s linear infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-ring-b{
  width:62%!important;
  height:31%!important;
  border:2px solid rgba(116,91,255,.58)!important;
  box-shadow:0 0 16px rgba(92,74,255,.25)!important;
  animation:r46RingB 9.6s linear infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-ring-c{
  width:86%!important;
  height:51%!important;
  border:1px solid rgba(51,142,255,.32)!important;
  box-shadow:0 0 22px rgba(36,126,255,.18)!important;
  animation:r46RingC 13.5s linear infinite!important;
}

/* ============================================================
   Platform icon overlays — cover the static reference icons and
   add independent float/rotateY/rotateZ motion.
   ============================================================ */
.connections-r42 .r42-orbit-visual .r42-float-platform{
  display:grid!important;
  position:absolute!important;
  z-index:7!important;
  width:78px!important;
  height:78px!important;
  place-items:center!important;
  margin:0!important;
  pointer-events:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,filter!important;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.34))!important;
}

.connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon{
  width:78px!important;
  height:78px!important;
  border-radius:20px!important;
  border:1px solid rgba(130,223,255,.34)!important;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.07),
    0 0 24px rgba(37,148,255,.34)!important;
}

.connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon svg{
  width:52px!important;
  height:52px!important;
}

/* Positions tuned to the user's approved right-side scene. */
.connections-r42 .r42-orbit-visual .r42-float-platform.r42-fb{
  left:19.5%!important;
  right:auto!important;
  top:25%!important;
  bottom:auto!important;
  animation:r46Facebook 5.6s ease-in-out infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok{
  left:36.5%!important;
  right:auto!important;
  top:5.5%!important;
  bottom:auto!important;
  animation:r46TikTok 6.2s ease-in-out infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok-shop{
  left:auto!important;
  right:31.5%!important;
  top:20.5%!important;
  bottom:auto!important;
  animation:r46TikTokShop 5.9s ease-in-out infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-float-platform.r42-shopee{
  left:auto!important;
  right:13.5%!important;
  top:34%!important;
  bottom:auto!important;
  animation:r46Shopee 6.6s ease-in-out infinite!important;
}

/* Central link icon overlay — levitates over the static central cube. */
.connections-r42 .r42-orbit-visual .r42-core-wrap{
  display:block!important;
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:57%!important;
  width:112px!important;
  height:112px!important;
  min-width:0!important;
  min-height:0!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  perspective:700px!important;
}

.connections-r42 .r42-orbit-visual .r42-core{
  position:absolute!important;
  inset:0!important;
  width:112px!important;
  height:112px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:28px!important;
  color:#bdfbff!important;
  background:
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.24),transparent 30%),
    linear-gradient(145deg,rgba(21,92,241,.94),rgba(29,163,255,.96))!important;
  border:1px solid rgba(125,234,255,.72)!important;
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.10),
    0 0 32px rgba(43,173,255,.58),
    0 22px 42px rgba(0,0,0,.30)!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,filter!important;
  animation:r46Core3D 4.8s ease-in-out infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-core svg{
  width:62px!important;
  height:62px!important;
  fill:none!important;
  stroke:#c6fbff!important;
  stroke-width:3!important;
  filter:drop-shadow(0 0 8px rgba(78,224,255,.46))!important;
}

/* ============================================================
   Star particles / energy pulses
   ============================================================ */
.connections-r42 .r42-orbit-visual .r42-star-field{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
  pointer-events:none!important;
}

.connections-r42 .r42-orbit-visual .r42-star-field i{
  display:block!important;
  position:absolute!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#b6feff!important;
  box-shadow:
    0 0 8px #87f5ff,
    0 0 18px #45baff,
    0 0 34px #356cff!important;
  animation:r46Star 2.5s ease-in-out infinite!important;
}

.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(1){left:10%!important;top:35%!important;animation-delay:0s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(2){left:29%!important;top:12%!important;animation-delay:.42s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(3){right:11%!important;top:18%!important;animation-delay:.84s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(4){right:5%!important;top:54%!important;animation-delay:1.24s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(5){left:38%!important;bottom:14%!important;animation-delay:1.62s!important}
.connections-r42 .r42-orbit-visual .r42-star-field i:nth-child(6){right:31%!important;bottom:7%!important;animation-delay:1.98s!important}

/* ============================================================
   Animations
   ============================================================ */
@keyframes r46Scene3D{
  0%,100%{
    transform:perspective(1100px) rotateX(0deg) rotateY(-1.5deg) translateZ(0) scale(1.008);
    filter:saturate(1.06) contrast(1.03) brightness(.98) drop-shadow(0 24px 30px rgba(0,0,0,.24));
  }
  25%{
    transform:perspective(1100px) rotateX(1.2deg) rotateY(1.5deg) translateZ(8px) scale(1.014);
    filter:saturate(1.10) contrast(1.04) brightness(1.03) drop-shadow(0 27px 34px rgba(0,0,0,.25));
  }
  50%{
    transform:perspective(1100px) rotateX(-1deg) rotateY(2deg) translateZ(12px) scale(1.016);
    filter:saturate(1.12) contrast(1.04) brightness(1.05) drop-shadow(0 30px 36px rgba(0,0,0,.26));
  }
  75%{
    transform:perspective(1100px) rotateX(.8deg) rotateY(-1deg) translateZ(6px) scale(1.012);
    filter:saturate(1.08) contrast(1.03) brightness(1.01) drop-shadow(0 26px 33px rgba(0,0,0,.25));
  }
}

@keyframes r46LightSweep{
  0%,22%{left:-35%;opacity:0}
  35%{opacity:.9}
  61%{left:118%;opacity:.8}
  70%,100%{left:118%;opacity:0}
}

@keyframes r46RingA{
  0%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-8deg)}
  100%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(352deg)}
}
@keyframes r46RingB{
  0%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(18deg) rotateY(4deg)}
  100%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-342deg) rotateY(4deg)}
}
@keyframes r46RingC{
  0%{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(33deg)}
  100%{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(393deg)}
}

@keyframes r46Facebook{
  0%,100%{transform:translate3d(0,0,22px) rotateX(0deg) rotateY(-8deg) rotateZ(-5deg) scale(1.03)}
  50%{transform:translate3d(8px,-12px,52px) rotateX(7deg) rotateY(15deg) rotateZ(3deg) scale(1.09)}
}
@keyframes r46TikTok{
  0%,100%{transform:translate3d(0,0,38px) rotateX(-2deg) rotateY(8deg) rotateZ(0deg) scale(1.02)}
  50%{transform:translate3d(-5px,-14px,65px) rotateX(8deg) rotateY(-16deg) rotateZ(-4deg) scale(1.08)}
}
@keyframes r46TikTokShop{
  0%,100%{transform:translate3d(0,0,28px) rotateX(1deg) rotateY(-6deg) rotateZ(4deg) scale(1.02)}
  50%{transform:translate3d(9px,-10px,58px) rotateX(-7deg) rotateY(15deg) rotateZ(-4deg) scale(1.08)}
}
@keyframes r46Shopee{
  0%,100%{transform:translate3d(0,0,18px) rotateX(0deg) rotateY(8deg) rotateZ(5deg) scale(1.02)}
  50%{transform:translate3d(-7px,-13px,52px) rotateX(8deg) rotateY(-17deg) rotateZ(-3deg) scale(1.08)}
}

@keyframes r46Core3D{
  0%,100%{transform:translate3d(0,0,28px) rotateX(-3deg) rotateY(-5deg) rotateZ(0deg) scale(1)}
  50%{transform:translate3d(0,-10px,65px) rotateX(7deg) rotateY(9deg) rotateZ(1deg) scale(1.06)}
}

@keyframes r46Star{
  0%,100%{opacity:.20;transform:scale(.55) translateZ(0)}
  50%{opacity:1;transform:scale(1.55) translateZ(30px)}
}

/* ============================================================
   Tablet/mobile: same 3D scene, responsive and GPU-friendly
   ============================================================ */
@media(max-width:900px){
  .connections-r42 .r42-hero{
    grid-template-columns:1fr!important;
    gap:14px!important;
    min-height:0!important;
  }

  .connections-r42 .r42-hero>.r42-hero-copy{
    padding:10px 2px 0!important;
  }

  .connections-r42 .r42-orbit-visual{
    width:100%!important;
    min-height:245px!important;
    aspect-ratio:823/368!important;
    overflow:hidden!important;
    border-radius:24px!important;
    perspective:900px!important;
  }

  .connections-r42 .r42-orbit-visual::before{
    inset:0!important;
    background-size:100% 100%!important;
    border-radius:24px!important;
    animation-duration:6.6s!important;
  }

  .connections-r42 .r42-orbit-visual .r42-float-platform{
    width:58px!important;height:58px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon{
    width:58px!important;height:58px!important;border-radius:16px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon svg{
    width:38px!important;height:38px!important;
  }

  .connections-r42 .r42-orbit-visual .r42-core-wrap{
    width:84px!important;height:84px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-core{
    width:84px!important;height:84px!important;border-radius:22px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-core svg{
    width:47px!important;height:47px!important;
  }
}

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

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

  .connections-r42 .r42-orbit-visual .r42-float-platform{
    width:48px!important;height:48px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon{
    width:48px!important;height:48px!important;border-radius:13px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform .connection-platform-icon svg{
    width:31px!important;height:31px!important;
  }

  .connections-r42 .r42-orbit-visual .r42-core-wrap{
    width:68px!important;height:68px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-core{
    width:68px!important;height:68px!important;border-radius:18px!important;
  }
  .connections-r42 .r42-orbit-visual .r42-core svg{
    width:39px!important;height:39px!important;
  }

  /* Slightly reduce travel on small mobile screens, still visibly 3D. */
  @keyframes r46Facebook{
    0%,100%{transform:translate3d(0,0,14px) rotateY(-7deg) rotateZ(-4deg) scale(1.02)}
    50%{transform:translate3d(5px,-7px,34px) rotateX(5deg) rotateY(13deg) rotateZ(2deg) scale(1.07)}
  }
  @keyframes r46TikTok{
    0%,100%{transform:translate3d(0,0,18px) rotateY(7deg) scale(1.02)}
    50%{transform:translate3d(-3px,-8px,38px) rotateX(6deg) rotateY(-13deg) rotateZ(-3deg) scale(1.07)}
  }
  @keyframes r46TikTokShop{
    0%,100%{transform:translate3d(0,0,15px) rotateY(-5deg) rotateZ(3deg) scale(1.02)}
    50%{transform:translate3d(5px,-6px,35px) rotateX(-5deg) rotateY(12deg) rotateZ(-3deg) scale(1.07)}
  }
  @keyframes r46Shopee{
    0%,100%{transform:translate3d(0,0,12px) rotateY(6deg) rotateZ(4deg) scale(1.02)}
    50%{transform:translate3d(-4px,-7px,32px) rotateX(6deg) rotateY(-13deg) rotateZ(-2deg) scale(1.07)}
  }
}

/* Accessibility / battery friendliness */
@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-float-platform,
  .connections-r42 .r42-orbit-visual .r42-core,
  .connections-r42 .r42-orbit-visual .r42-star-field i{
    animation:none!important;
  }
}