/* Shared page-transition styling — keeps navigation feeling instant */
html.gosip-fade-ready body {
  animation: gosipFadeIn .16s ease both;
}
body.gosip-fade-out {
  animation: gosipFadeOut .12s ease both;
}
@keyframes gosipFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gosipFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- Website "screen fit" ----------
   On a phone or an installed app, nothing changes. On a wide desktop
   browser window, the app is framed like a phone instead of stretching
   full-width, so the site looks intentional both as a website and as an
   installed app. */
@media (min-width: 640px) {
  html.gosip-fade-ready {
    background: #150b1d;
  }
  html.gosip-fade-ready body {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255,246,236,.06), 0 30px 80px rgba(0,0,0,.55);
  }
  /* Bottom nav bars use left:0/right:0 (full viewport) by default — on a
     wide screen, pin them to the centered frame's width instead. */
  html.gosip-fade-ready body .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
  }
}