/* ==========================================================================
   STATIX explainer animations — shared stylesheet
   Hand-authored vector scenes (SVG + CSS). No libraries, no video, no AI.
   On-brand palette matches the marketing site (css/styles.css).
   By the STATIX design team.

   USAGE
   -----
   Each scene .html file is fully self-contained and ALSO links this file
   when present (relative path). If you copy a single scene's <figure> into
   another page, either copy this stylesheet alongside it or rely on the
   inline <style> block each scene also carries. Loading this file twice is
   harmless — the rules are identical.
   ========================================================================== */

:root{
  --teal:#1C9C8E;
  --teal-l2:#5fd6c6;       /* light teal (member highlight / gradient top) */
  --teal-d:#11302e;        /* dark brand */
  --teal-dd:#0c2422;       /* darker brand */
  --teal-l:#e8f6f4;
  --teal-mid:#16483A;
  --ink:#0f1f1d;
  --muted:#5a6b68;
  --line:#dbe7e4;
  --bg:#ffffff;
  --bg-soft:#f4faf8;

  /* scene-canvas tokens */
  --canvas-1:#0b1a18;
  --canvas-2:#0c2422;
  --grid:#1f4a43;          /* faint engineering grid on the dark canvas */
  --ghost:#3a6b62;         /* undeformed / reference geometry */
  --node:#eafdfa;
  --gold:#ffd166;          /* load arrows */
  --steel:#9fc7c0;         /* supports / secondary glyphs */
  --txt-on-dark:#cdeae5;
  --txt-dim:#8fb8b1;

  /* status colours (utilisation / pass-fail) */
  --ok:#3cc28a;
  --warn:#f4b740;
  --bad:#e8585b;

  --line-w:6;              /* default member line weight (SVG units) */
}

*{box-sizing:border-box;}

/* ---- Page shell when a scene is viewed standalone ---- */
.anim-page{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg-soft);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ---- The reusable figure (this is the embeddable unit) ---- */
.statix-scene{
  margin:0;
  width:100%;
  max-width:640px;
}
.statix-scene .scene-frame{
  position:relative;
  border-radius:16px;
  background:linear-gradient(160deg,var(--canvas-1),var(--canvas-2));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(17,48,46,.18);
  padding:10px;
  overflow:hidden;
}
.statix-scene svg{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* in-canvas title chip (top-left) */
.scene-title{
  position:absolute;
  top:16px;left:18px;
  z-index:3;
  display:flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-l2);
  pointer-events:none;
}
.scene-title .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(28,156,142,.22);
}
.scene-step{
  position:absolute;
  top:16px;right:18px;
  z-index:3;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;
  color:var(--txt-dim);
  pointer-events:none;
}

/* caption under the frame */
.scene-cap{
  margin:12px 4px 0;
  font-size:.82rem;
  color:var(--muted);
  text-align:center;
}
.scene-cap b{color:var(--teal-d);font-weight:700;}
.scene-credit{
  display:block;margin-top:5px;
  font-size:.7rem;color:#9fb4af;letter-spacing:.04em;
}

/* ---- Shared SVG primitives ---- */
.s-grid line{stroke:var(--grid);stroke-width:1;opacity:.55;}
.s-ghost{stroke:var(--ghost);stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.s-member{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}
.s-node{fill:var(--node);stroke:var(--teal);stroke-width:2;}
.s-load{stroke:var(--gold);fill:var(--gold);stroke-width:3;}
.s-label{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}

/* legend bar used by stress/utilisation scenes */
.legend-tick{font-size:9px;fill:var(--txt-dim);}

/* ---- Reduced motion: scenes show their final/static frame ---- */
@media (prefers-reduced-motion:reduce){
  .statix-scene *{
    animation:none !important;
    transition:none !important;
  }
}