/*
 * Moving between the homepage and the inner pages: a plain fade (components/transit.js).
 * Each page carries <html data-transit="fade" data-page="home | project">.
 */
.skip-launch .loader { display: none !important; }

/* browsers without cross-document view transitions: a short fade out and in */
.tr-leave body { opacity: 0; transition: opacity 0.22s ease; }
.tr-arrive body { animation: tr-in 0.4s ease both; }
@keyframes tr-in { from { opacity: 0; } }
@keyframes tr-out { to { opacity: 0; } }

/* the page fades out, then the next one fades in, over the dark of space */
[data-transit="fade"]::view-transition { background: #02030a; }
[data-transit="fade"]::view-transition-old(root) { animation: tr-out 0.25s ease-in both; }
[data-transit="fade"]::view-transition-new(root) { animation: tr-in 0.35s 0.25s ease-out both; }

/* reduced motion: a quicker cross-fade */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-image-pair(*) { animation: none !important; }
  ::view-transition-old(*) { animation: tr-out 0.2s ease both !important; }
  ::view-transition-new(*) { animation: tr-in 0.2s ease both !important; }
}
.calm::view-transition-image-pair(*) { animation: none !important; }
.calm::view-transition-group(*) { animation: none !important; }
.calm::view-transition-old(*) { animation: tr-out 0.2s ease both !important; }
.calm::view-transition-new(*) { animation: tr-in 0.2s ease both !important; }