/* ==========================================================================
   ANIMASI SELURUH SITUS (beranda + halaman dalam).
   Dipasangkan dengan js/animasi.js. Hapus kedua file ini beserta link-nya
   untuk mengembalikan situs tanpa animasi tambahan.
   Memakai properti translate / scale / rotate (bukan transform) supaya tidak
   bentrok dengan efek lama (chip miring, tilt kartu, dsb).
   ========================================================================== */

:root {
  --ez: cubic-bezier(0.16, 1, 0.3, 1);
  --ez-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 1. masuk saat terlihat (diberi kelas oleh animasi.js) ---------- */
html.anim-on .a-pre {
  opacity: 0;
  translate: 0 28px;
}
html.anim-on .a-pre[data-a="left"]  { translate: -34px 0; }
html.anim-on .a-pre[data-a="right"] { translate: 34px 0; }
html.anim-on .a-pre[data-a="down"]  { translate: 0 -20px; }
html.anim-on .a-pre[data-a="zoom"]  { scale: 0.86; }
html.anim-on .a-pre[data-a="pop"]   { scale: 0.55; translate: 0 10px; }
html.anim-on .a-pre[data-a="fade"]  { translate: none; }
html.anim-on .a-pre.a-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 0.8s ease,
    translate 0.9s var(--ez),
    scale 0.8s var(--ez-pop);
  transition-delay: var(--d, 0s);
}

/* ---------- 2. beranda: header dan judul hero ---------- */
.brand img,
.navbar-brand img {
  animation: logo-in 1.1s var(--ez-pop) 0.1s backwards;
}
@keyframes logo-in {
  from { rotate: -200deg; scale: 0.3; opacity: 0; }
}
.brand:hover img,
.navbar-brand:hover img {
  rotate: 360deg;
  transition: rotate 0.8s var(--ez);
}
.brand img,
.navbar-brand img {
  transition: rotate 0.8s var(--ez);
}

/* judul hero muncul kata demi kata (span mewarisi gaya h1; vendor.css punya aturan "h1 span" yang harus dinetralkan) */
.home .main_home h1 .w,
.home .main_home h1 .wi {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-shadow: none;
  margin-top: 0;
}
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.04em 0.22em;
  margin: 0 -0.04em -0.22em;
}
.wi {
  display: inline-block;
  translate: 0 115%;
  rotate: 4deg;
  animation: word-up 1s var(--ez) forwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}
@keyframes word-up {
  to { translate: 0 0; rotate: 0deg; }
}

/* ---------- 3. hiasan hero hidup ---------- */
.deco.star {
  animation:
    deco-float 8s ease-in-out infinite,
    deco-twinkle 3.6s ease-in-out infinite;
}
.deco.ring {
  animation:
    deco-float 8s ease-in-out infinite,
    ring-pulse 5s ease-in-out infinite;
}
@keyframes deco-twinkle {
  50% { scale: 0.65; rotate: 45deg; }
}
@keyframes ring-pulse {
  50% { scale: 1.1; }
}
.home .overlay:before {
  animation: grid-drift 26s linear infinite;
}
@keyframes grid-drift {
  to { background-position: 56px 56px; }
}

/* rumus fisika: muncul perlahan, lalu melayang pelan */
.hero-formulas {
  translate: 0 var(--py, 0px);
  will-change: translate;
}
.fx {
  animation:
    fx-in 1.8s ease backwards,
    fx-drift var(--fdur, 16s) ease-in-out infinite alternate;
  animation-delay: var(--fdl, 0s), var(--fdl, 0s);
}
@keyframes fx-in {
  from { opacity: 0; scale: 0.7; }
}
@keyframes fx-drift {
  from { translate: 0 0; }
  to   { translate: var(--dx, 18px) var(--dy, -22px); }
}

