/* ==========================================================================
   LP03 · UNIT 3 · KEEP USING THE SYSTEM YOU KNOW — system room
   --------------------------------------------------------------------------
   Split editorial header (title · lead) above a navy "system room" panel:
   a merchant photo + a conveyor map where the three sources the copy names
   (ERP · accounting platform · e-commerce) feed the Fatorly hub, which
   hands one clean invoice to the e-invoicing process; a ghost "duplicate
   entry" card is crossed out beside it.
   The map is a box with a fixed aspect ratio: HTML nodes are placed in %
   and an SVG with the SAME aspect draws the belts, so coordinates match
   without distortion. Two maps: horizontal (≥ 48rem) and vertical (mobile).
   ksys.js draws the belts on view and runs invoice tokens along them.
   ========================================================================== */

.ksys {
  background-color: var(--c-white);
}

.ksys__decor {
  background:
    radial-gradient(ellipse 45% 40% at 0% 0%, rgba(0, 169, 182, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 35% at 100% 100%, rgba(1, 62, 106, 0.07), transparent 70%);
}

[dir="rtl"] .ksys__decor {
  scale: -1 1;
}

/* ---------------------------------------------------------------------------
   Split header
   --------------------------------------------------------------------------- */
.ksys__head {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.ksys__head h2 {
  max-inline-size: 18ch;
}

.ksys__head .t-lead {
  max-inline-size: 36rem;
}

@media (min-width: 48rem) {
  .ksys__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
    justify-items: start;
    text-align: start;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .ksys__lead {
    padding-inline-start: var(--space-lg);
    border-inline-start: 2px solid var(--c-teal);
  }
}

/* ---------------------------------------------------------------------------
   Navy panel: photo + map
   --------------------------------------------------------------------------- */
.ksys__panel {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 55% 60% at 70% 50%, rgba(0, 169, 182, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 0%, rgba(1, 62, 106, 0.9), transparent 70%),
    var(--c-navy);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .ksys__panel {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* Merchant photo */
.ksys__photo {
  position: relative;
  margin: 0;
}

.ksys__photo img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--r-card);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .ksys__photo img {
    aspect-ratio: 21 / 9;
    object-position: center 42%;
  }
}

@media (min-width: 64rem) {
  .ksys__photo img {
    aspect-ratio: 4 / 5;
  }
}

/* "His systems" badge: three mini source icons resting on the photo */
.ksys__badge {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

[dir="rtl"] .ksys__badge {
  translate: 50% 0;
}

.ksys__badge span {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background-color: var(--c-white);
  color: var(--c-deep-teal);
}

.ksys__badge svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Map: aspect box + SVG belts + HTML nodes
   --------------------------------------------------------------------------- */
.ksys__map {
  position: relative;
  inline-size: 100%;
  direction: ltr;                  /* the flow reads source → destination */
}

.ksys__map--h {
  display: none;
  aspect-ratio: 1000 / 600;
}

.ksys__map--v {
  aspect-ratio: 600 / 840;
  max-inline-size: 26rem;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .ksys__map--h { display: block; }
  .ksys__map--v { display: none; }
}

.ksys__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* Belt = soft wide track · flow = moving dashes on top (the conveyor) */
.ksys__belt,
.ksys__flow {
  fill: none;
  stroke-linecap: round;
}

.ksys__belt {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 10;
}

.ksys__flow {
  stroke: var(--c-teal);
  stroke-width: 2;
  stroke-dasharray: 2 14;
  animation: ksys-flow 1.2s linear infinite;
}

@keyframes ksys-flow {
  to { stroke-dashoffset: -16; }
}

@media (prefers-reduced-motion: reduce) {
  .ksys__flow { animation: none; }
}

/* Invoice tokens (created by ksys.js) */
.ksys__token rect {
  fill: var(--c-white);
}

.ksys__token path {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---- Nodes ---------------------------------------------------------------- */
.ksys__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.75rem;
  border-radius: 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
}

.ksys__node svg {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

/* Source docks (glass) */
.ksys__dock {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--c-white);
}

.ksys__dock svg {
  color: var(--c-teal);
}

/* Fatorly hub */
.ksys__hub {
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background-color: var(--c-white);
  box-shadow: 0 0 0 8px rgba(0, 169, 182, 0.18), 0 0 40px rgba(0, 169, 182, 0.35);
}

.ksys__hub img {
  inline-size: 52%;
  block-size: auto;
}

.ksys__hub::after {             /* slow outward pulse */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 169, 182, 0.55);
  animation: ksys-pulse 2.6s var(--ease-out) infinite;
}

@keyframes ksys-pulse {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ksys__hub::after { animation: none; opacity: 0; }
}

/* Destination: the e-invoicing process */
.ksys__dest {
  background-color: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--shadow-lg);
}

.ksys__dest svg {
  color: var(--c-teal);
}

/* Ghost duplicate entry — crossed out */
.ksys__ghost {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.55);
}

