/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Blog prose typography ──────────────────────────────── */

.blog-prose {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #44403c;
}

.blog-prose > *:first-child {
  margin-top: 0;
}

.blog-prose > p:first-child {
  font-size: 1.1875rem;
  color: #292524;
  line-height: 1.75;
}

.blog-prose h2, .blog-prose h3, .blog-prose h4 {
  font-family: Georgia, serif;
  color: #1c1917;
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-prose h2 { font-size: 1.5em; }
.blog-prose h3 { font-size: 1.2em; }
.blog-prose h4 { font-size: 1.05em; }

.blog-prose p {
  margin-bottom: 1.4em;
}

.blog-prose a {
  color: #b45309;
  text-decoration: underline;
  text-decoration-color: #b4530940;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.blog-prose a:hover {
  text-decoration-color: #b45309;
}

.blog-prose img, .blog-prose video {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2em 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}

.blog-prose ul, .blog-prose ol {
  padding-left: 1.25em;
  margin-bottom: 1.4em;
}

.blog-prose ul { list-style-type: disc; }
.blog-prose ol { list-style-type: decimal; }

.blog-prose li {
  margin-bottom: 0.4em;
}

.blog-prose li strong {
  color: #292524;
}

.blog-prose blockquote {
  border-left: 2px solid #b45309;
  padding-left: 1.25em;
  margin: 2em 0;
  color: #57534e;
  font-style: italic;
}

.blog-prose code {
  font-size: 0.85em;
  background: #f5f5f4;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #44403c;
}

.blog-prose pre {
  background: #1c1917;
  color: #d6d3d1;
  padding: 1.5em;
  border-radius: 0.625rem;
  overflow-x: auto;
  margin: 2em 0;
  font-size: 0.8125em;
  line-height: 1.75;
}

.blog-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.9375em;
}

.blog-prose th, .blog-prose td {
  border: 1px solid #e7e5e4;
  padding: 0.5em 0.75em;
  text-align: left;
}

.blog-prose th {
  background: #fafaf9;
  font-weight: 600;
  color: #292524;
}

.blog-prose hr {
  border: none;
  border-top: 1px solid #e7e5e4;
  margin: 3em 0;
}

.blog-prose strong {
  color: #292524;
  font-weight: 600;
}

/* ── Role selector crossfade ─────────────────────────────── */

.demo-role-stage {
  position: relative;
}

.demo-role-content {
  transition: opacity 0.3s ease;
}

