/*
 * Page changes. Turbo replaces the whole <body> on every visit, so the page content simply rises into
 * place as it is inserted (180ms): the main column in the portal and the console, the section in the
 * player. The rail, headers, tab bar and the player's bars are not animated, so the chrome stays
 * still. A plain CSS animation never holds the page back or blocks a click (the View Transitions API
 * did both). application.js marks the body `is-settled` when Turbo replaces a cached preview with the
 * fresh page, so a page rises in once. Off under prefers-reduced-motion (base.css).
 */
@layer layout {
  .main > :not(.app-header),
  .player__content {
    animation: hub-page-in var(--motion-base) var(--ease-standard);
  }

  .is-settled :is(.main > :not(.app-header), .player__content) { animation: none; }

  @keyframes hub-page-in {
    from { opacity: 0; transform: translateY(6px); }
  }
}

/* Turbo's loading bar in the Hub blue. Turbo injects its own unlayered style for the bar, which
   outranks every layer, so this one rule stays unlayered too. */
html .turbo-progress-bar { background: var(--color-blue); }