/* ============================================================
   BOTVIET CONNECTION HERO EXACT R45
   Scope: ONLY the TOP hero area of /app/connections on desktop.
   Reference asset is cropped directly from the user's approved design.
   Does NOT touch the 4 platform cards, sync board, menu, topbar or backend.
   ============================================================ */

@media (min-width:901px){
  .connections-r42 .r42-hero{
    position:relative!important;
    isolation:isolate!important;
    display:block!important;
    width:calc(100% + 36px)!important;
    max-width:none!important;
    aspect-ratio:1672/395!important;
    min-height:0!important;
    height:auto!important;
    margin:-16px -18px 18px!important;
    overflow:hidden!important;
    border-radius:0!important;
    background:
      url("/assets/botviet-connections-hero-exact-r45.png?v=45.0")
      center center / 100% 100% no-repeat!important;
    box-shadow:none!important;
  }

  /* Hide the old generated hero objects only visually.
     They remain in source so no other renderer/function is touched. */
  .connections-r42 .r42-hero>.r42-hero-copy,
  .connections-r42 .r42-hero>.r42-orbit-visual{
    position:absolute!important;
    inset:0!important;
    width:1px!important;
    height:1px!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }

  /* Premium motion layer: very subtle so the approved reference stays pixel-faithful. */
  .connections-r42 .r42-hero::before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    pointer-events:none!important;
    inset:-20% -16%!important;
    background:
      radial-gradient(circle at 67% 46%,rgba(52,161,255,.12),transparent 18%),
      radial-gradient(circle at 83% 24%,rgba(75,102,255,.08),transparent 16%)!important;
    mix-blend-mode:screen!important;
    opacity:.38!important;
    animation:r45HeroGlow 5.8s ease-in-out infinite!important;
  }

  .connections-r42 .r42-hero::after{
    content:""!important;
    position:absolute!important;
    z-index:3!important;
    pointer-events:none!important;
    top:-45%!important;
    bottom:-45%!important;
    left:-24%!important;
    width:15%!important;
    transform:rotate(13deg)!important;
    background:
      linear-gradient(90deg,transparent,rgba(104,221,255,.075),transparent)!important;
    filter:blur(3px)!important;
    animation:r45HeroSweep 8.6s ease-in-out infinite!important;
  }

  /* Keep the exact reference crisp and prevent inherited R42 layout rules. */
  .connections-r42 .r42-hero,
  .connections-r42 .r42-hero *{
    box-sizing:border-box!important;
  }
}

@keyframes r45HeroGlow{
  0%,100%{opacity:.26;transform:scale(.985)}
  50%{opacity:.48;transform:scale(1.015)}
}

@keyframes r45HeroSweep{
  0%,25%{left:-24%;opacity:0}
  38%{opacity:1}
  63%{left:108%;opacity:.8}
  72%,100%{left:108%;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .connections-r42 .r42-hero::before,
  .connections-r42 .r42-hero::after{
    animation:none!important;
  }
}