/* Ankored · Ecosystem
   Sources on two sides of a ringed center disc, wired to it with dashed lines
   (drawn by module.js), with a verified-status badge underneath.
   The stage is its own size container: on desktop every part of the diagram
   is sized in cqw so it scales as one piece, like the original artwork. */

.ank-eco__stage {
  --ank-eco-core: 23cqw;
  --ank-eco-hub-pad: 0px;
  --ank-eco-title: var(--ank-primary);
  --ank-eco-text: #5E5288;
  --ank-eco-chip: #74669B;
  --ank-eco-ease: cubic-bezier(.22, 1, .36, 1);
  --ank-eco-pop: cubic-bezier(.34, 1.56, .64, 1);
  container: ank-eco / inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 36% 1fr;
  grid-template-areas: "left hub right";
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
  aspect-ratio: 100 / 68;
}

/* Wires (module.js fills this) */

.ank-eco__wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ank-eco__wire {
  fill: none;
  stroke: var(--ank-eco-ring);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  opacity: .9;
}

.ank-eco__reveal {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 8;
}

.ank-eco__pulse {
  fill: none;
  stroke: var(--ank-primary);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: .001 2;
  stroke-dashoffset: 0;
  opacity: 0;
}

/* Sources */

.ank-eco__sources {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 24px;
  margin: 0;
  padding: 5cqw 0;
  list-style: none;
}

.ank-eco__sources--left {
  grid-area: left;
  align-items: flex-start;
}

.ank-eco__sources--right {
  grid-area: right;
  align-items: flex-end;
}

.ank-eco__source {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Outer rows step in toward the center so each column follows the rings */
.ank-eco__sources--left .ank-eco__source {
  margin-left: calc(var(--ank-eco-arc, 0) * 13cqw);
}

.ank-eco__sources--right .ank-eco__source {
  flex-direction: row-reverse;
  margin-right: calc(var(--ank-eco-arc, 0) * 13cqw);
  text-align: right;
}

.ank-eco__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(52px, 5.6cqw, 72px);
  height: clamp(52px, 5.6cqw, 72px);
  border: 1px solid var(--ank-border);
  border-radius: var(--ank-radius-card);
  background-color: var(--ank-surface);
  box-shadow: var(--ank-shadow-card);
  color: var(--ank-accent);
  line-height: 0;
  text-align: center;
}

/* HubSpot wraps {% icon %} output, so the SVG centers itself rather than
   relying on the tile's flex centering */
.ank-eco__tile > *,
.ank-eco__person-icon > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.ank-eco__tile svg {
  display: block;
  flex-shrink: 0;
  width: clamp(22px, 2.4cqw, 32px);
  height: clamp(22px, 2.4cqw, 32px);
  margin: auto;
  fill: currentColor;
}

.ank-eco__tile .ank-eco__tile-img {
  display: block;
  flex-shrink: 0;
  width: clamp(24px, 2.6cqw, 34px);
  height: clamp(24px, 2.6cqw, 34px);
  margin: auto;
  object-fit: contain;
}

.ank-eco__source-body {
  display: block;
  max-width: 21cqw;
}

.ank-section .ank-eco__source-title {
  margin: 0 0 4px;
  color: var(--ank-eco-title);
  font-size: clamp(17px, 1.7cqw, 23px);
  font-weight: 600;
  line-height: 1.2;
}

.ank-eco__source-text {
  display: block;
  color: var(--ank-eco-text);
  font-size: clamp(13px, 1.15cqw, 16px);
  line-height: 1.4;
}

/* Hub: rings, center disc, people, badge */

.ank-eco__hub {
  position: relative;
  grid-area: hub;
  align-self: center;
  justify-self: center;
  width: var(--ank-eco-core);
  height: var(--ank-eco-core);
}

.ank-eco__rings {
  position: absolute;
  top: calc(var(--ank-eco-hub-pad) + var(--ank-eco-core) / 2);
  left: 50%;
  z-index: 0;
  width: 0;
  height: 0;
}

.ank-eco__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  translate: -50% -50%;
}

