/* Shared sixteen-team logo loading illustration. */
@layer ripcity-app {
  /* Shared loading treatment: sixteen team marks filling in sequence. The
     2600ms step wave, tile treatment, and 38rem/92cqmin square are the source's
     exact values. The source's sixteen tile keyframes were identical in pairs, so
     eight wave phases carry the same rendered motion. */
  .team-logo-loader {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: var(--wa-space-m);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Measure the square against this box, not the viewport or the shell height.
       The grid's cqmin cap then always fits the finite canvas it was handed, so
       loading never introduces a scrollbar the loaded book does not have. */
    container-type: size;
  }

  @media (min-width: 48rem) { .team-logo-loader { padding: var(--wa-space-l); } }

  .team-logo-loader-status { display: inline-flex; align-items: center; justify-content: center; }

  .team-logo-loader-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(0.625rem, 1.3vw, 1rem);
    /* cqmin is the smaller of the container's width and height, so a 38rem-capped
       square fits both narrow desktop and short windows. */
    width: min(38rem, 92cqmin);
    aspect-ratio: 1 / 1;
  }

  /* The resting tile is the wave's quiet state; each phase lights it in place. */
  .team-logo-loader-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.125rem;
    background: var(--wa-color-neutral-fill-quiet);
    opacity: 0.34;
    transform: scale(0.96);
    filter: grayscale(1) saturate(0.18) brightness(0.94);
    will-change: opacity, transform, filter;
    animation-duration: 2600ms;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: running;
  }

  /* Phase by grid position: pairs of adjacent cells share one wave. */
  .team-logo-loader-tile:nth-child(1),
  .team-logo-loader-tile:nth-child(2) { animation-name: team-logo-loader-wave-1; }
  .team-logo-loader-tile:nth-child(3),
  .team-logo-loader-tile:nth-child(4) { animation-name: team-logo-loader-wave-2; }
  .team-logo-loader-tile:nth-child(5),
  .team-logo-loader-tile:nth-child(6) { animation-name: team-logo-loader-wave-3; }
  .team-logo-loader-tile:nth-child(7),
  .team-logo-loader-tile:nth-child(8) { animation-name: team-logo-loader-wave-4; }
  .team-logo-loader-tile:nth-child(9),
  .team-logo-loader-tile:nth-child(10) { animation-name: team-logo-loader-wave-5; }
  .team-logo-loader-tile:nth-child(11),
  .team-logo-loader-tile:nth-child(12) { animation-name: team-logo-loader-wave-6; }
  .team-logo-loader-tile:nth-child(13),
  .team-logo-loader-tile:nth-child(14) { animation-name: team-logo-loader-wave-7; }
  .team-logo-loader-tile:nth-child(15),
  .team-logo-loader-tile:nth-child(16) { animation-name: team-logo-loader-wave-8; }

  .team-logo-loader-logo {
    width: 74%;
    height: 74%;
    object-fit: contain;
    opacity: 0.98;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  @keyframes team-logo-loader-wave-1 {
    0.000000%, 22.857143%, 40.000000%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    2.857143%, 5.714286%, 8.571429%, 11.428571%, 14.285714%, 17.142857%, 20.000000%, 25.714286%, 28.571429%, 31.428571%, 34.285714%, 37.142857%, 42.857143%, 45.714286%, 48.571429% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-2 {
    11.428571%, 31.428571%, 45.714286%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 5.714286%, 8.571429%, 14.285714%, 17.142857%, 20.000000%, 22.857143%, 25.714286%, 28.571429%, 34.285714%, 37.142857%, 40.000000%, 42.857143%, 48.571429%, 51.428571% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-3 {
    2.857143%, 25.714286%, 42.857143%, 45.714286%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 5.714286%, 8.571429%, 11.428571%, 14.285714%, 17.142857%, 20.000000%, 22.857143%, 28.571429%, 31.428571%, 34.285714%, 37.142857%, 40.000000% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-4 {
    14.285714%, 34.285714%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 5.714286%, 8.571429%, 11.428571%, 17.142857%, 20.000000%, 22.857143%, 25.714286%, 28.571429%, 31.428571%, 37.142857%, 40.000000%, 42.857143%, 45.714286% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-5 {
    5.714286%, 28.571429%, 31.428571%, 34.285714%, 37.142857%, 40.000000%, 42.857143%, 45.714286%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 8.571429%, 11.428571%, 14.285714%, 17.142857%, 20.000000%, 22.857143%, 25.714286% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-6 {
    17.142857%, 37.142857%, 40.000000%, 42.857143%, 45.714286%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 5.714286%, 8.571429%, 11.428571%, 14.285714%, 20.000000%, 22.857143%, 25.714286%, 28.571429%, 31.428571%, 34.285714% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-7 {
    8.571429%, 11.428571%, 14.285714%, 17.142857%, 20.000000%, 22.857143%, 25.714286%, 28.571429%, 31.428571%, 34.285714%, 37.142857%, 40.000000%, 42.857143%, 45.714286%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 5.714286% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }

  @keyframes team-logo-loader-wave-8 {
    20.000000%, 22.857143%, 25.714286%, 28.571429%, 31.428571%, 34.285714%, 37.142857%, 40.000000%, 42.857143%, 45.714286%, 48.571429%, 51.428571%, 54.285714%, 57.142857%, 60.000000%, 62.857143%, 65.714286%, 68.571429%, 71.428571%, 74.285714%, 77.142857%, 80.000000%, 82.857143%, 85.714286%, 88.571429%, 91.428571%, 94.285714%, 97.142857%, 100% { opacity: 1; transform: scale(1.02); filter: none; }
    0.000000%, 2.857143%, 5.714286%, 8.571429%, 11.428571%, 14.285714%, 17.142857% { opacity: 0.34; transform: scale(0.96); filter: grayscale(1) saturate(0.18) brightness(0.94); }
  }
}