/* ==========================================================
   ICODE MEDIA · SERVICE PLAYGROUND V6.8.1
   Stable V6.8 markup, completely new visual treatment.
   No rectangles. Services become draggable floating orbs.
   ========================================================== */

.v5-hero-stage{
  position:relative;
  overflow:hidden!important;
  isolation:isolate;
}

/* Keep the existing orbit/core that already works. */
.hero-stage-ring{
  border-color:rgba(221,160,110,.18)!important;
  border-style:dashed!important;
}
.hero-stage-center{
  z-index:18!important;
  box-shadow:
    0 0 0 11px rgba(221,160,110,.018),
    0 0 72px rgba(221,160,110,.11)!important;
}

/* Hide the old card metadata and codes. Keep only the full service name. */
.v68-service-node small{
  display:none!important;
}
.v68-service-node>span{
  position:absolute!important;
  right:19%!important;
  bottom:15%!important;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(221,160,110,.10)!important;
  color:transparent!important;
  font-size:0!important;
  pointer-events:none!important;
}
.v68-service-node>span b{
  color:var(--icode-copper,#dda06e)!important;
  font-size:12px!important;
  line-height:1!important;
}

/* Organic glass orbs. Absolutely not another rectangle with rounded corners. */
.v68-service-node{
  --orb-size:190px;
  --orb-accent:rgba(221,160,110,.50);

  width:var(--orb-size)!important;
  height:var(--orb-size)!important;
  min-width:var(--orb-size)!important;
  max-width:var(--orb-size)!important;
  min-height:var(--orb-size)!important;

  padding:26px!important;
  border:1px solid rgba(221,160,110,.24)!important;
  border-radius:50%!important;

  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.085),transparent 22%),
    radial-gradient(circle at 72% 76%,rgba(29,69,126,.18),transparent 34%),
    radial-gradient(circle at 52% 46%,rgba(221,160,110,.075),transparent 63%),
    rgba(8,12,17,.72)!important;

  box-shadow:
    inset 0 0 32px rgba(255,255,255,.018),
    0 22px 55px rgba(0,0,0,.32),
    0 0 0 8px rgba(221,160,110,.018)!important;

  display:grid!important;
  place-content:center!important;
  text-align:center!important;
  overflow:visible!important;

  cursor:grab!important;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease!important;
}

/* Halo ring gives the orb depth without making it a box. */
.v68-service-node:before{
  content:""!important;
  position:absolute!important;
  inset:9px!important;
  width:auto!important;
  height:auto!important;
  right:auto!important;
  top:auto!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-top-color:rgba(221,160,110,.24)!important;
  border-radius:50%!important;
  background:none!important;
  filter:none!important;
  pointer-events:none!important;
  animation:v681-inner-spin 16s linear infinite;
}
.v68-service-node:after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:-9px!important;
  border:1px solid rgba(221,160,110,.08)!important;
  border-radius:50%!important;
  background:none!important;
  filter:none!important;
  opacity:1!important;
  pointer-events:none!important;
}

.v68-service-node strong{
  position:relative!important;
  z-index:3!important;
  max-width:92%!important;
  margin:auto!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
  text-shadow:0 8px 30px rgba(0,0,0,.70)!important;
}

/* Each orb has its own personality and size. */
.v68-service-node.n1{--orb-size:198px!important}
.v68-service-node.n2{--orb-size:218px!important}
.v68-service-node.n3{--orb-size:188px!important}
.v68-service-node.n4{--orb-size:180px!important}
.v68-service-node.n5{--orb-size:218px!important}
.v68-service-node.n6{--orb-size:226px!important}
.v68-service-node.n7{--orb-size:204px!important}
.v68-service-node.n8{--orb-size:232px!important}

/* Replace V6.8's card motion with round-object drift. */
.v68-service-node.n1{animation:v681-orb-a 5.8s ease-in-out infinite!important}
.v68-service-node.n2{animation:v681-orb-b 6.6s ease-in-out -1.0s infinite!important}
.v68-service-node.n3{animation:v681-orb-c 5.2s ease-in-out -.6s infinite!important}
.v68-service-node.n4{animation:v681-orb-d 6.1s ease-in-out -1.8s infinite!important}
.v68-service-node.n5{animation:v681-orb-e 6.8s ease-in-out -1.3s infinite!important}
.v68-service-node.n6{animation:v681-orb-f 5.6s ease-in-out -.4s infinite!important}
.v68-service-node.n7{animation:v681-orb-g 6.0s ease-in-out -2.0s infinite!important}
.v68-service-node.n8{animation:v681-orb-h 6.9s ease-in-out -1.5s infinite!important}

.v68-service-node:hover,
.v68-service-node.v681-selected{
  z-index:45!important;
  border-color:rgba(221,160,110,.72)!important;
  filter:brightness(1.1);
  box-shadow:
    inset 0 0 38px rgba(255,255,255,.028),
    0 32px 80px rgba(0,0,0,.50),
    0 0 0 10px rgba(221,160,110,.035),
    0 0 68px rgba(221,160,110,.15)!important;
}
.v68-service-node.v681-dragging{
  z-index:60!important;
  cursor:grabbing!important;
  animation-play-state:paused!important;
  border-color:rgba(221,160,110,.90)!important;
  box-shadow:
    inset 0 0 38px rgba(255,255,255,.04),
    0 40px 90px rgba(0,0,0,.62),
    0 0 0 12px rgba(221,160,110,.045),
    0 0 86px rgba(221,160,110,.20)!important;
}

