/* ==========================================================================
   Butterfly OS — Hero visual "Butterfly in der agentischen SAP-Toolchain"
   Four layers top → bottom. Butterfly OS is the widest, accented layer.
   Small dots flow down the connectors (decorative, CSS only).
   Uses the site tokens when present (var(--x, fallback)).
   ========================================================================== */

.eco {
  --eco-surface: var(--surface, #FFFFFF);
  --eco-ground: var(--ground, #F3F6F8);
  --eco-line: var(--line, #E0E6EA);
  --eco-text: var(--text, #0F1B24);
  --eco-text-3: var(--text-3, #4C5C67);
  --eco-text-4: var(--text-4, #5B6B76);
  --eco-accent: var(--accent, #2A83B0);
  --eco-accent-strong: var(--accent-strong, #1F6E96);
  --eco-accent-tint: var(--accent-tint, #EEF6FA);
  --eco-ink: var(--ink, #0F1B24);
  --eco-ok-bg: var(--gate-ok-bg, #E8F5EE);
  --eco-ok-line: var(--gate-ok-line, #BFE3CE);
  --eco-ok-text: var(--gate-ok-text, #155C3B);
  --eco-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --eco-display: var(--font-display, "Schibsted Grotesk", "Helvetica Neue", sans-serif);
  --eco-body: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  --eco-inset: 28px;

  margin: 0;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  font-family: var(--eco-body);
  color: var(--eco-text);
  display: flex; flex-direction: column;
}

/* layers ------------------------------------------------------------------- */
.eco__layer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--eco-line);
  background: var(--eco-surface);
  margin-inline: var(--eco-inset);
  position: relative;
  z-index: 1;
}
.eco__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eco__kicker { font-family: var(--eco-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eco-text-4); }
.eco__title { font-family: var(--eco-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }

.eco__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eco__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--eco-ground);
  border: 1px solid var(--eco-line);
  font-size: 11.5px; line-height: 1.2; color: var(--eco-text-3);
  white-space: nowrap;
}

/* layer 1: the business */
.eco__layer--biz { background: var(--eco-ground); }
.eco__layer--biz .eco__chip { background: var(--eco-surface); }

/* layer 2: Butterfly OS — the widest, accented layer */
.eco__layer--bf {
  margin-inline: 0;
  padding: 18px 20px;
  background: var(--eco-accent);
  border-color: var(--eco-accent);
  color: #FFFFFF;
  box-shadow: 0 18px 40px -22px rgba(31, 110, 150, 0.65);
}
.eco__bf-brand { display: flex; align-items: center; gap: 10px; }
.eco__bf-mark { width: 30px; height: auto; flex: none; }
.eco__layer--bf .eco__title { font-size: 19px; font-weight: 800; color: #FFFFFF; }
.eco__layer--bf .eco__kicker { color: #D5ECF7; }
.eco__layer--bf .eco__chip { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #FFFFFF; }
.eco__bf-sub { font-size: 12.5px; line-height: 1.45; color: #E3F1F8; }

/* layer 3: SAP toolchain */
.eco__layer--sap .eco__chip { font-weight: 500; color: var(--eco-text); }

/* layer 4: agentic execution */
.eco__layer--agents { background: var(--eco-ink); border-color: var(--eco-ink); color: #FFFFFF; }
.eco__layer--agents .eco__kicker { color: #8CC3DD; }
.eco__layer--agents .eco__title { color: #FFFFFF; }
.eco__layer--agents .eco__chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #E3EBF0; }
.eco__agent-dot { width: 6px; height: 6px; border-radius: 50%; background: #6FD3A0; }

/* connectors --------------------------------------------------------------- */
.eco__link {
  position: relative;
  height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.eco__link::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-1px);
  background: repeating-linear-gradient(to bottom, #C7D4DB 0 4px, transparent 4px 8px);
}
.eco__pulse {
  position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--eco-accent);
  box-shadow: 0 0 0 4px rgba(42, 131, 176, 0.18);
  opacity: 0;
}
.eco__gate {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--eco-ok-bg); border: 1px solid var(--eco-ok-line); color: var(--eco-ok-text);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.eco__link--gate { height: 44px; }

.eco__foot {
  margin-top: 14px;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--eco-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--eco-text-4);
}
.eco__foot strong { color: var(--eco-text); font-weight: 500; }

/* motion: one calm loop, dots travel down the chain in sequence ------------- */
@media (prefers-reduced-motion: no-preference) {
  .eco__pulse { animation: eco-flow 4.8s linear infinite; }
  .eco__link:nth-of-type(2) .eco__pulse { animation-delay: 1.2s; }
  .eco__link:nth-of-type(3) .eco__pulse { animation-delay: 2.4s; }
  .eco__link[data-step="2"] .eco__pulse { animation-delay: 1.2s; }
  .eco__link[data-step="3"] .eco__pulse { animation-delay: 2.4s; }
  @keyframes eco-flow {
    0%   { transform: translateY(0);    opacity: 0; }
    4%   { opacity: 1; }
    20%  { transform: translateY(30px); opacity: 1; }
    24%  { transform: translateY(34px); opacity: 0; }
    100% { transform: translateY(34px); opacity: 0; }
  }
  .eco__link--gate .eco__pulse { animation-name: eco-flow-gate; }
  @keyframes eco-flow-gate {
    0%   { transform: translateY(0);    opacity: 0; }
    4%   { opacity: 1; }
    20%  { transform: translateY(40px); opacity: 1; }
    24%  { transform: translateY(44px); opacity: 0; }
    100% { transform: translateY(44px); opacity: 0; }
  }
}

@media (max-width: 520px) {
  .eco { --eco-inset: 12px; }
  .eco__chip { white-space: normal; }
}