/* ==========================================================================
   ANIMATIONS.CSS — Seluruh Keyframes, Reveal, Shimmer, Pulse, Clip-Path,
                    dan Penanganan prefers-reduced-motion / Non-Hover
   Aturan teknis: hanya transform, opacity, dan clip-path; tanpa layout shift.
   Elemen reveal HANYA disembunyikan saat <html> memiliki kelas .js
   ========================================================================== */

/* ==========================================================================
   A. GLOBAL: PRELOADER & TAUTAN FOOTER GARIS MELUNCUR
   ========================================================================== */
html.js .preloader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.6s var(--ease-out),
    visibility 0.6s var(--ease-out);
}

html.js .preloader.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__box {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--white);
  box-shadow: var(--shadow-card-hover);
  animation:
    preloader-pop 0.75s var(--ease-out) both,
    preloader-breathe 1.6s ease-in-out 0.75s infinite alternate;
}

@keyframes preloader-pop {
  from {
    opacity: 0;
    transform: scale(0.84) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes preloader-breathe {
  from {
    transform: scale(1) translateY(0);
  }
  to {
    transform: scale(1.04) translateY(-3px);
  }
}

/* Garis bawah tautan footer meluncur halus saat hover */
.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}

.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   ELEMEN REVEAL UMUM & GARIS AKSEN JUDUL
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Garis aksen setiap judul section tergambar saat terlihat */
html.js [data-draw-line] {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.7s var(--ease-out) 0.1s;
}

html.js .section-header--left [data-draw-line] {
  transform-origin: left center;
}

html.js .is-visible [data-draw-line],
html.js [data-draw-line].is-visible {
  transform: scaleX(1);
}

/* ==========================================================================
   B. HERO: MASK KATA H1, CLIP-PATH FOTO, BLOB, KARTU MELAYANG, & KILATAN TOMBOL
   ========================================================================== */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.word-inner {
  display: inline-block;
}

html.js .hero__title.is-split .word-inner {
  opacity: 0;
  transform: translateY(108%);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.62s var(--ease-out);
  transition-delay: var(--word-delay, 0ms);
}

html.js .hero__title.is-split.is-animated .word-inner {
  opacity: 1;
  transform: translateY(0);
}

html.js .hero__swoosh path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 0.8s var(--ease-out) 0.45s;
}

html.js .hero__title.is-animated .hero__swoosh path {
  stroke-dashoffset: 0;
}

html.js [data-hero-badge] {
  opacity: 0;
  transform: scale(0.88) translateY(10px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.55s var(--ease-out);
}

html.js [data-hero-badge].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

html.js [data-hero-sub],
html.js [data-hero-actions],
html.js [data-hero-micro] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

html.js [data-hero-sub] { transition-delay: 180ms; }
html.js [data-hero-actions] { transition-delay: 280ms; }
html.js [data-hero-micro] { transition-delay: 360ms; }

html.js [data-hero-sub].is-visible,
html.js [data-hero-actions].is-visible,
html.js [data-hero-micro].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Foto Hero terbuka dengan clip-path dari kanan sambil mengecil dari skala 1.06 */
html.js [data-hero-photo] {
  clip-path: inset(0 0 0 100% round 24px);
  opacity: 0.01;
  transition:
    clip-path 0.88s var(--ease-out) 0.12s,
    opacity 0.4s var(--ease-out) 0.12s;
}

html.js [data-hero-photo] .hero__img {
  transform: scale(1.06);
  transition: transform 0.9s var(--ease-out) 0.12s;
}

html.js [data-hero-photo].is-visible {
  clip-path: inset(0 0 0 0 round 24px);
  opacity: 1;
}

html.js [data-hero-photo].is-visible .hero__img {
  transform: scale(1);
}

/* Kartu melayang Hero naik-turun pelan dan berotasi halus */
.hero__float-card {
  animation: hero-card-float 5.6s ease-in-out infinite;
}

@keyframes hero-card-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(-1.2deg);
  }
}

/* Blob dekoratif melayang pelan bolak-balik (14-18 detik) */
.hero__blob--one {
  animation: blob-drift-one 15s ease-in-out infinite alternate;
}

