.art-positioned { position: relative; }
.art-grains { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .gallery-proof.art-in-view .gallery-object {
    animation: desk-object-arrives 650ms cubic-bezier(.2,.7,.2,1) both;
  }
  .gallery-forms.art-in-view .gallery-form-fields > div:not(:has(.field-open)) {
    animation: desk-field-matched 760ms ease-out 120ms both;
  }
  .gallery-forms.art-in-view .gallery-form-fields > div:nth-child(2) { animation-delay: 280ms; }
  .gallery-forms.art-in-view .gallery-form-fields > div:nth-child(3) { animation-delay: 440ms; }
  .return-file.art-in-view .return-slip {
    animation: archive-note-drawn 900ms cubic-bezier(.16,.75,.24,1) both;
  }
  .trust-orbit.art-in-view .trust-node {
    animation: trust-seal-trace 820ms ease-out 100ms both;
  }
  .trust-orbit.art-in-view .trust-node-1 { animation-delay: 360ms; }
  .trust-orbit.art-in-view .trust-node-2 { animation-delay: 620ms; }
  @keyframes desk-object-arrives {
    from { translate: -14px 9px; rotate: -3deg; }
    to { translate: 0; rotate: 0deg; }
  }
  @keyframes desk-field-matched {
    0%, 100% { background-color: transparent; }
    40% { background-color: color-mix(in srgb, var(--brand-accent) 38%, transparent); }
  }
  @keyframes archive-note-drawn {
    from { translate: 0 23px; rotate: -2.5deg; }
    to { translate: 0; rotate: 0deg; }
  }
  @keyframes trust-seal-trace {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    35% { box-shadow: 0 0 0 4px var(--brand-accent); }
    85% { box-shadow: 0 0 0 10px transparent; }
  }
}

@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  .art-plate { perspective: 960px; }
  .art-plate > .art-plane,
  .art-plate > .art-grains {
    transition: rotate 230ms ease-out, translate 230ms ease-out, opacity 220ms ease-out;
  }
  .art-engaged > .art-plane,
  .art-engaged > .art-grains {
    rotate: var(--art-rotation);
    translate: var(--art-shift-x) var(--art-shift-y);
  }
  .art-engaged > .case-detail.art-plane {
    translate: calc(var(--art-shift-x) * -1.45) calc(var(--art-shift-y) * -1.45);
  }
  .art-grains {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    background-image:
      radial-gradient(circle, #fff3dd 0 1px, transparent 1.4px),
      radial-gradient(circle, var(--brand-accent) 0 1px, transparent 1.6px);
    background-size: 7px 9px, 13px 11px;
    background-position: 0 0, 4px 2px;
    mask-image: var(--art-source), radial-gradient(ellipse 86px 68px at var(--glint-x) var(--glint-y), black 10%, transparent);
    mask-size: var(--art-fit), 100% 100%;
    mask-position: var(--art-align), center;
    mask-repeat: no-repeat;
    mask-composite: intersect;
  }
  .art-engaged > .art-grains { opacity: .85; }
}