.ank-eco__ring--outer {
  width: calc(var(--ank-eco-core) * 2.8);
  height: calc(var(--ank-eco-core) * 2.8);
  background-color: color-mix(in srgb, var(--ank-eco-ring) 34%, #FFFFFF);
}

.ank-eco__ring--middle {
  width: calc(var(--ank-eco-core) * 2.1);
  height: calc(var(--ank-eco-core) * 2.1);
  background-color: color-mix(in srgb, var(--ank-eco-ring) 62%, #FFFFFF);
}

.ank-eco__ring--inner {
  width: calc(var(--ank-eco-core) * 1.5);
  height: calc(var(--ank-eco-core) * 1.5);
  background-color: color-mix(in srgb, var(--ank-eco-ring) 70%, #373277);
}

.ank-eco__core {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ank-eco-core);
  height: var(--ank-eco-core);
  border-radius: 50%;
  background: linear-gradient(155deg, #016B83 0%, #1C5579 55%, #373277 100%);
  box-shadow: 0 12px 40px rgba(55, 50, 119, .28);
}

.ank-eco__logo {
  display: block;
  width: var(--ank-eco-logo, 52%);
  max-width: none;
  height: auto;
  max-height: var(--ank-eco-logo, 52%);
  margin-bottom: 8%;
  object-fit: contain;
  fill: #D7E6EC;
}

/* An uploaded logo gets a fixed square box and scales to fill it, so an SVG
   with small (or no) width/height attributes doesn't render at that size */
img.ank-eco__logo {
  height: var(--ank-eco-logo, 52%);
}

/* People chips sit on an arc around the bottom of the disc */

.ank-eco__people {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ank-eco__person {
  --ank-eco-chip-size: clamp(40px, calc(var(--ank-eco-core) * .2), 60px);
  position: absolute;
  top: calc(50% + sin(var(--ank-eco-angle, 90deg)) * var(--ank-eco-core) * .46);
  left: calc(50% + cos(var(--ank-eco-angle, 90deg)) * var(--ank-eco-core) * .46);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  translate: -50% calc(var(--ank-eco-chip-size) / -2);
}

.ank-eco__person-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ank-eco-chip-size);
  height: var(--ank-eco-chip-size);
  border: 2px solid color-mix(in srgb, #60CEA9 70%, transparent);
  border-radius: 50%;
  background-color: #0B5F76;
  box-shadow: 0 4px 14px rgba(16, 53, 72, .25);
  color: #FFFFFF;
  line-height: 0;
  text-align: center;
}

.ank-eco__person-icon svg {
  display: block;
  flex-shrink: 0;
  width: calc(var(--ank-eco-chip-size) * .42);
  height: calc(var(--ank-eco-chip-size) * .42);
  margin: auto;
  fill: currentColor;
}

.ank-eco__person-text {
  margin-top: 6px;
  padding: .3em .95em;
  border-radius: 999px;
  background-color: var(--ank-eco-chip);
  color: #FFFFFF;
  font-size: clamp(12px, 1.2cqw, 16px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Browsers without CSS trig: chips in a row under the disc */
@supports not (top: calc(sin(90deg) * 1px)) {
  .ank-eco__people {
    inset: auto auto -12px 50%;
    display: flex;
    gap: 12px;
    translate: -50% 50%;
  }
  .ank-eco__person { position: static; translate: none; }
}

/* Verified badge + trust marks */

.ank-eco__verdict {
  position: absolute;
  top: calc(50% + var(--ank-eco-core) * .68);
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
  translate: -50% 0;
}

.ank-section .ank-eco__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  margin: 0;
  padding: clamp(10px, 1cqw, 16px) clamp(20px, 2.6cqw, 40px) clamp(10px, 1cqw, 16px) clamp(10px, 1cqw, 16px);
  border-radius: 999px;
  background-color: var(--ank-eco-badge);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ank-eco-badge) 35%, transparent);
  color: #FFFFFF;
  font-size: clamp(13px, 1.4cqw, 20px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.ank-eco__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ank-eco__badge-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(30px, 2.8cqw, 44px);
  height: clamp(30px, 2.8cqw, 44px);
  border-radius: 50%;
  background-color: #FFFFFF;
  line-height: 0;
}

.ank-eco__badge-check svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: var(--ank-eco-badge);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ank-eco__marks {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ank-eco__mark {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 clamp(14px, 2cqw, 28px);
}

.ank-eco__mark + .ank-eco__mark {
  border-left: 1px solid color-mix(in srgb, var(--ank-eco-chip) 50%, transparent);
}

.ank-eco__mark-img {
  display: block;
  width: auto;
  max-width: 120px;
  height: clamp(36px, 4.4cqw, 60px);
  object-fit: contain;
}

/* Button */

.ank-eco__action {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ---------- Animation (module.js adds --armed, then .is-in on scroll) ---------- */

.ank-eco--armed .ank-eco__ring {
  opacity: 0;
  scale: .55;
  transition: opacity .9s var(--ank-eco-ease), scale 1.1s var(--ank-eco-ease);
}
.ank-eco--armed .ank-eco__ring--middle { transition-delay: .1s; }
.ank-eco--armed .ank-eco__ring--outer { transition-delay: .2s; }

.ank-eco--armed .ank-eco__core {
  opacity: 0;
  scale: .6;
  transition: opacity .6s var(--ank-eco-ease) .3s, scale .8s var(--ank-eco-pop) .3s;
}

.ank-eco--armed .ank-eco__logo {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .6s var(--ank-eco-ease) .55s, translate .8s var(--ank-eco-ease) .55s;
}

.ank-eco--armed .ank-eco__person-icon,
.ank-eco--armed .ank-eco__person-text {
  opacity: 0;
  scale: .4;
  transition:
    opacity .4s var(--ank-eco-ease) calc(.8s + var(--ank-eco-order, 0) * .12s),
    scale .6s var(--ank-eco-pop) calc(.8s + var(--ank-eco-order, 0) * .12s);
}
.ank-eco--armed .ank-eco__person-text { transition-delay: calc(.9s + var(--ank-eco-order, 0) * .12s); }

.ank-eco--armed .ank-eco__source {
  opacity: 0;
  translate: -28px 0;
  transition:
    opacity .7s var(--ank-eco-ease) calc(.6s + var(--ank-eco-order, 0) * .1s),
    translate .9s var(--ank-eco-ease) calc(.6s + var(--ank-eco-order, 0) * .1s);
}
.ank-eco--armed .ank-eco__sources--right .ank-eco__source { translate: 28px 0; }

.ank-eco--armed .ank-eco__reveal {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--ank-eco-ease);
}

.ank-eco--armed .ank-eco__badge {
  opacity: 0;
  scale: .85;
  transition: opacity .5s var(--ank-eco-ease) 1.6s, scale .7s var(--ank-eco-pop) 1.6s;
}

.ank-eco--armed .ank-eco__badge-check svg path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s var(--ank-eco-ease) 1.95s;
}

.ank-eco--armed .ank-eco__marks {
  opacity: 0;
  transition: opacity .8s var(--ank-eco-ease) 2s;
}

.ank-eco--armed.is-in .ank-eco__ring,
.ank-eco--armed.is-in .ank-eco__core,
.ank-eco--armed.is-in .ank-eco__person-icon,
.ank-eco--armed.is-in .ank-eco__person-text,
.ank-eco--armed.is-in .ank-eco__badge {
  opacity: 1;
  scale: 1;
}

.ank-eco--armed.is-in .ank-eco__logo,
.ank-eco--armed.is-in .ank-eco__source {
  opacity: 1;
  translate: 0 0;
}

.ank-eco--armed.is-in .ank-eco__marks { opacity: 1; }

.ank-eco--armed.is-in .ank-eco__reveal,
.ank-eco--armed.is-in .ank-eco__badge-check svg path {
  stroke-dashoffset: 0;
}

/* Once cleared, the badge sends out two soft pings */
.ank-eco--armed.is-in .ank-eco__badge::after {
  animation: ank-eco-ping 1.6s ease-out 2.2s 2;
}

@keyframes ank-eco-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ank-eco-badge) 50%, transparent); }
  100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--ank-eco-badge) 0%, transparent); }
}

