@media (max-width: 782px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation-duration: var(--unoview-duration, 280ms);
  }

  ::view-transition-new(root) {
    animation-duration: var(--unoview-duration, 280ms);
  }

  html.unoview-fade::view-transition-old(root) { animation: uv-fade-out var(--unoview-duration, 280ms) ease both; }
  html.unoview-fade::view-transition-new(root) { animation: uv-fade-in var(--unoview-duration, 280ms) ease both; }

  html.unoview-subtle::view-transition-old(root) { animation: uv-subtle-out var(--unoview-duration, 280ms) ease both; }
  html.unoview-subtle::view-transition-new(root) { animation: uv-subtle-in var(--unoview-duration, 280ms) ease both; }

  html.unoview-slide::view-transition-old(root) { animation: uv-slide-out var(--unoview-duration, 280ms) ease both; }
  html.unoview-slide::view-transition-new(root) { animation: uv-slide-in var(--unoview-duration, 280ms) ease both; }

  html.unoview-zoom::view-transition-old(root) { animation: uv-zoom-out var(--unoview-duration, 280ms) cubic-bezier(.4,0,.2,1) both; }
  html.unoview-zoom::view-transition-new(root) { animation: uv-zoom-in var(--unoview-duration, 280ms) cubic-bezier(.16,1,.3,1) both; }

  html.unoview-lift::view-transition-old(root) { animation: uv-lift-out var(--unoview-duration, 280ms) cubic-bezier(.4,0,.2,1) both; }
  html.unoview-lift::view-transition-new(root) { animation: uv-lift-in var(--unoview-duration, 280ms) cubic-bezier(.16,1,.3,1) both; }

  html.unoview-blur::view-transition-old(root) { animation: uv-blur-out var(--unoview-duration, 280ms) ease both; }
  html.unoview-blur::view-transition-new(root) { animation: uv-blur-in var(--unoview-duration, 280ms) ease both; }

  html.unoview-reveal::view-transition-old(root) { animation: uv-reveal-out var(--unoview-duration, 280ms) cubic-bezier(.4,0,.2,1) both; }
  html.unoview-reveal::view-transition-new(root) { animation: uv-reveal-in var(--unoview-duration, 280ms) cubic-bezier(.16,1,.3,1) both; }

  /* Smart Navigation: reverse motion when traversing back through history. */
  html.unoview-nav-back:not(.unoview-back-same).unoview-slide::view-transition-old(root) { animation-name: uv-slide-back-out; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-slide::view-transition-new(root) { animation-name: uv-slide-back-in; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-zoom::view-transition-old(root) { animation-name: uv-zoom-back-out; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-zoom::view-transition-new(root) { animation-name: uv-zoom-back-in; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-lift::view-transition-old(root) { animation-name: uv-lift-back-out; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-lift::view-transition-new(root) { animation-name: uv-lift-back-in; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-reveal::view-transition-old(root) { animation-name: uv-reveal-back-out; }
  html.unoview-nav-back:not(.unoview-back-same).unoview-reveal::view-transition-new(root) { animation-name: uv-reveal-back-in; }

  html.unoview-nav-back.unoview-back-subtle::view-transition-old(root) { animation: uv-subtle-out var(--unoview-duration, 280ms) ease both !important; }
  html.unoview-nav-back.unoview-back-subtle::view-transition-new(root) { animation: uv-subtle-in var(--unoview-duration, 280ms) ease both !important; }

  html.unoview-leaving body { animation: uv-leave .18s ease both; }

  html.unoview-swipe-armed::before,
  html.unoview-swipe-active::before {
    content: '';
    position: fixed;
    z-index: 2147483646;
    top: 0;
    left: 0;
    width: max(3px, calc(3px + (var(--unoview-swipe-progress, 0) * 3px)));
    height: 100%;
    background: #ff6500;
    opacity: calc(.16 + var(--unoview-swipe-progress, 0) * .84);
    box-shadow: 0 0 calc(8px + var(--unoview-swipe-progress, 0) * 18px) rgba(255,101,0,.42);
    pointer-events: none;
    transform: translateZ(0);
  }

  html.unoview-swipe-active::after {
    content: '‹';
    position: fixed;
    z-index: 2147483646;
    left: 10px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font: 400 32px/1 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
    background: rgba(20,20,20,.74);
    opacity: calc(.18 + var(--unoview-swipe-progress, 0) * .82);
    transform: translate3d(calc(var(--unoview-swipe-progress, 0) * 10px),0,0) scale(calc(.88 + var(--unoview-swipe-progress, 0) * .12));
    pointer-events: none;
  }

  html.unoview-swipe-ready::after {
    background: #ff6500;
  }
}

@keyframes uv-fade-out { to { opacity: var(--unoview-fade-opacity, .15); } }
@keyframes uv-fade-in { from { opacity: var(--unoview-fade-opacity, .15); } to { opacity: 1; } }
@keyframes uv-subtle-out { to { opacity: var(--unoview-subtle-opacity, .35); transform: scale(var(--unoview-subtle-scale-out, .995)); } }
@keyframes uv-subtle-in { from { opacity: var(--unoview-subtle-opacity, .35); transform: scale(var(--unoview-subtle-scale-in, 1.005)); } to { opacity: 1; transform: scale(1); } }
@keyframes uv-slide-out { to { opacity: var(--unoview-fade-opacity, .15); transform: translateX(var(--unoview-slide-distance, -12px)); } }
@keyframes uv-slide-in { from { opacity: var(--unoview-fade-opacity, .15); transform: translateX(calc(var(--unoview-slide-distance, -12px) * -1)); } to { opacity: 1; transform: translateX(0); } }
@keyframes uv-zoom-out { to { opacity: var(--unoview-subtle-opacity, .35); transform: scale(var(--unoview-zoom-scale-out, .945)); } }
@keyframes uv-zoom-in { from { opacity: 0; transform: scale(var(--unoview-zoom-scale-in, 1.075)); } to { opacity: 1; transform: scale(1); } }
@keyframes uv-lift-out { to { opacity: var(--unoview-subtle-opacity, .35); transform: translateY(calc(var(--unoview-lift-distance, 18px) * -0.45)) scale(var(--unoview-lift-scale, .975)); } }
@keyframes uv-lift-in { from { opacity: 0; transform: translateY(var(--unoview-lift-distance, 18px)) scale(var(--unoview-lift-scale, .975)); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uv-blur-out { to { opacity: 0; filter: blur(var(--unoview-blur-radius, 10px)); transform: scale(.985); } }
@keyframes uv-blur-in { from { opacity: 0; filter: blur(var(--unoview-blur-radius, 10px)); transform: scale(1.015); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes uv-reveal-out { to { opacity: .22; transform: scale(.99); } }
@keyframes uv-reveal-in { from { clip-path: inset(0 var(--unoview-reveal-inset, 20%) 0 var(--unoview-reveal-inset, 20%) round 18px); opacity: .35; transform: scale(.985); } to { clip-path: inset(0 0 0 0 round 0); opacity: 1; transform: scale(1); } }
@keyframes uv-slide-back-out { to { opacity: var(--unoview-fade-opacity, .15); transform: translateX(calc(var(--unoview-slide-distance, -12px) * -1)); } }
@keyframes uv-slide-back-in { from { opacity: var(--unoview-fade-opacity, .15); transform: translateX(var(--unoview-slide-distance, -12px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes uv-zoom-back-out { to { opacity: .2; transform: scale(var(--unoview-zoom-scale-in, 1.075)); } }
@keyframes uv-zoom-back-in { from { opacity: .25; transform: scale(var(--unoview-zoom-scale-out, .945)); } to { opacity: 1; transform: scale(1); } }
@keyframes uv-lift-back-out { to { opacity: .18; transform: translateY(var(--unoview-lift-distance, 18px)) scale(1.01); } }
@keyframes uv-lift-back-in { from { opacity: .3; transform: translateY(calc(var(--unoview-lift-distance, 18px) * -0.55)) scale(var(--unoview-lift-scale, .975)); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uv-reveal-back-out { to { clip-path: inset(0 var(--unoview-reveal-inset, 20%) 0 var(--unoview-reveal-inset, 20%) round 18px); opacity: .28; transform: scale(.985); } }
@keyframes uv-reveal-back-in { from { opacity: .35; transform: scale(1.01); } to { opacity: 1; transform: scale(1); } }
@keyframes uv-leave { to { opacity: .25; } }

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
  html.unoview-leaving body { animation: none !important; }
  html.unoview-swipe-active::after { transform: none !important; }
}

/* UnoDock integration: every UnoDock visual surface is its own persistent layer. */
@media (max-width: 782px) {
  .udock-bottom-nav { view-transition-name: unoview-unodock-bar; }
  .udock-expand-backdrop { view-transition-name: unoview-unodock-expand-backdrop; }
  .udock-expand-panel { view-transition-name: unoview-unodock-expand-panel; }
  .udock-search-overlay { view-transition-name: unoview-unodock-search; }
  .udock-menu-backdrop { view-transition-name: unoview-unodock-menu-backdrop; }
  .udock-menu-panel { view-transition-name: unoview-unodock-menu-panel; }

  ::view-transition-group(unoview-unodock-bar),
  ::view-transition-image-pair(unoview-unodock-bar),
  ::view-transition-old(unoview-unodock-bar),
  ::view-transition-new(unoview-unodock-bar),
  ::view-transition-group(unoview-unodock-expand-backdrop),
  ::view-transition-image-pair(unoview-unodock-expand-backdrop),
  ::view-transition-old(unoview-unodock-expand-backdrop),
  ::view-transition-new(unoview-unodock-expand-backdrop),
  ::view-transition-group(unoview-unodock-expand-panel),
  ::view-transition-image-pair(unoview-unodock-expand-panel),
  ::view-transition-old(unoview-unodock-expand-panel),
  ::view-transition-new(unoview-unodock-expand-panel),
  ::view-transition-group(unoview-unodock-search),
  ::view-transition-image-pair(unoview-unodock-search),
  ::view-transition-old(unoview-unodock-search),
  ::view-transition-new(unoview-unodock-search),
  ::view-transition-group(unoview-unodock-menu-backdrop),
  ::view-transition-image-pair(unoview-unodock-menu-backdrop),
  ::view-transition-old(unoview-unodock-menu-backdrop),
  ::view-transition-new(unoview-unodock-menu-backdrop),
  ::view-transition-group(unoview-unodock-menu-panel),
  ::view-transition-image-pair(unoview-unodock-menu-panel),
  ::view-transition-old(unoview-unodock-menu-panel),
  ::view-transition-new(unoview-unodock-menu-panel) {
    animation: none !important;
  }

  /*
   * Keep the OLD UnoDock snapshot visible for the whole page transition.
   * This is intentional: hiding the old snapshot can create a short gap before
   * the new document snapshot is ready, which makes icon fonts/SVG icons appear
   * to vanish for a moment. The incoming UnoDock snapshot stays hidden until
   * the transition pseudo-elements are removed, at which point the real new
   * UnoDock DOM is already painted.
   */
  ::view-transition-old(unoview-unodock-bar),
  ::view-transition-old(unoview-unodock-expand-backdrop),
  ::view-transition-old(unoview-unodock-expand-panel),
  ::view-transition-old(unoview-unodock-search),
  ::view-transition-old(unoview-unodock-menu-backdrop),
  ::view-transition-old(unoview-unodock-menu-panel) {
    opacity: 1 !important;
  }

  ::view-transition-new(unoview-unodock-bar),
  ::view-transition-new(unoview-unodock-expand-backdrop),
  ::view-transition-new(unoview-unodock-expand-panel),
  ::view-transition-new(unoview-unodock-search),
  ::view-transition-new(unoview-unodock-menu-backdrop),
  ::view-transition-new(unoview-unodock-menu-panel) {
    opacity: 0 !important;
  }
}

/* Per-route transition exclusions. */
html.unoview-route-no-transition::view-transition-old(root),
html.unoview-route-no-transition::view-transition-new(root){
  animation:none !important;
}

/* Navigation Debug Inspector */
.unoview-debug{position:fixed;z-index:2147483000;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:min(330px,calc(100vw - 20px));border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(15,18,24,.94);color:#edf2f7;box-shadow:0 16px 50px rgba(0,0,0,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.unoview-debug-toggle{width:100%;min-height:42px;display:flex;align-items:center;gap:8px;padding:9px 11px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.unoview-debug-toggle strong{font-size:10px;letter-spacing:.1em}.unoview-debug-toggle small{margin-left:auto;color:#7e8998;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.unoview-debug-dot{width:7px;height:7px;border-radius:50%;background:#ff7118;box-shadow:0 0 0 4px rgba(255,113,24,.13)}
.unoview-debug-body{padding:0 10px 10px}.unoview-debug-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.unoview-debug-grid>div{min-width:0;padding:7px 8px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.035)}.unoview-debug-grid>div.is-wide{grid-column:1/-1}
.unoview-debug-grid span{display:block;margin-bottom:2px;color:#778394;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.unoview-debug-grid strong{display:block;overflow:hidden;color:#e8edf4;font-size:9px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.unoview-debug-log{display:grid;gap:4px;max-height:128px;margin-top:7px;overflow:auto;overscroll-behavior:contain}.unoview-debug-log>div{display:grid;grid-template-columns:42px 54px minmax(0,1fr);gap:5px;align-items:start;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.025);font-size:8px;line-height:1.35}
.unoview-debug-log time{color:#667282;font-variant-numeric:tabular-nums}.unoview-debug-log strong{color:#ff9a5c;font-size:8px}.unoview-debug-log span{overflow:hidden;color:#a8b2bf;text-overflow:ellipsis;white-space:nowrap}.unoview-debug-empty{display:block!important;padding:8px!important;color:#788494!important;text-align:center!important}
.unoview-debug.is-collapsed{width:auto}.unoview-debug.is-collapsed .unoview-debug-body{display:none}.unoview-debug.is-collapsed .unoview-debug-toggle{width:auto}
@media(prefers-reduced-motion:reduce){.unoview-debug *{transition:none!important;animation:none!important}}


/* Shared Element Transitions */
@media (max-width: 782px) {
  ::view-transition-group(unoview-shared-element) {
    z-index: 2147482000;
    animation-duration: var(--unoview-duration,280ms);
    animation-timing-function: cubic-bezier(.16,1,.3,1);
  }
  ::view-transition-image-pair(unoview-shared-element) { isolation:isolate; }
  ::view-transition-old(unoview-shared-element),
  ::view-transition-new(unoview-shared-element) {
    width:100%;
    height:100%;
    animation-duration:var(--unoview-duration,280ms);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
    object-fit:cover;
  }
  ::view-transition-old(unoview-shared-element) { animation-name:uv-shared-old; }
  ::view-transition-new(unoview-shared-element) { animation-name:uv-shared-new; }
}
@keyframes uv-shared-old { to { opacity:.72; } }
@keyframes uv-shared-new { from { opacity:.72; } to { opacity:1; } }
@media (max-width:782px) and (prefers-reduced-motion:reduce) {
  ::view-transition-group(unoview-shared-element),
  ::view-transition-old(unoview-shared-element),
  ::view-transition-new(unoview-shared-element) { animation:none!important; }
}