.demo-role-hidden {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Feature grid staggered reveal ───────────────────────── */

.feat-item {
  opacity: 0;
  transform: translateY(0.75rem);
}

.in-view .feat-item {
  animation: feat-reveal 0.5s ease forwards;
}

.in-view .feat-item:nth-child(1)  { animation-delay: 0s; }
.in-view .feat-item:nth-child(2)  { animation-delay: 0.06s; }
.in-view .feat-item:nth-child(3)  { animation-delay: 0.12s; }
.in-view .feat-item:nth-child(4)  { animation-delay: 0.18s; }
.in-view .feat-item:nth-child(5)  { animation-delay: 0.24s; }
.in-view .feat-item:nth-child(6)  { animation-delay: 0.3s; }
.in-view .feat-item:nth-child(7)  { animation-delay: 0.36s; }
.in-view .feat-item:nth-child(8)  { animation-delay: 0.42s; }
.in-view .feat-item:nth-child(9)  { animation-delay: 0.48s; }
.in-view .feat-item:nth-child(10) { animation-delay: 0.54s; }

@keyframes feat-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Demo: Claude-style chat ─────────────────────────────── */

.demo-claude {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #d6d3d1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ── Header ───────────────────────────────────────────────── */

.demo-claude-header {
  background: #f5f5f4;
  border-bottom: 1px solid #d6d3d1;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
}

.demo-claude-dots {
  display: flex;
  gap: 0.4rem;
  width: 2.5rem;
}

.demo-claude-dots span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d6d3d1;
}

.demo-claude-model {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #57534e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.demo-claude-model svg {
  color: #a8a29e;
}

/* ── Chat body ────────────────────────────────────────────── */

.demo-claude-body {
  background: #faf9f7;
  height: 20rem;
  overflow: hidden;
  position: relative;
}

.demo-cl-scroll {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.in-view .demo-cl-scroll {
  animation: cl-scroll 30s ease-in-out infinite;
}

/*
  Scroll: content height vs 20rem body (minus 2.5rem padding = 17.5rem usable).
  Phase 1 (~9rem) + Phase 2 (~10rem) = ~19rem → barely overflows.
  Phase 3 adds ~10rem more → needs real scrolling.
  Each scroll step completes just before its message expands.
*/
@keyframes cl-scroll {
  0%, 44%   { transform: translateY(0); }
  46%       { transform: translateY(-2rem); }
  52%       { transform: translateY(-2rem); }
  54%       { transform: translateY(-5.5rem); }
  58%       { transform: translateY(-5.5rem); }
  59.5%     { transform: translateY(-7.5rem); }
  63%       { transform: translateY(-7.5rem); }
  64.5%     { transform: translateY(-8.5rem); }
  70%       { transform: translateY(-8.5rem); }
  71.5%     { transform: translateY(-12rem); }
  83.3%     { transform: translateY(-12rem); }
  86.7%     { transform: translateY(0); }
  100%      { transform: translateY(0); }
}

/* ── Message row ──────────────────────────────────────────── */

.demo-cl-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.demo-cl-row-user {
  justify-content: flex-end;
}

/* ── Claude icon ──────────────────────────────────────────── */

.demo-cl-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.demo-cl-icon svg {
  width: 100%;
  height: 100%;
}

/* ── User bubble ──────────────────────────────────────────── */

.demo-cl-user-bubble {
  background: #ede9e3;
  border-radius: 1.25rem;
  padding: 0.6rem 1rem;
  color: #1c1917;
  max-width: 85%;
}

/* ── Claude text ──────────────────────────────────────────── */

.demo-cl-body {
  min-width: 0;
  flex: 1;
}

.demo-cl-text {
  color: #292524;
  padding-top: 0.1rem;
}

.demo-cl-body .demo-cl-tool + .demo-cl-text {
  margin-top: 0.5rem;
}

.demo-cl-text code {
  display: inline;
  background: #e7e5e4;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.8em;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #44403c;
}

.demo-cl-text strong {
  font-weight: 600;
}

/* ── Tool use block ───────────────────────────────────────── */

.demo-cl-tool {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 0.625rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
}

.demo-cl-tool-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.demo-cl-tool-svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: #a8a29e;
}

.demo-cl-tool-label {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.76rem;
  color: #57534e;
  white-space: nowrap;
}

/* ── Spinner + check ──────────────────────────────────────── */

.demo-cl-spinner {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid #e7e5e4;
  border-top-color: #a8a29e;
  border-radius: 50%;
  opacity: 0;
  flex-shrink: 0;
}

.demo-cl-check {
  color: #16a34a;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  flex-shrink: 0;
}

/* ── Typing indicator ─────────────────────────────────────── */

.demo-cl-typing {
  display: flex;
  gap: 0.3rem;
  padding: 0.45rem 0;
}

.demo-cl-typing span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #a8a29e;
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes demo-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}

@keyframes demo-spin {
  to { transform: rotate(360deg); }
}

/*
  30s loop. Messages use max-height + margin-top to collapse/expand.
  The scroll container is bottom-anchored, so expanding messages
  push content upward — older messages scroll out of view naturally.

  Phase 1 — save a trip recommendation
    0.5s  (1.7%)  — user msg 1 in
    2.5s  (8.3%)  — typing 1 in
    4.0s  (13.3%) — typing 1 out
    4.2s  (14%)   — tool create_note in
    5.8s  (19.3%) — check in
    6.3s  (21%)   — claude response 1 in

  Phase 2 — what trips do I have?
    8.5s  (28.3%) — user msg 2 in
   10.2s  (34%)   — typing 2 in
   11.5s  (38.3%) — typing 2 out
   11.7s  (39%)   — tool search_notes in
   13.2s  (44%)   — check in
   13.7s  (45.7%) — claude response 2 in

  Phase 3 — tell me about Norway
   16.0s  (53.3%) — user msg 3 in
   17.7s  (59%)   — typing 3 in
   19.0s  (63.3%) — typing 3 out
   19.2s  (64%)   — tool get_note in
   20.7s  (69%)   — check in
   21.2s  (70.7%) — claude response 3 in

  Fade out
   25.0s  (83.3%) — start fade
   26.0s  (86.7%) — fully hidden
   30.0s  (100%)  — loop
*/

