/* ============================================================
   Benova Solutions — Technology Ecosystem (scroll-driven section)
   Isolated feature stylesheet. Does not modify styles.css.
   Stage artwork: assets/benova-ecosystem-base.png (1672 × 941, used directly — untouched, no mask, no synthetic gradient)
   Ultrawide stage artwork: assets/benova-ecosystem-ultrawide.png (1915 × 821, swapped in via <picture>/<source> at min-width:1800px + min-aspect-ratio:11/5)
   Superwide stage artwork: assets/benova-ecosystem-superwide.png (2079 × 756, swapped in via <picture>/<source> at min-width:3200px + min-aspect-ratio:51/20)
   Badge assets: assets/ecosystem/*-badge.png (final, provided — not redrawn)
   ============================================================ */

.ecosystem {
  --eco-bg: #0A0F1B;
  --eco-bg-soft: #0D1424;
  --eco-line: rgba(255, 255, 255, 0.10);
  --eco-ink: #F4F6FA;
  --eco-ink-soft: rgba(244, 246, 250, 0.74);
  --eco-muted: rgba(244, 246, 250, 0.52);
  --eco-glow: #4FA3FF;
  --eco-glow-bright: #EAF3FF;

  position: relative;
  background: var(--eco-bg);
  color: var(--eco-ink);
}

/* ---------- Section header (reuses .eyebrow / .section-title / .section-intro, dark-bg override) ---------- */
.ecosystem .wrap { position: relative; z-index: 1; }
.ecosystem__header { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(28px, 3.5vw, 44px); }
.ecosystem .eyebrow { color: var(--eco-muted); }
.ecosystem .eyebrow::before { background: var(--eco-line); }
.ecosystem .section-title { color: var(--eco-ink); }
.ecosystem .section-intro { color: var(--eco-ink-soft); }

/* ============================================================
   Pin / scroll track
   ============================================================ */
.eco-pinwrap {
  position: relative;
  display: grid;
}

.eco-sticky,
.eco-triggers {
  grid-area: 1 / 1;
}

.eco-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.eco-sticky__inner { width: 100%; height: 100%; pointer-events: auto; }

.eco-triggers { z-index: 1; }
.eco-trigger { height: 32vh; }
.eco-trigger[data-step="0"] { height: 29vh; }
.eco-trigger[data-step="9"] { height: 62vh; }
.eco-trigger__card { display: none; }

/* ============================================================
   Stage layout (desktop) — the wide artwork IS the stage.
   Sized to fit within the sticky viewport on whichever axis is
   tighter (width or height) so the full 16:9 frame is always
   visible, uncropped, undistorted, at native pixels' proportion.
   No mask, no synthetic gradient — the image supplies its own
   atmosphere; the panel lives inside the image's own negative space.
   ============================================================ */
.eco-sticky__inner {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: clamp(12px, 1.5vw, 24px);
}

.eco-visual {
  position: relative;
  flex-shrink: 0;
  width: min(100%, calc((100svh - var(--nav-h)) * 1.7768));
  width: min(100%, calc((100vh - var(--nav-h)) * 1.7768));
  aspect-ratio: 1672 / 941;
}
.eco-visual__frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.eco-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
/* Overlay zone: locks the SVG viewBox="0 0 1672 941" + badge layer to the
   original artwork's own proportions. On normal desktop this fills the
   frame exactly (identical to before). On ultrawide, the frame widens to
   the wider asset's own ratio while this zone stays pinned to 1672:941 at
   the frame's left edge, so existing badge/connector coordinates stay
   pixel-aligned to the chair instead of stretching across the added canvas. */
.eco-overlay-zone {
  position: absolute;
  inset: 0;
}
.eco-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ============================================================
   Callout badges — final PNG assets (Layer 3). Positioning only;
   the icon/ring/glow art direction lives in the asset itself.
   ============================================================ */
