/* ==================================================
   JAKSKY MOON MOTION V2
   smooth cinematic movement
   ================================================== */

body.jakMoonV2 .brandHero{
  perspective:1000px !important;
}


/* FOTO UTAMA:
   karakter + bulan + background bergerak bersamaan */
body.jakMoonV2 .jakMoonHeroBgV3{
  transform-origin:56% 38% !important;

  animation:
    jakMoonSceneFloat 20s
    cubic-bezier(.45,.05,.55,.95)
    infinite alternate !important;

  will-change:transform;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transform:translate3d(0,0,0) scale(1.035);
}


/* Cahaya bulan tambahan */
.jakMoonLightV2{
  position:absolute;
  z-index:2;

  width:310px;
  height:310px;

  left:-55px;
  top:50px;

  pointer-events:none;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(130,190,255,.18) 0%,
      rgba(91,150,255,.08) 43%,
      transparent 72%
    );

  opacity:.62;

  animation:
    jakMoonGlowMove 15s
    ease-in-out
    infinite alternate;

  will-change:transform,opacity;
}


/* Cahaya/bintang kecil */
.jakMoonStarsV2{
  position:absolute;
  z-index:3;

  inset:-30px;

  pointer-events:none;

  opacity:.52;

  background-image:
    radial-gradient(circle,rgba(130,210,255,.85) 0 1px,transparent 1.8px),
    radial-gradient(circle,rgba(255,255,255,.65) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(100,155,255,.65) 0 1.2px,transparent 2px);

  background-size:
    87px 87px,
    131px 131px,
    173px 173px;

  background-position:
    15px 20px,
    65px 42px,
    110px 90px;

  animation:
    jakStarsDrift 24s
    linear
    infinite alternate;

  will-change:transform,opacity;
}


/* shimmer kecil di sekitar hero */
.jakMoonSparkV2{
  position:absolute;

  z-index:4;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#bdeaff;

  box-shadow:
    0 0 10px rgba(86,184,255,.85),
    0 0 20px rgba(77,140,255,.45);

  pointer-events:none;

  animation:
    jakSparkFloat 8s
    ease-in-out
    infinite;
}


/* positions */
.jakMoonSparkV2.s1{
  left:14%;
  top:25%;
}

.jakMoonSparkV2.s2{
  right:12%;
  top:35%;

  animation-delay:-2.7s;
}

.jakMoonSparkV2.s3{
  right:24%;
  top:18%;

  width:4px;
  height:4px;

  animation-delay:-5s;
}

.jakMoonSparkV2.s4{
  left:29%;
  top:48%;

  width:5px;
  height:5px;

  animation-delay:-3.8s;
}


/* ==================================================
   ANIMATION
   ================================================== */

@keyframes jakMoonSceneFloat{

  0%{
    transform:
      translate3d(-2px,1px,0)
      scale(1.035);
  }

  25%{
    transform:
      translate3d(2px,-2px,0)
      scale(1.042);
  }

  50%{
    transform:
      translate3d(4px,-5px,0)
      scale(1.048);
  }

  75%{
    transform:
      translate3d(1px,-7px,0)
      scale(1.052);
  }

  100%{
    transform:
      translate3d(-3px,-4px,0)
      scale(1.045);
  }

}


@keyframes jakMoonGlowMove{

  0%{
    transform:
      translate3d(-8px,2px,0)
      scale(.96);

    opacity:.48;
  }

  50%{
    transform:
      translate3d(8px,-8px,0)
      scale(1.04);

    opacity:.72;
  }

  100%{
    transform:
      translate3d(15px,-2px,0)
      scale(1);

    opacity:.55;
  }

}


@keyframes jakStarsDrift{

  0%{
    transform:
      translate3d(-8px,3px,0)
      scale(1);
  }

  100%{
    transform:
      translate3d(12px,-12px,0)
      scale(1.015);
  }

}


@keyframes jakSparkFloat{

  0%,100%{
    transform:
      translate3d(0,4px,0)
      scale(.75);

    opacity:.25;
  }

  45%{
    transform:
      translate3d(4px,-7px,0)
      scale(1.15);

    opacity:.9;
  }

  70%{
    transform:
      translate3d(-3px,-12px,0)
      scale(.9);

    opacity:.55;
  }

}


/* HP */
@media(max-width:768px){

  body.jakMoonV2 .jakMoonHeroBgV3{
    animation-duration:22s !important;
  }

  .jakMoonStarsV2{
    animation-duration:28s;
  }

}


/* Accessibility / HP yang memilih animasi minim */
@media(prefers-reduced-motion:reduce){

  body.jakMoonV2 .jakMoonHeroBgV3,
  .jakMoonLightV2,
  .jakMoonStarsV2,
  .jakMoonSparkV2{
    animation:none !important;
  }

}