/* frontend-src/styles/loading/00-loading.css */
/* Shared visual treatment only. Visibility, progress and retry ownership remain
   with each page; no shared overlay controller or artificial loading delay. */
:root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
  .account-loading > span:first-child, .novel-loading > span:first-child),
#v2-initial-loader .canvas-boot-emblem {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--pg-loading-size, 156px);
  width: var(--pg-loading-size, 156px);
  height: var(--pg-loading-size, 156px);
  min-width: var(--pg-loading-size, 156px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  pointer-events: none;
  background: url('/assets/pinggoo-favicon.svg') center / 46% 46% no-repeat,
    radial-gradient(circle, #76dfce13 0, #76dfce05 48%, transparent 70%);
  box-shadow: none;
  animation: pgLoadingFloat 3.6s ease-in-out infinite;
}
:root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
  .account-loading > span:first-child, .novel-loading > span:first-child)::before,
#v2-initial-loader .canvas-boot-emblem::before {
  content: '';
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  border: 1px solid #7edac914;
  border-top-color: #9be9d9;
  border-right-color: #8cdecc54;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 15%, #dcfff3 0 1.5px, transparent 2.5px);
  box-shadow: 0 -1px 10px #81decb0b;
  opacity: 1;
  animation: pgLoadingOrbit 5s linear infinite;
}
:root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
  .account-loading > span:first-child, .novel-loading > span:first-child)::after,
#v2-initial-loader .canvas-boot-emblem::after {
  content: '';
  position: absolute;
  inset: 10%;
  border: 1px solid #7edac90a;
  border-bottom-color: #b1d7c25c;
  border-left-color: #80daca24;
  border-radius: inherit;
  background: none;
  animation: pgLoadingOrbit 8s linear infinite reverse;
}

/* Existing Canvas boot events, error copy and dismissal still own the loader. */
#v2-initial-loader .canvas-boot-emblem > * { visibility: hidden; animation: none; }
#v2-initial-loader {
  background: radial-gradient(ellipse at 50% 44%, #112522 0, #080d13 68%);
}
#v2-initial-loader[data-state="error"] .canvas-boot-emblem,
#v2-initial-loader[data-state="error"] .canvas-boot-emblem::before,
#v2-initial-loader[data-state="error"] .canvas-boot-emblem::after { animation: none; }

:root span.pg-loading-emblem.pg-loading-emblem--section,
:root .pg-showcase-spinner { --pg-loading-size: 64px; }
:root span.pg-loading-emblem.pg-loading-emblem--compact { --pg-loading-size: 38px; }
:root span.pg-loading-emblem.pg-loading-only { display: none; }
:root :is(.admin-panel-view-state-loading, .admin-view-state-loading,
  .pg-update-center-view-state-loading) > span.pg-loading-only,
:root [data-project-trash-list][aria-busy="true"] .pg-loading-only,
:root .pg-session-recovery section:has(button:disabled) > .pg-loading-only { display: inline-block; }
:root :is(.admin-panel-view-state, .admin-view-state) > .pg-loading-only { margin-right: 12px; }
:root .admin-panel-view-state > .pg-loading-only { margin-right: 2px; }
:root :is(.pg-update-center-view-state-loading, .pg-project-trash-state):has(> .pg-loading-only) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
:root .pg-loading-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: min(52vh, 420px);
  color: #b6ccc6;
  text-align: center;
}
:root .pg-home-empty:has(> .pg-loading-emblem) { display: flex; align-items: center; justify-content: center; gap: 14px; }
:root .pg-workflow-loading-panel {
  gap: 22px;
  border-color: transparent;
  background: none;
  box-shadow: none;
}
:root .pg-workflow-loading-text { color: #b6ccc6; font-weight: 550; letter-spacing: .04em; }
:root .pg-showcase-loader-inner { border-color: transparent; background: none; box-shadow: none; backdrop-filter: none; }
:root .pg-session-recovery .pg-loading-only { margin-bottom: 20px; }

/* A project-triggered reload hands off to the target page's single indicator.
   Keep the connection message and background while identity is checked, without
   first playing a second logo/ring/track animation. No loading timing changes. */
.pg-auth-loading.pg-restoring-page-entry .pg-app-boot-content > :is(.pg-loading-emblem, .pg-app-boot-brand, .pg-app-boot-progress) { display: none; }
.pg-auth-loading:has(.pg-session-recovery) .pg-app-boot { visibility: hidden; }

@keyframes pgLoadingOrbit { to { transform: rotate(360deg); } }
@keyframes pgLoadingFloat {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-4px); }
}
@media (max-width: 480px) {
  :root :is(.pg-loading-emblem, .pg-workflow-loading-spinner,
    .account-loading > span:first-child, .novel-loading > span:first-child),
  #v2-initial-loader .canvas-boot-emblem { --pg-loading-size: 138px; }
  :root span.pg-loading-emblem.pg-loading-emblem--section,
  :root .pg-showcase-spinner { --pg-loading-size: 56px; }
  :root span.pg-loading-emblem.pg-loading-emblem--compact { --pg-loading-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
    .account-loading > span:first-child, .novel-loading > span:first-child),
  :root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
    .account-loading > span:first-child, .novel-loading > span:first-child)::before,
  :root :is(.pg-loading-emblem, .pg-workflow-loading-spinner, .pg-showcase-spinner,
    .account-loading > span:first-child, .novel-loading > span:first-child)::after,
  #v2-initial-loader .canvas-boot-emblem,
  #v2-initial-loader .canvas-boot-emblem::before,
  #v2-initial-loader .canvas-boot-emblem::after { animation: none; }
}

