/* Two experiences connected through the existing SIKIO imago. */
.experience-section {
  --experience-gap: var(--space-14);
  --experience-mark-size: var(--space-12);
  --experience-logo-size: var(--space-09);
  --experience-pulse-size: var(--space-03);
  --experience-flow-step: var(--space-06);
  background: var(--background-default);
}
.experience-section .solutions-header {
  margin-bottom: var(--space-07);
}
.experience-section .solutions-kicker {
  margin: 0 auto var(--space-04);
  color: var(--text-secondary);
  font-size: var(--text-heading-xs-size);
  line-height: var(--text-heading-xs-line);
  letter-spacing: var(--text-heading-xs-tracking);
  font-weight: var(--text-heading-xs-weight);
}
.experience-section .solutions-header h2 {
  margin: 0 0 var(--space-06);
  color: var(--text-default);
  font-size: var(--text-heading-xl-size);
  line-height: var(--text-heading-xl-line);
  letter-spacing: var(--text-heading-xl-tracking);
  font-weight: var(--text-heading-xl-weight);
}
.experience-section .solutions-header > p:last-child {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  letter-spacing: var(--text-body-lg-tracking);
  font-weight: var(--text-body-lg-weight);
}
.experience-section .experience-grid {
  grid-template-columns: minmax(0, 1fr) var(--experience-gap) minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-07);
  align-items: stretch;
}
.experience-section .experience-grid::before { content: none; }
.experience-section .experience-card {
  min-width: 0;
  padding: var(--space-07);
  border-radius: var(--radius-large);
}
.experience-section .experience-card h3 {
  margin: 0 0 var(--space-04);
  color: var(--text-default);
  font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-line);
  letter-spacing: var(--text-heading-md-tracking);
  font-weight: var(--text-heading-md-weight);
}
.experience-section .experience-card p,
.experience-section .experience-list li {
  color: var(--text-secondary);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  letter-spacing: var(--text-body-md-tracking);
  font-weight: var(--text-body-md-weight);
}
.experience-section .experience-card p { margin: 0 0 var(--space-06); }
.experience-section .experience-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-03);
}
.experience-section .experience-brand {
  position: relative;
  inset: auto;
  width: auto;
  display: grid;
  place-items: center;
  transform: none;
  z-index: 1;
  isolation: isolate;
}
.experience-section .experience-brand::before,
.experience-section .experience-brand::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--experience-pulse-size);
  transform: translateY(-50%);
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--action-primary-default) 0, var(--action-primary-default) calc(var(--experience-pulse-size) / 2), transparent calc(var(--experience-pulse-size) / 2)),
    linear-gradient(var(--border-strong), var(--border-strong));
  background-size: var(--experience-flow-step) var(--experience-pulse-size), 100% var(--border-width-default);
  background-position: 0 center, center center;
  background-repeat: repeat-x, no-repeat;
  z-index: 1;
  animation: experience-flow-horizontal 1.6s linear infinite;
}
.experience-section .experience-brand::before {
  top: calc(50% - var(--experience-mark-size) / 2 - var(--space-05));
}
.experience-section .experience-brand::after {
  top: calc(50% + var(--experience-mark-size) / 2 + var(--space-05));
  animation-direction: reverse;
}
.experience-section .experience-mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--experience-mark-size);
  height: var(--experience-mark-size);
  border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--action-primary-foreground);
}
.experience-section .experience-brand-logo {
  width: var(--experience-logo-size);
  height: var(--experience-logo-size);
  object-fit: contain;
}
/* The dots loop by one tile; the second layer keeps each connecting line still. */
@keyframes experience-flow-horizontal {
  from { background-position: 0 0, center center; }
  to { background-position: var(--experience-flow-step) 0, center center; }
}
@keyframes experience-flow-vertical {
  from { background-position: 0 0, center center; }
  to { background-position: 0 var(--experience-flow-step), center center; }
}
@media (max-width: 1100px) {
  .experience-section {
    --experience-gap: var(--space-13);
    --experience-mark-size: var(--space-11);
    --experience-logo-size: var(--space-08);
  }
  .experience-section .experience-card { padding: var(--space-06); }
}
@media (max-width: 760px) {
  .experience-section .experience-grid { grid-template-columns: minmax(0, 1fr); }
  .experience-section .experience-brand { height: var(--experience-gap); }
  .experience-section .experience-brand::before,
  .experience-section .experience-brand::after {
    top: 0;
    width: var(--experience-pulse-size);
    height: 100%;
    transform: translateX(-50%);
    background-size: var(--experience-pulse-size) var(--experience-flow-step), var(--border-width-default) 100%;
    background-repeat: repeat-y, no-repeat;
    animation-name: experience-flow-vertical;
  }
  .experience-section .experience-brand::before {
    left: calc(50% - var(--experience-mark-size) / 2 - var(--space-05));
  }
  .experience-section .experience-brand::after {
    left: calc(50% + var(--experience-mark-size) / 2 + var(--space-05));
  }
}
@media (prefers-reduced-motion: reduce) {
  .experience-section .experience-brand::before,
  .experience-section .experience-brand::after { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .experience-section {
    --background-default: var(--neutral-900);
    --surface-default: var(--neutral-800);
    --text-default: var(--neutral-50);
    --text-secondary: var(--neutral-200);
  }
  .experience-section .experience-card { background: var(--surface-default); }
}