.ksys__ghost-label {
  position: relative;
}

.ksys__strike {
  position: absolute;
  inset-inline: -0.15rem;
  inset-block-start: 50%;
  block-size: 2px;
  border-radius: 2px;
  background-color: #F97066;
  transform-origin: 0% 50%;
}

/* ---- Horizontal map positions (viewBox 0 0 1000 600) ------------------------ */
.ksys__map--h .ksys__dock { inset-inline-start: 0; inline-size: 29%; block-size: 24%; }
.ksys__map--h .ksys__dock:nth-of-type(1) { inset-block-start: 6%; }
.ksys__map--h .ksys__dock:nth-of-type(2) { inset-block-start: 38%; }
.ksys__map--h .ksys__dock:nth-of-type(3) { inset-block-start: 70%; }
.ksys__map--h .ksys__hub  { inset-inline-start: 49%; inset-block-start: 38.33%; inline-size: 14%; block-size: 23.33%; }
.ksys__map--h .ksys__dest { inset-inline-start: 76%; inset-block-start: 38%; inline-size: 24%; block-size: 24%; }
.ksys__map--h .ksys__ghost { inset-inline-start: 76%; inset-block-start: 70%; inline-size: 24%; block-size: 22%; }

/* ---- Vertical map positions (viewBox 0 0 600 840) --------------------------- */
.ksys__map--v .ksys__node {
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding-inline: 0.4rem;
  text-align: center;
  font-size: var(--fs-caption);
}

.ksys__map--v .ksys__dock { inset-block-start: 0; inline-size: 31%; block-size: 17.14%; }
.ksys__map--v .ksys__dock:nth-of-type(1) { inset-inline-start: 0; }
.ksys__map--v .ksys__dock:nth-of-type(2) { inset-inline-start: 34.5%; }
.ksys__map--v .ksys__dock:nth-of-type(3) { inset-inline-start: 69%; }
.ksys__map--v .ksys__hub  { inset-inline-start: 38%; inset-block-start: 39.29%; inline-size: 24%; block-size: 17.14%; padding: 0; }
.ksys__map--v .ksys__dest,
.ksys__map--v .ksys__ghost { flex-direction: row; gap: 0.5rem; inset-inline-start: 20%; inline-size: 60%; }
.ksys__map--v .ksys__dest  { inset-block-start: 70.24%; block-size: 12.86%; }
.ksys__map--v .ksys__ghost { inset-block-start: 85.71%; block-size: 11.79%; }

/* Tablet: denser labels in the horizontal map */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .ksys__map--h .ksys__node {
    gap: 0.45rem;
    padding-inline: 0.55rem;
    font-size: var(--fs-caption);
  }

  .ksys__map--h .ksys__node svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
}

/* ---------------------------------------------------------------------------
   Section CTA (→ hero form)
   --------------------------------------------------------------------------- */
.ksys__lead {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
}

@media (min-width: 48rem) {
  .ksys__lead {
    justify-items: start;
  }

  .ksys__cta {
    justify-content: flex-start;
  }
}