/* ==========================================================
   ICODE MEDIA · HERO SERVICE CONSTELLATION V6.8
   Replaces hero portfolio images with all 8 services.
   Motion is transform/opacity only and pauses off-screen.
   ========================================================== */

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

/* Keep the existing ICODE orbit, but make it the center of a service system. */
.hero-stage-ring{
  border-color:rgba(221,160,110,.20)!important;
  border-style:dashed!important;
  will-change:transform;
}
.hero-stage-ring.r1{animation:v68-ring-cw 30s linear infinite!important}
.hero-stage-ring.r2{animation:v68-ring-ccw 22s linear infinite!important}
.hero-stage-center{
  z-index:12!important;
  overflow:visible!important;
  box-shadow:
    0 0 0 12px rgba(221,160,110,.018),
    0 0 78px rgba(221,160,110,.12)!important;
  animation:v68-core 4.8s ease-in-out infinite;
}
.hero-stage-center small{
  letter-spacing:.18em!important;
}
.hero-stage-center b{
  font-size:15px!important;
  line-height:.9!important;
}

/* ----------------------------------------------------------
   Service constellation
   ---------------------------------------------------------- */
.v68-service-field{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
}
.v68-service-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.78;
}
.v68-service-lines i{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:42%;
  transform-origin:50% 0;
  background:linear-gradient(
    180deg,
    rgba(221,160,110,.42),
    rgba(221,160,110,.05) 58%,
    transparent
  );
}
.v68-service-lines .l1{transform:rotate(34deg)}
.v68-service-lines .l2{transform:rotate(116deg)}
.v68-service-lines .l3{transform:rotate(206deg)}
.v68-service-lines .l4{transform:rotate(292deg)}

.v68-service-node{
  --tx:0px;
  --ty:0px;
  --rot:0deg;
  --scale:1;
  position:absolute;
  z-index:10;
  min-width:185px;
  max-width:260px;
  min-height:92px;
  padding:14px 15px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(16,23,34,.94),rgba(7,11,16,.92));
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:11px;
  pointer-events:auto;
  box-shadow:
    0 22px 55px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter:blur(7px);
  transform:
    translate3d(var(--tx),var(--ty),0)
    rotate(var(--rot))
    scale(var(--scale));
  backface-visibility:hidden;
  will-change:transform;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}
