/* iOS-like SPA polish: transitions, top progress bar, safe areas. */
#main { transition: opacity .18s ease, transform .18s ease; will-change: opacity, transform; }
#main.spa-leave { opacity: 0; transform: translateY(4px); }
#main.spa-enter { opacity: 0; transform: translateY(-2px); animation: spa-in .22s ease forwards; }
@keyframes spa-in { to { opacity: 1; transform: none; } }

.spa-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg,#1e5fbf,#22c1c3);
  z-index: 9999; border-radius: 0 3px 3px 0;
  transition: width .3s ease, opacity .25s ease; opacity: 0; pointer-events: none;
}
.spa-bar.loading { width: 85%; opacity: 1; transition: width 8s cubic-bezier(.05,.7,.1,1), opacity .1s; }
.spa-bar.done { width: 100%; opacity: 1; transition: width .2s ease, opacity .3s ease .1s; }

/* iOS-style touch feedback + tap target sizing */
a, button, .btn, .nav-link { -webkit-tap-highlight-color: transparent; }
.nav-link, .btn { transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.nav-link:active, .btn:active { transform: scale(.97); }

/* Respect iOS safe areas (notch) */
.site-header { padding-top: env(safe-area-inset-top); }
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
@supports (backdrop-filter: blur(12px)) {
  .site-header { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background-color: rgba(255,255,255,.75); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #main, .spa-bar, .nav-link, .btn { transition: none !important; animation: none !important; }
}