/* CAPÇALERA QUE S'AMAGA EN BAIXAR (mòbil), com a X/Twitter.
 *
 * Dues peces, i la separació és el que fa que la safe area mai no es perdi:
 *
 *   · LA CAPÇALERA (.capcalera / .lateral / .topbar / .app-capcalera): és la
 *     de sempre, enganxada a dalt. En baixar, `capcalera-mobil.js` posa
 *     `data-capcalera-amagada` al <body> i la capçalera puja amb un
 *     `transform`: no es toca ni `top`, ni `height`, ni cap marge, així que no
 *     hi ha cap recàlcul de disposició, només compositor.
 *
 *   · LA FRANJA DE LA SAFE AREA (.safe-area-dalt): un element FIX, d'alçada
 *     `env(safe-area-inset-top)`, amb el mateix fons que la capçalera, i per
 *     SOTA d'ella (z-index un menys). Quan la capçalera és visible, la tapa
 *     del tot. Quan s'amaga, queda la franja: el contingut passa per sota però
 *     l'hora, la Dynamic Island i la bateria continuen tenint el seu fons i
 *     res no hi queda trepitjat. A l'escriptori i a Safari sense PWA,
 *     `env()` val 0 i la franja no existeix.
 *
 * Només mòbil. Fora del punt de tall, cap regla d'aquest fitxer no s'aplica. */
@media (max-width: 760px) {
  [data-capcalera-mobil] {
    transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
  }
  body[data-capcalera-amagada] [data-capcalera-mobil] {
    transform: translateY(-100%);
    /* Amagada no rep clics: el que hi ha a sota, sí. */
    pointer-events: none;
  }
  .safe-area-dalt {
    position: fixed;
    inset: 0 0 auto 0;
    height: env(safe-area-inset-top);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-capcalera-mobil] { transition: none; }
}