.v68-service-node:before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-62px;
  top:-62px;
  border-radius:50%;
  background:rgba(221,160,110,.10);
  filter:blur(20px);
  pointer-events:none;
}
.v68-service-node small,
.v68-service-node strong,
.v68-service-node span{
  position:relative;
  z-index:2;
}
.v68-service-node small{
  color:#65717e;
  font-size:6px;
  font-weight:800;
  letter-spacing:.13em;
}
.v68-service-node strong{
  max-width:92%;
  font-size:17px;
  line-height:1.02;
  letter-spacing:-.035em;
}
.v68-service-node>span{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--icode-copper,#dda06e);
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.v68-service-node>span b{
  font-size:11px;
}
.v68-service-node:hover,
.v68-service-node.v68-active{
  z-index:30;
  border-color:rgba(221,160,110,.48);
  background:linear-gradient(145deg,#111923,#090d13);
  box-shadow:
    0 32px 78px rgba(0,0,0,.48),
    0 0 55px rgba(221,160,110,.11);
}

/* Desktop composition */
.v68-service-node.n1{left:2%;top:7%;--rot:-5deg;animation:v68-node-1 5.8s ease-in-out infinite}
.v68-service-node.n2{right:1%;top:5%;--rot:4deg;animation:v68-node-2 6.7s ease-in-out -1.2s infinite}
.v68-service-node.n3{left:-1%;top:35%;--rot:2deg;animation:v68-node-3 5.4s ease-in-out -.8s infinite}
.v68-service-node.n4{right:-1%;top:34%;--rot:-3deg;animation:v68-node-4 6.2s ease-in-out -1.9s infinite}
.v68-service-node.n5{left:5%;bottom:5%;--rot:4deg;animation:v68-node-5 6.5s ease-in-out -1.4s infinite}
.v68-service-node.n6{right:4%;bottom:6%;--rot:-4deg;animation:v68-node-6 5.6s ease-in-out -.4s infinite}
.v68-service-node.n7{left:29%;top:15%;--rot:-2deg;--scale:.86;animation:v68-node-7 5.9s ease-in-out -2.2s infinite}
.v68-service-node.n8{right:27%;bottom:12%;--rot:2deg;--scale:.86;animation:v68-node-8 6.8s ease-in-out -1.6s infinite}

/* Independent shaking / floating. Noticeable, but not casino signage. */
@keyframes v68-node-1{
  0%,100%{transform:translate3d(-2px,1px,0) rotate(-5deg) scale(1)}
  28%{transform:translate3d(10px,-9px,0) rotate(-2.8deg) scale(1.025)}
  60%{transform:translate3d(-5px,8px,0) rotate(-6.4deg) scale(.99)}
}
@keyframes v68-node-2{
  0%,100%{transform:translate3d(1px,-2px,0) rotate(4deg) scale(1)}
  33%{transform:translate3d(-9px,10px,0) rotate(6deg) scale(1.018)}
  68%{transform:translate3d(8px,-5px,0) rotate(2.2deg) scale(.995)}
}
@keyframes v68-node-3{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg) scale(1)}
  26%{transform:translate3d(8px,8px,0) rotate(4.2deg) scale(1.02)}
  64%{transform:translate3d(-9px,-6px,0) rotate(.2deg) scale(.992)}
}
@keyframes v68-node-4{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg) scale(1)}
  31%{transform:translate3d(-9px,-8px,0) rotate(-5deg) scale(1.018)}
  72%{transform:translate3d(8px,8px,0) rotate(-1deg) scale(.99)}
}
@keyframes v68-node-5{
  0%,100%{transform:translate3d(0,0,0) rotate(4deg) scale(1)}
  29%{transform:translate3d(8px,-10px,0) rotate(1.8deg) scale(.99)}
  63%{transform:translate3d(-8px,6px,0) rotate(5.7deg) scale(1.02)}
}
@keyframes v68-node-6{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg) scale(1)}
  35%{transform:translate3d(-10px,8px,0) rotate(-2deg) scale(1.022)}
  69%{transform:translate3d(7px,-8px,0) rotate(-5.5deg) scale(.992)}
}
@keyframes v68-node-7{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg) scale(.86)}
  32%{transform:translate3d(8px,8px,0) rotate(.5deg) scale(.89)}
  68%{transform:translate3d(-7px,-5px,0) rotate(-3.8deg) scale(.845)}
}
@keyframes v68-node-8{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg) scale(.86)}
  30%{transform:translate3d(-8px,-8px,0) rotate(4deg) scale(.885)}
  70%{transform:translate3d(7px,6px,0) rotate(.2deg) scale(.845)}
}
@keyframes v68-ring-cw{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes v68-ring-ccw{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0)}
}
@keyframes v68-core{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.055)}
}

/* Small center feedback when a service is touched. */
.hero-stage-center.v68-ping{
  box-shadow:
    0 0 0 13px rgba(221,160,110,.04),
    0 0 92px rgba(221,160,110,.24)!important;
}
.hero-stage-center.v68-ping b{
  color:var(--icode-copper,#dda06e);
}

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

  .hero-stage-ring.r1{
    width:420px!important;
    height:420px!important;
  }
  .hero-stage-ring.r2{
    width:290px!important;
    height:290px!important;
  }
  .hero-stage-center{
    left:50%!important;
    top:51%!important;
    width:105px!important;
    height:105px!important;
  }

  .v68-service-node{
    min-width:0;
    min-height:72px;
    max-width:none;
    padding:10px 11px;
    border-radius:13px;
    backdrop-filter:blur(5px);
  }
  .v68-service-node small{font-size:5px}
  .v68-service-node strong{font-size:13px}
  .v68-service-node>span{font-size:5.5px;padding-top:7px}

  /* 8 nodes around the orbit, all visible without the huge dead zone. */
  .v68-service-node.n1{left:1%;top:5%;width:45%;--rot:-5deg}
  .v68-service-node.n2{right:0;top:4%;width:46%;--rot:4deg}
  .v68-service-node.n3{left:-2%;top:28%;width:41%;--rot:2deg}
  .v68-service-node.n4{right:-2%;top:28%;width:42%;--rot:-3deg}
  .v68-service-node.n5{left:0;bottom:6%;width:45%;--rot:4deg}
  .v68-service-node.n6{right:0;bottom:6%;width:46%;--rot:-4deg}
  .v68-service-node.n7{left:5%;top:57%;width:38%;--rot:-2deg;--scale:.88}
  .v68-service-node.n8{right:5%;top:57%;width:39%;--rot:2deg;--scale:.88}

  .v68-service-lines i{height:39%}
}

/* Pause motion when the stage is not near the viewport. */
.v5-hero-stage.v68-paused .v68-service-node,
.v5-hero-stage.v68-paused .hero-stage-ring,
.v5-hero-stage.v68-paused .hero-stage-center{
  animation-play-state:paused!important;
}

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