.eco-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.eco-badge {
  position: absolute;
  width: clamp(92px, 7.2vw, 128px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.eco-badge__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.45s cubic-bezier(.16,1,.3,1), transform 0.45s cubic-bezier(.16,1,.3,1);
}

/* ---------- Connectors (Layer 2): a short stub off the badge's inward-facing
     edge, then a restrained curve to a meaningful target — never a hub. ---------- */
.eco-connector { opacity: 0; transition: opacity 0.5s ease; }
.eco-connector__origin {
  fill: var(--eco-glow-bright);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.eco-connector__glow {
  fill: none;
  stroke: var(--eco-glow);
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
  opacity: 0.08;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s cubic-bezier(.16,1,.3,1);
}
.eco-connector__line {
  fill: none;
  stroke: var(--eco-glow);
  stroke-width: 0.9px;
  vector-effect: non-scaling-stroke;
  opacity: 0.32;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s cubic-bezier(.16,1,.3,1) 0.04s;
}
.eco-connector__end {
  fill: var(--eco-glow-bright);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.35s ease 0.38s, transform 0.35s ease 0.38s;
}

/* ---------- Security floor-ring accent — a subtle emphasis of the rings
     already baked into the artwork, not a new artificial ring ---------- */
.eco-ring {
  fill: none;
  stroke: var(--eco-glow);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}

/* ---------- Active step → active badge/connector pairing ----------
   Steps 1–8: exactly one callout at full prominence, all others hidden. */
.ecosystem[data-active-step="1"] .eco-badge[data-node="scanner"] .eco-badge__img,
.ecosystem[data-active-step="2"] .eco-badge[data-node="imaging"] .eco-badge__img,
.ecosystem[data-active-step="3"] .eco-badge[data-node="workstations"] .eco-badge__img,
.ecosystem[data-active-step="4"] .eco-badge[data-node="vendor"] .eco-badge__img,
.ecosystem[data-active-step="5"] .eco-badge[data-node="network"] .eco-badge__img,
.ecosystem[data-active-step="6"] .eco-badge[data-node="cloud"] .eco-badge__img,
.ecosystem[data-active-step="7"] .eco-badge[data-node="backup"] .eco-badge__img,
.ecosystem[data-active-step="8"] .eco-badge[data-node="security"] .eco-badge__img {
  opacity: 1;
  transform: scale(1);
}
.ecosystem[data-active-step="1"] .eco-connector[data-node="scanner"],
.ecosystem[data-active-step="2"] .eco-connector[data-node="imaging"],
.ecosystem[data-active-step="3"] .eco-connector[data-node="workstations"],
.ecosystem[data-active-step="4"] .eco-connector[data-node="vendor"],
.ecosystem[data-active-step="5"] .eco-connector[data-node="network"],
.ecosystem[data-active-step="6"] .eco-connector[data-node="cloud"],
.ecosystem[data-active-step="7"] .eco-connector[data-node="backup"],
.ecosystem[data-active-step="8"] .eco-connector[data-node="security"] {
  opacity: 1;
}
.ecosystem[data-active-step="1"] .eco-connector[data-node="scanner"] .eco-connector__glow,
.ecosystem[data-active-step="2"] .eco-connector[data-node="imaging"] .eco-connector__glow,
.ecosystem[data-active-step="3"] .eco-connector[data-node="workstations"] .eco-connector__glow,
.ecosystem[data-active-step="4"] .eco-connector[data-node="vendor"] .eco-connector__glow,
.ecosystem[data-active-step="5"] .eco-connector[data-node="network"] .eco-connector__glow,
.ecosystem[data-active-step="6"] .eco-connector[data-node="cloud"] .eco-connector__glow,
.ecosystem[data-active-step="7"] .eco-connector[data-node="backup"] .eco-connector__glow,
.ecosystem[data-active-step="8"] .eco-connector[data-node="security"] .eco-connector__glow,
.ecosystem[data-active-step="1"] .eco-connector[data-node="scanner"] .eco-connector__line,
.ecosystem[data-active-step="2"] .eco-connector[data-node="imaging"] .eco-connector__line,
.ecosystem[data-active-step="3"] .eco-connector[data-node="workstations"] .eco-connector__line,
.ecosystem[data-active-step="4"] .eco-connector[data-node="vendor"] .eco-connector__line,
.ecosystem[data-active-step="5"] .eco-connector[data-node="network"] .eco-connector__line,
.ecosystem[data-active-step="6"] .eco-connector[data-node="cloud"] .eco-connector__line,
.ecosystem[data-active-step="7"] .eco-connector[data-node="backup"] .eco-connector__line,
.ecosystem[data-active-step="8"] .eco-connector[data-node="security"] .eco-connector__line {
  stroke-dashoffset: 0;
}
.ecosystem[data-active-step="1"] .eco-connector[data-node="scanner"] .eco-connector__origin,
.ecosystem[data-active-step="2"] .eco-connector[data-node="imaging"] .eco-connector__origin,
.ecosystem[data-active-step="3"] .eco-connector[data-node="workstations"] .eco-connector__origin,
.ecosystem[data-active-step="4"] .eco-connector[data-node="vendor"] .eco-connector__origin,
.ecosystem[data-active-step="5"] .eco-connector[data-node="network"] .eco-connector__origin,
.ecosystem[data-active-step="6"] .eco-connector[data-node="cloud"] .eco-connector__origin,
.ecosystem[data-active-step="7"] .eco-connector[data-node="backup"] .eco-connector__origin,
.ecosystem[data-active-step="8"] .eco-connector[data-node="security"] .eco-connector__origin,
.ecosystem[data-active-step="1"] .eco-connector[data-node="scanner"] .eco-connector__end,
.ecosystem[data-active-step="2"] .eco-connector[data-node="imaging"] .eco-connector__end,
.ecosystem[data-active-step="3"] .eco-connector[data-node="workstations"] .eco-connector__end,
.ecosystem[data-active-step="4"] .eco-connector[data-node="vendor"] .eco-connector__end,
.ecosystem[data-active-step="5"] .eco-connector[data-node="network"] .eco-connector__end,
.ecosystem[data-active-step="6"] .eco-connector[data-node="cloud"] .eco-connector__end,
.ecosystem[data-active-step="7"] .eco-connector[data-node="backup"] .eco-connector__end,
.ecosystem[data-active-step="8"] .eco-connector[data-node="security"] .eco-connector__end {
  opacity: 0.62;
  transform: scale(1);
}
.ecosystem[data-active-step="8"] .eco-ring {
  opacity: 0.3;
  stroke-dashoffset: 0;
}

/* ---------- Outro (step 9): calm — no badges, image at rest, panel + CTA carry the close ---------- */

/* ============================================================
   Content panel (desktop) — lives inside the frame's own
   right-side negative space. No card, no border, no backdrop:
   plain typography over the artwork's own dark sky.
   ============================================================ */
.eco-panel {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: 22%;
  min-width: 220px;
  z-index: 3;
}
.eco-panel__inner {
  display: grid;
}
.eco-panel__step {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1), visibility 0s linear 0.4s;
}
.ecosystem[data-active-step="0"] .eco-panel__step[data-step="0"],
.ecosystem[data-active-step="1"] .eco-panel__step[data-step="1"],
.ecosystem[data-active-step="2"] .eco-panel__step[data-step="2"],
.ecosystem[data-active-step="3"] .eco-panel__step[data-step="3"],
.ecosystem[data-active-step="4"] .eco-panel__step[data-step="4"],
.ecosystem[data-active-step="5"] .eco-panel__step[data-step="5"],
.ecosystem[data-active-step="6"] .eco-panel__step[data-step="6"],
.ecosystem[data-active-step="7"] .eco-panel__step[data-step="7"],
.ecosystem[data-active-step="8"] .eco-panel__step[data-step="8"],
.ecosystem[data-active-step="9"] .eco-panel__step[data-step="9"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s cubic-bezier(.16,1,.3,1) 0.06s, transform 0.4s cubic-bezier(.16,1,.3,1) 0.06s, visibility 0s linear 0s;
}

.eco-panel__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eco-muted);
  margin-bottom: 12px;
}
.eco-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2.05rem);
  color: var(--eco-ink);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.eco-panel__body {
  color: var(--eco-ink-soft);
  font-size: 1.03rem;
  line-height: 1.62;
  margin-bottom: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.eco-panel__insight {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--eco-line);
  color: var(--eco-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
}
.eco-panel__cta { margin-top: 20px; }

/* ============================================================
   Ultrawide — swaps to the wider background asset (via <picture>
   in the markup) and re-fits the frame to its own aspect ratio.
   The overlay zone stays locked to the original 1672×941 region so
   every existing badge/connector coordinate stays pixel-aligned to
   the chair; only the frame (and therefore the panel's available
   space) actually grows. No change to normal desktop or mobile.
   ============================================================ */
@media (min-width: 1800px) and (min-aspect-ratio: 11/5) {
  .eco-visual {
    width: min(100%, calc((100svh - var(--nav-h)) * 2.3325));
    width: min(100%, calc((100vh - var(--nav-h)) * 2.3325));
    aspect-ratio: 1915 / 821;
  }
  .eco-overlay-zone {
    inset: auto;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1672 / 941;
  }
  .eco-panel { max-width: 440px; }
}

/* ============================================================
   Superwide — same architecture as the ultrawide tier above, one
   tier further out, for screens too wide even for the ultrawide
   asset (e.g. 32:9). Placed after the ultrawide block so it wins
   the cascade at these sizes; the <picture> source order in the
   markup independently picks the correct image regardless.
   ============================================================ */
@media (min-width: 3200px) and (min-aspect-ratio: 51/20) {
  .eco-visual {
    width: min(100%, calc((100svh - var(--nav-h)) * 2.75));
    width: min(100%, calc((100vh - var(--nav-h)) * 2.75));
    aspect-ratio: 2079 / 756;
  }
  .eco-overlay-zone {
    inset: auto;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1672 / 941;
  }
  .eco-panel { max-width: 440px; }
}

/* ============================================================
   Mobile / tablet — sequential, non-pinned layout (≤980px)
   ============================================================ */
@media (max-width: 980px) {
  .eco-pinwrap { display: block; }
  .eco-sticky {
    position: static;
    height: auto;
    display: block;
    pointer-events: auto;
    overflow: visible;
    padding: 8px 0 clamp(28px, 6vw, 48px);
  }
  .eco-sticky__inner { display: block; padding-inline: 0; }
  .eco-panel { display: none; }

  .eco-visual { width: 100%; max-width: 460px; aspect-ratio: 1672 / 941; margin-inline: auto; }
  .eco-visual__frame { width: 100%; height: 100%; }

  .eco-triggers { display: block; }
  .eco-trigger,
  .eco-trigger[data-step="0"],
  .eco-trigger[data-step="9"] { height: auto; }
  .eco-trigger__card {
    display: block;
    max-width: 560px;
    margin-inline: auto;
    padding: clamp(28px, 7vw, 40px) var(--gutter) 0;
    opacity: 0.35;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .ecosystem[data-active-step="0"] .eco-trigger[data-step="0"] .eco-trigger__card,
  .ecosystem[data-active-step="1"] .eco-trigger[data-step="1"] .eco-trigger__card,
  .ecosystem[data-active-step="2"] .eco-trigger[data-step="2"] .eco-trigger__card,
  .ecosystem[data-active-step="3"] .eco-trigger[data-step="3"] .eco-trigger__card,
  .ecosystem[data-active-step="4"] .eco-trigger[data-step="4"] .eco-trigger__card,
  .ecosystem[data-active-step="5"] .eco-trigger[data-step="5"] .eco-trigger__card,
  .ecosystem[data-active-step="6"] .eco-trigger[data-step="6"] .eco-trigger__card,
  .ecosystem[data-active-step="7"] .eco-trigger[data-step="7"] .eco-trigger__card,
  .ecosystem[data-active-step="8"] .eco-trigger[data-step="8"] .eco-trigger__card,
  .ecosystem[data-active-step="9"] .eco-trigger[data-step="9"] .eco-trigger__card {
    opacity: 1;
    transform: none;
  }

  .eco-trigger__index {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eco-muted);
    margin-bottom: 10px;
  }
  .eco-trigger__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--eco-ink);
    margin-bottom: 0.4rem;
  }
  .eco-trigger__body { color: var(--eco-ink-soft); font-size: 0.98rem; line-height: 1.6; }
  .eco-trigger__insight {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--eco-line);
    color: var(--eco-ink);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.92rem;
  }
  .eco-trigger__cta { margin-top: 18px; }
}

