/*
 * Lapisan transisi H2H <-> Panel -- spec 011 / US3, kontrak C5.
 *
 * SATU sumber tampilan untuk kedua dokumen: halaman asal (useAreaTransition)
 * dan dokumen tujuan (/area-splash.js, dari src/area-splash/area-splash.ts)
 * sama-sama hanya memasang `data-area-splash` pada <html>. Lapisan digambar
 * lewat ::after karena di dokumen tujuan skripnya berjalan di <head>, sebelum
 * <body> ada.
 *
 * Hanya `opacity` yang dianimasikan (konstitusi V). Logo berukuran eksplisit
 * 175x50.
 */
html[data-area-splash]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 175px 50px, cover;
  opacity: 1;
  transition: opacity 200ms ease;
}

html[data-area-splash='panel']::after {
  background-image: url('/brand/logo-dark.webp'),
    linear-gradient(135deg, #12082b 0%, #3d1f8f 100%);
}

html[data-area-splash='mitra']::after {
  background-image: url('/brand/logo.webp'),
    linear-gradient(135deg, #f5f2ff 0%, #ffffff 100%);
}

/* Halaman asal: lapisan memudar masuk. Dokumen tujuan tidak memakai atribut
   ini, jadi lapisannya langsung penuh -- tanpa kilatan putih. Durasinya sama
   dengan DURASI_MASUK_MS (AreaTransition.tsx): navigasi menunggu selama itu. */
html[data-area-splash-entering]::after {
  animation: vcg-area-splash-masuk 200ms ease both;
}

html[data-area-splash-leaving]::after {
  opacity: 0;
}

@keyframes vcg-area-splash-masuk {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Teks untuk pembaca layar -- tersembunyi secara visual. */
.vcg-area-splash-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-area-splash]::after,
  html[data-area-splash-entering]::after {
    transition: none;
    animation: none;
  }
}