/* ============================================================
   MU FALLEN MOTION
   Transiciones de rutas, actividad de red y contenido dinámico.
   ============================================================ */

html.fallen-motion-pending {
  background: #020810;
}

html.fallen-motion-pending body {
  opacity: 0;
  animation: fallen-motion-failsafe 1ms linear 2.4s forwards;
}

html.fallen-motion-ready body {
  opacity: 1;
  animation: none;
  transition: opacity 320ms ease;
}

html.fallen-motion-ready body > main,
html.fallen-motion-ready body > .hero-section {
  animation: fallen-page-arrive 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fallen-motion-failsafe {
  to { opacity: 1; }
}

@keyframes fallen-page-arrive {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fallen-document-out 300ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

::view-transition-new(root) {
  animation: fallen-document-in 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fallen-document-out {
  to { opacity: 0; filter: brightness(0.52) saturate(1.12); }
}

@keyframes fallen-document-in {
  from { opacity: 0; filter: brightness(0.58) saturate(0.76); }
  to { opacity: 1; filter: brightness(1) saturate(1); }
}

.fallen-route-transition {
  position: fixed;
  inset: 0;
  z-index: 199990;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(75, 205, 247, 0.18), transparent 32%),
    rgba(1, 7, 13, 0.94);
  transition: opacity 240ms ease, visibility 0s linear 440ms;
}

html.fallen-motion-leaving {
  overflow: hidden;
}

html.fallen-motion-leaving .fallen-route-transition {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.fallen-route-transition__veil {
  position: absolute;
  inset: -15%;
  z-index: -3;
  background:
    linear-gradient(112deg, transparent 0 29%, rgba(131, 228, 255, 0.1) 47%, transparent 58%),
    linear-gradient(90deg, #01070d 0%, #062035 48%, #020911 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  filter: drop-shadow(0 0 48px rgba(75, 205, 247, 0.45));
  transition: clip-path 460ms cubic-bezier(0.77, 0, 0.18, 1);
}

html.fallen-motion-leaving .fallen-route-transition__veil {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.fallen-route-transition__mist {
  position: absolute;
  z-index: -2;
  width: 76vmax;
  height: 22vmax;
  border-radius: 50%;
  opacity: 0;
  filter: blur(34px);
  background: radial-gradient(ellipse, rgba(75, 205, 247, 0.2), transparent 66%);
}

.fallen-route-transition__mist--one {
  transform: rotate(-17deg) translateX(-38%);
}

.fallen-route-transition__mist--two {
  transform: rotate(19deg) translateX(38%);
}

html.fallen-motion-leaving .fallen-route-transition__mist {
  opacity: 1;
  animation: fallen-mist-drift 2s ease-in-out infinite alternate;
}

.fallen-route-transition__mist--two {
  animation-delay: -0.8s !important;
}

@keyframes fallen-mist-drift {
  to { transform: rotate(0deg) translateX(0) scale(1.08); }
}

.fallen-route-transition__rift {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -8%;
  width: 3px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, #e6faff 20%, #4bcdf7 52%, #1778ca 80%, transparent);
  box-shadow:
    0 0 12px #dff8ff,
    0 0 34px rgba(75, 205, 247, 0.86),
    0 0 80px rgba(23, 120, 202, 0.56);
  transform: rotate(9deg);
}

html.fallen-motion-leaving .fallen-route-transition__rift {
  animation: fallen-rift-cross 640ms cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes fallen-rift-cross {
  0% { left: -8%; opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

.fallen-route-transition__content {
  display: grid;
  justify-items: center;
  gap: 7px;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.95);
}

html.fallen-motion-leaving .fallen-route-transition__content {
  animation: fallen-route-content-in 330ms ease 120ms both;
}

@keyframes fallen-route-content-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.fallen-route-transition__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 6px;
}

.fallen-route-transition__seal::before,
.fallen-route-transition__seal::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(159, 232, 255, 0.5);
  border-radius: 50%;
  box-shadow:
    inset 0 0 20px rgba(75, 205, 247, 0.17),
    0 0 24px rgba(75, 205, 247, 0.2);
}

.fallen-route-transition__seal::after {
  inset: 0;
  border-style: dashed;
  border-color: rgba(75, 205, 247, 0.4);
  animation: fallen-seal-spin 5s linear infinite reverse;
}

.fallen-route-transition__seal img {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 0 13px rgba(75, 205, 247, 0.82));
  animation: fallen-seal-breathe 1.4s ease-in-out infinite alternate;
}

.fallen-route-transition__orbit {
  position: absolute;
  inset: 1px;
  border-top: 2px solid #dff8ff;
  border-right: 2px solid transparent;
  border-radius: 50%;
  animation: fallen-seal-spin 1.05s linear infinite;
}

@keyframes fallen-seal-spin {
  to { transform: rotate(360deg); }
}

@keyframes fallen-seal-breathe {
  to {
    transform: scale(1.055);
    filter: drop-shadow(0 0 23px rgba(75, 205, 247, 0.98));
  }
}

.fallen-route-transition__eyebrow {
  color: #73dcff;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.fallen-route-transition__label {
  color: #f4fbff;
  font-family: "Cinzel", serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow: 0 0 18px rgba(75, 205, 247, 0.72);
}

.fallen-route-transition__dots {
  display: flex;
  gap: 5px;
  height: 8px;
  margin-top: 4px;
}

.fallen-route-transition__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a9edff;
  box-shadow: 0 0 8px #4bcdf7;
  animation: fallen-dot 800ms ease-in-out infinite alternate;
}

.fallen-route-transition__dots i:nth-child(2) {
  animation-delay: 140ms;
}

.fallen-route-transition__dots i:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes fallen-dot {
  to { opacity: 0.28; transform: translateY(3px); }
}

.fallen-network-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200000;
  width: 100%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.fallen-network-progress.is-active {
  opacity: 1;
}

.fallen-network-progress__bar {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #1778ca, #4bcdf7 55%, #e4faff);
  box-shadow: 0 0 10px #4bcdf7, 0 0 22px rgba(23, 120, 202, 0.72);
  transform: translateX(-100%);
}

.fallen-network-progress.is-active .fallen-network-progress__bar {
  animation: fallen-progress-run 1.75s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}

.fallen-network-progress.is-done .fallen-network-progress__bar {
  width: 100%;
  transform: translateX(0);
  transition: width 200ms ease;
}

@keyframes fallen-progress-run {
  0% { width: 10%; transform: translateX(-100%); }
  45% { width: 48%; transform: translateX(70%); }
  100% { width: 74%; transform: translateX(32%); }
}

button.is-fallen-busy,
a.is-fallen-busy {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none;
}

.fallen-action-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: inherit;
  color: #f7fdff;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  background: linear-gradient(110deg, rgba(2, 12, 20, 0.96), rgba(8, 65, 94, 0.98), rgba(2, 12, 20, 0.96));
  background-size: 220% 100%;
  animation: fallen-action-flow 1.5s linear infinite;
}

.fallen-action-loader i {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-top-color: #a9edff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(75, 205, 247, 0.65);
  animation: fallen-seal-spin 700ms linear infinite;
}

@keyframes fallen-action-flow {
  to { background-position: -220% 0; }
}

.fallen-surface-enter {
  animation: fallen-surface-enter 360ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes fallen-surface-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.fallen-list-enter {
  animation: fallen-list-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--fallen-enter-delay, 0ms) both !important;
}

@keyframes fallen-list-enter {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* En pantallas táctiles se eliminan los filtros que fuerzan repintados
   constantes durante el scroll; se conserva la misma paleta con fondos sólidos. */
@media (max-width: 900px) {
  #mainNav,
  .system-topbar,
  .admin-topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(3, 12, 20, 0.97) !important;
  }

  .system-card,
  .status-card,
  .ranking-card,
  .download-card,
  .install-guide,
  .community-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.ol-scroll-enabled [data-ol-scroll] {
    filter: none !important;
    transition-duration: 520ms !important;
  }

  .fallen-route-transition__mist {
    filter: blur(22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fallen-motion-pending body,
  html.fallen-motion-ready body {
    opacity: 1;
    animation: none;
    transition: none;
  }

  html.fallen-motion-ready body > main,
  html.fallen-motion-ready body > .hero-section,
  .fallen-surface-enter,
  .fallen-list-enter,
  .fallen-route-transition *,
  .fallen-network-progress *,
  .fallen-action-loader,
  .fallen-action-loader i {
    animation: none !important;
    transition: none !important;
  }

  .fallen-route-transition__veil {
    clip-path: inset(0);
  }

  .fallen-route-transition__content {
    opacity: 1;
    transform: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
  }
}