/* Keep the cover opaque on entry. Animate the indicator while the page loads. */
.vnext-category-transition {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: var(--vnext-color-page);
  color: var(--vnext-color-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity calc(var(--vnext-motion-ui) / 2) var(--vnext-motion-ease),
              visibility calc(var(--vnext-motion-ui) / 2);
}
html[data-store-navigation-loading="true"] .vnext-category-transition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.vnext-category-transition>div{display:grid;justify-items:center;gap:22px;width:min(90vw,1000px)}
.vnext-category-transition [hidden]{display:none}
.vnext-category-transition span{color:var(--vnext-color-muted);font-size:clamp(12px,1.4vw,18px);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.vnext-category-transition strong{max-width:min(92vw,900px);font-size:clamp(40px,7vw,88px);font-weight:700;line-height:1.02;text-align:center;text-wrap:balance}
.vnext-category-transition i{display:block;width:236px;height:2px;background:color-mix(in srgb,currentColor 25%,transparent);overflow:hidden}
.vnext-category-transition i b{display:block;width:58%;height:100%;background:var(--vnext-color-action);animation:vnext-category-progress 850ms cubic-bezier(.22,.61,.36,1) infinite}
@keyframes vnext-category-progress{0%{transform:translateX(-120%)}100%{transform:translateX(190%)}}

html[data-store-navigation-loading="true"] .vnext-category-transition > div {
  animation: vnext-navigation-enter var(--vnext-motion-ui) var(--vnext-motion-ease) both;
}
.vnext-navigation-spinner {
  width: 32px;
  height: 32px;
  color: var(--vnext-color-action);
  animation: vnext-navigation-spin 1.5s linear infinite;
}
.vnext-navigation-spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}
.vnext-navigation-spinner__track { opacity: .12; }
.vnext-navigation-spinner__arc {
  stroke-linecap: round;
  stroke-dasharray: 26 75;
  animation: vnext-navigation-arc 1.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
.vnext-category-transition[aria-hidden="true"] .vnext-navigation-spinner,
.vnext-category-transition[aria-hidden="true"] .vnext-navigation-spinner__arc {
  animation-play-state: paused;
}
@keyframes vnext-navigation-enter {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vnext-navigation-spin { to { transform: rotate(360deg); } }
@keyframes vnext-navigation-arc {
  0% { stroke-dasharray: 4 97; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 65 36; stroke-dashoffset: -12; }
  100% { stroke-dasharray: 4 97; stroke-dashoffset: -101; }
}
@media (prefers-reduced-motion: reduce) {
  .vnext-category-transition { transition: none; }
  html[data-store-navigation-loading="true"] .vnext-category-transition > div,
  .vnext-navigation-spinner,
  .vnext-navigation-spinner__arc { animation: none; }
  .vnext-navigation-spinner__arc { stroke-dasharray: 55 46; }
  .vnext-category-transition i b { animation: none; width: 100%; }
}
