/* Motion components for the AI implementation pages (/ai-implementation, /use-case/*,
   /ai-replace-tasks, /ai-cost-reduction). Driven by assets/usecase.js.
   Everything degrades to a static, fully visible layout under prefers-reduced-motion. */

/* A card mid-flip (3D rotation) briefly pokes past the viewport; clip so the page never scrolls sideways.
   clip (not hidden) keeps sticky positioning working. */
html, body { overflow-x: clip; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* Sequence: children with .seq-item appear one after another (chat, lead list, documents...).
   Default: hidden items take no space, so a chat grows as it plays.
   data-sequence="fade": hidden items keep their space (rows in a table, cells in a grid). */
[data-sequence] .seq-item:not(.is-on) { display: none; }
[data-sequence] .seq-item.is-on { animation: uc-pop .45s ease both; }
[data-sequence="fade"] .seq-item:not(.is-on) { display: revert; visibility: hidden; }
[data-sequence="fade"] .seq-item { transition: opacity .45s ease; }
@keyframes uc-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Chat bubbles */
.chat-bubble { max-width: 85%; padding: .6rem .9rem; border-radius: 1rem; font-size: .875rem; line-height: 1.45; }
.chat-in { background: #f1f5f9; color: #334155; border-bottom-left-radius: .25rem; }
.chat-out { background: #007bff; color: #fff; margin-left: auto; border-bottom-right-radius: .25rem; }
.chat-typing { display: inline-flex; gap: 4px; padding: .7rem .9rem; }
.chat-typing i { width: 6px; height: 6px; border-radius: 9999px; background: #94a3b8; animation: uc-blink 1.2s infinite; font-style: normal; }
.chat-typing i:nth-child(2) { animation-delay: .2s; }
.chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes uc-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Before / after flow: a dot travels a lane; the "before" lane is slow, the "after" lane is fast */
.flow-lane { position: relative; height: 6px; border-radius: 9999px; background: #e2e8f0; }
.flow-lane .flow-dot { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin-top: -9px; border-radius: 9999px; box-shadow: 0 0 0 4px rgba(255,255,255,.9); animation: uc-travel var(--t, 6s) linear infinite; }
.flow-lane.is-before .flow-dot { background: #dc3545; }
.flow-lane.is-after .flow-dot { background: #28a745; }
@keyframes uc-travel { 0% { left: 0; } 92% { left: calc(100% - 18px); } 100% { left: calc(100% - 18px); opacity: 0; } }
.flow-steps { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.flow-steps > span { flex: 1; font-size: .72rem; line-height: 1.3; color: #64748b; text-align: center; }

/* Animated bars (width set by --w) */
.uc-bar { height: 10px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.uc-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.is-in .uc-bar > span, .uc-bar.is-in > span { width: var(--w, 50%); }
/* a bar inside a sequence item waits for its item, so it grows as the tile appears */
[data-sequence] .seq-item:not(.is-on) .uc-bar > span { width: 0; }

/* Flip cards (role cards: what AI takes / what stays human) */
.flip-card { perspective: 1200px; cursor: pointer; }
.flip-inner { position: relative; height: 100%; min-height: 15rem; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1rem; padding: 1.25rem; overflow: auto; }
.flip-back { transform: rotateY(180deg); }
@media (hover: hover) { .flip-card:hover .flip-inner { transform: rotateY(180deg); } }

/* Tabs */
[data-tabs] [role="tab"][aria-selected="true"] { background: #0f172a; color: #fff; border-color: #0f172a; }
[data-tabs] [role="tabpanel"][hidden] { display: none; }
[data-tabs] [role="tabpanel"] { animation: uc-fade .45s ease; }
@keyframes uc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Floating pulse used on hero diagrams */
.uc-float { animation: uc-float 5s ease-in-out infinite; }
@keyframes uc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.uc-pulse { animation: uc-pulse 2.4s ease-out infinite; }
@keyframes uc-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,123,255,.35); } 100% { box-shadow: 0 0 0 16px rgba(0,123,255,0); } }

/* ROI calculator */
.roi-input { width: 100%; border: 1px solid #cbd5e1; border-radius: .75rem; padding: .6rem .8rem; font-size: 1rem; }
.roi-input:focus { outline: 2px solid #007bff; outline-offset: 1px; border-color: transparent; }
.roi-range { width: 100%; accent-color: #007bff; }
[data-roi-preset][aria-pressed="true"] { background: #0f172a; color: #fff; border-color: #0f172a; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-sequence] .seq-item { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  [data-sequence] .seq-item[data-transient] { display: none !important; }
  .flow-lane .flow-dot, .uc-float, .uc-pulse, .chat-typing i { animation: none !important; }
  .uc-bar > span { transition: none; width: var(--w, 50%); }
  .flip-inner { transition: none; }
}