/* HLB V5.4.1h - native-like mobile navigation transitions */
@view-transition {
  navigation: auto;
}

:root{
  --hlb-page-transition-ms: 190ms;
  --hlb-page-transition-shift: 12px;
}

@media (max-width: 900px){
  html.hlb-page-transition-ready main,
  html.hlb-page-transition-ready .page-main,
  html.hlb-page-transition-ready .page-shell{
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  html.hlb-fallback-enter-right main,
  html.hlb-fallback-enter-right .page-main,
  html.hlb-fallback-enter-right .page-shell{
    animation: hlb-enter-right var(--hlb-page-transition-ms) cubic-bezier(.2,.75,.2,1) both;
  }

  html.hlb-fallback-enter-left main,
  html.hlb-fallback-enter-left .page-main,
  html.hlb-fallback-enter-left .page-shell{
    animation: hlb-enter-left var(--hlb-page-transition-ms) cubic-bezier(.2,.75,.2,1) both;
  }

  html.hlb-fallback-enter-fade main,
  html.hlb-fallback-enter-fade .page-main,
  html.hlb-fallback-enter-fade .page-shell{
    animation: hlb-enter-fade 150ms ease-out both;
  }

  html.hlb-fallback-leave-right main,
  html.hlb-fallback-leave-right .page-main,
  html.hlb-fallback-leave-right .page-shell{
    animation: hlb-leave-right 120ms ease-in both;
    pointer-events:none;
  }

  html.hlb-fallback-leave-left main,
  html.hlb-fallback-leave-left .page-main,
  html.hlb-fallback-leave-left .page-shell{
    animation: hlb-leave-left 120ms ease-in both;
    pointer-events:none;
  }

  html.hlb-fallback-leave-fade main,
  html.hlb-fallback-leave-fade .page-main,
  html.hlb-fallback-leave-fade .page-shell{
    animation: hlb-leave-fade 105ms ease-in both;
    pointer-events:none;
  }

  .mobile-nav a.hlb-nav-tap{
    transform: scale(.94);
    opacity:.82;
    transition: transform 90ms ease, opacity 90ms ease;
  }
}

@keyframes hlb-enter-right{
  from{opacity:0;transform:translate3d(var(--hlb-page-transition-shift),0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hlb-enter-left{
  from{opacity:0;transform:translate3d(calc(-1 * var(--hlb-page-transition-shift)),0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hlb-enter-fade{
  from{opacity:.35;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hlb-leave-right{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.15;transform:translate3d(calc(-1 * var(--hlb-page-transition-shift)),0,0)}
}
@keyframes hlb-leave-left{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.15;transform:translate3d(var(--hlb-page-transition-shift),0,0)}
}
@keyframes hlb-leave-fade{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.2;transform:translate3d(0,-4px,0)}
}

/* Cross-document View Transition: keep app chrome visually stable */
@media (max-width: 900px){
  .topbar{view-transition-name:hlb-topbar}
  .mobile-nav{view-transition-name:hlb-bottom-nav}
  .player-shell{view-transition-name:hlb-player}
  main,.page-main,.page-shell{view-transition-name:hlb-content}

  ::view-transition-old(hlb-topbar),
  ::view-transition-new(hlb-topbar),
  ::view-transition-old(hlb-bottom-nav),
  ::view-transition-new(hlb-bottom-nav),
  ::view-transition-old(hlb-player),
  ::view-transition-new(hlb-player){
    animation-duration:130ms;
    animation-timing-function:ease-out;
  }

  ::view-transition-old(hlb-content){
    animation:hlb-vt-old 135ms ease-in both;
  }
  ::view-transition-new(hlb-content){
    animation:hlb-vt-new 210ms cubic-bezier(.2,.75,.2,1) both;
  }
}

@keyframes hlb-vt-old{
  from{opacity:1;transform:translateX(0)}
  to{opacity:.18;transform:translateX(-9px)}
}
@keyframes hlb-vt-new{
  from{opacity:.18;transform:translateX(11px)}
  to{opacity:1;transform:translateX(0)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto !important}
  html.hlb-page-transition-ready main,
  html.hlb-page-transition-ready .page-main,
  html.hlb-page-transition-ready .page-shell,
  .mobile-nav a.hlb-nav-tap{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}