/* Tiny instruction chip, injected by JS. */
.v681-play-hint{
  position:absolute;
  z-index:35;
  left:50%;
  top:calc(50% + 70px);
  transform:translateX(-50%);
  min-width:112px;
  padding:7px 11px;
  border:1px solid rgba(221,160,110,.16);
  border-radius:999px;
  background:rgba(5,7,10,.64);
  color:#77818d;
  text-align:center;
  font-size:6px;
  font-weight:850;
  letter-spacing:.12em;
  pointer-events:none;
  backdrop-filter:blur(6px);
}
.v681-reset{
  position:absolute;
  z-index:36;
  left:50%;
  top:calc(50% + 104px);
  transform:translateX(-50%);
  border:0;
  background:transparent;
  color:var(--icode-copper,#dda06e);
  padding:8px 12px;
  font-size:6px;
  font-weight:900;
  letter-spacing:.10em;
  cursor:pointer;
}

/* Drifting animations intentionally use transform only.
   JS moves the orbs by left/top, so dragging and drift can coexist. */
@keyframes v681-orb-a{
  0%,100%{transform:translate3d(-3px,1px,0) rotate(-5deg)}
  32%{transform:translate3d(9px,-10px,0) rotate(-2deg)}
  67%{transform:translate3d(-7px,7px,0) rotate(-6deg)}
}
@keyframes v681-orb-b{
  0%,100%{transform:translate3d(2px,-2px,0) rotate(4deg)}
  34%{transform:translate3d(-10px,9px,0) rotate(6deg)}
  69%{transform:translate3d(8px,-5px,0) rotate(2deg)}
}
@keyframes v681-orb-c{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg)}
  29%{transform:translate3d(8px,8px,0) rotate(4deg)}
  66%{transform:translate3d(-9px,-6px,0) rotate(0deg)}
}
@keyframes v681-orb-d{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  31%{transform:translate3d(-9px,-8px,0) rotate(-5deg)}
  70%{transform:translate3d(8px,8px,0) rotate(-1deg)}
}
@keyframes v681-orb-e{
  0%,100%{transform:translate3d(0,0,0) rotate(4deg)}
  30%{transform:translate3d(8px,-9px,0) rotate(2deg)}
  67%{transform:translate3d(-8px,6px,0) rotate(6deg)}
}
@keyframes v681-orb-f{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  35%{transform:translate3d(-10px,8px,0) rotate(-2deg)}
  70%{transform:translate3d(7px,-8px,0) rotate(-6deg)}
}
@keyframes v681-orb-g{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  32%{transform:translate3d(8px,7px,0) rotate(1deg)}
  69%{transform:translate3d(-7px,-5px,0) rotate(-4deg)}
}
@keyframes v681-orb-h{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg)}
  31%{transform:translate3d(-8px,-8px,0) rotate(4deg)}
  71%{transform:translate3d(7px,6px,0) rotate(0deg)}
}
@keyframes v681-inner-spin{
  to{transform:rotate(360deg)}
}

/* ------------------------------ MOBILE --------------------------- */
@media(max-width:620px){
  .v5-hero-stage{
    height:735px!important;
    min-height:735px!important;
    margin-top:8px!important;
    overflow:hidden!important;
  }

  .hero-stage-ring.r1{
    width:430px!important;
    height:430px!important;
  }
  .hero-stage-ring.r2{
    width:294px!important;
    height:294px!important;
  }
  .hero-stage-center{
    left:50%!important;
    top:50%!important;
    width:108px!important;
    height:108px!important;
  }

  .v68-service-node{
    padding:19px!important;
  }
  .v68-service-node strong{
    font-size:13.5px!important;
    line-height:1.02!important;
  }
  .v68-service-node>span{
    right:18%!important;
    bottom:13%!important;
    width:26px!important;
    height:26px!important;
  }
  .v68-service-node>span b{font-size:11px!important}

  .v68-service-node.n1{--orb-size:137px!important;left:1%!important;top:3%!important;right:auto!important;bottom:auto!important}
  .v68-service-node.n2{--orb-size:151px!important;right:-2%!important;top:2%!important;left:auto!important;bottom:auto!important}
  .v68-service-node.n3{--orb-size:129px!important;left:-3%!important;top:28%!important;right:auto!important;bottom:auto!important}
  .v68-service-node.n4{--orb-size:127px!important;right:-3%!important;top:28%!important;left:auto!important;bottom:auto!important}
  .v68-service-node.n7{--orb-size:139px!important;left:1%!important;top:54%!important;right:auto!important;bottom:auto!important}
  .v68-service-node.n8{--orb-size:158px!important;right:-3%!important;top:52%!important;left:auto!important;bottom:auto!important}
  .v68-service-node.n5{--orb-size:148px!important;left:-1%!important;bottom:1%!important;right:auto!important;top:auto!important}
  .v68-service-node.n6{--orb-size:153px!important;right:-2%!important;bottom:0!important;left:auto!important;top:auto!important}

  .v681-play-hint{
    top:calc(50% + 62px);
    font-size:5.5px;
  }
  .v681-reset{
    top:calc(50% + 93px);
    font-size:5.5px;
  }
}

/* Pause idle drift off-screen, but never while actively dragging. */
.v5-hero-stage.v681-paused .v68-service-node:not(.v681-dragging){
  animation-play-state:paused!important;
}

@media(prefers-reduced-motion:reduce){
  .v68-service-node,
  .v68-service-node:before{
    animation:none!important;
  }
}