/* ===========================================================================
   SolutionsSales preview -- 特長, part 4: motion. Each crop plays ONCE, via
   the sales-motion.js latch ([data-sa-latch] -> .sa-seen, under html.sa-motion).
   - Start states exist only under html.sa-motion [data-sa-latch]:not(.sa-seen),
     so no JS / reduced motion = the final state, fully readable.
   - Transitions exist only once latched: entering the start state is instant,
     so a page loaded mid-scroll never shows a crop fading OUT first.
   - transform / opacity only. --t = step delay, --ts = selection delay.
     Numbers count up in sales-feat.js.
   Timeline: 01 ~2.6s (draft F -> its changed words -> draft G -> its changed
   words), 02 ~3.2s (replies arrive -> sorted -> auto-reply moves to its own
   group -> AI reads D社), 03 ~1.5s, 04 ~1.7s, 05 ~1.3s.
   =========================================================================== */
.sa-feat-v2 { --ts: 1250ms; }
.sa-feat-v4 { --ts: 0ms; }

html.sa-motion .sa-feat .sa-seen :is(.sa-feat-step, .sa-feat-fade, .sa-feat-grow, .sa-feat-card) {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  transition-delay: var(--t, 0ms);
}
html.sa-motion .sa-feat .sa-seen .sa-feat-grow { transition-duration: 0.8s; }
html.sa-motion .sa-feat .sa-seen .sa-feat-card { transition-duration: 0.55s; }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-step { opacity: 0; transform: translateY(6px); }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-card { opacity: 0; transform: translateY(12px); }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-fade { opacity: 0; }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-grow { transform: scaleX(0); }

/* 01: once a draft is in, a light marker sweeps over each word the AI
   changed for that company (left to right, one after another). */
html.sa-motion .sa-feat .sa-seen .sa-feat-hl::before { transition: transform 0.4s var(--ease-soft) var(--t, 0ms); }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-hl::before { transform: scaleX(0); }

/* 02: the auto-reply first arrives right under the replies, then moves down
   one bar (26px) while the 自動応答 group bar appears above it. */
html.sa-motion .sa-feat .sa-seen .sa-feat-auto { transition: opacity 0.45s var(--ease-out) var(--t, 0ms), transform 0.45s var(--ease-soft) 1000ms; }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-auto { opacity: 0; transform: translateY(-26px); }

/* Selected row highlight fades in after the list settles. */
html.sa-motion .sa-feat .sa-seen .sa-feat-sel::before { transition: opacity 0.4s var(--ease-out) var(--ts, 0ms); }
html.sa-motion .sa-feat [data-sa-latch]:not(.sa-seen) .sa-feat-sel::before { opacity: 0; }

/* 02: typing dots before the AI text, in the same grid cell. */
html.sa-motion .sa-feat .sa-feat-dots { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding-left: 2px; opacity: 0; }
html.sa-motion .sa-feat .sa-seen .sa-feat-dots { animation: sa-feat-dots-life 0.7s linear var(--t, 0ms) both; }
html.sa-motion .sa-feat .sa-seen .sa-feat-dots i { animation: sa-feat-dot 0.35s ease-in-out var(--t, 0ms) 2 alternate; }
html.sa-motion .sa-feat .sa-seen .sa-feat-dots i:nth-child(2) { animation-delay: calc(var(--t, 0ms) + 110ms); }
html.sa-motion .sa-feat .sa-seen .sa-feat-dots i:nth-child(3) { animation-delay: calc(var(--t, 0ms) + 220ms); }
@keyframes sa-feat-dots-life { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sa-feat-dot { to { transform: translateY(-3px); opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .sa-feat *, .sa-feat *::before, .sa-feat *::after { transition: none !important; animation: none !important; }
  .sa-feat .sa-feat-dots { display: none !important; }
}