/*
 * XMPP-HOM IT motion layer
 * Transform/opacity only; every ambient loop has a reduced-motion fallback.
 */

@keyframes visual-grid-drift {
  to {
    transform: translate3d(26px, 26px, 0);
  }
}

@keyframes visual-node-breathe {
  50% {
    opacity: .62;
    filter: drop-shadow(0 0 9px var(--visual-glow));
  }
}

@keyframes visual-data-flow {
  to {
    stroke-dashoffset: -96;
  }
}

@keyframes visual-scan {
  0%, 100% {
    opacity: 0;
    transform: translateY(-18px);
  }

  18%, 72% {
    opacity: .6;
  }

  86% {
    opacity: 0;
    transform: translateY(150px);
  }
}

body::before {
  animation: visual-grid-drift 24s linear infinite;
}

.architecture .links path {
  stroke-dasharray: 7 9;
  animation: visual-data-flow 16s linear infinite;
}

.architecture .central circle,
.diagram-glow {
  animation: none;
}

.service-card,
.case-card,
.case-list-item,
.related-grid > * {
  transition:
    transform .24s cubic-bezier(.2, .8, .2, 1),
    border-color .24s ease,
    box-shadow .24s ease;
}

.service-card::before {
  transition: filter .24s ease, transform .24s ease;
}

.button::before {
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}

.button > [aria-hidden="true"],
.card-link b,
.case-link b,
.related-grid b {
  transition: transform .2s ease;
}

.visual-observe > li,
.visual-observe > div {
  opacity: 1;
  transform: none;
}

html.visual-runtime .visual-observe:not(.visual-in-view) > li,
html.visual-runtime .visual-observe:not(.visual-in-view) > div {
  opacity: 0;
  transform: translateY(14px);
}

html.visual-runtime .visual-observe.visual-in-view > li,
html.visual-runtime .visual-observe.visual-in-view > div {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s cubic-bezier(.2, .8, .2, 1),
    transform .62s cubic-bezier(.2, .8, .2, 1);
}

.visual-observe.visual-in-view > :nth-child(2) {
  transition-delay: 70ms;
}

.visual-observe.visual-in-view > :nth-child(3) {
  transition-delay: 140ms;
}

.visual-observe.visual-in-view > :nth-child(4) {
  transition-delay: 210ms;
}

.visual-observe.visual-in-view > :nth-child(5) {
  transition-delay: 280ms;
}

.visual-observe.visual-in-view > :nth-child(6) {
  transition-delay: 350ms;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover::before {
    transform: scale(1.018);
  }
}

@media (max-width: 680px) {
  body::before {
    animation: none;
  }

  .hero-diagram .architecture {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .architecture .links path,
  .architecture .central circle,
  .diagram-glow,
  .visual-observe > *,
  .service-card,
  .case-card,
  .case-list-item,
  .button::before {
    animation: none !important;
    transition: none !important;
  }

  html.visual-runtime .visual-observe:not(.visual-in-view) > li,
  html.visual-runtime .visual-observe:not(.visual-in-view) > div {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-diagram .architecture,
  .service-card::before {
    transform: none !important;
  }
}