/* ── Persistent messages (expand in, collapse at end) ─────── */

/* mt = margin-top when visible. First msg gets 0, rest get 0.75rem */

@keyframes cl-a1 {
  0%        { max-height: 0; opacity: 0; margin-top: 0; }
  1.7%      { max-height: 10rem; opacity: 1; margin-top: 0; }
  83.3%     { max-height: 10rem; opacity: 1; margin-top: 0; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a3 {
  0%, 13%   { max-height: 0; opacity: 0; margin-top: 0; }
  14%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a4 {
  0%, 20%   { max-height: 0; opacity: 0; margin-top: 0; }
  21%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a5 {
  0%, 27.3% { max-height: 0; opacity: 0; margin-top: 0; }
  28.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a7 {
  0%, 38%   { max-height: 0; opacity: 0; margin-top: 0; }
  39%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a8 {
  0%, 44.7% { max-height: 0; opacity: 0; margin-top: 0; }
  45.7%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a9 {
  0%, 52.3% { max-height: 0; opacity: 0; margin-top: 0; }
  53.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a11 {
  0%, 63%   { max-height: 0; opacity: 0; margin-top: 0; }
  64%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a12 {
  0%, 70%   { max-height: 0; opacity: 0; margin-top: 0; }
  70.7%     { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  83.3%     { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  86.7%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* ── Typing indicators (expand in, collapse out) ──────────── */

@keyframes cl-a2 {
  0%, 7.5%  { max-height: 0; opacity: 0; margin-top: 0; }
  8.3%      { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  12.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  13.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a6 {
  0%, 33%   { max-height: 0; opacity: 0; margin-top: 0; }
  34%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  37.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  38.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes cl-a10 {
  0%, 58%   { max-height: 0; opacity: 0; margin-top: 0; }
  59%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  62.5%     { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  63.3%     { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* ── Spinners + checks ────────────────────────────────────── */

@keyframes cl-a3s {
  0%, 13.5% { opacity: 0; }
  14.5%     { opacity: 1; }
  18.7%     { opacity: 1; }
  19.3%     { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a3c {
  0%, 18.7% { opacity: 0; transform: scale(0.5); }
  19.7%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes cl-a7s {
  0%, 38.5% { opacity: 0; }
  39.5%     { opacity: 1; }
  43.5%     { opacity: 1; }
  44%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a7c {
  0%, 43.5% { opacity: 0; transform: scale(0.5); }
  44.5%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes cl-a11s {
  0%, 63.5% { opacity: 0; }
  64.5%     { opacity: 1; }
  68.5%     { opacity: 1; }
  69%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes cl-a11c {
  0%, 68.5% { opacity: 0; transform: scale(0.5); }
  69.5%     { opacity: 1; transform: scale(1); }
  83.3%     { opacity: 1; transform: scale(1); }
  86.7%     { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

/* ── Apply animations ─────────────────────────────────────── */

.in-view .demo-cl-a1   { animation: cl-a1 30s ease-out infinite; }
.in-view .demo-cl-a2   { animation: cl-a2 30s ease-out infinite; }
.in-view .demo-cl-a3   { animation: cl-a3 30s ease-out infinite; }
.in-view .demo-cl-a3s  { animation: cl-a3s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a3c  { animation: cl-a3c 30s ease infinite; }
.in-view .demo-cl-a4   { animation: cl-a4 30s ease-out infinite; }
.in-view .demo-cl-a5   { animation: cl-a5 30s ease-out infinite; }
.in-view .demo-cl-a6   { animation: cl-a6 30s ease-out infinite; }
.in-view .demo-cl-a7   { animation: cl-a7 30s ease-out infinite; }
.in-view .demo-cl-a7s  { animation: cl-a7s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a7c  { animation: cl-a7c 30s ease infinite; }
.in-view .demo-cl-a8   { animation: cl-a8 30s ease-out infinite; }
.in-view .demo-cl-a9   { animation: cl-a9 30s ease-out infinite; }
.in-view .demo-cl-a10  { animation: cl-a10 30s ease-out infinite; }
.in-view .demo-cl-a11  { animation: cl-a11 30s ease-out infinite; }
.in-view .demo-cl-a11s { animation: cl-a11s 30s ease infinite, demo-spin 0.6s linear infinite; }
.in-view .demo-cl-a11c { animation: cl-a11c 30s ease infinite; }
.in-view .demo-cl-a12  { animation: cl-a12 30s ease-out infinite; }

.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(1),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(1),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(1) { animation: demo-bounce 0.9s ease infinite 0s; }
.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(2),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(2),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(2) { animation: demo-bounce 0.9s ease infinite 0.15s; }
.in-view .demo-cl-a2 .demo-cl-typing span:nth-child(3),
.in-view .demo-cl-a6 .demo-cl-typing span:nth-child(3),
.in-view .demo-cl-a10 .demo-cl-typing span:nth-child(3) { animation: demo-bounce 0.9s ease infinite 0.3s; }

/* ── Demo carousel slides (10s loop, activated by .active) ── */

.ds-scroll {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

/*
  10s loop for a single exchange: user → typing → tool → response.

  0.5s (5%)   — user message
  1.5s (15%)  — typing appears
  2.8s (28%)  — typing out
  3.0s (30%)  — tool + spinner
  4.3s (43%)  — spinner out, check in
  4.8s (48%)  — response in
  8.0s (80%)  — start fade
  9.0s (90%)  — fully hidden
*/

@keyframes ds-a1 {
  0%        { max-height: 0; opacity: 0; margin-top: 0; }
  5%        { max-height: 10rem; opacity: 1; margin-top: 0; }
  80%       { max-height: 10rem; opacity: 1; margin-top: 0; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes ds-a2 {
  0%, 14%   { max-height: 0; opacity: 0; margin-top: 0; }
  15%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  27%       { max-height: 3rem; opacity: 1; margin-top: 0.75rem; }
  28%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes ds-a3 {
  0%, 29%   { max-height: 0; opacity: 0; margin-top: 0; }
  30%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  80%       { max-height: 6rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

@keyframes ds-a3s {
  0%, 30%   { opacity: 0; }
  31%       { opacity: 1; }
  42%       { opacity: 1; }
  43%       { opacity: 0; }
  100%      { opacity: 0; }
}

@keyframes ds-a3c {
  0%, 42%   { opacity: 0; transform: scale(0.5); }
  43%       { opacity: 1; transform: scale(1); }
  80%       { opacity: 1; transform: scale(1); }
  90%       { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

@keyframes ds-a4 {
  0%, 47%   { max-height: 0; opacity: 0; margin-top: 0; }
  48%       { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  80%       { max-height: 8rem; opacity: 1; margin-top: 0.75rem; }
  90%       { max-height: 0; opacity: 0; margin-top: 0; }
  100%      { max-height: 0; opacity: 0; margin-top: 0; }
}

/* Apply only when slide is active (restarts on tab switch) */
.demo-slide.active .ds-a1     { animation: ds-a1 10s ease-out infinite; }
.demo-slide.active .ds-a2     { animation: ds-a2 10s ease-out infinite; }
.demo-slide.active .ds-a3     { animation: ds-a3 10s ease-out infinite; }
.demo-slide.active .ds-a3s    { animation: ds-a3s 10s ease infinite, demo-spin 0.6s linear infinite; }
.demo-slide.active .ds-a3c    { animation: ds-a3c 10s ease infinite; }
.demo-slide.active .ds-a4     { animation: ds-a4 10s ease-out infinite; }

.demo-slide.active .ds-a2 .demo-cl-typing span:nth-child(1) { animation: demo-bounce 0.9s ease infinite 0s; }
.demo-slide.active .ds-a2 .demo-cl-typing span:nth-child(2) { animation: demo-bounce 0.9s ease infinite 0.15s; }
.demo-slide.active .ds-a2 .demo-cl-typing span:nth-child(3) { animation: demo-bounce 0.9s ease infinite 0.3s; }