/* frontend-src/styles/loading/01-stage-alignment.css */
/* One composition for page/surface loading: centered mark, brand, original
   status, then a decorative track. Existing error/empty states are excluded. */
:root :is(.pg-app-boot-content, .pg-workflow-loading-panel, .novel-loading,
  .account-loading, .pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading, .pg-showcase-loader-inner),
#v2-initial-loader {
  display: grid;
  grid-template-columns: minmax(0, 360px);
  grid-template-rows: 156px 18px 52px 2px;
  align-content: center;
  justify-content: center;
  justify-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: #a2b8b4;
  text-align: center;
  font: 14px/1.6 system-ui, "Microsoft YaHei", sans-serif;
}
:root :is(.pg-workflow-loading-panel, .novel-loading, .account-loading,
  .pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading, .pg-showcase-loader-inner)::before,
#v2-initial-loader::before {
  content: 'PINNGOO AI STUDIO';
  grid-row: 2;
  color: #bdd7d0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
}
:root :is(.pg-workflow-loading-panel, .novel-loading, .account-loading,
  .pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading, .pg-showcase-loader-inner)::after,
#v2-initial-loader::after {
  content: '';
  grid-row: 4;
  width: 144px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #97e7d1, transparent) -144px 0 / 144px 100% no-repeat #b6f2df13;
  animation: pgLoadingTrack 1.6s ease-in-out infinite;
}
:root :is(.pg-app-boot-content, .pg-workflow-loading-panel, .novel-loading,
  .account-loading, .pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading, .pg-showcase-loader-inner) > :first-child,
