/* Formium Alliance — page-to-page transitions that open from, and shrink back into, the cursor dot.
   Cross-document View Transitions (Chrome/Edge, Safari 18.2+). Browsers without support navigate normally.
   formium-transition.js sets --fa-x / --fa-y / --fa-r and data-fa-reveal / data-fa-shrink.
   To remove: delete the <link> and <script> tags for formium-transition.* from the pages. */
@view-transition { navigation: auto; }

/* anything else (direct visits, forward when no point is known): a quick, quiet cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* forward link click: the new page opens from the dot */
html[data-fa-reveal]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-fa-reveal]::view-transition-new(root) { mix-blend-mode: normal; animation: fa-reveal .95s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes fa-reveal {
  from { clip-path: circle(0px at var(--fa-x, 50%) var(--fa-y, 50%)); }
  to   { clip-path: circle(var(--fa-r, 150vmax) at var(--fa-x, 50%) var(--fa-y, 50%)); }
}

/* browser Back: the page you are leaving shrinks into the spot you originally clicked */
html[data-fa-shrink]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-fa-shrink]::view-transition-old(root) { mix-blend-mode: normal; z-index: 2; animation: fa-shrink .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes fa-shrink {
  from { clip-path: circle(var(--fa-r, 150vmax) at var(--fa-x, 50%) var(--fa-y, 50%)); }
  to   { clip-path: circle(0px at var(--fa-x, 50%) var(--fa-y, 50%)); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}