/* Logo entrance, press feedback and navigation progress (Nov 2026).
   Transform and opacity only; nothing here delays rendering or navigation. */

/* Official logo entrance: first visit only (html.fhf-intro is set in <head>). 560ms, plays once. */
html.fhf-intro .fhf-brand picture { position: relative; display: inline-block; animation: fhf-logo-in 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.fhf-intro .fhf-brand picture::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -5px; height: 2px; border-radius: 2px; background: #c9a24a; transform: scaleX(0); opacity: 0; animation: fhf-logo-accent 900ms 220ms ease-out both; pointer-events: none; }
@keyframes fhf-logo-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fhf-logo-accent { 0% { transform: scaleX(0); opacity: 0; } 45% { transform: scaleX(1); opacity: 0.9; } 100% { transform: scaleX(1); opacity: 0; } }

/* Immediate press feedback (100–150ms). */
:where(.fhf-btn, .ff-btn, .sf-news-btn, .fhf-tab, .fhf-nav-link, button[type="submit"], a.fhf-button) { transition-property: background-color, color, border-color, box-shadow, transform, opacity; transition-duration: 140ms; }
:where(.fhf-btn, .ff-btn, .sf-news-btn, button[type="submit"]):active:not(:disabled) { transform: translateY(1px) scale(0.985); }
:where(.fhf-tab, .fhf-nav-link):active { opacity: 0.75; }

/* Any submit button the shared form guard marks busy shows a small spinner next to its label. */
button[data-ff-busy]:not(.ff-btn) { cursor: progress; }
button[data-ff-busy]:not(.ff-btn)::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-inline-start: 0.5em; vertical-align: -0.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fhf-spin 0.7s linear infinite; }
@keyframes fhf-spin { to { transform: rotate(360deg); } }

/* Thin progress line while the next page loads. Shown only if loading takes longer than 120ms. */
.fhf-nav-progress { position: fixed; inset: 0 0 auto; z-index: 9999; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, #0a7a4f, #c9a24a); }
.fhf-nav-progress.is-active { opacity: 1; animation: fhf-progress 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; }
@keyframes fhf-progress { from { transform: scaleX(0.05); } to { transform: scaleX(0.92); } }

/* Short cross-fade between pages in browsers that support it; the header and bottom bar stay still. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
    .fhf-desktop-header { view-transition-name: fhf-desktop-header; }
    .fhf-mobile-header { view-transition-name: fhf-mobile-header; }
    .fhf-bottom-nav { view-transition-name: fhf-bottom-nav; }
}

@media (prefers-reduced-motion: reduce) {
    html.fhf-intro .fhf-brand picture, html.fhf-intro .fhf-brand picture::after { animation: none; }
    html.fhf-intro .fhf-brand picture::after { opacity: 0; }
    :where(.fhf-btn, .ff-btn, .sf-news-btn, button[type="submit"]):active { transform: none; }
    button[data-ff-busy]:not(.ff-btn)::after { animation-duration: 2s; }
    .fhf-nav-progress.is-active { animation: none; transform: scaleX(0.6); }
}