/* Shared styles for /fragebogen. Linked in <head> so the rules are in place before first paint. */

/* Mobile: slimmer top bar (inline padding is 10px, hence !important). The step row sits below the
   fixed header (top bar + 3px progress bar = 56px) in the page flow and scrolls away under it. */
@media (max-width: 767px) {
    .fb-topbar { padding-top: 6px !important; padding-bottom: 6px !important; }
    .fb-steps { margin-top: 56px; }
}

/* ── Page transitions ── */

/* Native crossfade between questionnaire pages (Chrome/Edge 126+, Safari 18.2+; ignored elsewhere) */
@view-transition { navigation: auto; }

/* Sequential instead of crossfade: overlapping old and new text at half opacity reads as blurry */
@keyframes pt-fade-out { to { opacity: 0; } }
@keyframes pt-fade-in { from { opacity: 0; } }
::view-transition-old(root) { animation: pt-fade-out 80ms ease-out both; }
::view-transition-new(root) { animation: pt-fade-in 200ms ease-out 80ms both; }

/* Header gets its own layer so it stays put while only the content crossfades */
header { view-transition-name: fragebogen-header; }

/* Confirmation page opens behind a full-screen loading overlay; a separate header layer would sit on top of it */
#loadingOverlay ~ header { view-transition-name: none; }

/* Fallback fade for browsers without cross-document view transitions (class set by js/page-transition.js) */
html.pt-fallback .main-container { opacity: 0; transition: opacity 0.25s ease; }
html.pt-fallback .main-container.fade-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    #progress-fill-mobile { transition: none !important; }
}