/* TTRA page banners: the final rules in one place.
   Uses the app's M3 colour tokens (--md-sys-color-*) and type tokens; fallbacks are given so it also works on its own.
   Load it after the app's own CSS so it replaces the older .pagehead / .ph-art rules. */

.pagehead, .pagehead * { box-sizing: border-box; }
.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 4px; align-content: end;
  margin-top: 16px; min-height: 168px; padding: 24px 204px 24px 24px;
  border-radius: var(--r-xli, 32px);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.pagehead::before { content: none; }
.pagehead .page-title { margin: 0; color: inherit; font: var(--t-headline-m, 500 1.75rem/2.25rem "Archivo", "Roboto Flex", sans-serif); letter-spacing: 0; }
.pagehead .page-title:focus { outline: none; }
.pagehead .page-title { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } /* long story titles never run under the art */
.pagehead p { margin: 0; color: var(--md-sys-color-on-secondary-container); font: var(--t-body-m, 400 0.875rem/1.25rem "Roboto Flex", sans-serif); letter-spacing: 0.0179em; }

/* The art circle: big enough to fill the banner's right corners, running off the right edge */
.pagehead .ph-art {
  position: absolute; z-index: -1; top: 50%; right: -48px;
  width: 228px; height: 228px; margin-top: -114px;
  display: grid; place-items: center; clip-path: circle(50%);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
}
.pagehead .ph-art.art-scene { display: block; background: var(--art-bg, transparent); }
.pagehead .ph-art.art-scene svg { display: block; width: 100%; height: 100%; }
[data-art="podium"], [data-art="climb"], [data-art="board"], [data-art="elo"], [data-art="suite"] { --art-bg: var(--md-sys-color-surface-container-lowest); }
[data-art="bracket"] { --art-bg: #D3E4FF; }
[data-art="score"] { --art-bg: #B8D4EE; }
[data-art="trophy"], [data-art="journal"] { --art-bg: var(--md-sys-color-tertiary-container); }

/* 16:9 motion thumbnails: the same scenes, no text. <div class="art-thumb" data-art="…" role="img" aria-label="…"></div> */
.art-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r-l, 16px); background: var(--art-bg, var(--md-sys-color-tertiary-container)); }
.art-thumb svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Tournaments: the turning table (CSS only) */
.pagehead .ph-art .tt-table { width: 112px; height: 112px; transform: translateX(-18px); overflow: visible; }
.tt-table .tt-turn { transform-box: fill-box; transform-origin: center; }

@media (max-width: 599px) {
  .pagehead { min-height: 160px; padding: 20px 156px 20px 20px; }
  .pagehead .page-title { font: var(--t-headline-s, 500 1.5rem/2rem "Archivo", "Roboto Flex", sans-serif); }
  .pagehead .ph-art { width: 208px; height: 208px; margin-top: -104px; right: -52px; }
  .pagehead .ph-art .tt-table { width: 100px; height: 100px; transform: translateX(-21px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* the circle springs in when the page opens */
  .pagehead .ph-art { animation: phIn 700ms cubic-bezier(0.38, 1.21, 0.22, 1) both; }
  @keyframes phIn { from { transform: rotate(-30deg) scale(0.7); opacity: 0; } }
  /* a quarter turn on each beat with the expressive spatial easing (small overshoot), 8 s loop */
  .tt-table .tt-turn { animation: ttTurn 8s var(--ease-spatial, cubic-bezier(0.38, 1.21, 0.22, 1)) infinite; }
  /* where supported, each quarter turn follows the M3 Expressive fast spatial spring (stiffness 800, damping 0.6) exactly */
  @supports (animation-timing-function: linear(0, 1)) { .tt-table .tt-turn { animation-timing-function: linear(0, 0.1847, 0.5274, 0.8269, 1.0111, 1.0863, 1.0906, 1.0632, 1.031, 1.0072, 0.9947, 0.991, 0.9924, 0.9954, 0.9982, 1.0, 1.0007, 1.0008, 1.0006, 1.0003, 1.0001, 1.0, 0.9999, 0.9999, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1); } }
  @keyframes ttTurn { 0%, 15% { transform: rotate(0deg); } 25%, 40% { transform: rotate(90deg); } 50%, 65% { transform: rotate(180deg); } 75%, 90% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
}