/* G.A.P.E: the selected front separates from the shared operation.
   Only artwork moves; text and interactive hit areas remain in place. */
.method-sector {
  --sector-x: 0px;
  --sector-y: 0px;
  --sector-arrival-x: 0px;
  --sector-arrival-y: 0px;
  transform-box: view-box;
  transform-origin: 360px 360px;
  transform: translate(var(--sector-x), var(--sector-y));
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), fill 300ms ease, stroke 300ms ease;
}
.method-sector--g { --sector-arrival-y: 18px; }
.method-sector--a { --sector-arrival-x: -18px; }
.method-sector--p { --sector-arrival-y: -18px; }
.method-sector--e { --sector-arrival-x: 18px; }
[data-active-method="g"] .method-sector--g { --sector-y: -8px; }
[data-active-method="a"] .method-sector--a { --sector-x: 8px; }
[data-active-method="p"] .method-sector--p { --sector-y: 8px; }
[data-active-method="e"] .method-sector--e { --sector-x: -8px; }

.is-method-entering .method-sector {
  animation: methodSectorArrival 650ms cubic-bezier(.16, 1, .3, 1) both;
  animation-play-state: paused;
}
.is-method-entering .method-sector--a { animation-delay: 70ms; }
.is-method-entering .method-sector--p { animation-delay: 140ms; }
.is-method-entering .method-sector--e { animation-delay: 210ms; }
.is-cycle-visible:not(.is-page-hidden).is-method-entering .method-sector { animation-play-state: running; }
.method-orbit { animation-duration: 18s; }
.method-orbit circle { r: 4.5px; }
.is-method-enhanced .method-core-ring {
  stroke: #b97191;
  stroke-dasharray: 2 14;
  animation: methodRingFlow 16s linear infinite;
  animation-play-state: paused;
}
.is-cycle-visible:not(.is-page-hidden) .method-core-ring { animation-play-state: running; }
.is-method-enhanced .method-panel { animation: none; }
.method-node-letter { transition: transform 280ms cubic-bezier(.16, 1, .3, 1), color 200ms ease; }
.method-node[aria-selected="true"] .method-node-letter { color: #fff; transform: translateY(-2px) scale(1.06); }
.method-nav-arrow svg { transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .method-nav-arrow:hover svg { transform: translateX(-3px); }
  .method-nav-arrow--next:hover svg { transform: translateX(3px); }
}
@keyframes methodSectorArrival {
  from {
    opacity: .35;
    transform: translate(calc(var(--sector-x) + var(--sector-arrival-x)), calc(var(--sector-y) + var(--sector-arrival-y))) scale(.94);
  }
  to { opacity: 1; transform: translate(var(--sector-x), var(--sector-y)) scale(1); }
}
@keyframes methodRingFlow { to { stroke-dashoffset: -160; } }
@media (prefers-reduced-motion: reduce) {
  :where(html:not(.is-full-motion-preview)) .method-sector,
  :where(html:not(.is-full-motion-preview)) .method-node-letter,
  :where(html:not(.is-full-motion-preview)) .method-nav-arrow svg { transition: none; }
  :where(html:not(.is-full-motion-preview)) .is-method-entering .method-sector,
  :where(html:not(.is-full-motion-preview)) .is-method-enhanced .method-core-ring,
  :where(html:not(.is-full-motion-preview)) .method-orbit { animation: none; }
}