/* A native shared-element transition where available, a color curtain elsewhere. */
.factory-navigation-cover { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #101211; color: #f5f4ed; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.factory-navigation-cover[data-team="games"] { background: #ff875f; color: #19251c; }
.factory-navigation-cover[data-team="apps"] { background: #e6eddf; color: #25372b; }
.factory-navigation-cover > span { font-size: clamp(16px, 2vw, 26px); font-weight: 500; letter-spacing: -.5px; }
.factory-navigation-cover > strong { font-size: clamp(52px, 9vw, 128px); font-weight: 650; line-height: 1.2; letter-spacing: -.065em; margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html[data-page-arrival]::before { content: ''; position: fixed; inset: 0; z-index: 1000; background: #101211; pointer-events: none; animation: factory-curtain-reveal 540ms cubic-bezier(.22, 1, .36, 1) both; }
  html[data-page-arrival="games"]::before { background: #ff875f; }
  html[data-page-arrival="apps"]::before { background: #e6eddf; }
  @keyframes factory-curtain-reveal { from { transform: translateY(0); } to { transform: translateY(-100%); } }

  .lf-header { view-transition-name: factory-header; }
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) { animation-duration: 540ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  ::view-transition-old(root) { animation: factory-page-out 220ms ease both; }
  ::view-transition-new(root) { animation: factory-page-in 540ms cubic-bezier(.22, 1, .36, 1) both; }
  ::view-transition-group(factory-header) { z-index: 3; animation-duration: 220ms; }
  ::view-transition-old(factory-header) { animation: factory-fade-out 140ms ease both; }
  ::view-transition-new(factory-header) { animation: factory-fade-in 220ms ease both; }

  /* Only the chosen card shares a snapshot with its destination hero. */
  ::view-transition-group(factory-team) { z-index: 2; animation-duration: 680ms; overflow: clip; }
  ::view-transition-image-pair(factory-team) { isolation: isolate; }
  ::view-transition-old(factory-team) { height: 100%; object-fit: cover; animation: factory-fade-out 240ms ease both; mix-blend-mode: normal; }
  ::view-transition-new(factory-team) { height: 100%; object-fit: cover; animation: factory-fade-in 460ms 80ms ease both; mix-blend-mode: normal; }

  @keyframes factory-page-out { to { opacity: 0; transform: translateY(-14px); } }
  @keyframes factory-page-in { from { opacity: 0; transform: translateY(24px); } }
  @keyframes factory-fade-out { to { opacity: 0; } }
  @keyframes factory-fade-in { from { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}