/* The page-opening fade from the Projects page, used on every page of the site.
   On the home page it only plays when the hero is skipped (the hero has its own opening). */

/* Every load opens like a hazy dream: the whole screen starts blurred under a warm cream
   glow and slowly comes into focus. It's a layer over the page that fades away, so the
   page itself (and the fixed dock) never moves. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 252, 246, 0.95), rgba(251, 240, 236, 0.85) 70%);
  -webkit-backdrop-filter: blur(18px) saturate(0.8);
  backdrop-filter: blur(18px) saturate(0.8);
  /* Even pace, no slow tail: the blur is gone by 70% and the haze by 85% */
  animation: dream 0.8s linear both;
}
@keyframes dream {
  0% { opacity: 1; -webkit-backdrop-filter: blur(18px) saturate(0.8); backdrop-filter: blur(18px) saturate(0.8); }
  70% { -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
  85%, 100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation-duration: 0.6s; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html[data-hero]:not(.skip-hero) body::after { content: none; }