/* Club console and account pages: the browser swaps documents natively and this
   layer choreographs the hand-off. The header, rail and tab bar stay put, the
   selection marker travels to its new item, the title rises through a clipped
   frame and the content glides in the direction of travel. Nothing here waits
   for animation before navigating, and every page has a usable resting state. */
:root{--app-ease:cubic-bezier(.16,1,.3,1);--app-spring:cubic-bezier(.3,1.32,.45,1);--app-glide:cubic-bezier(.22,.75,.18,1)}

/* Selection markers are real elements so they can be captured and moved. */
.side-link{position:relative;isolation:isolate}
.side-link-current{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--surface-strong,#e9eddf);pointer-events:none}
.commercial.coach-layout .side-link.is-active{background:transparent}
.mobile-tab{position:relative;isolation:isolate}
.mobile-tab-current{position:absolute;inset:-2px 0 0;z-index:-1;border-top:2px solid var(--court,#234f3e);background:#eef1e7;pointer-events:none}
.mobile-tab.active{background:transparent;border-top-color:transparent}

/* Slow responses get a slim cue along the top edge, never a cover. */
.app-progress{position:fixed;inset:0 0 auto;height:2px;z-index:200;overflow:hidden;pointer-events:none;background:#e4eac9;opacity:0;transition:opacity 160ms}
.app-progress::after{content:'';position:absolute;inset:0;background:var(--court,#234f3e);transform-origin:left;transform:scaleX(0)}
.app-progress-status{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:200;transform:translate(-50%,8px);max-width:calc(100vw - 32px);
  padding:10px 16px;border-radius:999px;background:#193d30;color:#fff;font:600 13px/1.4 Manrope,system-ui,sans-serif;box-shadow:0 10px 30px -12px #0b241a73;
  opacity:0;pointer-events:none;transition:opacity 180ms,transform 260ms var(--app-ease)}
.has-mobile-tabbar .app-progress-status{bottom:calc(76px + env(safe-area-inset-bottom))}
html.app-navigating .app-progress{opacity:1}
html.app-navigating .app-progress::after{animation:app-progress 1.6s var(--app-ease) forwards}
html.app-navigating-long .app-progress-status{opacity:1;transform:translate(-50%,0)}
@keyframes app-progress{0%{transform:scaleX(0)}40%{transform:scaleX(.55)}100%{transform:scaleX(.9)}}

@media(prefers-reduced-motion:no-preference){
  /* Immediate, physical response to a press: the navigation acknowledges the
     tap before the network does. */
  .side-link,.mobile-tab,.p-public-nav a,.p-footer a{transition:transform 260ms var(--app-spring),background-color 160ms,color 160ms}
  .side-link:active,.mobile-tab:active{transform:scale(.965);transition-duration:80ms}
  .side-link:not(.is-active):hover{transform:translateX(2px)}

  @view-transition{navigation:auto}
  :root{view-transition-name:none;--app-enter:28px;--app-exit:-12px;--app-time:560ms}
  :root[data-app-direction=back]{--app-enter:-28px;--app-exit:12px}
  :root[data-app-direction=same]{--app-enter:0px;--app-exit:0px;--app-time:340ms}
  .app-header{view-transition-name:app-header}
  .app-sidebar{view-transition-name:app-rail}
  .mobile-tabbar{view-transition-name:app-tabs}
  .side-link-current{view-transition-name:app-selection}
  .mobile-tab-current{view-transition-name:app-tab-selection}
  /* Labels get their own layer above the travelling marker so it never covers them. */
  [data-nav-order]{view-transition-name:app-navigation}
  .mobile-tabbar-inner{view-transition-name:app-tab-labels}
  #main-content{view-transition-name:app-main}
  .p-footer{view-transition-name:app-footer}

  ::view-transition{pointer-events:none}
  ::view-transition-group(app-header),::view-transition-group(app-rail),::view-transition-group(app-tabs),
  ::view-transition-group(app-heading),::view-transition-group(app-main),::view-transition-group(app-footer){animation:none}
  ::view-transition-group(app-header),::view-transition-group(app-rail),::view-transition-group(app-tabs){z-index:10}
  ::view-transition-group(app-selection),::view-transition-group(app-tab-selection){z-index:11;animation-duration:520ms;animation-timing-function:var(--app-spring)}
  ::view-transition-group(app-navigation),::view-transition-group(app-tab-labels){z-index:12;animation:none}
  ::view-transition-image-pair(app-navigation),::view-transition-image-pair(app-tab-labels){isolation:isolate}
  ::view-transition-old(app-navigation),::view-transition-old(app-tab-labels){animation:app-ink-out 240ms linear both;mix-blend-mode:plus-lighter}
  ::view-transition-new(app-navigation),::view-transition-new(app-tab-labels){animation:app-ink-in 240ms linear both;mix-blend-mode:plus-lighter}
  ::view-transition-group(app-heading){z-index:3;overflow:clip}
  ::view-transition-group(app-main){z-index:1}
  /* Chrome stays live; only the markers and the page itself move. */
  ::view-transition-old(app-header),::view-transition-old(app-rail),::view-transition-old(app-tabs){display:none}
  ::view-transition-new(app-header),::view-transition-new(app-rail),::view-transition-new(app-tabs){animation:none}
  ::view-transition-old(app-selection),::view-transition-old(app-tab-selection){display:none}
  ::view-transition-new(app-selection),::view-transition-new(app-tab-selection){animation:none}
  /* A marker with no counterpart (leaving the console) settles rather than flies. */
  ::view-transition-new(app-selection):only-child,::view-transition-new(app-tab-selection):only-child{animation:app-ink-in 220ms ease-out both}
  ::view-transition-old(app-selection):only-child,::view-transition-old(app-tab-selection):only-child{display:block;animation:app-ink-out 160ms linear both}

  ::view-transition-old(app-heading),::view-transition-new(app-heading),::view-transition-old(app-main),::view-transition-new(app-main){height:auto;object-position:top left;mix-blend-mode:normal}
  ::view-transition-old(app-heading){transform:translateY(var(--app-old-heading-y,0px));animation:app-heading-out var(--app-time) var(--app-glide) both}
  ::view-transition-new(app-heading){animation:app-heading-in var(--app-time) var(--app-glide) 40ms both}
  ::view-transition-old(app-main){transform:translateY(var(--app-old-main-y,0px));animation:app-page-out 120ms ease-in both}
  ::view-transition-new(app-main){transform-origin:50% 0;animation:app-page-in var(--app-time) var(--app-glide) 110ms both}
  ::view-transition-old(app-footer){transform:translateY(var(--app-old-footer-y,0px));animation:app-ink-out 120ms linear both}
  ::view-transition-new(app-footer){animation:app-ink-in 320ms ease-out 200ms both}
  :root[data-app-direction=same]::view-transition-old(app-heading){display:none}
  :root[data-app-direction=same]::view-transition-new(app-heading){animation:none}

  @keyframes app-ink-out{to{opacity:0}}
  @keyframes app-ink-in{from{opacity:0}}
  @keyframes app-heading-out{to{transform:translateY(calc(var(--app-old-heading-y,0px) - 105%))}}
  @keyframes app-heading-in{from{transform:translateY(105%)}}
  @keyframes app-page-out{to{opacity:0;transform:translate(var(--app-exit),var(--app-old-main-y,0px))}}
  @keyframes app-page-in{from{opacity:0;transform:translateX(var(--app-enter)) scale(.992)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .app-progress::after{animation:none!important;transform:scaleX(.6)}
}
@media print{.app-progress,.app-progress-status{display:none!important}}