/* ============================================================
   Extuno - ecosystem page styles + ecosystem-specific animations.
   Linked only by ecosystem pages, on top of styles.css + site.css.
   ============================================================ */

/* eco hero badge */
.ehero__badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--bg-panel); margin-bottom:18px; }
.ehero__badge .bi{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--bg-base); border:1px solid var(--line); }
.ehero__badge .bt{ font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.ehero__badge .bt b{ color:var(--text); display:block; font-size:13px; }

/* large floating ecosystem glyph used in section headers */
.eglyph{ display:grid; place-items:center; width:84px; height:84px; border-radius:18px;
  border:1px solid var(--line); background:var(--bg-panel);
  box-shadow:0 0 0 1px var(--_eco-soft,rgba(47,191,174,.1)), 0 18px 40px rgba(6,18,22,.5);
  position:relative; }
.eglyph::after{ content:""; position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  box-shadow:0 0 22px var(--_eco-glow,rgba(47,191,174,.18)); }
.eglyph.float{ animation:floaty 4s var(--ease-in-out) infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion: reduce){ .eglyph.float{  } }

/* ============================================================
   BROWSER FAMILY - permission / CSP diff + beacon
   ============================================================ */
.pscene{ border:1px solid var(--line); border-radius:14px; background:var(--bg-panel);
  padding:22px; box-shadow:var(--shadow-panel); }
.pscene__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pscene__ic{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--bg-base); display:grid; place-items:center; }
.pscene__title{ font-family:var(--font-mono); font-size:13px; color:var(--text); }
.pscene__title span{ display:block; font-size:11px; color:var(--text-dim); }
.pscene__ver{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.pscene__ver b{ color:var(--coral-hi); }
.pscene__perms{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:7px; }
.pscene__perms li{ font-family:var(--font-mono); font-size:12.5px; padding:9px 12px; border-radius:7px;
  border:1px solid var(--line-soft); background:var(--bg-base); color:var(--text-mut); display:flex; align-items:center; gap:9px; }
.pscene__perms li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--text-dim); }
.pscene__perms li.ok::before{ background:var(--teal); }
.pscene__perms li.add{ color:var(--coral-hi); border-color:rgba(255,107,92,.4); background:var(--tint-coral);
  animation:addIn 5.5s var(--ease-out) infinite; }
.pscene__perms li.add::before{ background:var(--coral); box-shadow:0 0 8px var(--glow-coral); }
.pscene__perms li.add.d2{ animation-delay:.5s; }
@keyframes addIn{ 0%,12%{ opacity:0; transform:translateX(-10px); } 24%,86%{ opacity:1; transform:none; } 96%,100%{ opacity:0; transform:translateX(-10px); } }
.pscene__beacon{ display:flex; align-items:center; gap:0; }
.pscene__node{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg-base); font-family:var(--font-mono); font-size:12px; color:var(--text); flex:none; }
.pscene__node .ni{ width:20px; height:20px; display:grid; place-items:center; }
.pscene__node.host{ border-color:var(--coral); color:var(--coral-hi); background:var(--tint-coral); }
.pscene__wire{ flex:1; height:2px; margin:0 8px; position:relative;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); }
.pscene__wire .dot{ position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%; margin-top:-4.5px;
  background:var(--coral); box-shadow:0 0 10px var(--glow-coral); animation:beaconRun 5.5s var(--ease-in-out) infinite; }
