/* ============================================================
   ANIMASI — keyframes + kelas reveal (dipicu IntersectionObserver)
   ============================================================ */

/* ---------- Reveal on scroll ----------
   JS menambahkan .is-visible saat elemen masuk viewport.
   Varian: data-reveal="fade" | "blur" | "scale"                */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: translateY(28px);
}

[data-reveal="blur"] {
  filter: blur(8px);
  transform: translateY(12px);
}

[data-reveal="scale"] {
  transform: scale(0.88);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- SVG stroke draw-in ----------
   reveal.js mengukur panjang path lalu menambahkan .is-drawn  */
.ornament-draw-path {
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out) 0.2s;
}

/* Ornamen berbasis <use> tidak bisa di-draw per-path:
   gunakan fade + scale lembut sebagai gantinya */
.ornament-draw {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

.ornament-draw.is-visible {
  opacity: 1;
}

/* ---------- Keyframes ---------- */
@keyframes star-glow {
  0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.08) rotate(22.5deg); }
}

@keyframes digit-fade {
  0%   { opacity: 0; transform: translateY(-0.35em); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

@keyframes figure-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes fabric-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

@keyframes particle-drift {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--p-opacity, 0.5); }
  90%  { opacity: var(--p-opacity, 0.5); }
  100% { transform: translateY(-110vh) translateX(var(--p-sway, 30px)) rotate(300deg); opacity: 0; }
}

/* ---------- Kelas animasi ---------- */
.figure-float {
  animation: figure-float 6s ease-in-out infinite;
}

.figure-float--alt {
  animation-duration: 7s;
  animation-delay: -2.5s;
}

.fabric-sway {
  transform-origin: 110px 200px;
  animation: fabric-sway 5s ease-in-out infinite;
}

.particle {
  animation: particle-drift var(--p-duration, 14s) linear var(--p-delay, 0s) infinite;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .particles {
    display: none;
  }
}