/* ---------- 4. garis pemisah judul seksi tumbuh ---------- */
.head_title.on .separator {
  animation: sep-in 1s var(--ez) 0.25s backwards;
}
@keyframes sep-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- 5. gambar yang melayang pelan ---------- */
.ketum-frame {
  animation: float-y 7s ease-in-out infinite;
}
.service-img,
.cta-img {
  animation: float-y 6s ease-in-out infinite;
}
.cta-img { animation-duration: 5s; animation-delay: -1.5s; }
@keyframes float-y {
  50% { translate: 0 -12px; }
}
.ketum img,
.logo-fig img {
  transition: scale 0.7s var(--ez);
}
.ketum-frame:hover img,
.logo-fig:hover img {
  scale: 1.06;
}

/* ---------- 6. kartu: transisi lama digabung dengan efek angkat ---------- */
.bcard.reveal,
.pg.reveal {
  transition:
    opacity 0.7s,
    transform 0.7s var(--ez),
    translate 0.35s var(--ez),
    box-shadow 0.35s ease,
    border-color 0.2s ease;
}
.bcard:hover,
.pg:hover {
  translate: 0 -6px;
  box-shadow: 0 18px 36px rgba(122, 20, 36, 0.14);
}
.pg .av {
  transition: scale 0.4s var(--ez-pop), rotate 0.4s var(--ez-pop);
}
.pg:hover .av {
  scale: 1.1;
  rotate: -4deg;
}
.mph {
  transition: translate 0.4s var(--ez), box-shadow 0.4s ease;
}
.mph img {
  transition: scale 0.6s var(--ez);
}
.mem:hover .mph {
  translate: 0 -6px;
  box-shadow: 0 14px 28px rgba(122, 20, 36, 0.18);
}
.mem:hover .mph img {
  scale: 1.08;
}

/* tab: ikon bergoyang saat disorot */
.service .nav-tabs > li > a i,
.ptabs > li > a i {
  transition: rotate 0.4s var(--ez-pop), scale 0.4s var(--ez-pop);
}
.service .nav-tabs > li > a:hover i,
.ptabs > li > a:hover i {
  rotate: -12deg;
  scale: 1.2;
}

/* tombol: kilau menyapu saat disorot */
.btn,
.btn-primary,
.btn-ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after,
.btn-primary::after,
.btn-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  translate: -120% 0;
  pointer-events: none;
}
.btn:hover::after,
.btn-primary:hover::after,
.btn-ghost:hover::after {
  translate: 120% 0;
  transition: translate 0.7s var(--ez);
}

/* denyut halus pada tombol utama hero */
.home .hero-btns .btn-primary {
  animation: btn-pulse 3.2s ease-in-out 2.4s infinite;
}
@keyframes btn-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}
.home .hero-btns .btn-primary:hover {
  animation: none;
}

/* ---------- 7. halaman dalam ---------- */
.card .ico {
  transition: rotate 0.45s var(--ez-pop), scale 0.45s var(--ez-pop);
}
.card:hover .ico {
  rotate: -8deg;
  scale: 1.12;
}
.menu a,
.jump a {
  transition: translate 0.25s var(--ez), background 0.25s ease, color 0.25s ease;
}
.menu a:hover,
.jump a:hover {
  translate: 0 -2px;
}
.misi li::before {
  transition: scale 0.35s var(--ez-pop);
}
.misi li:hover::before {
  scale: 1.18;
}
.sem tbody tr {
  transition: background 0.25s ease;
}
.sem tbody tr:hover {
  background: rgba(255, 186, 80, 0.14);
}

/* ---------- 8. pengguna yang mematikan animasi ---------- */
@media (prefers-reduced-motion: reduce) {
  html.anim-on .a-pre {
    opacity: 1;
    translate: none;
    scale: none;
  }
  .wi,
  .fx,
  .brand img,
  .navbar-brand img,
  .deco,
  .ketum-frame,
  .service-img,
  .cta-img,
  .home .overlay:before,
  .home .hero-btns .btn-primary,
  .head_title.on .separator {
    animation: none !important;
  }
  .wi { translate: none; rotate: none; }
}