/* ============================================================
   animation.css — gerak, cahaya, dan transisi "Pendopo Digital"
   ============================================================ */

/* ---------- keadaan awal untuk GSAP ---------- */
[data-gsap="hero"] { visibility: hidden; }

/* ---------- floating: ornamen & topeng melayang ---------- */
@keyframes mengambang {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(.6deg); }
}
.mengambang        { animation: mengambang 6s ease-in-out infinite; }
.mengambang-lambat { animation: mengambang 9s ease-in-out infinite; }

/* ---------- cahaya panggung berdenyut ---------- */
@keyframes denyut-cahaya {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.hero-cahaya { animation: denyut-cahaya 7s ease-in-out infinite; }

/* ---------- debu cahaya di pendopo ---------- */
.debu {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.debu i {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--prada-terang);
  opacity: 0;
  animation: naik linear infinite;
}
@keyframes naik {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .35; }
  100% { transform: translateY(-105vh) translateX(28px); opacity: 0; }
}

/* ---------- gebyok: pintu pendopo terbuka ---------- */
.gebyok-daun {
  transition: transform 1.5s cubic-bezier(.76, 0, .24, 1);
  transform-origin: center;
}
.gebyok.tutup .gebyok-daun.kiri  { transform: translateX(0); }
.gebyok.tutup .gebyok-daun.kanan { transform: scaleX(-1) translateX(0); }
.gebyok.buka  .gebyok-daun.kiri  { transform: translateX(-101%); }
.gebyok.buka  .gebyok-daun.kanan { transform: scaleX(-1) translateX(-101%); }
.gebyok-celah { transition: opacity 1.1s ease; }
.gebyok-celah.nyala { opacity: 1; }

/* ---------- AOS: penyesuaian halus ---------- */
[data-aos] { will-change: transform, opacity; }
[data-aos="ukir-masuk"] {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
}
[data-aos="ukir-masuk"].aos-animate { opacity: 1; transform: none; }

/* ---------- kartu tokoh: hover 3D ---------- */
.kartu-tokoh { transition: transform .25s ease, box-shadow .45s ease, border-color .45s ease; }

/* ---------- garis ukir menyapu ---------- */
@keyframes sapu {
  from { background-position-x: 0; }
  to   { background-position-x: 300px; }
}
.ukir-garis { animation: sapu 30s linear infinite; }

/* ---------- gerak kartu katalog: muncul berjenjang ---------- */
@keyframes muncul {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.katalog .gerak-kartu,
.galeri .galeri-item {
  animation: muncul .5s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- hormati preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .gebyok { display: none; }
  [data-gsap="hero"] { visibility: visible !important; }
}