/* Atlas scroll reveal — satu bahasa gerak.
   Token kanon (wajib sama dengan src/lib/atlasReveal.ts):
   dur 0.9s · ease cubic-bezier(0.25, 0.46, 0.45, 0.94) · y 14px · stagger 70ms · max 2 langkah.
   Mulai 10% sebelum masuk viewport (rootMargin bawah +10%), supaya saat
   scroll cepat konten sudah memudar masuk, bukan kosong lalu muncul tiba-tiba.
   Konten terlihat sampai html.atlas-reveal-ready. */

:root {
  --atlas-reveal-dur: 0.9s;
  --atlas-reveal-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --atlas-reveal-y: 14px;
  --atlas-reveal-stagger: 70ms;
}

.reveal-section,
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Sembunyi tanpa transisi. Transisi hanya saat masuk (.is-in / .revealed),
   supaya konten di bawah lipatan tidak fade-out dulu. */
/* !important: runtime Arcadia menulis style inline opacity/transform.
   Transisi hanya pada state masuk, supaya tidak fade-out dulu. */
html.atlas-reveal-ready .reveal-section:not(.revealed):not(.is-in),
html.atlas-reveal-ready [data-reveal]:not(.is-in):not(.in):not(.revealed) {
  opacity: 0 !important;
  transform: translate3d(0, var(--atlas-reveal-y), 0) !important;
  transition: none !important;
}

html.atlas-reveal-ready .reveal-section.revealed,
html.atlas-reveal-ready .reveal-section.is-in,
html.atlas-reveal-ready [data-reveal].is-in,
html.atlas-reveal-ready [data-reveal].in,
html.atlas-reveal-ready [data-reveal].revealed {
  opacity: 1 !important;
  transition:
    opacity var(--atlas-reveal-dur) var(--atlas-reveal-ease) var(--atlas-d, 0ms),
    transform var(--atlas-reveal-dur) var(--atlas-reveal-ease) var(--atlas-d, 0ms);
}

/* Selama gerak masuk, durasi token menang atas kunci 0.01ms
   (html.atlas-scrolling / touch). Setelah .atlas-reveal-settled, kunci itu kembali. */
html.atlas-reveal-ready .reveal-section.is-in:not(.atlas-reveal-settled),
html.atlas-reveal-ready .reveal-section.revealed:not(.atlas-reveal-settled),
html.atlas-reveal-ready [data-reveal].is-in:not(.atlas-reveal-settled),
html.atlas-reveal-ready [data-reveal].in:not(.atlas-reveal-settled),
html.atlas-reveal-ready [data-reveal].revealed:not(.atlas-reveal-settled) {
  transition-property: opacity, transform !important;
  transition-duration: var(--atlas-reveal-dur) !important;
  transition-timing-function: var(--atlas-reveal-ease) !important;
  transition-delay: var(--atlas-d, 0ms) !important;
}

html.atlas-reveal-ready [data-d="1"] { --atlas-d: var(--atlas-reveal-stagger); }
html.atlas-reveal-ready [data-d="2"] { --atlas-d: calc(var(--atlas-reveal-stagger) * 2); }
html.atlas-reveal-ready [data-d="3"] { --atlas-d: calc(var(--atlas-reveal-stagger) * 2); }
html.atlas-reveal-ready [data-d="4"] { --atlas-d: calc(var(--atlas-reveal-stagger) * 2); }

html.atlas-reveal-ready .atlas-reveal-cards > .reveal-section:nth-child(2),
html.atlas-reveal-ready .atlas-reveal-cards > [data-reveal]:nth-child(2) {
  --atlas-d: var(--atlas-reveal-stagger);
}
html.atlas-reveal-ready .atlas-reveal-cards > .reveal-section:nth-child(3),
html.atlas-reveal-ready .atlas-reveal-cards > [data-reveal]:nth-child(3) {
  --atlas-d: calc(var(--atlas-reveal-stagger) * 2);
}
html.atlas-reveal-ready .atlas-reveal-cards > .reveal-section:nth-child(n + 4),
html.atlas-reveal-ready .atlas-reveal-cards > [data-reveal]:nth-child(n + 4) {
  --atlas-d: calc(var(--atlas-reveal-stagger) * 2);
}