/* Foxli – plynulost napříč webem, portálem, přihlášením i adminem (samec-af).
   Zapojení: <link rel="stylesheet" href="/static/css/smooth.css?v=…"> + <script src="/static/js/smooth.js?v=…" defer></script> */

/* Plynulý přechod mezi stránkami (Chrome/Edge/Safari 18+, jinde se nic nestane) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-vt-out .14s ease-in both; }
::view-transition-new(root) { animation: fx-vt-in .24s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Tenký proužek načítání nahoře */
.fx-progress { position: fixed; top: 0; left: 0; z-index: 99999; height: 2px; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #f07a2a, #e8622a); box-shadow: 0 0 8px rgba(234,88,12,.45);
  transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
.fx-progress.on { opacity: 1; }

/* Tlačítko po odeslání formuláře: kolečko a nejde kliknout znovu */
.is-loading { pointer-events: none; opacity: .85; }
.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fx-spin .6s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* Náhledy webů v iframe: jemný „skeleton“ a pak plynulé objevení */
.fx-skel { background: linear-gradient(100deg, rgba(127,127,127,.08) 30%, rgba(127,127,127,.16) 50%, rgba(127,127,127,.08) 70%) 0 0 / 300% 100%;
  animation: fx-shimmer 1.4s ease-in-out infinite; }
@keyframes fx-shimmer { to { background-position: -150% 0; } }
iframe.fx-fade { opacity: 0; transition: opacity .35s ease; }
iframe.fx-fade.fx-loaded { opacity: 1; }

/* Prvky označené data-reveal se při prvním zobrazení jemně vynoří */
[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
[data-reveal].fx-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .fx-progress, iframe.fx-fade, [data-reveal] { transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .fx-skel { animation: none; }
}