@keyframes beaconRun{ 0%,20%{ left:0; opacity:0; } 28%{ opacity:1; } 70%{ left:calc(100% - 9px); opacity:1; } 78%,100%{ left:calc(100% - 9px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pscene__perms li.add{  opacity:1; transform:none; } .pscene__wire .dot{  left:calc(100% - 9px); } }

/* ============================================================
   EDITOR FAMILY - workspace trust -> task -> shell -> exfil
   ============================================================ */
.wscene{ border:1px solid var(--line); border-radius:14px; background:var(--bg-panel);
  padding:24px 22px; box-shadow:var(--shadow-panel); position:relative; }
.wscene__list{ list-style:none; margin:0; padding:0; position:relative; }
.wscene__line{ position:absolute; left:15px; top:14px; bottom:14px; width:2px; background:var(--line); }
.wscene__fill{ position:absolute; left:15px; top:14px; width:2px; height:0; background:linear-gradient(180deg,var(--teal),var(--coral));
  animation:wfill 5s var(--ease-in-out) infinite; }
@keyframes wfill{ 0%{ height:0; } 88%{ height:calc(100% - 28px); } 100%{ height:calc(100% - 28px); } }
.wscene__list li{ position:relative; display:flex; align-items:center; gap:14px; padding:9px 0; z-index:2; }
.wscene__n{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--bg-base);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:12px; color:var(--text-mut); flex:none; }
.wscene__t{ font-family:var(--font-mono); font-size:13px; color:var(--text-mut); }
.wscene__list li.bad .wscene__n{ border-color:var(--coral); color:var(--coral-hi); box-shadow:0 0 10px var(--glow-coral); }
.wscene__list li.bad .wscene__t{ color:var(--coral-hi); }
.wscene__packet{ position:absolute; left:11px; top:8px; width:12px; height:12px; border-radius:50%;
  background:var(--teal-hi); box-shadow:0 0 12px var(--glow-teal); z-index:3; animation:wtravel 5s var(--ease-in-out) infinite; }
@keyframes wtravel{ 0%{ top:8px; background:var(--teal-hi); } 70%{ background:var(--teal-hi); } 88%{ top:calc(100% - 22px); background:var(--coral); box-shadow:0 0 12px var(--glow-coral); } 100%{ top:calc(100% - 22px); background:var(--coral); } }
@media (prefers-reduced-motion: reduce){ .wscene__fill{  height:calc(100% - 28px); } .wscene__packet{  top:calc(100% - 22px); background:var(--coral); } }

/* ============================================================
   REGISTRY FAMILY - dependency tree + postinstall hook beacon
   ============================================================ */
.dscene{ border:1px solid var(--line); border-radius:14px; background:var(--bg-panel);
  padding:22px; box-shadow:var(--shadow-panel); font-family:var(--font-mono); }
.dnode{ display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--line-soft);
  border-radius:8px; background:var(--bg-base); font-size:12.5px; color:var(--text); margin-bottom:8px; width:max-content; max-width:100%; }
.dnode .dd{ width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.dnode.root{ color:var(--text); border-color:var(--line); }
.dchild{ margin-left:26px; position:relative; }
.dchild::before{ content:""; position:absolute; left:-15px; top:-8px; bottom:50%; width:1px; background:var(--line); }
.dchild::after{ content:""; position:absolute; left:-15px; top:50%; width:11px; height:1px; background:var(--line); }
.dnode.evil{ border-color:var(--coral); color:var(--coral-hi); background:var(--tint-coral);
  animation:evilIn 5s var(--ease-out) infinite; }
.dnode.evil .dd{ background:var(--coral); box-shadow:0 0 8px var(--glow-coral); }
@keyframes evilIn{ 0%,14%{ opacity:0; transform:translateY(-6px); } 26%,86%{ opacity:1; transform:none; } 96%,100%{ opacity:0; transform:translateY(-6px); } }
.dnode .hook{ margin-left:8px; padding:2px 7px; border-radius:4px; background:rgba(255,107,92,.2);
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--coral-hi); }
.dbeacon{ display:flex; align-items:center; gap:0; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.dbeacon .dn{ display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-base); font-size:11.5px; color:var(--text-mut); flex:none; }
.dbeacon .dn.host{ border-color:var(--coral); color:var(--coral-hi); background:var(--tint-coral); }
.dbeacon .dwire{ flex:1; height:2px; margin:0 8px; position:relative;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); }
.dbeacon .dwire .dot{ position:absolute; top:50%; margin-top:-4.5px; width:9px; height:9px; border-radius:50%;
  background:var(--coral); box-shadow:0 0 10px var(--glow-coral); animation:beaconRun 5s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce){ .dnode.evil{  opacity:1; transform:none; } .dbeacon .dwire .dot{  left:calc(100% - 9px); } }

/* eco CTA band (shared: used by ecosystem pages and how-it-works) */