.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--grad-rose);
  transform-origin: left;
}

.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bordo);
  transition: opacity .8s ease, visibility .8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark { width: clamp(170px, 42vw, 240px); animation: preloadPulse 1.6s ease-in-out infinite; }
@keyframes preloadPulse { 0%, 100% { opacity: .5; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
html.is-ready [data-reveal] { opacity: 0; transform: translateY(30px); }
html.is-ready [data-stagger] > * { opacity: 0; transform: translateY(24px); }
html.is-ready .hero [data-hero] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.is-ready [data-reveal],
  html.is-ready [data-stagger] > *,
  html.is-ready .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  .preloader { display: none; }
}