.hero__blob--two {
  animation: blob-drift-two 18s ease-in-out infinite alternate;
}

@keyframes blob-drift-one {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-22px, 18px, 0) scale(1.08); }
}

@keyframes blob-drift-two {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(20px, -16px, 0) scale(1.06); }
}

/* Kilatan cahaya menyapu pada tombol primer saat hover */
.btn--shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: transform 0.65s var(--ease-out);
}

.btn--shimmer:hover::before {
  transform: translateX(340%) skewX(-20deg);
}

/* ==========================================================================
   C. PROGRAM: GOYANGAN IKON HOVER & SHIMMER LENCANA "PALING DIMINATI"
   ========================================================================== */
.program-card__icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.program-card:hover .program-card__icon {
  animation: icon-wiggle 0.55s var(--ease-out);
}

@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30%      { transform: rotate(-8deg) scale(1.07); }
  65%      { transform: rotate(6deg) scale(1.07); }
}

/* Kilatan shimmer setiap ~4 detik pada lencana "Paling Diminati" */
.badge--popular::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: badge-shimmer 4.2s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes badge-shimmer {
  0%, 68% { transform: translateX(0) skewX(-20deg); }
  100%    { transform: translateX(360%) skewX(-20deg); }
}

/* ==========================================================================
   D. KEUNGGULAN: GARIS ATAS TUMBUH (scaleX) & POP/PUTAR IKON
   ========================================================================== */
html.js .keunggulan-card::before {
  transform: scaleX(0);
  transition: transform 0.72s var(--ease-out) 0.14s;
}

html.js .keunggulan-card.is-visible::before {
  transform: scaleX(1);
}

html.js .keunggulan-card__icon {
  opacity: 0;
  transform: scale(0.65);
  transition:
    opacity 0.5s var(--ease-out) 0.18s,
    transform 0.55s var(--ease-out) 0.18s;
}

html.js .keunggulan-card.is-visible .keunggulan-card__icon {
  opacity: 1;
  transform: scale(1);
}

.keunggulan-card:hover .keunggulan-card__icon {
  transform: scale(1.08) rotate(-6deg);
  transition-delay: 0ms;
}

/* ==========================================================================
   E. TESTIMONI: BINTANG POP SATU PER SATU & PANAH LENCANA STROKE-DASH
   ========================================================================== */
html.js .testimoni-card .star-item {
  opacity: 0;
  transform: scale(0.35);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.45s var(--ease-out);
}

html.js .testimoni-card.is-visible .star-item:nth-child(1) { transition-delay: 120ms; }
html.js .testimoni-card.is-visible .star-item:nth-child(2) { transition-delay: 200ms; }
html.js .testimoni-card.is-visible .star-item:nth-child(3) { transition-delay: 280ms; }
html.js .testimoni-card.is-visible .star-item:nth-child(4) { transition-delay: 360ms; }
html.js .testimoni-card.is-visible .star-item:nth-child(5) { transition-delay: 440ms; }

html.js .testimoni-card.is-visible .star-item {
  opacity: 1;
  transform: scale(1);
}

html.js .score-badge__arrow path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  transition: stroke-dashoffset 0.75s var(--ease-out) 0.35s;
}

html.js .testimoni-card.is-visible .score-badge__arrow path {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   F. KONTAK: REVEAL PETA CLIP-PATH, BARIS JAM BUKA, DENYUT HARI INI & BANNER WA
   ========================================================================== */
html.js [data-clip-reveal] {
  clip-path: inset(0 100% 0 0 round 16px);
  opacity: 0.01;
  transition:
    clip-path 0.85s var(--ease-out),
    opacity 0.4s var(--ease-out);
}

html.js [data-clip-reveal].is-visible {
  clip-path: inset(0 0 0 0 round 16px);
  opacity: 1;
}

html.js .hours-card .hours-row {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}

html.js .hours-card.is-visible .hours-row:nth-child(1) { transition-delay: 100ms; }
html.js .hours-card.is-visible .hours-row:nth-child(2) { transition-delay: 190ms; }
html.js .hours-card.is-visible .hours-row:nth-child(3) { transition-delay: 280ms; }

html.js .hours-card.is-visible .hours-row {
  opacity: 1;
  transform: translateY(0);
}

.hours-row.is-today .hours-row__today-tag {
  animation: soft-tag-pulse 2.6s ease-in-out infinite;
}

@keyframes soft-tag-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.04); }
}

