/* ============================================================
   BOSAI — Five-step animated visuals
   Injected into .step-visual[data-viz] by stepviz.js
   ============================================================ */

.step-visual .viz {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
.step-visual svg.viz { display: block; }

/* ---------------------------------------------------------
   1. MIND MAP  (Blueprint)
   --------------------------------------------------------- */
.viz-mm .mm-link {
  fill: none;
  stroke: rgba(0, 198, 240, 0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.step-visual.js .viz-mm .mm-node { opacity: 0; }
.step-visual.run .viz-mm .mm-link {
  animation: mmDraw 0.55s ease forwards;
  animation-delay: var(--ld, 0s);
}
.step-visual.run .viz-mm .mm-node {
  animation: mmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--nd, 0s);
}
.viz-mm .mm-node rect,
.viz-mm .mm-node .mm-chip {
  transform-box: fill-box;
  transform-origin: center;
}
.viz-mm .mm-label {
  font-family: var(--font-display);
  font-weight: 600;
  fill: var(--white);
}
.viz-mm .mm-center rect { fill: rgba(0, 146, 211, 0.22); stroke: var(--cyan); stroke-width: 1.5; }
.viz-mm .mm-branch rect { fill: var(--navy-800); stroke: var(--border); stroke-width: 1.2; }
.viz-mm .mm-dot { fill: var(--cyan); }
@keyframes mmDraw { to { stroke-dashoffset: 0; } }
@keyframes mmPop {
  0% { opacity: 0; transform: scale(0.5) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------------------------------------------------------
   2. FILING  (Organize)
   --------------------------------------------------------- */
.viz-file { padding: 0; }
.viz-file .ff-folders {
  position: absolute;
  left: 8%; right: 8%; bottom: 9%;
  display: flex; justify-content: space-between; gap: 5%;
}
.viz-file .ff-folder {
  position: relative;
  flex: 1;
  height: 64px;
  border-radius: 4px 8px 8px 8px;
  background: linear-gradient(180deg, rgba(0,146,211,0.32), rgba(0,146,211,0.16));
  border: 1px solid rgba(0,198,240,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.viz-file .ff-folder::before {
  content: '';
  position: absolute;
  top: -9px; left: 0;
  width: 46%; height: 11px;
  border-radius: 5px 6px 0 0;
  background: rgba(0,198,240,0.42);
}
.viz-file .ff-folder span {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.viz-file .ff-doc {
  position: absolute;
  bottom: 19%;
  left: var(--left);
  width: 58px; height: 42px;
  margin-left: -29px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6);
  padding: 7px 8px;
  opacity: 0;
}
.viz-file .ff-doc i {
  display: block;
  height: 3px; border-radius: 2px;
  background: #c7d2dd;
  margin-bottom: 4px;
}
.viz-file .ff-doc i.h { width: 70%; background: var(--cyan); }
.viz-file .ff-doc i.s { width: 50%; }
.step-visual.in-view .viz-file .ff-doc {
  animation: fileDrop 4.2s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes fileDrop {
  0%   { transform: translateY(-230px) rotate(-7deg); opacity: 0; }
  8%   { opacity: 1; }
  34%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  46%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  60%  { transform: translateY(34px) scale(0.82); opacity: 0; }
  100% { transform: translateY(34px) scale(0.82); opacity: 0; }
}

/* ---------------------------------------------------------
   3. SPREADSHEET  (Systemize) — Google Sheets style
   --------------------------------------------------------- */
.viz-sheet {
  padding: 20px;
  display: flex;
}
.viz-sheet .gs {
  flex: 1;
  align-self: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7);
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  color: #202124;
}
.viz-sheet .gs-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  background: #f8f9fa;
  border-bottom: 1px solid #e3e6ea;
  font-size: 0.7rem;
}
.viz-sheet .gs-ic {
  width: 14px; height: 18px; border-radius: 2px;
  background: #188038;
  position: relative; flex-shrink: 0;
}
.viz-sheet .gs-ic::after {
  content: ''; position: absolute; inset: 4px 3px;
  background: repeating-linear-gradient(#fff 0 1px, transparent 1px 3px);
  opacity: 0.85;
}
.viz-sheet .gs-title { font-weight: 700; color: #3c4043; }
.viz-sheet .gs-share {
  margin-left: auto;
  font-size: 0.58rem; font-weight: 700;
  color: #188038;
  border: 1px solid #b7dfc1;
  background: #e6f4ea;
  border-radius: 20px;
  padding: 2px 8px;
}
.viz-sheet .gs-grid { display: grid; grid-template-columns: 22px 1.5fr 1fr 0.9fr 0.95fr; }
.viz-sheet .gs-grid > div {
  border-right: 1px solid #e8eaed;
  border-bottom: 1px solid #e8eaed;
  padding: 5px 8px;
  font-size: 0.64rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.viz-sheet .gs-colhead > div,
.viz-sheet .gs-rn {
  background: #f8f9fa;
  color: #80868b;
  font-weight: 600;
  text-align: center;
  font-size: 0.58rem;
  padding: 3px 0;
}
.viz-sheet .gs-head > div { background: #f1f3f4; font-weight: 700; color: #3c4043; }
.viz-sheet .gs-head .gs-rn { font-weight: 600; }
.viz-sheet .gs-live  { color: #188038; font-weight: 700; }
.viz-sheet .gs-draft { color: #c0820a; font-weight: 700; }
.viz-sheet .gs-dotc { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.viz-sheet .gs-live .gs-dotc  { background: #188038; }
.viz-sheet .gs-draft .gs-dotc { background: #f0a90c; }
.step-visual.js .viz-sheet .gs-data { opacity: 0; }
.step-visual.run .viz-sheet .gs-data {
  animation: gsRow 0.4s ease forwards;
  animation-delay: var(--rd, 0s);
}
.viz-sheet .gs-data > div { position: relative; }
/* moving selection caret */
.viz-sheet .gs-sel {
  position: absolute; inset: -1px;
  border: 1.6px solid #1a73e8;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(26,115,232,0.18);
  opacity: 0;
}
.step-visual.run .viz-sheet .gs-data.cur .gs-sel { animation: gsSel 0.5s ease forwards; animation-delay: var(--rd, 0s); }
@keyframes gsRow {
  0% { opacity: 0; transform: translateX(-7px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes gsSel { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }

/* ---------------------------------------------------------
   4. QUADRANT + n8n  (Automate / Delegate)
   --------------------------------------------------------- */
.viz-quad .q-cell { stroke: var(--border); stroke-width: 1; }
.viz-quad .q-axis { stroke: rgba(0,198,240,0.35); stroke-width: 1.2; }
.viz-quad .q-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.viz-quad .q-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 8px;
  fill: var(--muted);
  letter-spacing: 0.04em;
}
.step-visual.js .viz-quad .q-chip { opacity: 0; }
.step-visual.run .viz-quad .q-chip {
  animation: qChip 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  animation-delay: var(--qd, 0s);
}
.viz-quad .q-chip rect { fill: var(--navy-800); stroke: rgba(0,198,240,0.5); stroke-width: 1; }
.viz-quad .q-chip text { font-family: var(--font-display); font-weight: 600; font-size: 8.5px; fill: var(--white); }
@keyframes qChip {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.6); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.viz-quad .q-chip { transform-box: fill-box; transform-origin: center; }
/* n8n mini-workflow */
.viz-quad .n8-node rect { fill: #11203f; stroke: var(--cyan); stroke-width: 1.3; }
.viz-quad .n8-node .n8-bar { fill: var(--cyan); }
.viz-quad .n8-node .n8-io { fill: var(--blue-light); }
.viz-quad .n8-cable {
  fill: none;
  stroke: rgba(0,198,240,0.7);
  stroke-width: 1.6;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.step-visual.js .viz-quad .n8-node { opacity: 0; }
.step-visual.run .viz-quad .n8-node {
  animation: mmPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--nnd, 0s);
}
.viz-quad .n8-node { transform-box: fill-box; transform-origin: center; }
.step-visual.run .viz-quad .n8-cable {
  animation: mmDraw 0.5s ease forwards;
  animation-delay: var(--ncd, 0s);
}
.step-visual.in-view .viz-quad .n8-pulse {
  animation: n8pulse 1.6s ease-in-out infinite;
  animation-delay: 1.8s;
}
@keyframes n8pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---------------------------------------------------------
   5. GEARS  (Integrate)
   --------------------------------------------------------- */
.viz-gears .gear path { fill: var(--navy-800); stroke: var(--cyan); stroke-width: 1.6; }
.viz-gears .gear.lead path { stroke: var(--blue-light); }
.viz-gears .gear circle.hub { fill: rgba(0,198,240,0.18); stroke: rgba(0,198,240,0.5); stroke-width: 1.2; }
.viz-gears .g-pos { transform-box: fill-box; }
.step-visual.js .viz-gears .g-enter { opacity: 0; }
.viz-gears .g-enter { transform-box: fill-box; transform-origin: center; }
.step-visual.run .viz-gears .g-enter {
  animation: gEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--ged, 0s);
}
@keyframes gEnter {
  0%   { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0.7); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.viz-gears .g-spin { transform-box: fill-box; transform-origin: center; animation-play-state: paused; }
.step-visual.in-view .viz-gears .g-spin {
  animation: gSpin var(--sp, 9s) linear infinite;
  animation-play-state: running;
}
.viz-gears .g-spin.ccw { animation-direction: reverse; }
@keyframes gSpin { to { transform: rotate(360deg); } }
.viz-gears .g-core {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.14em;
  fill: var(--white);
  opacity: 0;
}
.step-visual.run .viz-gears .g-core { animation: gCore 0.6s ease forwards; animation-delay: 1.1s; }
@keyframes gCore { from { opacity: 0; } to { opacity: 0.92; } }
.viz-gears .g-glow { opacity: 0; }
.step-visual.run .viz-gears .g-glow { animation: gGlow 0.8s ease forwards; animation-delay: 0.9s; }
@keyframes gGlow { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------
   Reduced motion — show built state, no movement
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .step-visual .viz * { animation: none !important; }
  .step-visual .viz .mm-node,
  .step-visual .viz .gs-data,
  .step-visual .viz .q-chip,
  .step-visual .viz .n8-node,
  .step-visual .viz .g-enter,
  .step-visual .viz .g-core,
  .step-visual .viz .g-glow { opacity: 1 !important; transform: none !important; }
  .step-visual .viz .mm-link,
  .step-visual .viz .n8-cable { stroke-dashoffset: 0 !important; }
}