/* Yuan tabs: a quiet pair of rings that gathers into a single point. */
.way-tab > .way-orbit {
  --orbit-size: 24px;
  --orbit-inner-size: 12px;
  --orbit-outer-scale: 1;
  --orbit-inner-scale: 1;
  --orbit-ring-opacity: 1;
  --orbit-core-scale: .35;
  --orbit-core-opacity: 0;
  --orbit-transition: 360ms;
  --orbit-animation: none;
  position: relative;
  display: block;
  flex: 0 0 var(--orbit-size);
  inline-size: var(--orbit-size);
  block-size: var(--orbit-size);
  margin-inline-start: auto;
  line-height: 0;
  pointer-events: none;
}

.way-orbit > span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  transition:
    transform var(--orbit-transition) cubic-bezier(.22, .61, .36, 1),
    opacity var(--orbit-transition) ease;
}

.way-orbit > .orbit-outer {
  inline-size: var(--orbit-size);
  block-size: var(--orbit-size);
  border: 1.5px solid var(--orange, #ed7d31);
  opacity: var(--orbit-ring-opacity);
  transform: translate(-50%, -50%) scale(var(--orbit-outer-scale));
}

.way-orbit > .orbit-inner {
  inline-size: var(--orbit-inner-size);
  block-size: var(--orbit-inner-size);
  border: 1.5px solid var(--ink, #262724);
  opacity: var(--orbit-ring-opacity);
  transform: translate(-50%, -50%) scale(var(--orbit-inner-scale));
}

.way-orbit > .orbit-core {
  inline-size: 6px;
  block-size: 6px;
  background: var(--orange, #ed7d31);
  opacity: var(--orbit-core-opacity);
  transform: translate(-50%, -50%) scale(var(--orbit-core-scale));
  animation: var(--orbit-animation);
}

.way-tab:focus-visible > .way-orbit {
  --orbit-outer-scale: .25;
  --orbit-inner-scale: .5;
  --orbit-ring-opacity: 0;
  --orbit-core-scale: 1;
  --orbit-core-opacity: 1;
  --orbit-transition: 360ms;
  --orbit-animation: yuan-way-orbit-breathe 1.8s ease-in-out 360ms infinite;
}

/* Restrict hover to a mouse-like pointer so a touch tap cannot latch the dot. */
@media (hover: hover) and (pointer: fine) {
  .way-tab:hover > .way-orbit {
    --orbit-outer-scale: .25;
    --orbit-inner-scale: .5;
    --orbit-ring-opacity: 0;
    --orbit-core-scale: 1;
    --orbit-core-opacity: 1;
    --orbit-transition: 360ms;
    --orbit-animation: yuan-way-orbit-breathe 1.8s ease-in-out 360ms infinite;
  }
}

@keyframes yuan-way-orbit-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

/* At the widths where the old arrow disappeared, keep the rings visible in
   the top-right padding so the existing tab labels retain their full width. */
@media (max-width: 1100px) {
  .way-tab > .way-orbit {
    --orbit-size: 18px;
    --orbit-inner-size: 9px;
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 7px;
    margin-inline-start: 0;
  }
}

@media (min-width: 561px) and (max-width: 800px) {
  .way-tab > .way-orbit {
    --orbit-size: 16px;
    --orbit-inner-size: 8px;
    inset-block-start: 2px;
    inset-inline-end: 5px;
  }
}

@media (max-width: 380px) {
  .ways-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way-tab {
    min-inline-size: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px;
  }
  .way-tab > span:nth-child(2) { font-size: 17px; }
}

.motion-paused .way-orbit > span {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .way-orbit > span {
    animation: none !important;
    transition: none !important;
  }
}