/* Cincin denyut lembut pada kartu hijau WhatsApp di Kontak */
.wa-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--whatsapp);
  opacity: 0;
  pointer-events: none;
  animation: banner-ring-pulse 3.2s var(--ease-out) infinite;
}

@keyframes banner-ring-pulse {
  0%   { transform: scale(1); opacity: 0.45; }
  80%, 100% { transform: scale(1.03, 1.1); opacity: 0; }
}

/* ==========================================================================
   G & H. ELEMEN MELAYANG (WA LOMPAT MASUK, CINCIN DENYUT, GOYANG) & DRAWER STAGGER
   ========================================================================== */
html.js .wa-float {
  opacity: 0;
  transform: scale(0.5) translateY(20px);
}

html.js .wa-float.is-entered {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: wa-hop-in 0.55s var(--ease-out);
}

html.js .wa-float.is-wiggling {
  animation: wa-periodic-wiggle 0.65s var(--ease-out);
}

.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--whatsapp);
  opacity: 0;
  pointer-events: none;
  animation: wa-ring-pulse 2.8s var(--ease-out) infinite;
}

@keyframes wa-hop-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(24px); }
  65%  { opacity: 1; transform: scale(1.08) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes wa-ring-pulse {
  0%        { transform: scale(1); opacity: 0.5; }
  75%, 100% { transform: scale(1.65); opacity: 0; }
}

@keyframes wa-periodic-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-12deg) scale(1.06); }
  45%      { transform: rotate(10deg) scale(1.06); }
  70%      { transform: rotate(-6deg) scale(1.03); }
}

/* Stagger tautan di dalam drawer mobile saat dibuka */
html.js .mobile-drawer__list li {
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity 0.42s var(--ease-out),
    transform 0.42s var(--ease-out);
}

html.js .mobile-drawer.is-open .mobile-drawer__list li:nth-child(1) { transition-delay: 60ms; }
html.js .mobile-drawer.is-open .mobile-drawer__list li:nth-child(2) { transition-delay: 110ms; }
html.js .mobile-drawer.is-open .mobile-drawer__list li:nth-child(3) { transition-delay: 160ms; }
html.js .mobile-drawer.is-open .mobile-drawer__list li:nth-child(4) { transition-delay: 210ms; }
html.js .mobile-drawer.is-open .mobile-drawer__list li:nth-child(5) { transition-delay: 260ms; }

html.js .mobile-drawer.is-open .mobile-drawer__list li {
  opacity: 1;
  transform: translateX(0);
}

/* Jeda semua animasi berulang saat elemen di luar viewport atau tab tidak aktif */
.is-offscreen,
.is-offscreen::before,
.is-offscreen::after,
body.tab-hidden *,
body.tab-hidden *::before,
body.tab-hidden *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   NON-HOVER & PREFERS-REDUCED-MOTION
   ========================================================================== */
@keyframes data-refresh-fade {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

.data-refresh {
  animation: data-refresh-fade 200ms ease-out both;
}

@media (hover: none) {
  .program-card:hover,
  .keunggulan-card:hover,
  .btn:hover {
    transform: none;
  }

  .btn--shimmer::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  html.js [data-reveal],
  html.js [data-hero-badge],
  html.js [data-hero-sub],
  html.js [data-hero-actions],
  html.js [data-hero-micro],
  html.js .keunggulan-card__icon,
  html.js .testimoni-card .star-item,
  html.js .hours-card .hours-row,
  html.js .mobile-drawer__list li,
  html.js .wa-float {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js [data-hero-photo],
  html.js [data-clip-reveal] {
    clip-path: none !important;
    opacity: 1 !important;
  }

  html.js [data-hero-photo] .hero__img,
  html.js [data-draw-line],
  html.js .keunggulan-card::before {
    transform: none !important;
  }

  html.js .hero__swoosh path,
  html.js .score-badge__arrow path {
    stroke-dashoffset: 0 !important;
  }

  .preloader {
    display: none !important;
  }
}