/* ==========================================================================
   ECOSYSTEM — the interactive "Group Ecosystem" (home) and "Career Paths"
   (careers) diagrams. Driven by js/ecosystem.js, which lays the nodes out on a
   tilted ring, animates them, and builds the decorative layers this file styles.
   Colour per business comes from --accent ("R G B"), set inline on each node.
   ========================================================================== */
.ecosystem {
  --accent: 0 174 239;
  --eco-dust: 92 208 255;
  position: relative; isolation: isolate; min-height: 700px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ecosystem.is-dragging { cursor: grabbing; }
:root[data-theme="light"] .ecosystem { --eco-dust: 0 137 184; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ecosystem { --eco-dust: 0 137 184; } }

/* ---- Atmosphere: particles, pointer-following light, orbit guides ---- */
.eco-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eco-dust {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 42%, transparent 76%);
}
.eco-glow {
  position: absolute; inset: -8% -4%;
  background:
    radial-gradient(540px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent) / 0.13), transparent 62%),
    radial-gradient(780px 430px at 50% 50%, rgb(0 174 239 / 0.11), rgb(46 49 146 / 0.1) 46%, transparent 74%);
  transition: background-color 0.6s;
}
.eco-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.eco-ring { fill: none; stroke: rgb(var(--eco-dust) / 0.3); stroke-width: 1; }
.eco-ring--soft { stroke: rgb(var(--eco-dust) / 0.22); stroke-dasharray: 2 8; }
.eco-sat { fill: rgb(var(--eco-dust)); filter: drop-shadow(0 0 6px rgb(var(--eco-dust))); }

/* ---- Connectors: a faint line that draws in, with pulses of "energy" along it ---- */
.ecosystem-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.eco-line { fill: none; stroke: rgb(var(--accent) / 0.6); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.eco-pulse {
  fill: none; stroke: rgb(var(--accent)); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 0.085 0.915; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 4px rgb(var(--accent)));
  animation: ecoFlow 3.4s linear infinite;
}
.eco-pulse.is-hot { animation-duration: 1.25s; stroke-width: 3.2; }
.ecosystem:not(.is-live) .eco-pulse { animation: none; }
@keyframes ecoFlow { to { stroke-dashoffset: 0; } }

