/* Small ambient accents. Keep image masks and corners in one moving canvas. */
html body main :is(#capabilities, #audiences) .capability-collage.alva-motion-collage {
  --motion-distance: -5px;
  animation: alva-composition-drift var(--motion-duration, 9s) ease-in-out var(--motion-delay, 0s) infinite both;
  animation-play-state: paused;
}
html body main :is(#capabilities, #audiences) .capability-collage.alva-motion-collage.is-motion-active {
  animation-play-state: running;
}
/* Keep the existing light on the selected image; pause that effect off screen too. */
html body main :is(#capabilities, #audiences) .alva-motion-collage .capability-collage-visual[data-collage-option] {
  animation-play-state: paused !important;
}
html body main :is(#capabilities, #audiences) .alva-motion-collage.is-motion-active .capability-collage-visual.is-selected {
  animation-play-state: running !important;
}

html body main section#fit[id] .cards.four .card.alva-motion-card {
  transition: translate .35s ease, box-shadow .35s ease !important;
}
html body main section#fit[id] .cards.four .fit-icon-rail > .alva-rail-glint {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 43%, rgba(225,234,246,.08) 47%, rgba(255,255,255,.46) 50%, rgba(207,221,242,.13) 53%, transparent 57%);
  background-size: 100% 320%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: alva-rail-glint 11s ease-in-out var(--motion-delay, 0s) infinite both paused;
}
html body main section#fit[id] .cards.four .is-motion-active .alva-rail-glint {
  animation-play-state: running;
}

html body main :is(#hero, #contact) .button.alva-motion-button {
  transition: box-shadow .3s ease, translate .3s ease !important;
}
html body main :is(#hero, #contact) .button.alva-motion-button > .alva-button-glint {
  position: absolute;
  z-index: 3;
  inset: 2px;
  display: block;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 43%, rgba(237,243,251,.07) 46%, rgba(255,255,255,.33) 50%, rgba(224,234,248,.09) 54%, transparent 57%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: alva-button-glint 12s ease-in-out var(--motion-delay, 0s) infinite both paused;
}
html body main :is(#hero, #contact) .button.alva-motion-button.is-motion-active > .alva-button-glint {
  animation-play-state: running;
}
html body main :is(#capabilities, #audiences) .capability-variant-switcher button {
  transition: translate .2s ease, box-shadow .2s ease !important;
}
html body main :is(#capabilities, #audiences) .capability-variant-switcher button:focus-visible {
  outline: 2px solid #a45af9;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  html body main section#fit[id] .cards.four .card.alva-motion-card:hover {
    translate: 0 -4px;
    box-shadow: 0 14px 28px rgba(11,3,31,.2) !important;
  }
  html body main :is(#hero, #contact) .button.alva-motion-button:hover {
    translate: 0 -2px;
    box-shadow: 0 12px 30px rgba(126,69,191,.24), 0 0 18px rgba(230,224,250,.16) !important;
  }
  html body main :is(#capabilities, #audiences) .capability-variant-switcher button:hover {
    translate: 0 -2px;
    box-shadow: 0 5px 12px rgba(82,31,137,.14);
  }
}
html body main :is(#hero, #contact) .button.alva-motion-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(213,202,235,.55), 0 10px 24px rgba(126,69,191,.2) !important;
}
@keyframes alva-composition-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--motion-distance); }
}
@keyframes alva-rail-glint {
  0%, 8% { background-position: 0 -110%; opacity: 0; }
  12% { opacity: .75; }
  40% { background-position: 0 210%; opacity: .75; }
  44%, 100% { background-position: 0 210%; opacity: 0; }
}
@keyframes alva-button-glint {
  0%, 8% { background-position: 210% 0; opacity: 0; }
  12% { opacity: .8; }
  35% { background-position: -110% 0; opacity: .8; }
  40%, 100% { background-position: -110% 0; opacity: 0; }
}
@media (max-width: 620px) {
  html body main :is(#capabilities, #audiences) .capability-collage.alva-motion-collage {
    --motion-distance: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main :is(#capabilities, #audiences) .capability-collage.alva-motion-collage,
  html body main :is(#capabilities, #audiences) .alva-motion-collage .capability-collage-visual[data-collage-option] {
    animation: none !important;
    translate: none !important;
  }
  html body main section#fit[id] .cards.four .alva-rail-glint,
  html body main :is(#hero, #contact) .button.alva-motion-button > .alva-button-glint {
    display: none !important;
    animation: none !important;
  }
  html body main section#fit[id] .cards.four .card.alva-motion-card,
  html body main :is(#hero, #contact) .button.alva-motion-button,
  html body main :is(#capabilities, #audiences) .capability-variant-switcher button {
    translate: none !important;
    transition: none !important;
  }
}