html.is-loading body > *:not(.wipe) { opacity: 0; }

.wipe {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(1200px 600px at 10% 50%, rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(90deg, #0b0b0b, #2b2b2b 30%, #0b0b0b);
  pointer-events: none;
  transform: translateX(-100%);
  animation: wipe-sweep var(--wipe-duration, 1.1s) cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes wipe-sweep {
  0%   { transform: translateX(-100%); opacity: 1; }
  45%  { transform: translateX(0%); }
  100% { transform: translateX(100%); opacity: 0; }
}

.reveal-in {
  animation: content-reveal var(--reveal-duration, .6s) ease forwards;
  animation-delay: var(--reveal-delay, .2s);
}
@keyframes content-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wipe, .reveal-in { animation: none !important; }
  html.is-loading body > *:not(.wipe) { opacity: 1; }
}