/* ===========================================================================
   SolutionsSales -- HERO, part 3/3: motion. transform / opacity /
   clip-path (typing) only. Everything is scoped to html.sa-motion (entrance)
   or .sa-hero-film.is-live (film, set by sales-hero.js only when motion is
   allowed), so no JS / reduced motion = the final frames of sales-hero-2.css.
   A running scene = [data-at] (playing) or [data-prev] (fading out: keeps its
   end frame). Timings must stay inside the li --dur of the step bar.
   =========================================================================== */

/* No entrance on purpose: the hero is the top of the page, so copy AND film
   paint at once, never waiting for a scroll latch (a phone held sideways
   could never reveal a hidden film). The film's own scenes are the motion. */

/* ---- scene cross-fade + top-bar status ------------------------------------ */
html.sa-motion .sa-hero-scene { transition: opacity 0.25s var(--ease-soft), visibility 0s linear 0.25s; }
html.sa-motion .sa-hero-say > span { transition: opacity 0.25s var(--ease-soft), visibility 0s linear 0.25s; }
html.sa-motion .sa-hero-film[data-at="0"] .sa-hero-scene--0, html.sa-motion .sa-hero-film[data-at="1"] .sa-hero-scene--1,
html.sa-motion .sa-hero-film[data-at="2"] .sa-hero-scene--2, html.sa-motion .sa-hero-film[data-at="3"] .sa-hero-scene--3 { transition: opacity 0.4s var(--ease-soft) 0.18s, visibility 0s; }
html.sa-motion .sa-hero-status > .sa-ai { transition: opacity 0.3s var(--ease-soft); }
.sa-hero-film.is-live .sa-hero-status > .sa-ai::before { animation: sa-hero-blink 1.4s ease-in-out infinite; }

/* frozen (off-screen / tab hidden): every running animation holds its frame */
.sa-hero-film.is-held *, .sa-hero-film.is-held *::before, .sa-hero-film.is-held *::after { animation-play-state: paused !important; }

/* step bar: the current step's line fills over the scene length */
.sa-hero-film.is-live[data-at="0"] [data-go="0"] .sa-hero-prog, .sa-hero-film.is-live[data-at="1"] [data-go="1"] .sa-hero-prog,
.sa-hero-film.is-live[data-at="2"] [data-go="2"] .sa-hero-prog, .sa-hero-film.is-live[data-at="3"] [data-go="3"] .sa-hero-prog { animation: sa-hero-grow var(--dur) linear both; }

