/* Content stays visible; this light layer never delays native navigation. */
.mar-navigation-ui[hidden] { display: none; }
.mar-navigation-ui {
  position: fixed; inset: 0; z-index: 999999; display: grid; padding: 1rem;
  place-items: center; pointer-events: none; color: #08334a;
  background: rgb(3 28 45 / 12%);
  opacity: 1; transition: opacity 180ms ease;
  animation: mar-navigation-enter 140ms ease-out both;
}
.mar-navigation-ui.is-arriving { animation: none; }
.mar-navigation-ui.is-finishing { opacity: 0; animation: none; }
.mar-navigation-ui__bar { position: absolute; inset: 0 0 auto; height: 3px; overflow: hidden; background: rgb(24 173 224 / 10%); }
.mar-navigation-ui__bar::before { display: block; width: 32%; height: 100%; content: ''; background: linear-gradient(90deg,#079acd,#52d5fa); transform: translateX(-110%); animation: mar-navigation-bar 1.2s ease-in-out infinite; }
.mar-navigation-ui__panel {
  position: relative; display: grid; width: min(100%,360px); padding: 1.3rem 1.5rem;
  grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 1rem;
  overflow: hidden; background: rgb(255 255 255 / 97%);
  border: 1px solid #d4e7ef; border-radius: 16px;
  box-shadow: 0 14px 45px rgb(3 28 45 / 17%);
}
.mar-navigation-ui__brand { position: relative; display: grid; width: 96px; height: 96px; place-items: center; }
.mar-navigation-ui__logo { position: relative; width: 80px; height: auto; object-fit: contain; }
.mar-navigation-ui__spinner { position: absolute; inset: 0; border: 1.5px solid #daeff7; border-top-color: #079fd0; border-right-color: #75d3f1; border-radius: 50%; animation: mar-navigation-spin 1.3s linear infinite; }
.mar-navigation-ui__spinner::after { position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; content: ''; border-radius: 50%; background: #10afe0; box-shadow: 0 0 0 4px rgb(16 175 224 / 12%); }
.mar-navigation-ui__copy { min-width: 0; }
.mar-navigation-ui__copy > strong { display: block; font-size: 1rem; font-weight: 650; line-height: 1.45; }
.mar-navigation-ui__destination { display: block; margin-top: .3rem; color: #647e8f; font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.mar-navigation-ui__dots { display: flex; margin-top: .75rem; gap: 5px; }
.mar-navigation-ui__dots i { width: 4px; height: 4px; border-radius: 50%; background: #10aee0; animation: mar-navigation-dot 1s ease-in-out infinite; }
.mar-navigation-ui__dots i:nth-child(2) { animation-delay: 120ms; }
.mar-navigation-ui__dots i:nth-child(3) { animation-delay: 240ms; }
.mar-navigation-ui__panel::after { position: absolute; inset: auto 0 0; height: 2px; content: ''; background: linear-gradient(90deg,transparent,#21b9e7,transparent); transform: translateX(-100%); animation: mar-navigation-panel 1.3s ease-in-out infinite; }
@keyframes mar-navigation-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes mar-navigation-bar { to { transform: translateX(420%); } }
@keyframes mar-navigation-panel { to { transform: translateX(100%); } }
@keyframes mar-navigation-spin { to { transform: rotate(360deg); } }
@keyframes mar-navigation-dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mar-page-out 140ms ease both; }
::view-transition-new(root) { animation: mar-page-in 180ms ease both; }
@keyframes mar-page-out { to { opacity: 0; } }
@keyframes mar-page-in { from { opacity: 0; } }
@media (max-width:600px) {
  .mar-navigation-ui__panel { padding: 1.1rem 1.2rem; grid-template-columns: 80px minmax(0,1fr); gap: .8rem; }
  .mar-navigation-ui__brand { width: 80px; height: 80px; }
  .mar-navigation-ui__logo { width: 66px; }
}
@media (prefers-reduced-motion:reduce) {
  .mar-navigation-ui, .mar-navigation-ui__spinner, .mar-navigation-ui__dots i { animation: none; }
  .mar-navigation-ui { transition: opacity 150ms ease; transition-duration: 150ms !important; }
  .mar-navigation-ui__bar::before, .mar-navigation-ui__panel::after { animation: none; width: 100%; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}