/* ---- Hub ---- */
.eco-center {
  position: relative; z-index: 3; width: 224px; height: 224px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px;
  background: radial-gradient(circle at 32% 26%, var(--rg-charcoal-4), var(--rg-charcoal-2) 70%);
  border: 1px solid rgb(var(--accent) / 0.42);
  box-shadow:
    inset 0 0 44px rgb(var(--accent) / 0.13),
    0 0 0 1px rgb(255 255 255 / 0.03),
    0 40px 90px -24px rgb(var(--accent) / 0.5),
    0 0 90px -14px rgb(46 49 146 / 0.55);
  transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform; opacity: 0;
}
.eco-halo, .eco-orbit-ring, .eco-wave { position: absolute; border-radius: 50%; pointer-events: none; }
.eco-halo {
  inset: -9px;
  background: conic-gradient(from 0deg, transparent 0 52%, rgb(var(--accent) / 0.95) 80%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ecoSpin 7s linear infinite;
}
.eco-orbit-ring { inset: -18px; border: 1px dashed rgb(var(--accent) / 0.34); animation: ecoSpin 46s linear infinite reverse; }
.eco-wave { inset: 0; border: 1px solid rgb(var(--accent) / 0.55); opacity: 0; animation: ecoWave 5s ease-out infinite; }
.eco-wave:nth-of-type(2) { animation-delay: -2.5s; }
.ecosystem:not(.is-live) .eco-wave { animation: none; }
.eco-badge { position: absolute; width: 340px; height: 340px; max-width: none; /* the global svg{max-width:100%} reset would squeeze it to the hub's width */ left: 50%; top: 50%; margin: -170px 0 0 -170px; pointer-events: none;
  transform-origin: 170px 170px; /* explicit: a root <svg>'s percentage origin resolved off-centre and made the ring wobble */
  animation: ecoSpin 70s linear infinite; }
.eco-badge text { fill: var(--rg-text-dim); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; opacity: 0.85; }
@keyframes ecoSpin { to { rotate: 360deg; } }
@keyframes ecoWave { from { transform: scale(1); opacity: 0.5; } to { transform: scale(2.15); opacity: 0; } }

/* The logo sits on a light lens: its wordmark is dark indigo on a transparent PNG,
   so it needs a light disc behind it (same idea as the footer badge). */
.eco-plate {
  position: relative; width: 128px; height: 128px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 26%, #ffffff, #dde8f8 78%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), 0 0 46px rgb(var(--accent) / 0.5), inset 0 -10px 20px rgb(46 49 146 / 0.12);
  transition: box-shadow 0.5s var(--ease-out);
}
.eco-plate img { width: 92px; height: auto; display: block; }
.eco-plate .eco-coin { display: block; width: 140px; height: 120px; cursor: pointer; touch-action: manipulation; }
.eco-center.has-coin .eco-plate > img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eco-plate .eco-plate-icon { font-size: 2.3rem; color: #b8862a; }
.eco-cap { position: relative; display: block; min-height: 2.05em; width: 150px; }
.eco-cap b, .eco-cap i {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 0.64rem/1.35 var(--font-display); letter-spacing: 0.15em; font-style: normal;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.eco-cap b { color: var(--rg-grey-300); }
.eco-cap i { color: rgb(var(--accent)); opacity: 0; transform: translateY(8px); text-transform: uppercase; }
.eco-center.is-named .eco-cap b { opacity: 0; transform: translateY(-8px); }
.eco-center.is-named .eco-cap i { opacity: 1; transform: none; }

/* ---- Nodes ---- */
.eco-node {
  position: absolute; left: 0; top: 0; z-index: 2; width: 158px; padding: 6px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  color: inherit; text-decoration: none; cursor: pointer; opacity: 0; will-change: transform, opacity;
}
.eco-node:focus-visible { outline: none; }
.eco-node .eco-icon {
  position: relative; width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--accent)); font-size: 1.55rem;
  background: radial-gradient(circle at 30% 24%, rgb(var(--accent) / 0.3), rgb(var(--accent) / 0.06) 62%), var(--rg-charcoal-2);
  border: 1px solid rgb(var(--accent) / 0.5);
  box-shadow: 0 0 0 7px rgb(var(--accent) / 0.06), 0 16px 38px -14px rgb(var(--accent) / 0.65);
  transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.eco-node .eco-icon i { transition: transform 0.4s var(--ease-out); }
.eco-node .eco-icon::before, .eco-node .eco-icon::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
/* soft radar ping, staggered per node */
.eco-node .eco-icon::after {
  inset: -1px; border: 1px solid rgb(var(--accent) / 0.6); opacity: 0;
  animation: ecoPing 4.4s ease-out infinite; animation-delay: calc(var(--i, 0) * -0.62s);
}
.ecosystem:not(.is-live) .eco-icon::after { animation: none; }
/* spinning gradient ring, shown while hovered / focused */
.eco-node .eco-icon::before {
  inset: -6px; opacity: 0; transition: opacity 0.35s;
  background: conic-gradient(from 0deg, transparent 0 40%, rgb(var(--accent)) 78%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ecoSpin 2.4s linear infinite;
}
.eco-node.is-hot .eco-icon::before, .eco-node:focus-visible .eco-icon::before { opacity: 1; }
.eco-node.is-hot .eco-icon, .eco-node:focus-visible .eco-icon {
  border-color: rgb(var(--accent));
  background: radial-gradient(circle at 30% 24%, rgb(var(--accent) / 0.5), rgb(var(--accent) / 0.14) 64%), var(--rg-charcoal-2);
  box-shadow: 0 0 0 9px rgb(var(--accent) / 0.12), 0 22px 56px -12px rgb(var(--accent) / 0.85);
}
.eco-node.is-hot .eco-icon i, .eco-node:focus-visible .eco-icon i { transform: scale(1.14) rotate(-6deg); }
.eco-node .eco-label {
  font-size: 0.86rem; font-weight: 600; line-height: 1.32; color: var(--rg-white);
  text-shadow: 0 1px 12px var(--rg-charcoal), 0 0 2px var(--rg-charcoal);
}
@keyframes ecoPing { 0% { transform: scale(1); opacity: 0.55; } 68%, 100% { transform: scale(1.75); opacity: 0; } }

/* Detail card. ONE glass card is shared by every business: js/ecosystem.js fills it from the hovered
   node's (hidden) .eco-tooltip and places it on whichever side of the node has room, clamped inside the
   visible diagram and clear of the fixed header — so it can never be cut off at an edge. */
.eco-tooltip { display: none; }
.eco-card {
  --accent: 0 174 239; --tx: 0px; --ty: 0px;
  position: absolute; left: 0; top: 0; z-index: 20; box-sizing: border-box; width: 268px; max-width: calc(100% - 20px);
  padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 16px; text-align: left; cursor: default;
  background: color-mix(in srgb, var(--rg-charcoal-3) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgb(var(--accent) / 0.42);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.6), 0 0 44px -14px rgb(var(--accent) / 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(var(--tx), var(--ty)) scale(0.96); transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: opacity 0.22s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.22s;
}
.eco-card.is-on { opacity: 1; visibility: visible; transform: none; }
.eco-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 15px 15px 0 0; background: linear-gradient(90deg, rgb(var(--accent)), transparent); }
.eco-card strong { display: block; margin-bottom: 5px; font-size: 0.92rem; color: var(--rg-white); }
.eco-card p { font-size: 0.78rem; line-height: 1.55; color: var(--rg-text-dim); }
/* the pointer that ties the card to its business (its edge and offset are set per side) */
.eco-card-arrow {
  position: absolute; width: 12px; height: 12px; rotate: 45deg; pointer-events: none;
  background: var(--rg-charcoal-3); border: 0 solid rgb(var(--accent) / 0.42);
}
.eco-card[data-side="top"] { --ty: 8px; --ox: var(--ax); --oy: 100%; }
.eco-card[data-side="bottom"] { --ty: -8px; --ox: var(--ax); --oy: 0%; }
.eco-card[data-side="left"] { --tx: 8px; --ox: 100%; --oy: var(--ay); }
.eco-card[data-side="right"] { --tx: -8px; --ox: 0%; --oy: var(--ay); }
.eco-card[data-side="top"] .eco-card-arrow { bottom: -7px; left: calc(var(--ax) - 6px); border-width: 0 1px 1px 0; }
.eco-card[data-side="bottom"] .eco-card-arrow { top: -7px; left: calc(var(--ax) - 6px); border-width: 1px 0 0 1px; }
.eco-card[data-side="left"] .eco-card-arrow { right: -7px; top: calc(var(--ay) - 6px); border-width: 1px 1px 0 0; }
.eco-card[data-side="right"] .eco-card-arrow { left: -7px; top: calc(var(--ay) - 6px); border-width: 0 0 1px 1px; }
.eco-go { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--accent)); }
.eco-go i { transition: transform 0.3s var(--ease-out); }
.eco-card.is-on .eco-go i { transform: translateX(4px); }

/* the rest step back while one business is highlighted */
.ecosystem.is-hot .eco-node:not(.is-hot) .eco-icon { box-shadow: 0 0 0 7px rgb(var(--accent) / 0); }

/* ---- Pause control (WCAG 2.2.2: moving content that lasts >5s can be stopped) ---- */
.eco-toggle {
  position: absolute; right: 0; bottom: 0; z-index: 6; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem; border-radius: 100px; cursor: pointer;
  font: 600 0.74rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rg-text-dim); background: color-mix(in srgb, var(--rg-charcoal-2) 80%, transparent);
  border: 1px solid var(--rg-border-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.eco-toggle:hover, .eco-toggle:focus-visible { color: var(--rg-white); border-color: rgb(var(--accent) / 0.7); outline: none; }
.ecosystem.is-paused *, .ecosystem.is-paused *::before, .ecosystem.is-paused *::after { animation-play-state: paused !important; }
.eco-hint { position: absolute; left: 0; bottom: 0; z-index: 6; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rg-text-faint); pointer-events: none; display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---- Light theme: accent-coloured icons need a deeper ink on a light surface ---- */
:root[data-theme="light"] .eco-node .eco-icon { color: color-mix(in srgb, rgb(var(--accent)) 62%, #0b1020); }
:root[data-theme="light"] .eco-go, :root[data-theme="light"] .eco-cap i { color: color-mix(in srgb, rgb(var(--accent)) 60%, #0b1020); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .eco-node .eco-icon { color: color-mix(in srgb, rgb(var(--accent)) 62%, #0b1020); }
  :root:not([data-theme="dark"]) .eco-go, :root:not([data-theme="dark"]) .eco-cap i { color: color-mix(in srgb, rgb(var(--accent)) 60%, #0b1020); }
}

/* ---- Small screens: the diagram gives way to a card list ---- */
.eco-mobile-list { display: none; flex-direction: column; gap: 0.9rem; }
@media (max-width: 1200px) { .ecosystem { min-height: 620px; } .eco-node { width: 140px; } }
@media (max-width: 900px) {
  .ecosystem { display: none; }
  .eco-mobile-list { display: flex; }
}
@media (scripting: none) {
  .ecosystem { display: none; }
  .eco-mobile-list { display: flex; }
}
.eco-mobile-card {
  --accent: 0 174 239;
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem 1.15rem 1.3rem;
  color: inherit; text-decoration: none; background: var(--rg-charcoal-2);
  border: 1px solid var(--rg-border); border-radius: var(--radius-md);
  transition: translate 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.eco-mobile-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgb(var(--accent)), rgb(var(--accent) / 0.2)); }
.eco-mobile-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(360px circle at 0% 50%, rgb(var(--accent) / 0.14), transparent 65%);
}
.eco-mobile-card:hover, .eco-mobile-card:focus-visible { translate: 0 -3px; border-color: rgb(var(--accent) / 0.55); box-shadow: 0 18px 40px -20px rgb(var(--accent) / 0.6); outline: none; }
.eco-mobile-card:hover::after, .eco-mobile-card:focus-visible::after { opacity: 1; }
.eco-mobile-card .eco-icon {
  position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgb(var(--accent)); font-size: 1.2rem;
  background: rgb(var(--accent) / 0.12); border: 1px solid rgb(var(--accent) / 0.4);
}
:root[data-theme="light"] .eco-mobile-card .eco-icon { color: color-mix(in srgb, rgb(var(--accent)) 62%, #0b1020); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .eco-mobile-card .eco-icon { color: color-mix(in srgb, rgb(var(--accent)) 62%, #0b1020); } }
.eco-mobile-card > div { position: relative; z-index: 1; min-width: 0; flex: 1; }
.eco-mobile-card h4 { font-size: 1rem; color: var(--rg-white); }
.eco-mobile-card p { margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.55; color: var(--rg-text-dim); }
.eco-mobile-card .eco-arrow { position: relative; z-index: 1; flex: none; color: rgb(var(--accent)); font-size: 0.9rem; transition: transform 0.3s var(--ease-out); }
.eco-mobile-card:hover .eco-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .eco-halo, .eco-orbit-ring, .eco-badge, .eco-wave, .eco-pulse, .eco-node .eco-icon::before, .eco-node .eco-icon::after { animation: none; }
  .eco-wave, .eco-pulse { display: none; }
  .eco-card { transition: none; }
}