/* ═══════════════════════════════════════════════════════════════════
   Workflow step animations — PrivacyDesigner
   Shared base + 5 step-specific components
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared animation container ───────────────────────────────────── */
.softa-anim {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e5ea;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
  background: #f5f6f7;
  min-height: 360px;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Shared fake top-nav bar */
.sanim-topnav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 44px;
  padding: 0 1rem;
  background: #0f1623;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sanim-topnav__dots {
  display: flex;
  gap: 5px;
}
.sanim-topnav__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: block;
}
.sanim-topnav__dots span:first-child { background: #EE5D00; }
.sanim-topnav__title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ══════════════════════════════════════════════════════════════════
   ANIMATION 1 — Import
   ══════════════════════════════════════════════════════════════════ */
.sanim-import-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.25rem;
  gap: 1rem;
  min-height: calc(360px - 44px);
}

/* Source file list */
.sanim-import-sources {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.sanim-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateX(-16px);
}
.sanim-file--1 { animation: sanim-slide-in 0.5s ease 0.4s forwards; }
.sanim-file--2 { animation: sanim-slide-in 0.5s ease 1.2s forwards; }
.sanim-file--3 { animation: sanim-slide-in 0.5s ease 2.0s forwards; }
.sanim-file--4 { animation: sanim-slide-in 0.5s ease 2.8s forwards; }

@keyframes sanim-slide-in {
  to { opacity: 1; transform: translateX(0); }
}

