/* Shared interaction feedback. No idle loops, observers or animation library. */
@media (prefers-reduced-motion: no-preference) {
  :root { --micro-ease: cubic-bezier(.2,.7,.25,1); }

  /* Individual transforms preserve existing positioning and reveal animations. */
  body :is(button,.button,.dpa-secondary):not(:disabled):not([aria-disabled="true"]) {
    transition: translate 220ms var(--micro-ease), scale 140ms var(--micro-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
  }
  body :is(button,.button,.dpa-secondary):not(:disabled):not([aria-disabled="true"]):focus-visible { translate: 0 -1px; }
  body :is(button,.button,.dpa-secondary):not(:disabled):not([aria-disabled="true"]):active {
    translate: 0 1px;
    scale: .98;
    transition-duration: 90ms;
  }

  /* The arrows follow their actual direction; keep text and hit areas still. */
  body :is(.action-arrow,.nav-product-arrow,.home-tour-link a > span[aria-hidden],.api-domain-links a > span[aria-hidden],.dpa-secondary > span[aria-hidden],.button > span[aria-hidden]) {
    transition: translate 240ms var(--micro-ease), background-color 180ms ease, border-color 180ms ease;
  }
  body :is(a,button):not(:disabled):not([aria-disabled="true"]):is(:focus-visible,:active) .action-arrow,
  body :is(.button,.api-domain-links a):not(:disabled):not([aria-disabled="true"]):is(:focus-visible,:active) > span[aria-hidden] { translate: 3px -3px; }
  body :is(a,button):not(:disabled):not([aria-disabled="true"]):is(:focus-visible,:active) .nav-product-arrow,
  body .home-tour-link a:is(:focus-visible,:active) > span[aria-hidden] { translate: 3px 0; }
  body .dpa-secondary:is(:focus-visible,:active) > span[aria-hidden] { translate: 0 3px; }

  /* Disclosures communicate the change of state with a small turn. */
  body :is(summary,.nav-connections-links a,.language-picker nav a,.mobile-menu a,.tour-chapters a) {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  body .details-symbol::after,
  body :is(.nav-connections-chevron,.agent-example-toggle,.support-plus,.business-faq summary > span,.coverage-item summary > span,.api-details summary > span) {
    transition: transform 240ms var(--micro-ease), color 180ms ease, background-color 180ms ease;
  }
  .language-picker summary > span[aria-hidden]:last-child { display: inline-block; transition: rotate 220ms var(--micro-ease); }
  .language-picker[open] summary > span[aria-hidden]:last-child { rotate: 180deg; }
  .platform-switch-track { transition: background-color 200ms ease, border-color 200ms ease; }
  .platform-switch-track::after { transition: transform 240ms var(--micro-ease); }

  /* Menus settle into place once when opened, including on touch screens. */
  .nav-connections[open] > .nav-connections-links,
  .language-picker[open] > nav,
  .mobile-menu:not([hidden]) { animation: micro-menu-enter 180ms var(--micro-ease) backwards; }
  @keyframes micro-menu-enter { from { opacity: .3; translate: 0 -5px; } to { opacity: 1; translate: 0 0; } }

  /* Each product destination arrives in a short, readable sequence. */
  .nav-product[open] .nav-product-links a { animation: product-menu-item-enter 260ms var(--micro-ease) backwards; }
  .nav-product[open] .nav-product-group:first-child a:nth-of-type(1) { animation-delay: 35ms; }
  .nav-product[open] .nav-product-group:first-child a:nth-of-type(2) { animation-delay: 65ms; }
  .nav-product[open] .nav-product-group:nth-child(2) a:nth-of-type(1) { animation-delay: 70ms; }
  .nav-product[open] .nav-product-group:nth-child(2) a:nth-of-type(2) { animation-delay: 100ms; }
  .nav-product[open] .nav-product-support a:nth-child(1) { animation-delay: 120ms; }
  .nav-product[open] .nav-product-support a:nth-child(2) { animation-delay: 150ms; }
  @keyframes product-menu-item-enter { from { opacity: .35; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
  .nav-product-label { transition: translate 220ms var(--micro-ease); }
  .nav-product-links a:is(:focus-visible,:active) .nav-product-label { translate: 2px 0; }

  /* Meaningful icon details move once on entry, then respond to interaction. */
  .nav-product-icon { transition: background-color 180ms ease, border-color 180ms ease; }
  .nav-icon-motion { transform-box: fill-box; transform-origin: center; transition: translate 280ms var(--micro-ease), rotate 280ms var(--micro-ease), scale 280ms var(--micro-ease); }
  .nav-product-icon--integrations { --icon-enter-y: -3px; --icon-hover-y: 1px; }
  .nav-product-icon--api-mcp { --icon-enter-rotate: -18deg; --icon-hover-rotate: 12deg; --icon-hover-scale: 1.06; }
  .nav-product-icon--security { --icon-enter-y: 3px; --icon-hover-scale: 1.12; }
  .nav-product-icon--data-processing { --icon-enter-x: -3px; --icon-hover-x: 1px; }
  .nav-product-icon--product-tour { --icon-enter-x: -3px; --icon-hover-x: 2px; }
  .nav-product-icon--support { --icon-hover-scale: 1.16; }
  .nav-product[open] .nav-icon-motion,
  .mobile-menu:not([hidden]) > .nav-product-destination .nav-icon-motion,
  .mobile-menu:not([hidden]) .nav-connections[open] .nav-icon-motion { animation: product-icon-enter 460ms var(--micro-ease) 100ms backwards; }
  @keyframes product-icon-enter {
    from { opacity: .4; translate: var(--icon-enter-x, 0) var(--icon-enter-y, 0); rotate: var(--icon-enter-rotate, 0deg); scale: .85; }
    to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  }
  .nav-product-destination:is(:focus-visible,:active) .nav-icon-motion { translate: var(--icon-hover-x, 0) var(--icon-hover-y, 0); rotate: var(--icon-hover-rotate, 0deg); scale: var(--icon-hover-scale, 1); }
  .connection-grid article:focus-within .nav-icon-motion { translate: var(--icon-hover-x, 0) var(--icon-hover-y, 0); rotate: var(--icon-hover-rotate, 0deg); scale: var(--icon-hover-scale, 1); }

  body a:is(.planning-level,.story-card,.home-next-card) { transition: translate 240ms var(--micro-ease), border-color 180ms ease, box-shadow 220ms ease; }
  body a:is(.planning-level,.story-card,.home-next-card):focus-visible { translate: 0 -2px; }
  body a:is(.planning-level,.story-card,.home-next-card):active { translate: 0 0; }
  .plan-level-play svg { transition: scale 220ms var(--micro-ease), background-color 180ms ease; }
  .plan-level-link:is(:focus-visible,:active) .plan-level-play svg { scale: 1.08; background-color: #e5ece2; }

  @media (hover: hover) and (pointer: fine) {
    body :is(button,.button,.dpa-secondary):not(:disabled):not([aria-disabled="true"]):not(:active):hover { translate: 0 -2px; }
    body :is(a,button):not(:disabled):not([aria-disabled="true"]):hover .action-arrow,
    body :is(.button,.api-domain-links a):not(:disabled):not([aria-disabled="true"]):hover > span[aria-hidden] { translate: 3px -3px; }
    body :is(.button,.text-link):hover > .action-arrow { transform: none; }
    body :is(a,button):not(:disabled):not([aria-disabled="true"]):hover .nav-product-arrow,
    body .home-tour-link a:hover > span[aria-hidden] { translate: 3px 0; }
    body .dpa-secondary:hover > span[aria-hidden] { translate: 0 3px; }
    .nav-product-links a:hover .nav-product-arrow { background-color: #e5ece2; border-color: #9db19d; }
    .nav-product-links a:hover .nav-product-label { translate: 2px 0; }
    .nav-product-destination:hover .nav-icon-motion { translate: var(--icon-hover-x, 0) var(--icon-hover-y, 0); rotate: var(--icon-hover-rotate, 0deg); scale: var(--icon-hover-scale, 1); }
    :is(.api-channel-grid,.connection-grid) article:hover .nav-icon-motion { translate: var(--icon-hover-x, 0) var(--icon-hover-y, 0); rotate: var(--icon-hover-rotate, 0deg); scale: var(--icon-hover-scale, 1); }
    body a:is(.planning-level,.story-card,.home-next-card):not(:active):hover { transform: none; translate: 0 -3px; }
    .plan-level-link:hover .plan-level-play svg { scale: 1.08; background-color: #e5ece2; }
  }
}