/* =====================================================
   JAKSKY PHOTO 3 MOTION FINAL
   Tampilan tetap seperti foto nomor 3
   Hero image bergerak halus
   Text / tombol / grid tetap diam
===================================================== */


/* HERO */
body.jakMoonV2 .brandHero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}


/* =====================================================
   FOTO HERO ASLI
   Killua + bulan + langit bergerak bersama
===================================================== */

body.jakMoonV2 .jakMoonHeroBgV3{
  position:absolute !important;
  inset:-10px !important;

  width:calc(100% + 20px) !important;
  height:calc(100% + 20px) !important;

  object-fit:cover !important;
  object-position:50% 16% !important;

  z-index:0 !important;

  transform-origin:56% 38% !important;

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

  will-change:transform;

  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;

  pointer-events:none !important;
}


/* =====================================================
   DARK SHADE
===================================================== */

body.jakMoonV2 .jakMoonHeroShadeV3{
  position:absolute !important;
  inset:0 !important;

  z-index:1 !important;

  background:
    linear-gradient(
      180deg,
      rgba(0,6,24,.05) 0%,
      rgba(0,7,28,.02) 35%,
      rgba(0,8,30,.22) 57%,
      rgba(0,8,30,.65) 80%,
      #03102a 100%
    ) !important;

  pointer-events:none !important;
}


/* =====================================================
   SEMUA TEXT & BUTTON HARUS DIAM
===================================================== */

body.jakMoonV2 .jakMoonTopV3,
body.jakMoonV2 .jakMoonHeroCopyV2{
  position:absolute !important;
  z-index:10 !important;

  transform:none !important;
  animation:none !important;
}


/* TOP HEADER */
body.jakMoonV2 .jakMoonTopV3{
  top:0 !important;
  left:0 !important;
  right:0 !important;

  padding:16px 18px 0 !important;
}


/* LOGO ATAS */
body.jakMoonV2 .jakMoonBrandV3 .brandLogo{
  opacity:1 !important;
  visibility:visible !important;

  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,.85))
    !important;
}


/* JakSky atas biar jelas */
body.jakMoonV2 .jakMoonBrandV3 .jakTextV31{
  opacity:1 !important;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 32%,
      #73ceff 67%,
      #788cff 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;

  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,.9))
    drop-shadow(0 0 6px rgba(69,167,255,.22))
    !important;
}


/* subtitle atas */
body.jakMoonV2 .jakMoonBrandV3 .brandSub{
  color:#f2f6ff !important;
  -webkit-text-fill-color:#f2f6ff !important;

  opacity:1 !important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.95)
    !important;
}


/* =====================================================
   TEKS BESAR
===================================================== */

body.jakMoonV2 .jakMoonHeroCopyV2{
  left:38px !important;
  right:24px !important;
  bottom:35px !important;

  max-width:340px !important;
}


/* JakSky besar */
body.jakMoonV2 .jakMoonHeroCopyV2 h1{
  color:#fff !important;

  -webkit-text-fill-color:#fff !important;

  background:none !important;

  opacity:1 !important;

  font-size:54px !important;
  line-height:.95 !important;

  font-weight:900 !important;

  text-shadow:
    0 3px 12px rgba(0,0,0,.58)
    !important;

  filter:none !important;
}


/* tagline */
body.jakMoonV2
.jakMoonHeroCopyV2
.jakMoonTagline{

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  opacity:1 !important;

  text-shadow:
    0 3px 9px rgba(0,0,0,.9)
    !important;
}


/* fitur */
body.jakMoonV2
.jakMoonFeaturesV2 span{

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  opacity:1 !important;

  text-shadow:
    0 2px 7px rgba(0,0,0,.9)
    !important;
}


/* =====================================================
   PARTICLES
===================================================== */

body.jakMoonV2 .jakMoonStarsV2{
  z-index:3 !important;

  animation:
    jakPhoto3Stars 24s
    linear
    infinite alternate !important;
}


body.jakMoonV2 .jakMoonLightV2{
  z-index:2 !important;

  animation:
    jakPhoto3MoonGlow 12s
    ease-in-out
    infinite alternate !important;
}


/* =====================================================
   MOTION
===================================================== */

@keyframes jakPhoto3SceneMotion{

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

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

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

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

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


@keyframes jakPhoto3Stars{

  from{
    transform:
      translate3d(-4px,3px,0);
  }

  to{
    transform:
      translate3d(8px,-9px,0);
  }
}


@keyframes jakPhoto3MoonGlow{

  0%{
    transform:
      translate3d(-4px,2px,0)
      scale(.98);

    opacity:.45;
  }

  100%{
    transform:
      translate3d(7px,-5px,0)
      scale(1.04);

    opacity:.68;
  }
}


/* =====================================================
   PENTING:
   PNG KILLUA BARU DISEMBUNYIKAN
   supaya tidak jadi dua karakter
===================================================== */

body.jakMoonV2 .jakKilluaLayer{
  display:none !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:520px){

  body.jakMoonV2 .jakMoonHeroBgV3{
    object-position:50% 16% !important;

    animation-duration:20s !important;
  }

  body.jakMoonV2 .jakMoonHeroCopyV2{
    left:38px !important;
    right:22px !important;
    bottom:32px !important;
  }

}


/* GRID VIDEO SENGAJA TIDAK DISENTUH */