/* Lightweight loading and content transitions shared by the menu and admin panel. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  background:
    radial-gradient(circle at 50% 43%, rgba(241, 135, 28, .11), transparent 15rem),
    #0d0b09;
  color: #fff7eb;
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility 0s linear .38s;
}

.is-ready .page-loader {
  opacity: 0;
  visibility: hidden;
}

.loader-emblem {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 135, 28, .22);
  border-radius: 50%;
  background: rgba(241, 135, 28, .08);
  box-shadow: 0 0 28px rgba(241, 135, 28, .08);
}

.loader-emblem::before {
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-top-color: #ffb337;
  border-right-color: rgba(241, 135, 28, .45);
  border-radius: 50%;
  content: "";
  animation: loader-spin .85s linear infinite;
}

.loader-emblem::after {
  width: 20px;
  height: 12px;
  border: 2px solid #f1871c;
  border-bottom-width: 5px;
  border-radius: 12px 12px 5px 5px;
  content: "";
  transform: translateY(2px);
}

.loader-emblem i {
  position: absolute;
  top: 17px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #ffd071;
}

.page-loader>strong {
  margin-top: 4px;
  font: 800 15px/1 var(--heading);
  letter-spacing: .08em;
}

.page-loader>small {
  color: #a7a095;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.is-ready .hero-copy { animation: content-rise .48s cubic-bezier(.2, .7, .2, 1) both; }
.is-ready .hero-visual { animation: content-rise .56s cubic-bezier(.2, .7, .2, 1) .05s both; }
.is-ready .quick-links { animation: content-rise .44s ease .08s both; }
.is-ready .login-card { animation: content-rise .42s cubic-bezier(.2, .7, .2, 1) both; }
.is-ready .admin-topbar { animation: content-rise .32s ease both; }
.is-ready .admin-sidebar { animation: content-rise .38s ease .04s both; }
.is-ready .admin-heading { animation: content-rise .4s ease .08s both; }

.card-enter {
  animation: content-rise .38s cubic-bezier(.2, .7, .2, 1) both;
}

.admin-app.is-entering,
.admin-panel-view.is-entering {
  animation: content-rise .32s cubic-bezier(.2, .7, .2, 1) both;
}

.product-editor-card:not([hidden]),
.settings-card:not([hidden]) {
  animation: content-rise .28s ease both;
}

.page-loader[hidden] { display: none; }

@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes content-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader *,
  .is-ready .hero-copy,
  .is-ready .hero-visual,
  .is-ready .quick-links,
  .is-ready .login-card,
  .is-ready .admin-topbar,
  .is-ready .admin-sidebar,
  .is-ready .admin-heading,
  .card-enter,
  .admin-app.is-entering,
  .admin-panel-view.is-entering,
  .product-editor-card:not([hidden]),
  .settings-card:not([hidden]) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .page-loader { display: none !important; }
}