/* ---- ① 発掘 4.8s: rows in registration order -> scan + scores -> re-sort -> AI pick */
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-row { animation: sa-hero-fade 0.35s var(--ease-out) calc(var(--o) * 60ms) both, sa-hero-sort 0.75s var(--ease-soft) 2.3s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-scan { animation: sa-hero-scan 1s linear 0.75s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-score { animation: sa-hero-pop 0.32s var(--ease-out) calc(0.8s + var(--o) * 0.3s) both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-dash { animation: sa-hero-out 0.18s linear calc(0.8s + var(--o) * 0.3s) both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-sortchip { animation: sa-hero-pop 0.4s var(--ease-out) 2.9s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .is-top::before { animation: sa-hero-fade 0.4s var(--ease-soft) 3.1s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .is-top::after { animation: sa-hero-bar 0.35s var(--ease-out) 3.1s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-first { animation: sa-hero-pop 0.4s var(--ease-out) 3.3s both; }
.sa-hero-film.is-live:is([data-at="0"], [data-prev="0"]) .sa-hero-scene--0 .sa-hero-pick { animation: sa-hero-rise 0.4s var(--ease-out) 3.6s both; }

/* ---- ② アプローチ 5.8s: typed draft -> waiting for review -> person sends --- */
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-aichip { animation: sa-hero-pop 0.4s var(--ease-out) 0.15s both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-busy { animation: sa-hero-hold 3.3s linear both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-done { animation: sa-hero-fade 0.3s linear 3.3s both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-type,
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-type { animation: sa-hero-type calc(var(--n) * 30ms) steps(var(--n), end) var(--d) both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-wait { animation: sa-hero-pop 0.4s var(--ease-out) 3.4s both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-cursor { animation: sa-hero-cursor 0.9s var(--ease-soft) 3.6s both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-send { animation: sa-hero-press 0.28s var(--ease-soft) 4.3s both; }
.sa-hero-film.is-live:is([data-at="1"], [data-prev="1"]) .sa-hero-scene--1 .sa-hero-toast--sent { animation: sa-hero-show 0.4s var(--ease-out) 4.45s both; }

/* ---- ③ 反応 4.2s: open -> click -> visit -> reply detected ------------------- */
.sa-hero-film.is-live:is([data-at="2"], [data-prev="2"]) .sa-hero-scene--2 .sa-hero-sent { animation: sa-hero-rise 0.4s var(--ease-out) 0.05s both; }
.sa-hero-film.is-live:is([data-at="2"], [data-prev="2"]) .sa-hero-scene--2 .sa-hero-marks li { animation: sa-hero-dim 0.35s var(--ease-out) var(--d) both; }
.sa-hero-film.is-live:is([data-at="2"], [data-prev="2"]) .sa-hero-scene--2 .sa-hero-log li { animation: sa-hero-rise 0.4s var(--ease-out) var(--d) both; }
.sa-hero-film.is-live:is([data-at="2"], [data-prev="2"]) .sa-hero-scene--2 .sa-hero-toast--reply { animation: sa-hero-toast 0.55s var(--ease-out) 2.6s both; }
.sa-hero-film.is-live:is([data-at="2"], [data-prev="2"]) .sa-hero-scene--2 .sa-hero-bell::after { animation: sa-hero-ping 0.9s var(--ease-out) 2.95s 2 both; }

/* ---- ④ フォロー 5s: AI reads -> summary + priority -> drafted next mail ------ */
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-quote { animation: sa-hero-rise 0.4s var(--ease-out) 0.05s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-read { animation: sa-hero-read 1s var(--ease-soft) 0.5s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-sum { animation: sa-hero-rise 0.4s var(--ease-out) 1.4s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-prio .sa-score { animation: sa-hero-pop 0.4s var(--ease-out) 1.8s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-next { animation: sa-hero-rise 0.45s var(--ease-out) 2.3s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-blanks > span { animation: sa-hero-pop 0.35s var(--ease-out) 3.3s both; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-blanks > span + span { animation-delay: 3.42s; }
.sa-hero-film.is-live:is([data-at="3"], [data-prev="3"]) .sa-hero-scene--3 .sa-hero-nft { animation: sa-hero-fade 0.4s linear 3.6s both; }

/* ---- keyframes -------------------------------------------------------------- */
@keyframes sa-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sa-hero-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sa-hero-hold { 0%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sa-hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sa-hero-show { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sa-hero-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes sa-hero-dim { from { opacity: 0.3; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes sa-hero-sort { from { transform: translateY(calc(var(--dy) * 100%)); } to { transform: none; } }
@keyframes sa-hero-scan { 0% { opacity: 0; transform: translateY(0); } 8%, 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(300%); } }
@keyframes sa-hero-bar { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sa-hero-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sa-hero-cursor { 0% { opacity: 0; transform: translate(64px, 44px); } 25% { opacity: 1; } 72% { transform: none; } 84% { transform: scale(0.82); } 100% { opacity: 1; transform: none; } }
@keyframes sa-hero-press { 0%, 100% { transform: none; } 50% { transform: scale(0.94); } }
@keyframes sa-hero-toast { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }
@keyframes sa-hero-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes sa-hero-read { 0% { opacity: 0; transform: translateX(-100%); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(250%); } }
@keyframes sa-hero-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes sa-hero-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

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