/* ============================================================================
   buatsistem.id — motion.css
   Lapisan animasi. SEMUA keadaan awal yang menyembunyikan sesuatu di-scope ke
   `html.js` — tanpa JavaScript halaman harus tetap tampil utuh, bukan kosong.
   Durasi & easing memakai token dari tokens/motion.css.
   ========================================================================== */

/* ————————————————— reveal ————————————————— */

html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-soft) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-lift) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ————————————————— hero headline: mask reveal per baris ————————————————— */

/* line-height .93 memotong glyph: kotak baris lebih pendek daripada glyph-nya,
   dan descender Newsreader italic ("punya", "sistemnya") jatuh jauh di bawahnya.
   Mask diberi ruang di kedua sisi, lalu ditarik kembali dengan margin negatif
   yang sama besar agar tata letaknya tidak bergeser sedikit pun. */
html.js .hero-h1 .line {
  display: block;
  overflow: hidden;
  /* longhand: shorthand `padding` akan menghapus indent padding-left pada .l3 */
  padding-top: .20em;
  padding-bottom: .24em;
  margin-top: -.20em;
  margin-bottom: -.24em;
}
html.js .hero-h1 .line > span {
  display: block;
  /* harus melampaui tinggi mask yang sudah bertambah, bukan sekadar 108% */
  transform: translate3d(0, 140%, 0);
  transition: transform 1080ms var(--ease-lift) var(--line-delay, 0ms);
  will-change: transform;
}
html.js .hero-h1.is-in .line > span { transform: none; }

/* ————————————————— blob organik (rasa Spline, tanpa runtime pihak ketiga) ——— */

.hero-blob span,
.showcase-blob span,
.tech-blob span {
  animation: bs-morph 22s var(--ease-in-out) infinite;
}
.showcase-blob span { animation-duration: 27s; animation-delay: -6s; }
.tech-blob span { animation-duration: 31s; animation-delay: -12s; }

@keyframes bs-morph {
  0%   { border-radius: 50%; transform: rotate(0deg) scale(1); }
  25%  { border-radius: var(--radius-blob); transform: rotate(4deg) scale(1.06); }
  50%  { border-radius: 44% 56% 47% 53% / 55% 45% 55% 45%; transform: rotate(-3deg) scale(.97); }
  75%  { border-radius: 57% 43% 55% 45% / 45% 57% 43% 55%; transform: rotate(2deg) scale(1.04); }
  100% { border-radius: 50%; transform: rotate(0deg) scale(1); }
}

/* ————————————————— build-log dots: ds-drift, stagger 200ms ————————————————— */

.build-log i { animation: ds-drift 2.4s var(--ease-in-out) infinite; }
.build-log i:nth-child(2) { animation-delay: .2s; }
.build-log i:nth-child(3) { animation-delay: .4s; }
.build-log i:nth-child(4) { animation-delay: .6s; }

/* ————————————————— bar chart tumbuh ————————————————— */

html.js .bars .bar,
html.js .hbar .fill,
html.js .gantt .fill {
  transition: transform 820ms var(--ease-lift) var(--bar-delay, 0ms);
}
html.js .bars .bar { transform: scaleY(0); }
html.js .hbar .fill,
html.js .gantt .fill { transform: scaleX(0); }

html.js .is-charted .bars .bar { transform: scaleY(1); }
html.js .is-charted .hbar .fill,
html.js .is-charted .gantt .fill { transform: scaleX(1); }

/* ————————————————— accordion FAQ ————————————————— */

.faq-panel { overflow: hidden; }
html.js .faq-panel {
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-slow) var(--ease-soft), opacity var(--dur-base) var(--ease-soft);
}
html.js .faq-panel.is-open { max-height: 320px; opacity: 1; }

/* ————————————————— pergantian layar mockup ————————————————— */

html.js .mock.is-swap { animation: bs-screen 420ms var(--ease-lift); }
@keyframes bs-screen {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ————————————————— fokus ————————————————— */

a:focus-visible,
button:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 2px; }

/* ————————————————— reduced motion ————————————————— */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .hero-h1 .line > span { transform: none; transition: none; }
  html.js .bars .bar,
  html.js .hbar .fill,
  html.js .gantt .fill { transform: none; transition: none; }
  .hero-blob span, .showcase-blob span, .tech-blob span,
  .build-log i, .marquee-track { animation: none; }
  html.js .mock.is-swap { animation: none; }
  html.js .faq-panel { transition: none; }
}