/* 2026-09-06: limited workflow cues; all text remains readable without JS. */
.hero-ai .hero-ai-copy h1 .hero-copy-opening { color: var(--color-ink); }
@keyframes copy-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blue-light {
  from { transform: translateX(-12%); opacity: .3; }
  to { transform: translateX(12%); opacity: .65; }
}
@keyframes workflow-highlight {
  from { background-color: #fff; }
  to { background-color: #edf8ff; }
}
@keyframes icon-arrive {
  from { opacity: .45; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes check-arrive {
  from { opacity: 0; transform: scale(.65); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-ai h1 > span { display: inline-block; animation: copy-arrive .65s both; }
  .hero-ai h1 .hero-copy-resolution { animation-delay: .24s; }
  .hero-ai-message { position: relative; isolation: isolate; }
  .hero-ai-message::before {
    content: ""; position: absolute; inset: -20px -8px; z-index: -1;
    background: radial-gradient(ellipse at 35% 50%, rgba(72, 185, 238, .2), transparent 68%);
    pointer-events: none; animation: blue-light 4.8s ease-in-out 1 alternate both;
  }
  .workflow-motion-ready .issue-stories > article.cue-entered {
    animation: copy-arrive .55s var(--cue-delay) both;
  }
  .workflow-motion-ready .company-ai-office > ul > li.cue-entered {
    animation: workflow-highlight .65s var(--cue-delay) both;
  }
  .workflow-motion-ready .company-ai-office > ul > li.cue-entered > svg {
    animation: icon-arrive .65s var(--cue-delay) both;
  }
  .workflow-motion-ready .comparison-support-board li > b {
    color: #526777; background: #e7eef3; box-shadow: none;
    transition: color .25s, background .25s;
  }
  .workflow-motion-ready .comparison-support-board li + li::before { background: #d2e1eb; filter: none; transition: background .25s; }
  .workflow-motion-ready .comparison-support-board li.step-active > b,
  .workflow-motion-ready .comparison-support-board li.step-passed > b { background: #087ab8; color: #fff; }
  .workflow-motion-ready .comparison-support-board li.step-active::before,
  .workflow-motion-ready .comparison-support-board li.step-passed::before { background: #209ed1; }
  .workflow-motion-ready .comparison-support-board li.step-active { border-color: #087ab8; background: #f0f9ff; }
  .workflow-motion-ready .mail-operation-flow > li.mail-entered {
    animation: workflow-highlight .45s var(--cue-delay) both;
  }
  .workflow-motion-ready .mail-operation-flow > li.mail-entered > svg {
    animation: icon-arrive .45s var(--cue-delay) both;
  }
  .workflow-motion-ready .mail-operation-flow .is-processing ul > li::after { opacity: 0; }
  .workflow-motion-ready .mail-operation-flow .is-processing.mail-entered ul > li::after {
    animation: check-arrive .3s calc(var(--cue-delay) + .35s + var(--check-delay, 0s)) both;
  }
  .workflow-motion-ready .mail-operation-flow .is-processing ul > li:nth-child(2) { --check-delay: .4s; }
  .workflow-motion-ready .mail-operation-flow .is-processing ul > li:nth-child(3) { --check-delay: .8s; }
  .workflow-motion-ready .mail-operation-flow .is-processing ul > li:nth-child(4) { --check-delay: 1.2s; }
  /* Shorter intervals keep stacked mobile stages visibly ordered. */
  @media (max-width: 768px) {
    .mail-operation-flow > li:nth-child(1) { --cue-delay: 0ms !important; }
    .mail-operation-flow > li:nth-child(2) { --cue-delay: 300ms !important; }
    .mail-operation-flow > li:nth-child(3) { --cue-delay: 600ms !important; }
    .mail-operation-flow > .is-auto-complete { --cue-delay: 2400ms !important; }
  }
}
.mail-operation-flow .is-processing ul > li { position: relative; padding-right: 24px; }
.mail-operation-flow .is-processing ul > li::after {
  content: "✓"; position: absolute; right: 6px; top: 6px;
  color: #087ab8; font-size: 14px; font-weight: 900;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-fixed-cta { transition: none; }
}