/* FCMM page-transition layer: a short ink-and-red handoff between route documents. */
:root { --fcmm-transition-ms: 300ms; }
html { background: #08090b; }
body {
  opacity: 1;
  transform: none;
}
#fcmm-page-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 82% 25%, rgba(230,33,26,.34), transparent 0 18%, transparent 47%),
    linear-gradient(115deg, rgba(5,5,7,.98), rgba(25,8,12,.96) 58%, rgba(89,12,21,.94));
  transform: translateX(-103%);
}
#fcmm-page-transition::before,
#fcmm-page-transition::after {
  position: absolute;
  content: '';
  pointer-events: none;
}
#fcmm-page-transition::before {
  top: -35vw;
  right: -20vw;
  width: min(76vw, 1100px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(230,33,26,.18), 0 0 0 38px rgba(255,255,255,.05), 0 0 0 62px rgba(230,33,26,.1);
  transform: rotate(-16deg);
}
#fcmm-page-transition::after {
  inset: 0;
  opacity: .55;
  background-image: repeating-linear-gradient(121deg, transparent 0 23px, rgba(230,33,26,.22) 24px 25px, transparent 26px 50px);
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.2) 76%, transparent);
}
html.fcmm-page-leaving body {
  opacity: 0;
  transform: translateY(-10px) scale(.994);
  transition-duration: var(--fcmm-transition-ms);
  pointer-events: none;
}
html.fcmm-page-leaving #fcmm-page-transition {
  opacity: 1;
  animation: fcmm-route-wipe var(--fcmm-transition-ms) cubic-bezier(.2,.85,.2,1) both;
}
@keyframes fcmm-route-wipe {
  from { transform: translateX(-103%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  body,
  html.fcmm-page-leaving body,
  #fcmm-page-transition,
  html.fcmm-page-leaving #fcmm-page-transition { animation: none !important; transition: none !important; transform: none !important; }
  body, html.fcmm-page-leaving body { opacity: 1 !important; }
  #fcmm-page-transition { display: none; }
}
