/* ═══════════════════════════════════════════════════════════
   FHEERA — PAGE TRANSITIONS
   
   Konsep: "Curtain of silence" — halaman tidak hilang tiba-tiba.
   Ia menghilang dengan tenang, dan yang baru hadir dengan lembut.
   
   Duration:
     Fade out → 220ms  (cukup cepat agar tidak membosankan)
     Fade in  → 380ms  (sedikit lebih lambat = terasa premium)
   
   Easing: cubic-bezier(0.4, 0, 0.2, 1)
     — smooth masuk dan keluar, tidak ada bounce, tidak ada snap
   
   Tidak ada slide, tidak ada scale besar.
   Hanya opacity + translateY sangat kecil (6px) untuk memberi
   rasa "halaman naik dengan perlahan" seperti membuka majalah.
═══════════════════════════════════════════════════════════ */

/* ── Page veil — overlay yang menangani transisi ── */
#page-veil {
  position:       fixed;
  inset:          0;
  z-index:        99999;           /* di atas segalanya */
  background:     #080807; 
  backdrop-filter: blur(2px);        /* sama dengan body background */
  pointer-events: none;

  /* Default: tidak terlihat */
  opacity:    0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Tidak mempengaruhi layout */
  will-change: opacity;
}

/* State: halaman sedang menutup (fade out) */
#page-veil.is-covering {
  opacity:        1;
  pointer-events: all;   /* block interaksi saat transisi */
}

/* ── Body: fade in saat halaman load ── */
body {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s cubic-bezier(.16,1,.3,1),
              transform 0.4s cubic-bezier(.16,1,.3,1);
}

body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Konten utama: sedikit naik saat masuk ── */
.page-enter {
  opacity:    0;
  transform:  translateY(6px);
  transition:
    opacity   380ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 40ms;   /* slight delay setelah body — cascade halus */
}

.page-enter.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Reduced motion: respek preferensi user ── */
@media (prefers-reduced-motion: reduce) {
  #page-veil,
  body,
  .page-enter {
    transition: none !important;
  }
}