/* ===========================================================================
   magic-motion.css — the v29 shared component library.

   Nine components adapted from Magic UI's engineering patterns into Sandy's
   existing visual system. Nothing here introduces a new font, a new radius,
   a new shadow system, or a colour outside the v28 token set:
   --blue / --blue-bright / --blue-mid / --blue-deep / --blue-ink / --blue-pale
   --accent / --accent-soft / --paper / --white / --ink / --muted / --line

   Every component:
   - defaults to its COMPLETED state in plain CSS (no JS required to read it);
   - only animates once `html.sg-motion` is present (JS decided motion is safe);
   - respects prefers-reduced-motion by never receiving `.sg-motion` treatment;
   - never encodes information only in a hover state.
   =========================================================================== */

.sg-mm{ --mm-line:var(--line); --mm-ink:var(--ink); --mm-muted:var(--muted);
  --mm-blue:var(--blue); --mm-blue-ink:var(--blue-ink); --mm-blue-pale:var(--blue-pale);
  --mm-accent:var(--accent); --mm-ease:cubic-bezier(.2,.7,.2,1); }

/* ---------------------------------------------------------------- 1. BEAM */
.sg-beam{ position:relative; }
.sg-beam__svg{ width:100%; height:100%; overflow:visible; }
.sg-beam__path{
  fill:none; stroke:var(--mm-line); stroke-width:1.5; stroke-linecap:round;
  opacity:.55;
}
html.sg-motion .sg-beam__path{
  stroke-dasharray:var(--len,1000); stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0)));
  transition:stroke .22s var(--mm-ease), opacity .22s var(--mm-ease);
}
.sg-beam[data-sg-progress] .sg-beam__path{ stroke-dashoffset:0; } /* no-js/static default: fully drawn */
.sg-beam.has-focus .sg-beam__path{ opacity:.3; }
.sg-beam.has-focus .sg-beam__path.is-focus,
.sg-beam .sg-beam__path.is-on{ stroke:var(--mm-blue); opacity:1; }
.sg-beam__dot{ fill:var(--mm-accent); opacity:0; r:3.5; }
html.sg-motion .sg-beam.has-focus .sg-beam__dot.is-focus{
  opacity:1; transition:opacity .18s var(--mm-ease);
}
.sg-beam__node{
  border:1px solid var(--mm-line); background:var(--white,#fff); padding:14px 16px;
  display:flex; align-items:center; gap:10px; cursor:default;
}
.sg-beam__node:focus-visible{ outline:3px solid var(--mm-accent); outline-offset:2px; }
html.sg-motion .sg-beam__node{ transition:transform .22s var(--mm-ease), border-color .22s var(--mm-ease); }
.sg-beam__node.is-focus{ border-color:var(--mm-blue); transform:translateY(-3px); }
.sg-beam__node.is-focus .sg-beam__node-mark{ background:var(--mm-accent); }
.sg-beam__node-mark{ width:8px; height:8px; border-radius:0; background:var(--mm-muted); flex:0 0 8px; }
@media (prefers-reduced-motion:reduce){
  .sg-beam__path{ stroke-dashoffset:0 !important; }
  .sg-beam__dot{ display:none; }
  .sg-beam__node{ transform:none !important; }
}

/* ------------------------------------------------------------- 2. ORBIT */
.sg-orbit{ display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:clamp(24px,3vw,48px); align-items:center; }
@media (max-width:760px){ .sg-orbit{ grid-template-columns:1fr; justify-items:center; } }
.sg-orbit__svg{ width:100%; height:auto; max-width:340px; }
.sg-orbit__rail{ fill:none; stroke:var(--mm-line); stroke-width:1; }
.sg-orbit__core{ fill:var(--mm-blue-ink); }
.sg-orbit__core-label{ fill:#fff; font:600 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; }
.sg-orbit__spin{ transform-origin:150px 150px; transform:rotate(0deg); }
html.sg-motion .sg-orbit__spin{ transition:transform .5s var(--mm-ease); }
.sg-orbit__node circle{ fill:var(--white,#fff); stroke:var(--mm-muted); stroke-width:1.5; r:8; }
.sg-orbit__node text{ fill:var(--mm-ink); font:700 10px/1 var(--font-sans); }
.sg-orbit__node.is-on circle{ fill:var(--mm-accent); stroke:var(--mm-accent); }
html.sg-motion .sg-orbit__node circle{ transition:fill .2s var(--mm-ease), stroke .2s var(--mm-ease), r .2s var(--mm-ease); }
.sg-orbit__node.is-on circle{ r:9.5; }
.sg-orbit__labels{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.sg-orbit__labels li{ border-top:1px solid var(--mm-line); }
.sg-orbit__labels li:last-child{ border-bottom:1px solid var(--mm-line); }
.sg-orbit__labels button{
  all:unset; display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  padding:14px 4px; cursor:pointer; color:var(--mm-ink);
}
.sg-orbit__labels button:focus-visible{ outline:3px solid var(--mm-accent); outline-offset:-2px; }
.sg-orbit__labels i{ width:8px; height:8px; flex:0 0 8px; background:var(--mm-muted); display:block; }
html.sg-motion .sg-orbit__labels i{ transition:background .2s var(--mm-ease), transform .2s var(--mm-ease); }
.sg-orbit__labels li.is-on i{ background:var(--mm-accent); transform:scale(1.3); }
.sg-orbit__labels b{ font-weight:700; }
.sg-orbit__labels span{ color:var(--mm-muted); font-size:var(--type-small); display:block; }
@media (prefers-reduced-motion:reduce){ .sg-orbit__spin{ transform:rotate(0deg) !important; } }

/* -------------------------------------------------------------- 3. METRIC */
.sg-metric{ display:flex; flex-direction:column; gap:10px; }
/* Full standalone sizing only when NOT already inside an existing v28 metric
   card — when both classes are present (as on the v29 homepage, which reuses
   the approved v28 metric layout and only adds the count-up behaviour), the
   pre-existing v28 rule keeps ownership of size/weight/colour so all four
   figures in a row still match, whether or not they animate. */
.sg-metric:not(.v28-metric) .sg-metric__figure{
  font-family:var(--font-display); font-weight:400; color:var(--mm-blue);
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:.94; margin:0;
}
.sg-metric__figure{ font-variant-numeric:tabular-nums; }
.sg-metric__figure .unit{ color:var(--mm-accent); }
.sg-metric__mark{ width:100%; max-width:120px; height:6px; }
.sg-metric__mark path{ fill:none; stroke:var(--mm-blue-pale); stroke-width:2; }
.sg-metric__mark path.ig-draw{ stroke:var(--mm-accent); }
html.sg-motion .sg-metric__mark path.ig-draw{
  stroke-dasharray:var(--len,140); stroke-dashoffset:calc(var(--len,140) * (1 - var(--p,0)));
  transition:stroke-dashoffset .5s var(--mm-ease);
}
.sg-metric__mark path.ig-draw{ stroke-dashoffset:0; }
.sg-metric__label{ color:var(--mm-muted); max-width:32ch; margin:0; }
@media (prefers-reduced-motion:reduce){ .sg-metric__mark path{ stroke-dashoffset:0 !important; } }

/* ---------------------------------------------------------- 4. BLUR REVEAL */
[data-sg-component="blur-reveal"]{ display:block; }
html.sg-motion [data-sg-component="blur-reveal"]{
  filter:blur(7px); opacity:0; transform:translateY(8px);
  transition:filter .38s var(--mm-ease), opacity .38s var(--mm-ease), transform .38s var(--mm-ease);
}
html.sg-motion [data-sg-component="blur-reveal"].is-in{
  filter:blur(0); opacity:1; transform:none;
}

/* ------------------------------------------------------- 5. CHAPTER PROGRESS */
.sg-chapters{ position:fixed; z-index:60; }
.sg-chapters[data-sg-orient="vertical"]{
  right:22px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:14px;
}
.sg-chapters__rail{ position:relative; width:2px; height:min(46vh,340px); background:var(--mm-line); }
.sg-chapters[data-on-dark]{ --mm-line:var(--line-blue,rgba(255,255,255,.3)); }
.sg-chapters__fill{
  position:absolute; left:-3px; top:0; width:8px; height:8px; background:var(--mm-accent);
  transform:translateY(0); display:block;
}
html.sg-motion .sg-chapters__fill{ transition:transform .18s linear; }
.sg-chapters__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:var(--type-small); }
.sg-chapters__list a{ color:var(--mm-muted); white-space:nowrap; }
.sg-chapters__list li.is-current a{ color:var(--mm-blue); font-weight:700; }
.sg-chapters[data-on-dark] .sg-chapters__list a{ color:rgba(255,255,255,.55); }
.sg-chapters[data-on-dark] .sg-chapters__list li.is-current a{ color:#fff; }
@media (max-width:1080px){ .sg-chapters[data-sg-orient="vertical"]{ display:none; } }
.sg-chapters[data-sg-orient="horizontal"]{
  display:none; left:0; right:0; top:var(--header-h,60px); height:3px; background:var(--mm-line);
}
.sg-chapters[data-sg-orient="horizontal"] .sg-chapters__fill{
  left:0; top:0; width:0; height:3px; transform:none;
}
html.sg-motion .sg-chapters[data-sg-orient="horizontal"] .sg-chapters__fill{ transition:width .12s linear; }
@media (max-width:1080px){ .sg-chapters[data-sg-orient="horizontal"]{ display:block; } }
.sg-chapters[data-sg-orient="horizontal"] .sg-chapters__list{ display:none; }
@media (prefers-reduced-motion:reduce){
  .sg-chapters__fill{ transition:none !important; }
}

/* ------------------------------------------------------------- 6. MEDIA LENS */
.sg-lens{ position:relative; margin:0; overflow:hidden; cursor:zoom-in; }
.sg-lens__img{ display:block; width:100%; height:auto; }
.sg-lens__glass{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background-repeat:no-repeat; clip-path:circle(90px at var(--x,50%) var(--y,50%));
  background-size:160%; background-position:var(--x,50%) var(--y,50%);
  border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(0,60,151,.25);
}
html.sg-motion .sg-lens__glass{ transition:opacity .18s var(--mm-ease); }
.sg-lens.is-active .sg-lens__glass{ opacity:1; }
.sg-lens:focus-visible{ outline:3px solid var(--mm-accent); outline-offset:3px; }
.sg-lens__hint{
  position:absolute; right:14px; bottom:14px; background:rgba(1,33,82,.94); color:#fff;
  font-size:var(--type-small); padding:6px 10px; display:flex; align-items:center; gap:6px;
}
@media (hover:none), (pointer:coarse){ .sg-lens{ cursor:pointer; } .sg-lens__glass{ display:none; } }
@media (prefers-reduced-motion:reduce){ .sg-lens__glass{ transition:none; clip-path:circle(90px at 50% 50%); } }

/* dialog used for tap/keyboard detail view */
.sg-lens-dialog{ border:0; padding:0; max-width:min(92vw,1100px); background:var(--white,#fff); }
.sg-lens-dialog::backdrop{ background:rgba(1,33,82,.72); }
.sg-lens-dialog img{ display:block; width:100%; height:auto; }
.sg-lens-dialog__bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--mm-line); }
.sg-lens-dialog__close{ all:unset; cursor:pointer; padding:6px 10px; font-weight:700; }
.sg-lens-dialog__close:focus-visible{ outline:3px solid var(--mm-accent); }

/* --------------------------------------------------------- 7. BENTO NARRATIVE */
.sg-bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--mm-line); }
.sg-bento > *{ background:var(--white,#fff); padding:clamp(20px,2.4vw,30px); }
.sg-bento .is-ink{ background:var(--mm-blue-ink); color:#fff; }
.sg-bento .is-pale{ background:var(--mm-blue-pale); color:var(--mm-blue-ink); }
.sg-bento__feature{ grid-column:span 7; }
.sg-bento__a{ grid-column:span 5; }
.sg-bento__b{ grid-column:span 4; }
.sg-bento__c{ grid-column:span 4; }
.sg-bento__d{ grid-column:span 4; }
.sg-bento__image{ grid-column:span 5; padding:0 !important; }
.sg-bento__image img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .sg-bento > *{ grid-column:span 6 !important; } }
@media (max-width:620px){ .sg-bento > *{ grid-column:span 12 !important; } }

/* ------------------------------------------------------- 8. SEQUENTIAL LIST */
.sg-seqlist{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--mm-line); border:1px solid var(--mm-line); }
.sg-seqlist > li{ background:var(--white,#fff); display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 20px; align-items:baseline; }
.sg-seqlist__idx{ font-family:var(--font-display); color:var(--mm-muted); font-size:1.1rem; }
html.sg-motion .sg-seqlist > li{ transition:background .22s var(--mm-ease); }
.sg-seqlist > li.is-current,
.sg-seqlist > li:hover,
.sg-seqlist > li:focus-within{ background:var(--mm-blue-pale); }
.sg-seqlist > li.is-current .sg-seqlist__idx,
.sg-seqlist > li:hover .sg-seqlist__idx,
.sg-seqlist > li:focus-within .sg-seqlist__idx{ color:var(--mm-accent); }

/* -------------------------------------------------------------- 9. GLOBE */
.sg-globe-card{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:860px){ .sg-globe-card{ grid-template-columns:1fr; } }
.sg-globe{ position:relative; aspect-ratio:1; max-width:420px; margin:0 auto; }
.sg-globe__svg{ width:100%; height:100%; overflow:visible; }
.sg-globe__sphere{ fill:var(--mm-blue-ink); }
.sg-globe__grat{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1; }
.sg-globe__grat.is-equator{ stroke:rgba(255,255,255,.4); }
.sg-globe__outline{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.25; }
.sg-globe__arc{ fill:none; stroke:var(--mm-accent); stroke-width:1.5; opacity:.85; stroke-dasharray:4 4; }
.sg-globe__marker circle{ fill:var(--mm-accent); r:4.5; }
.sg-globe__marker.is-quiet circle{ fill:#fff; opacity:.7; r:3; }
.sg-globe__marker text{ fill:#fff; font:700 11px/1 var(--font-sans); }
.sg-globe__caption{ text-align:center; color:rgba(255,255,255,.6); font-size:var(--type-small); margin-top:14px; }
html.sg-motion .sg-globe[data-sg-spinning] .sg-globe__spin{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .sg-globe{ --mm-frozen:1; } }