body > .site-shell:not(.shared-topbar-shell) > main#contenido,
body > .showcase > main#contenido {
  transition: opacity 160ms ease-out;
  will-change: opacity;
}

html.route-entering body > .site-shell:not(.shared-topbar-shell) > main#contenido,
html.route-entering body > .showcase > main#contenido {
  opacity: 0;
}

.site-route-loader {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

html.route-loading-visible .site-route-loader {
  opacity: 1;
  pointer-events: auto;
}

.site-route-loader-spinner {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 3px solid rgba(244, 247, 243, 0.3);
  border-top-color: #f4f7f3;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.42);
  animation: site-route-loader-spin 760ms linear infinite;
}

@keyframes site-route-loader-spin {
  to { transform: rotate(360deg); }
}

html.has-route-transition body .site-shell,
html.has-route-transition body .showcase,
body.is-ready .hero-copy > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Motion system: a short, restrained fade is easier to scan than elements rising on scroll. */
@media (prefers-reduced-motion: no-preference) {
  body .reveal,
  body [data-reveal],
  body .reveal > .linear-stage,
  body .focus-section .focus-intro,
  body .focus-section .focus-panel,
  body .impact-cta .impact-center-metric,
  body .validation-map-section .validation-map-copy,
  body .validation-map-section .validation-monitor-shell,
  body .proof-section .proof-copy,
  body .proof-section .proof-client-card,
  body .offensive-services-section .offensive-services-heading,
  body .offensive-services-section .offensive-service-card,
  body .threat-news-section .threat-news-heading,
  body .threat-news-section .threat-news-feed,
  body .deliverable-row,
  body .octopus-specialties-section .octopus-specialty {
    filter: none !important;
    transform: none !important;
    transition: opacity 220ms ease-out !important;
  }

  body .vulnerability-dashboard-section.is-visible .vulnerability-finding {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .site-shell:not(.shared-topbar-shell) > main#contenido,
  body > .showcase > main#contenido {
    transition: none !important;
  }

  .site-route-loader,
  .site-route-loader-spinner {
    transition: none !important;
    animation: none !important;
  }
}