/* Section motion composes with reveal-pending without replacing its transform. */
.motion-heading {
  clip-path: none;
  overflow: visible;
}
.motion-heading.motion-heading-pending { clip-path: none; }
.motion-heading.motion-heading-entering {
  animation: section-heading-enter 1.1s cubic-bezier(.22,.65,.3,1) both;
}
@keyframes section-heading-enter {
  from { opacity: .35; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
.section-motion-paused .motion-heading-entering { animation-play-state: paused; }
.motion-drift { translate: var(--word-drift, 0px) 0; }
.motion-drift-active { will-change: translate; }

/* The rail lives in the existing gutter, preserving text and image positions. */
.motion-flow { position: relative; --flow-rail-x: -22px; --flow-color: var(--job-color, #00a5dd); }
/* Warm endpoint: 65% of the existing admin orange (#dd4d00), mixed with white. */
.rec-job-admin .motion-flow { --flow-end-color: #e98b59; }
.guidance-flow-list>.guidance-flow-item[data-reveal],
.rec-timeline>li[data-reveal],
.motion-flow>.motion-step.reveal-pending {
  opacity: 1; transform: none; translate: none; scale: none; transition: none;
}
.motion-flow>.motion-step.reveal-pending>* { opacity: .65; transition: opacity .85s ease; }
.motion-flow>.motion-step.reveal-pending.is-visible>* { opacity: 1; }
.motion-flow::before {
  content: ''; position: absolute; left: var(--flow-rail-x); top: 0; bottom: 0;
  width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--flow-color) 15%, transparent);
  pointer-events: none;
}
.motion-flow::after {
  content: ''; position: absolute; z-index: 1;
  left: var(--flow-rail-x); top: 0; width: 2px;
  height: var(--flow-progress-height, 0px); max-height: 100%;
  border-radius: 2px; background: linear-gradient(180deg, var(--flow-color), var(--flow-end-color, #54c7ee));
  pointer-events: none;
}
.motion-step { position: relative; }
.motion-step::before {
  content: ''; position: absolute; z-index: 2;
  left: calc(var(--flow-rail-x) - 4px); top: calc(var(--step-dot-offset, 38px) - 4px);
  width: 10px; height: 10px; border: 2px solid var(--flow-color); border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px #fff;
  scale: 1; transition: background-color .25s, box-shadow .25s;
  pointer-events: none;
}
.motion-flow>.motion-step::before { visibility: hidden; }
.motion-flow.motion-flow-ready>.motion-step::before { visibility: visible; }
.motion-step::after { content: none; }
.motion-step.motion-step-seen::before {
  background: var(--flow-color); scale: 1;
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px color-mix(in srgb, var(--flow-color) 12%, transparent);
}
.guidance-flow-item .guidance-flow-copy h3>span {
  transition: color .6s ease, -webkit-text-stroke-color .6s ease;
}
.guidance-flow-item.motion-step-seen .guidance-flow-copy h3>span {
  color: var(--blue); -webkit-text-stroke-color: transparent;
}
.rec-timeline .motion-step>span { transition: color .35s ease; }

/* Hover also has a keyboard focus equivalent; touch interaction stays direct. */
:is(.nav-contact,.footer-contact,.contact-submit,.contact-confirm-button,
    .guidance-contact-button,.guidance-detail-button,.risk-policy-actions>a,
    .risk-policy-actions>button,.risk-modal-contact>a,.text-link) {
  transition: translate .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease,
    background-position .55s ease, filter .3s ease;
}
:is(.nav-contact,.guidance-contact-button,.risk-policy-actions>a,.risk-modal-contact>a) {
  background-size: 170% 100%; background-position: 0 50%;
}
.site-navigation>a:not(.nav-contact) {
  transition: color .25s ease, translate .3s cubic-bezier(.16,1,.3,1);
}
.site-navigation>a:not(.nav-contact)::after {
  height: 2px; background: var(--gradient); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.risks-page .risk-card .risk-card-bottom>img {
  transition: rotate .45s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1);
}
.risks-page .risk-card .risk-number { transition: translate .45s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) and (pointer: fine) {
  :is(.nav-contact,.footer-contact,.contact-submit,.contact-confirm-button,
      .guidance-contact-button,.guidance-detail-button,.risk-policy-actions>a,
      .risk-policy-actions>button,.risk-modal-contact>a):hover {
    translate: 0 -3px; box-shadow: 0 8px 24px #007fa927; background-position: 100% 50%;
  }
  .text-link:hover { translate: 0 -2px; }
  .site-navigation>a:not(.nav-contact):hover { color: #008fbe; translate: 0 -2px; }
  .risks-page .risk-card:hover .risk-card-bottom>img { rotate: 90deg; scale: 1.1; }
  .risks-page .risk-card:hover .risk-number { translate: 0 -4px; }
}
:is(.nav-contact,.footer-contact,.contact-submit,.contact-confirm-button,
    .guidance-contact-button,.guidance-detail-button,.risk-policy-actions>a,
    .risk-policy-actions>button,.risk-modal-contact>a):focus-visible {
  background-position: 100% 50%; box-shadow: 0 8px 24px #007fa927;
}
.risks-page .risk-card:focus-visible .risk-card-bottom>img { rotate: 90deg; scale: 1.1; }
@media (max-width: 760px) {
  .motion-flow { --flow-rail-x: -10px; }
  /* Reserve the existing 28px gutter in static HTML, before JS adds motion-flow. */
  .guidance-flow-list,.recruit-page .rec-timeline { --flow-rail-x: 0px; padding-left: 28px; }
  .motion-step::before { width: 8px; height: 8px; left: calc(var(--flow-rail-x) - 3px); }
  .motion-step.motion-step-seen::before {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--flow-color) 12%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-heading,.motion-heading.motion-heading-pending,.motion-heading.motion-heading-entering {
    clip-path: none; translate: none; opacity: 1; animation: none; transition: none;
  }
  .motion-drift { translate: none; will-change: auto; }
  .motion-flow>.motion-step.reveal-pending>* { opacity: 1; transition: none; }
  .motion-step::before,.motion-step::after { transition: none; }
  :is(.nav-contact,.footer-contact,.contact-submit,.contact-confirm-button,
      .guidance-contact-button,.guidance-detail-button,.risk-policy-actions>a,
      .risk-policy-actions>button,.risk-modal-contact>a,.text-link,
      .site-navigation>a:not(.nav-contact)),
  .risks-page .risk-card .risk-number,.risks-page .risk-card .risk-card-bottom>img {
    translate: none !important; rotate: none !important; scale: none !important; transition: none;
  }
}

/* Brief, stationary fades keep modal content readable and avoid elaborate entrances. */
dialog[data-dialog-reveal]{opacity:0;will-change:opacity}
dialog[data-dialog-reveal]::backdrop{opacity:0}
dialog[data-dialog-reveal=running],dialog[data-dialog-reveal=running]::backdrop{
 animation:dialog-soft-enter .24s ease-in-out both;
}
@keyframes dialog-soft-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 dialog[data-dialog-reveal]{opacity:1;animation:none;will-change:auto}
 dialog[data-dialog-reveal]::backdrop{opacity:1;animation:none}
}