@media (max-width: 520px) {
  .eco-visual { max-width: 340px; }
  .eco-trigger__title { font-size: 1.24rem; }
}

/* ============================================================
   Reduced motion — same simplified stacked layout as mobile,
   regardless of viewport width; no pin, no scale/dash motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .eco-pinwrap { display: block; }
  .eco-sticky { position: static; height: auto; display: block; pointer-events: auto; overflow: visible; padding: 8px 0 48px; }
  .eco-sticky__inner { display: block; padding-inline: 0; }
  .eco-panel { display: none; }
  .eco-visual { width: 100%; max-width: 460px; aspect-ratio: 1672 / 941; margin-inline: auto; }
  .eco-visual__frame { width: 100%; height: 100%; }
  .eco-trigger,
  .eco-trigger[data-step="0"],
  .eco-trigger[data-step="9"] { height: auto; }
  .eco-trigger__card {
    display: block;
    max-width: 560px;
    margin-inline: auto;
    padding: 28px var(--gutter) 0;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .eco-badge__img,
  .eco-connector,
  .eco-connector__origin,
  .eco-connector__glow,
  .eco-connector__line,
  .eco-connector__end,
  .eco-ring,
  .eco-trigger__card {
    transition: none !important;
  }
  .eco-trigger__index {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eco-muted);
    margin-bottom: 10px;
  }
  .eco-trigger__title { font-family: var(--font-display); font-size: 1.4rem; color: var(--eco-ink); margin-bottom: 0.4rem; }
  .eco-trigger__body { color: var(--eco-ink-soft); font-size: 0.98rem; line-height: 1.6; }
  .eco-trigger__insight {
    margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--eco-line);
    color: var(--eco-ink); font-family: var(--font-display); font-weight: 500; font-size: 0.92rem;
  }
  .eco-trigger__cta { margin-top: 18px; }
}

@media (min-width: 1400px) {
  .ecosystem .wrap { max-width: 1280px; }
}