#v2-initial-loader > .canvas-boot-emblem { grid-row: 1; margin: 0; }
:root :is(.pg-workflow-loading-panel, .novel-loading, .account-loading,
  .pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading, .pg-showcase-loader-inner) > :nth-child(2) {
  grid-row: 3;
  align-self: start;
  margin: 0;
  color: #a2b8b4;
  font: 14px/1.6 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
:root .pg-app-boot-content > .pg-app-boot-brand { grid-row: 2; }
:root .pg-app-boot-content > p { grid-row: 3; align-self: start; }
:root .pg-app-boot-content > .pg-app-boot-progress { grid-row: 4; }
:root :is(.pg-loading-page, .admin-panel-view-state-loading,
  .pg-update-center-view-state-loading) > span.pg-loading-emblem,
:root .pg-showcase-loader-inner > span.pg-showcase-spinner { --pg-loading-size: 156px; }
:root :is(.admin-panel-view-state-loading, .pg-update-center-view-state-loading,
  .pg-workflow-loading-panel, .pg-loading-page) { min-height: 324px; }
:root :is(.novel-loading, .account-loading) {
  min-height: calc(100dvh - var(--pg-cloud-bar-height, 0px));
}
:root .pg-workflow-loading-overlay { padding: 0; }
:root .pg-workflow-loading-panel { min-height: 100dvh; }
:root .pg-loading-page { grid-column: 1 / -1; }
:root .pg-update-center-view-state-loading:has(> .pg-loading-only) {
  display: grid;
  flex-wrap: nowrap;
}
:root .pg-member-body:has(> .pg-loading-page) {
  display: grid;
  min-height: calc(100dvh - var(--pg-cloud-bar-height, 0px) - 170px);
  align-items: center;
}
/* Route entry fills the same viewport below the site navigation as settings
   and orders. Loading markup owns this state; success/error restores the page
   header and normal content padding without another loader or state flag. */
:root .pg-profile-page:has(> .pg-profile-body > .pg-loading-page) > .pg-profile-head { display: none; }
:root .pg-profile-body:has(> .pg-loading-page) {
  display: grid;
  min-height: calc(100dvh - var(--pg-cloud-bar-height, 0px));
  padding: 0;
}
:root .pg-profile-body > .pg-loading-page {
  min-height: calc(100dvh - var(--pg-cloud-bar-height, 0px));
}
:root .account-page:has(> .account-loading) { padding-block: 0; }
/* Initial admin entry spans authentication and the first route's existing
   request. Local refresh indicators resume their usual ownership afterwards. */
:root .pg-admin-entry-loading { display: none; }
:root body[data-admin-entry-loading] > .pg-admin-entry-loading {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 100;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 50% 44%, #112522 0, #06090f 62%);
}
:root body[data-admin-entry-loading] > .admin-shell { visibility: hidden; }
:root .pg-workflow-loading-overlay,
#v2-initial-loader,
:root body:has(.account-loading),
:root .novel-adaptation-page:has(.novel-loading),
:root .pg-profile-backdrop:has(.pg-loading-page),
:root .pg-member-page:has(.pg-loading-page) {
  background: radial-gradient(ellipse at 50% 44%, #112522 0, #06090f 62%);
}
:root .pg-profile-backdrop:has(.pg-loading-page)::before,
:root .pg-profile-backdrop:has(.pg-loading-page)::after { display: none; }
:root .pg-member-page:has(.pg-loading-page)::before,
:root body:has(.account-loading) .account-atmosphere { opacity: 0; }
:root .novel-adaptation-page:has(.novel-loading) { padding: 0; }
#v2-initial-loader > .canvas-boot-copy {
  grid-row: 3;
  align-self: start;
  min-height: 0;
  margin: 0;
  max-width: 360px;
}
#v2-initial-loader .canvas-boot-copy h1 {
  margin: 0 0 6px;
  font: 550 14px/1.6 system-ui, "Microsoft YaHei", sans-serif;
  color: #bdd7d0;
  letter-spacing: 0;
}
#v2-initial-loader .canvas-boot-copy p { font-size: 13px; }
#v2-initial-loader[data-state="error"]::after { animation: none; }
#v2-initial-loader[data-state="error"] { grid-template-rows: 156px 18px auto 2px; }
:root .pg-auth-loading.pg-restoring-page-entry .pg-app-boot-content {
  grid-template-rows: auto;
}
:root .pg-auth-loading.pg-restoring-page-entry .pg-app-boot-content > p { grid-row: 1; }
@keyframes pgLoadingTrack { to { background-position: 144px 0; } }
@media (max-width: 480px) {
  :root :is(.pg-app-boot-content, .pg-workflow-loading-panel, .novel-loading,
    .account-loading, .pg-loading-page, .admin-panel-view-state-loading,
    .pg-update-center-view-state-loading, .pg-showcase-loader-inner),
  #v2-initial-loader { grid-template-rows: 138px 18px 52px 2px; }
  #v2-initial-loader[data-state="error"] { grid-template-rows: 138px 18px auto 2px; }
  :root :is(.pg-loading-page, .admin-panel-view-state-loading,
    .pg-update-center-view-state-loading) > span.pg-loading-emblem,
  :root .pg-showcase-loader-inner > span.pg-showcase-spinner { --pg-loading-size: 138px; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.pg-workflow-loading-panel, .novel-loading, .account-loading,
    .pg-loading-page, .admin-panel-view-state-loading,
    .pg-update-center-view-state-loading, .pg-showcase-loader-inner)::after,
  #v2-initial-loader::after { animation: none; }
}