/* ===========================================================================
   SolutionsDataHub -- HERO FILM v2, part 3/3: motion. transform / opacity /
   clip-path only. Runs only under .dh-hero-film.is-live (datahub-hero.js sets
   it only when html.dh-hero-motion is on): no JS / reduced motion = the final
   frames of parts 1-2.
   ONE choreography for all five scenes (the same beat, a different answer):
     0.10s question rises, 0.2-0.7s it types itself · 0.6s the sources it reads light up · 0.85s AI
     "typing" dots · 1.65s the answer sentence · 1.85s the result card ·
     2.2s+ the chart draws itself · ~3s the one fact to remember pops.
   How a scene restarts every loop: the shown / outgoing scene gets the
   animation NAMES as custom properties (--rise, --pop ...). Children use
   var(--rise, none), so a scene that is not shown has no animation at all and
   replays from frame 0 when it comes back. Every delay ends inside the
   shortest step --dur (4.6s).
   =========================================================================== */

/* ---- before datahub-hero.js runs: html.dh-hero-motion (set in <head>) paints
   scene ①'s empty start frame, so autoplay starts without a flash of ⑤ ---- */
html.dh-hero-motion .dh-f:not(.is-ready) .dh-f-scene { opacity: 0; visibility: hidden; }
html.dh-hero-motion .dh-f:not(.is-ready) [data-scene="0"] { opacity: 1; visibility: visible; }
html.dh-hero-motion .dh-f:not(.is-ready) [data-scene="0"] > * { opacity: 0; }
html.dh-hero-motion .dh-f:not(.is-ready) .dh-f-rail li { --lit: 0; }

/* ---- once JS drives it: scene cross-fade + rail light --------------------- */
html.dh-hero-motion .dh-f.is-ready .dh-f-scene { transition: opacity 0.25s var(--ease-soft), visibility 0s linear 0.25s; }
html.dh-hero-motion .dh-f.is-ready:is([data-at="0"]) [data-scene="0"], html.dh-hero-motion .dh-f.is-ready:is([data-at="1"]) [data-scene="1"],
html.dh-hero-motion .dh-f.is-ready:is([data-at="2"]) [data-scene="2"], html.dh-hero-motion .dh-f.is-ready:is([data-at="3"]) [data-scene="3"],
html.dh-hero-motion .dh-f.is-ready:is([data-at="4"]) [data-scene="4"] { transition: opacity 0.4s var(--ease-soft) 0.18s, visibility 0s; }
html.dh-hero-motion .dh-f.is-ready .dh-f-rail li::before,
html.dh-hero-motion .dh-f.is-ready .dh-f-rail li::after { transition: opacity 0.35s var(--ease-soft) 0.55s; }

/* frozen (off-screen / tab hidden / 一時停止): every running animation holds its frame */
.dh-f.is-held *, .dh-f.is-held *::before, .dh-f.is-held *::after { animation-play-state: paused !important; }

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

/* ---- the running scene (shown or fading out) gets the animation names ------- */
.dh-f.is-live:is([data-at="0"], [data-prev="0"]) [data-scene="0"],
.dh-f.is-live:is([data-at="1"], [data-prev="1"]) [data-scene="1"],
.dh-f.is-live:is([data-at="2"], [data-prev="2"]) [data-scene="2"],
.dh-f.is-live:is([data-at="3"], [data-prev="3"]) [data-scene="3"],
.dh-f.is-live:is([data-at="4"], [data-prev="4"]) [data-scene="4"] {
  --rise: dh-f-rise; --pop: dh-f-pop; --think: dh-f-think; --wipe: dh-f-wipe; --grow: dh-f-grow; --lift: dh-f-lift; --spin: dh-f-spin;
  --type: dh-ch-in; --caret: dh-ch-caret;
}
.dh-f-ask { animation: var(--rise, none) 0.45s var(--ease-out) 0.1s both; }
/* round 6: the question types itself 0.2s-0.7s (datahub-chat.js splits it, --cd = 500ms / length;
   keyframes in datahub-chat.css), done before the dots at 0.8s: no other delay moved */
.dh-f-bub .dh-ch { animation: var(--type, none) 1ms linear calc(0.2s + var(--i) * var(--cd, 30ms)) both, var(--caret, none) var(--cd, 30ms) steps(1) calc(0.2s + var(--i) * var(--cd, 30ms)); }
.dh-f-bub .dh-ch--last { animation-duration: 1ms, 0.3s; }
.dh-f-dots { animation: var(--think, none) 1.65s linear both; }
.dh-f-dots i { animation: var(--lift, none) 0.6s var(--ease-soft) calc(0.85s + var(--k, 0) * 0.12s) 2 both; }
.dh-f-dots i:nth-child(2) { --k: 1; }
.dh-f-dots i:nth-child(3) { --k: 2; }
.dh-f-say { animation: var(--rise, none) 0.4s var(--ease-out) 1.65s both; }
.dh-f-sql { animation: var(--rise, none) 0.4s var(--ease-out) 2s both; }
.dh-f-card { animation: var(--rise, none) 0.45s var(--ease-out) 1.85s both; }
.dh-f-kpi { animation: var(--rise, none) 0.4s var(--ease-out) calc(2.1s + var(--i) * 0.15s) both; }
.dh-f-legend { animation: var(--rise, none) 0.4s var(--ease-out) 2.4s both; }
.dh-f-line svg { animation: var(--wipe, none) 1.2s var(--ease-soft) 2.25s both; }
.dh-f-bt i { animation: var(--grow, none) 0.7s var(--ease-out) calc(2.2s + var(--i, 0) * 0.09s) both; }
.dh-f-badge { animation: var(--pop, none) 0.45s var(--ease-out) 3s both; }
.dh-f-donut svg { animation: var(--spin, none) 1s var(--ease-out) 2.2s both; }
.dh-f-dc { animation: var(--rise, none) 0.4s var(--ease-out) 2.7s both; }
.dh-f-leg li { animation: var(--rise, none) 0.4s var(--ease-out) calc(2.5s + var(--i) * 0.12s) both; }
.dh-f-tile { animation: var(--rise, none) 0.45s var(--ease-out) calc(1.9s + var(--i) * 0.14s) both; }
.dh-f-tile svg { animation: var(--wipe, none) 1s var(--ease-soft) 2.3s both; }
.dh-f-cols i { animation: var(--grow-y, none) 0.6s var(--ease-out) 2.4s both; }
.dh-f.is-live:is([data-at="4"], [data-prev="4"]) [data-scene="4"] { --grow-y: dh-f-grow-y; }
.dh-f-share { animation: var(--pop, none) 0.5s var(--ease-out) 3.35s both; }
.dh-f.is-live:is([data-at="4"], [data-prev="4"]) .dh-f-sharebtn { animation: dh-f-press 0.35s var(--ease-soft) 3.05s both; }

/* ---- keyframes -------------------------------------------------------------- */
@keyframes dh-f-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dh-f-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes dh-f-think { 0%, 48% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dh-f-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes dh-f-wipe { from { clip-path: inset(-8% 100% -8% 0); } to { clip-path: inset(-8% -2% -8% 0); } }
@keyframes dh-f-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dh-f-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes dh-f-spin { from { opacity: 0; transform: rotate(-120deg) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes dh-f-press { 0%, 100% { transform: none; } 50% { transform: scale(0.9); } }
@keyframes dh-hero-grow { from { transform: scaleX(0); } to { transform: none; } }

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