.sanim-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}
.sanim-file-icon--xlsx { background: #E8F5E9; color: #2E7D32; }
.sanim-file-icon--docx { background: #E3F2FD; color: #1565C0; }
.sanim-file-icon--pdf  { background: #FFEBEE; color: #C62828; }
.sanim-file-icon--sp   { background: #E8EAF6; color: #3949AB; }

.sanim-file-name {
  font-size: 10px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
}

/* Arrow */
.sanim-import-arrow {
  flex-shrink: 0;
  opacity: 0;
  animation: sanim-fade-in 0.4s ease 1.4s forwards;
}

/* Destination PD list */
.sanim-import-dest {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1.5px solid rgba(238,93,0,0.35);
  border-radius: 10px;
  padding: 0.75rem;
  box-shadow: 0 4px 16px rgba(238,93,0,0.08);
}
.sanim-dest-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  font-weight: 700;
  color: #EE5D00;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.sanim-dest-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  color: #374151;
  padding: 0.3rem 0;
  border-bottom: 1px solid #f5f5f5;
  opacity: 0;
}
.sanim-dest-row--1 { animation: sanim-fade-in 0.35s ease 0.9s forwards; }
.sanim-dest-row--2 { animation: sanim-fade-in 0.35s ease 1.7s forwards; }
.sanim-dest-row--3 { animation: sanim-fade-in 0.35s ease 2.5s forwards; }
.sanim-dest-row--4 { animation: sanim-fade-in 0.35s ease 3.3s forwards; }
.sanim-dest-row:last-child { border-bottom: none; }
.sanim-dest-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE5D00;
  flex-shrink: 0;
}

@keyframes sanim-fade-in {
  to { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════
   ANIMATION 2 — Dataflow
   ══════════════════════════════════════════════════════════════════ */
.sanim-dataflow-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: calc(360px - 44px);
}
.sanim-df-svg {
  width: 100%;
  height: auto;
  max-height: 300px;
}

/* Nodes: fade+scale in sequence */
.sanim-df-node {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.sanim-df-node--1 { animation: sanim-node-in 0.5s ease 0.3s forwards; }
.sanim-df-node--2 { animation: sanim-node-in 0.5s ease 0.7s forwards; }
.sanim-df-node--3 { animation: sanim-node-in 0.5s ease 1.1s forwards; }
.sanim-df-node--4 { animation: sanim-node-in 0.5s ease 1.5s forwards; }
.sanim-df-node--5 { animation: sanim-node-in 0.5s ease 0.5s forwards; }
.sanim-df-node--6 { animation: sanim-node-in 0.5s ease 1.9s forwards; }

@keyframes sanim-node-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Lines: draw in via dashoffset */
.sanim-df-line { opacity: 0; }
.sanim-df-line--1 { animation: sanim-line-draw-80 0.6s ease 1.2s forwards; }
.sanim-df-line--2 { animation: sanim-line-draw-80 0.6s ease 1.6s forwards; }
.sanim-df-line--3 { animation: sanim-line-draw-60 0.5s ease 2.0s forwards; }
.sanim-df-line--4 { animation: sanim-line-draw-80 0.6s ease 1.4s forwards; }
.sanim-df-line--5 { animation: sanim-line-draw-80 0.6s ease 2.2s forwards; }

@keyframes sanim-line-draw-80 {
  from { opacity: 1; stroke-dashoffset: 80; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sanim-line-draw-60 {
  from { opacity: 1; stroke-dashoffset: 60; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}


/* ══════════════════════════════════════════════════════════════════
   ANIMATION 3 — AI / Mini-Kaio
   The .kaio-demo--wf modifier scales the existing kaio UI down to fit
   ══════════════════════════════════════════════════════════════════ */
.softa-anim--ai {
  min-height: 360px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.softa-anim--ai .kaio-demo {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e5ea;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
  height: 360px;
}
.softa-anim--ai .kaio-demo__viewport {
  height: 360px;
  overflow: hidden;
}
.softa-anim--ai .kaio-demo__camera {
  height: 360px;
}
.softa-anim--ai .kaio-app {
  display: flex;
  flex-direction: column;
  height: 360px;
}
.softa-anim--ai .kaio-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.softa-anim--ai .kaio-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.softa-anim--ai .kaio-chat-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}


/* ══════════════════════════════════════════════════════════════════
   ANIMATION 4 — Compliance
   ══════════════════════════════════════════════════════════════════ */
.sanim-compliance-body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: calc(360px - 44px);
}

/* Framework badges */
.sanim-fw-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sanim-fw-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
}
.sanim-fw-badge--gdpr  { background: rgba(238,93,0,0.12); color: #EE5D00; border: 1px solid rgba(238,93,0,0.3); }
.sanim-fw-badge--aiact { background: rgba(74,144,226,0.12); color: #1a6bbf; border: 1px solid rgba(74,144,226,0.3); }
.sanim-fw-badge--nis2  { background: rgba(16,185,129,0.12); color: #047857; border: 1px solid rgba(16,185,129,0.3); }

.softa-anim--compliance.is-playing .sanim-fw-badge--1 { animation: sanim-badge-in 0.4s ease 0.3s forwards; }
.softa-anim--compliance.is-playing .sanim-fw-badge--2 { animation: sanim-badge-in 0.4s ease 0.7s forwards; }
.softa-anim--compliance.is-playing .sanim-fw-badge--3 { animation: sanim-badge-in 0.4s ease 1.1s forwards; }

@keyframes sanim-badge-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Compliance list */
.sanim-compliance-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.sanim-comp-row {
  opacity: 0;
}
.softa-anim--compliance.is-playing .sanim-comp-row--1 { animation: sanim-fade-in 0.4s ease 1.6s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-row--2 { animation: sanim-fade-in 0.4s ease 2.0s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-row--3 { animation: sanim-fade-in 0.4s ease 2.4s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-row--4 { animation: sanim-fade-in 0.4s ease 2.8s forwards; }

.sanim-comp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
}
.sanim-comp-pct {
  display: inline-block;
  font-size: 10px;
  color: #EE5D00;
  font-weight: 700;
  float: right;
  margin-bottom: 0.3rem;
}
.sanim-comp-bar-wrap {
  background: #e9ecef;
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  clear: both;
}
.sanim-comp-bar {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #EE5D00, #ff8c42);
  width: 0;
}
.softa-anim--compliance.is-playing .sanim-comp-bar--85 { animation: sanim-bar-85 0.9s cubic-bezier(.4,0,.2,1) 2.0s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-bar--60 { animation: sanim-bar-60 0.9s cubic-bezier(.4,0,.2,1) 2.4s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-bar--40 { animation: sanim-bar-40 0.8s cubic-bezier(.4,0,.2,1) 2.8s forwards; }
.softa-anim--compliance.is-playing .sanim-comp-bar--100 { animation: sanim-bar-100 1.0s cubic-bezier(.4,0,.2,1) 3.2s forwards; }

@keyframes sanim-bar-85  { to { width: 85%;  } }
@keyframes sanim-bar-60  { to { width: 60%;  } }
@keyframes sanim-bar-40  { to { width: 40%;  } }
@keyframes sanim-bar-100 { to { width: 100%; } }


/* ══════════════════════════════════════════════════════════════════
   ANIMATION 5 — Reports
   ══════════════════════════════════════════════════════════════════ */
.sanim-reports-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  min-height: calc(360px - 44px);
}
.sanim-report-card {
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  padding: 1.25rem;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  animation: sanim-card-in 0.6s ease 0.2s both;
}
@keyframes sanim-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sanim-report-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sanim-report-logo {
  flex-shrink: 0;
  margin-top: 2px;
}
.sanim-report-type {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #EE5D00;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sanim-report-name {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.sanim-report-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  animation: sanim-fade-in 0.4s ease 0.6s both;
}
.sanim-report-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(16,185,129,0.12);
  color: #047857;
  border: 1px solid rgba(16,185,129,0.25);
}
.sanim-report-date {
  font-size: 10px;
  color: #9ca3af;
}

/* Stats row */
.sanim-report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sanim-rstat {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.6rem 0.5rem;
  text-align: center;
  opacity: 0;
}
.sanim-rstat--1 { animation: sanim-stat-in 0.45s ease 0.9s  forwards; }
.sanim-rstat--2 { animation: sanim-stat-in 0.45s ease 1.2s  forwards; }
.sanim-rstat--3 { animation: sanim-stat-in 0.45s ease 1.5s  forwards; }

@keyframes sanim-stat-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.sanim-rstat__val {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #EE5D00;
  line-height: 1.1;
}
.sanim-rstat__label {
  display: block;
  font-size: 8.5px;
  color: #6b7280;
  line-height: 1.3;
  margin-top: 3px;
}

/* Action buttons */
.sanim-report-actions {
  display: flex;
  gap: 0.5rem;
  animation: sanim-fade-in 0.4s ease 1.8s both;
}
.sanim-report-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: default;
  border: 1.5px solid #e2e5ea;
  background: #fff;
  color: #374151;
}
.sanim-report-btn--primary {
  background: #EE5D00;
  border-color: #EE5D00;
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════════
   Reduced motion — show final static state for all animations
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sanim-file,
  .sanim-import-arrow,
  .sanim-dest-row,
  .sanim-df-node,
  .sanim-df-line,
  .sanim-fw-badge,
  .sanim-comp-row,
  .sanim-rstat,
  .sanim-report-card,
  .sanim-report-meta,
  .sanim-report-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sanim-df-line {
    stroke-dashoffset: 0 !important;
  }
  .sanim-comp-bar--85  { width: 85%; }
  .sanim-comp-bar--60  { width: 60%; }
  .sanim-comp-bar--40  { width: 40%; }
  .sanim-comp-bar--100 { width: 100%; }
}