.experience-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: #fff;
  color: #263337;
  opacity: 0;
  transition: opacity var(--loader-fade-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1);
  overscroll-behavior: none;
  touch-action: none;
  outline: none;
}

.experience-loader[hidden] { display: none; }
.experience-loader.is-visible { opacity: 1; }
html.is-experience-loading { overflow: hidden !important; }

.experience-loader__content {
  width: min(260px, 72vw);
  text-align: center;
  transform: translateY(8px);
  transition: transform var(--loader-fade-duration, 320ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-loader.is-visible .experience-loader__content { transform: translateY(0); }
.experience-loader.is-leaving .experience-loader__content { transform: translateY(-4px); }

.experience-loader__logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 32px;
  user-select: none;
}

.experience-loader__bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #e5e7eb;
}

.experience-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--loading-progress, 0%);
  border-radius: inherit;
  background: #fd713b;
  transition: width 160ms ease-out;
}

.experience-loader__label {
  margin: 18px 0 0;
  color: #263337;
  font: 400 14px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .experience-loader { transition: none; }
  .experience-loader__content { transform: none !important; transition: none; }
  .experience-loader__bar::after {
    transition: none;
  }
}