/* DE Infra motion layer. Content remains visible without this script. */
.desktop-nav a.is-motion-active,
.mobile-nav a.is-motion-active {
  color: var(--soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.motion-card {
  position: relative;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color 220ms ease, filter 220ms ease,
    border-color 250ms ease, background 250ms ease;
}

.motion-card.motion-parallax-career {
  translate: 0 var(--motion-parallax-y, 0px);
  rotate: var(--motion-parallax-angle, 0deg);
  transform-origin: 50% 60%;
}

.motion-photo-frame {
  overflow: hidden;
}

.motion-parallax-photo {
  translate: 0 var(--motion-parallax-y, 0px);
  scale: 1.14;
  transform-origin: center;
}

.motion-parallax-avatar {
  translate: 0 var(--motion-parallax-y, 0px);
  scale: var(--motion-parallax-scale, 1);
}

.motion-parallax-orbit {
  translate: var(--motion-parallax-x, 0px) var(--motion-parallax-y, 0px);
  scale: var(--motion-parallax-scale, 1);
}

.motion-accent {
  background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  background-repeat: no-repeat;
  background-position: left 98%;
  background-size: var(--motion-underline, 0%) 2px;
  text-shadow: 0 0 var(--motion-accent-glow, 0px) color-mix(in srgb, var(--accent) 32%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.motion-card:focus-visible,
.motion-card:focus-within:has(:focus-visible) {
  outline-color: var(--accent);
  filter: drop-shadow(0 0 4px #9c8dff25);
}

@media (hover: hover) and (pointer: fine) {
  .motion-card:hover {
    outline-color: var(--accent);
    filter: drop-shadow(0 0 4px #9c8dff25);
  }

  .motion-button {
    transition: transform 220ms cubic-bezier(.22, .61, .21, 1),
      box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
  }

  .motion-button:hover {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 15%, transparent);
    transform: translateY(-2px);
  }
}

.motion-button:active {
  transform: translateY(1px) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .motion-card,
  .motion-card:hover,
  .motion-card.motion-parallax-career,
  .motion-parallax-photo,
  .motion-parallax-avatar,
  .motion-parallax-orbit,
  .motion-button,
  .motion-button:hover,
  .motion-button:active {
    translate: none !important;
    transform: none !important;
    rotate: none !important;
    scale: none !important;
    transition: none !important;
  }

  .motion-accent {
    background-image: none;
    text-shadow: none;
  }
}