/* Data flow: a dot travels each wire into the center, then rests */
.ank-eco--flow.is-in .ank-eco__pulse {
  animation: ank-eco-flow 4.2s linear infinite;
  animation-delay: calc(2.4s + var(--ank-eco-order, 0) * .55s);
}

.ank-eco--flow:not(.is-visible) .ank-eco__pulse {
  animation-play-state: paused;
}

@keyframes ank-eco-flow {
  0%   { stroke-dashoffset: 0; opacity: 0; }
  8%   { opacity: .9; }
  48%  { opacity: .9; }
  56%  { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/* ---------- Stacked layout ---------- */

@container ank (max-width: 900px) {
  .ank-eco__wires,
  .ank-eco__ring--outer {
    display: none;
  }

  .ank-eco__stage {
    --ank-eco-core: min(42cqw, 210px);
    --ank-eco-hub-pad: calc(var(--ank-eco-core) * .55);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hub hub"
      "left right";
    column-gap: 32px;
    row-gap: 40px;
    aspect-ratio: auto;
    overflow-x: clip;
  }

  .ank-eco__hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: var(--ank-eco-hub-pad);
  }

  .ank-eco__core {
    flex-shrink: 0;
  }

  .ank-eco__verdict {
    position: static;
    margin-top: calc(var(--ank-eco-core) * .38 + 20px);
    gap: 20px;
    translate: none;
  }

  .ank-section .ank-eco__badge {
    gap: 12px;
    font-size: 15px;
  }

  .ank-eco__sources {
    justify-content: flex-start;
    padding: 0;
  }

  .ank-eco__sources--right {
    align-items: flex-start;
  }

  .ank-eco__sources--left .ank-eco__source,
  .ank-eco__sources--right .ank-eco__source {
    flex-direction: row;
    gap: 16px;
    margin: 0;
    text-align: left;
  }

  .ank-eco__source-body {
    max-width: none;
  }

  .ank-section .ank-eco__source-title { font-size: 18px; }
  .ank-eco__source-text { font-size: 15px; }
  .ank-eco__person-text { font-size: 13px; }
  .ank-eco__mark-img { height: 48px; }
  .ank-eco__mark { padding: 0 20px; }

  .ank-eco--armed .ank-eco__sources--right .ank-eco__source { translate: -28px 0; }
  .ank-eco--armed.is-in .ank-eco__sources--right .ank-eco__source { translate: 0 0; }

  .ank-eco__action { margin-top: 40px; }
}

@container ank (max-width: 600px) {
  .ank-eco__stage {
    /* The middle ring is 2.1× the disc, so 40cqw keeps it inside the screen */
    --ank-eco-core: min(40cqw, 180px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "hub"
      "left"
      "right";
    row-gap: 24px;
  }

  .ank-eco__verdict { margin-bottom: 16px; }
  .ank-section .ank-eco__badge { font-size: 13px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .ank-eco__pulse,
  .ank-eco__badge::after {
    animation: none !important;
  }
}