/* Match the feature pages: a 4px slide over 160ms, without moving the label. */
#o2c-announcements {
  --o2c-arrow-offset: 0px;
  --o2c-arrow-direction: 1;
}

/* Independent translation preserves the calendar's rotated previous icons. */
#o2c-announcements :where(
  svg.o2c-ui-arrow,
  svg.o2c-action-arrow,
  svg.rc-calendar-arrow,
  .concept-read > span,
  .o2c-magazine-action > svg,
  .o2c-roundup-link-arrow,
  .rc-upcoming-preview-action > svg,
  .refresh-release-link > span,
  .roadmap-card > summary .card-link > svg,
  .card-action > svg,
  .shipped-link > svg,
  .story-trigger > svg,
  .roadmap-cta > svg,
  .o2c-empty-reset > svg,
  [id="o2c-reader-full"] > svg
) {
  translate: calc(var(--o2c-arrow-offset) * var(--o2c-arrow-direction)) 0 !important;
  transition: translate 160ms cubic-bezier(.4, 0, .2, 1), opacity 160ms ease !important;
}

/* Replace older translations instead of adding a second movement to them. */
#o2c-announcements :is(
  svg.o2c-ui-arrow,
  svg.o2c-action-arrow,
  .concept-read > span,
  .rc-upcoming-preview-action > svg,
  .refresh-release-link > span,
  .roadmap-card > summary .card-link > svg,
  .card-action > svg,
  .shipped-link > svg,
  .story-trigger > svg,
  .roadmap-cta > svg,
  .o2c-empty-reset > svg,
  [id="o2c-reader-full"] > svg,
  .o2c-read > span[aria-hidden="true"],
  .o2c-breadcrumb a[data-return-link] > span[aria-hidden="true"],
  .o2c-sidebar-back a > span[aria-hidden="true"],
  .o2c-nav-arrow
) {
  transform: none !important;
}

#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-magazine-action > svg,
#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-archive-entry:is(:hover, :focus-within) .o2c-magazine-action > svg,
#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup .o2c-roundup-action > span,
#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup:is(:hover, :focus-within) .o2c-roundup-action > span,
#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup .o2c-roundup-link-arrow,
#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup .o2c-roundup-items li:is(:hover, :focus-within) .o2c-roundup-link-arrow {
  transform: none !important;
}

#o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup .o2c-roundup-link-arrow {
  transition: translate 160ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* Move circular/wrapped arrows once, including the circle itself. */
#o2c-announcements :is(.concept-read > span, .o2c-roundup-link-arrow, .refresh-release-link > span) svg {
  translate: none !important;
}

#o2c-announcements .roadmap-card > summary .card-link {
  gap: 11px;
  transition: none;
}

/* Individual roundup links respond separately from the card's main action. */
#o2c-announcements .o2c-roundup-item-link {
  --o2c-arrow-offset: 0px;
}

/* Back arrows keep their direction; vertical navigation keeps its current behavior. */
#o2c-announcements svg.o2c-ui-arrow:has(> path[transform^="rotate(180"]),
#o2c-announcements :is([data-rc-prev], [data-rc-dialog-previous], [data-upcoming-previous]) .rc-calendar-arrow {
  --o2c-arrow-direction: -1;
}

#o2c-announcements svg.o2c-ui-arrow:has(> path:is([transform^="rotate(90"], [transform^="rotate(-90"])) {
  --o2c-arrow-direction: 0;
}

/* The article cards and Help Center links use CSS-drawn arrow icons. */
#o2c-announcements .o2c-neighbors a strong::after,
#o2c-announcements[data-page="detail"] .o2c-help-box a[target="_blank"]::after,
#o2c-announcements .o2c-reader-article .o2c-help-box a[target="_blank"]::after {
  translate: var(--o2c-arrow-offset) 0;
  transition: translate 160ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  #o2c-announcements :is(a, button, summary, [role="button"]):focus-visible,
  #o2c-announcements :is(.concept-feature, .o2c-archive-entry, .upcoming-card):focus-within {
    --o2c-arrow-offset: 4px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #o2c-announcements :is(a, button, summary, [role="button"]):hover,
  #o2c-announcements :is(.concept-feature, .o2c-archive-entry, .upcoming-card):hover {
    --o2c-arrow-offset: 4px;
  }
}

#o2c-announcements :is(:disabled, [aria-disabled="true"]) {
  --o2c-arrow-offset: 0px !important;
}

@media (prefers-reduced-motion: reduce) {
  #o2c-announcements {
    --o2c-arrow-offset: 0px;
  }

  #o2c-announcements :is(
    svg.o2c-ui-arrow,
    svg.o2c-action-arrow,
    svg.rc-calendar-arrow,
    .concept-read > span,
    .o2c-magazine-action > svg,
    .o2c-roundup-link-arrow,
    .rc-upcoming-preview-action > svg,
    .refresh-release-link > span,
    .roadmap-card > summary .card-link > svg,
    .card-action > svg,
    .shipped-link > svg,
    .story-trigger > svg,
    .roadmap-cta > svg,
    .o2c-empty-reset > svg,
    [id="o2c-reader-full"] > svg
  ),
  #o2c-announcements:not(.is-reader):not(.is-calendar) #o2c-feed.o2c-editorial-feed .o2c-editorial-roundup .o2c-roundup-link-arrow,
  #o2c-announcements .o2c-neighbors a strong::after,
  #o2c-announcements[data-page="detail"] .o2c-help-box a[target="_blank"]::after,
  #o2c-announcements .o2c-reader-article .o2c-help-box a[target="_blank"]::after {
    transition: none !important;
  }
}