.series-hub-loading-shell { display: none; }

html.series-hub-loading-page .series-hub-loading-shell:not([hidden]) {
  display: grid;
  gap: var(--viewer-shell-gap, clamp(14px, 2vw, 24px));
  --hub-loading-surface: var(--brk-workspace-surface, #122132);
  --hub-loading-fill: var(--brk-workspace-surface-raised, #1b2c40);
  --hub-loading-line: var(--brk-workspace-border, #385370);
  --hub-fixture-height: 111px;
}

html.bracketr-theme-light .series-hub-loading-shell {
  --hub-loading-surface: var(--light-paper);
  --hub-loading-fill: var(--light-inset);
  --hub-loading-line: var(--light-border);
}

body.series-page:has(.series-hub-loading-shell:not([hidden])) { --competition-width: 1320px; }

.series-hub-loading-shell :is(.hub-loading-nav, .hub-loading-header, .hub-loading-summary, .hub-loading-timeline, .hub-loading-panel) {
  border: 1px solid var(--hub-loading-line);
  border-radius: 12px;
  box-sizing: border-box;
  background: var(--hub-loading-surface);
}

.hub-loading-nav { height: 82px; margin-block-end: -12px; }
.hub-loading-header { height: 230px; }
.hub-loading-summary { height: 202px; }
.hub-loading-timeline { height: 92px; }

.series-hub-loading-shell :is(.hub-loading-nav, .hub-loading-header, .hub-loading-summary, .hub-loading-timeline)::before {
  content: "";
  display: block;
  width: min(62%, 440px);
  height: 16px;
  margin: clamp(16px, 2vw, 26px);
  border-radius: 4px;
  background: var(--hub-loading-fill);
  box-shadow: 0 30px var(--hub-loading-fill);
}

.series-hub-loading-shell .series-hub-top-grid { gap: inherit; margin: 0; }

.hub-loading-panel {
  min-width: 0;
  padding: clamp(14px, 2vw, 24px);
}

.hub-loading-panel::before {
  content: "";
  display: block;
  width: min(48%, 182px);
  height: 22px;
  margin-block-end: 20px;
  border-radius: 5px;
  background: var(--hub-loading-fill);
}

.hub-loading-fixture {
  display: block;
  height: var(--hub-fixture-height);
  margin-block-end: 10px;
  border-radius: 8px;
  background: var(--hub-loading-fill);
}

.series-hub-loading-shell [role="status"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.series-hub-top-grid {
  --hub-fixture-height: 111px;
}

.series-hub-fixture-status[data-series-hub-fixtures-loading] {
  font-size: 0;
  line-height: 0;
  margin-block: 12px 0;
}

.series-hub-fixture-status .hub-loading-fixture {
  background-color: var(--viewer-shell-raised);
}

.series-hub-top-grid [data-series-hub-pending] { position: relative; cursor: progress; }
.series-hub-top-grid [data-series-hub-pending] > * { opacity: 0 !important; }

.series-hub-top-grid [data-series-hub-pending]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--viewer-shell-raised);
  pointer-events: none;
}

.hub-loading-fixture,
.series-hub-top-grid [data-series-hub-pending]::after {
  background-image: url("/public/assets/logos/bracketr-loading-b-20261111-1.svg");
  background-position: center;
  background-size: 44px auto;
  background-repeat: no-repeat;
}

.series-hub-top-grid img[hidden] { display: none !important; }

@media (max-width: 759px) {
  .series-hub-top-grid { --hub-fixture-height: 195px; }
  .hub-loading-nav { height: 104px; margin-block-end: -6px; }
  .hub-loading-header { height: 283px; }
  .hub-loading-summary { height: 431px; }
  .hub-loading-timeline { height: 163px; }
}

@media (max-width: 350px) {
  .hub-loading-header { height: 344px; }
  .hub-loading-summary { height: 452px; }
  .hub-loading-timeline { height: 199px; }
}

@media (prefers-reduced-motion: no-preference) {

  [data-series-hub-section-ready] { animation: series-hub-section-reveal 240ms ease-out; }

  .series-hub-top-grid [data-series-hub-card-ready] {
    transform-origin: top center;
    animation: series-hub-card-reveal 240ms cubic-bezier(.2, .7, .3, 1);
  }

  @keyframes series-hub-section-reveal { from { opacity: .5; } to { opacity: 1; } }
  @keyframes series-hub-card-reveal {
    from { opacity: .35; transform: perspective(950px) rotateX(-14deg); }
    to { opacity: 1; transform: perspective(950px) rotateX(0deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-loading-fixture, .series-hub-top-grid [data-series-hub-pending]::after { background-image: url("/public/assets/logos/bracketr-loading-b-20261111-1-still.svg"); }
}