/* ═══════════════════════════════════════════════════════════════════════
   DedNets homepage: shared primitives for the animated scenes (scenes.js).
   A scene's own look lives in its component (src/components/scenes/*.astro)
   under its own class prefix; only reusable pieces belong here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stage ──────────────────────────────────────────────────── */
.sc-stage{position:relative;isolation:isolate;background:rgba(255,255,255,.94);border:1px solid #ded8eb;border-radius:18px;box-shadow:0 32px 80px rgba(57,37,91,.16),0 2px 8px rgba(57,37,91,.07);overflow:hidden;font-size:12px;color:#171329}
.sc-stage .sc-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #eeeaf4;background:#faf9fc}
.sc-stage .sc-bar>span{width:8px;height:8px;border-radius:50%;background:#dad5e1}
.sc-stage .sc-bar small{margin-left:8px;color:#948e9f;font-family:var(--font-mono);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-body{position:relative;min-height:300px;background:radial-gradient(circle at 50% 45%,rgba(118,87,246,.09),transparent 45%)}

/* Step visibility. Markup is authored on the last step (is-on already set),
   so without JS or with reduced motion that frame is what shows. */
.sc-stage [data-steps]{transition:opacity .45s var(--ease-glass,ease),transform .45s var(--ease-glass,ease)}
.sc-stage [data-steps]:not(.is-on){opacity:0;pointer-events:none}
.sc-stage.is-live .sc-rise[data-steps]:not(.is-on){transform:translateY(10px)}
.sc-stage.is-live .sc-pop[data-steps]:not(.is-on){transform:scale(.6)}

/* A raised element: the actor of the current beat. */
.sc-stage [data-focus]{transition:transform .45s var(--ease-glass,ease),box-shadow .45s}
.sc-stage.is-live [data-focus].is-focus{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 40px rgba(57,37,91,.18)}

/* A press: a ripple on the element. */
.sc-stage [data-tap]{position:relative}
.sc-stage [data-tap].is-tap{transform:scale(.96)}
.sc-stage [data-tap].is-tap::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(118,87,246,.35);animation:sc-tap .7s ease-out forwards;pointer-events:none}
@keyframes sc-tap{from{transform:scale(.3);opacity:.7}to{transform:scale(1.9);opacity:0}}

/* ── Nodes, chips, pills ────────────────────────────────────── */
.sc-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:96px;min-height:70px;padding:8px 6px;text-align:center;background:#fff;border:1px solid #e5dfed;border-radius:12px;box-shadow:0 8px 20px rgba(45,30,75,.08)}
.sc-node svg{width:20px;height:20px;color:#8061ec;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-node strong{font-size:11px;line-height:1.2}
.sc-node small{font-size:9px;color:#9992a4}
.sc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;border:1px solid #e1dbec;background:#fff;font-family:var(--font-mono);font-size:10px;color:#4a4458;white-space:nowrap}
.sc-chip.is-free{border-style:dashed;color:#6543e8;border-color:#c9bdf5}
.sc-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.sc-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sc-ok{color:#11845b;background:#e6f7ef}
.sc-warn{color:#a35d00;background:#fff3dc}
.sc-bad{color:#c22f43;background:#fde9ec}
.sc-muted{color:#6e687a;background:#f1eff5}
.sc-mono{font-family:var(--font-mono)}

/* A toast: a notification arriving (phone push, Console feed). */
.sc-toast{position:absolute;display:flex;align-items:center;gap:10px;max-width:250px;padding:10px 12px;background:#fff;border:1px solid #e5dfed;border-radius:12px;box-shadow:0 15px 40px rgba(55,35,90,.16)}
.sc-toast strong,.sc-toast small{display:block}
.sc-toast strong{font-size:11px}
.sc-toast small{font-size:9px;color:#8c8597;margin-top:2px}

/* ── Wires and packets ──────────────────────────────────────── */
.sc-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sc-wires .sc-track{fill:none;stroke:#e6e0f0;stroke-width:2}
.sc-wires .sc-flow{fill:none;stroke:#8b6cf6;stroke-width:2;stroke-dasharray:6 10;animation:sc-dash 1.4s linear infinite}
.sc-wires .sc-flow.is-bad{stroke:#e0566a}
@keyframes sc-dash{to{stroke-dashoffset:-32}}

/* ── Caption pile: the story, one line per step ─────────────── */
.sc-caps{position:relative;height:96px;overflow:hidden;border-top:1px solid #eeeaf4;background:#fcfbfe}
.sc-cap{position:absolute;left:16px;right:56px;bottom:14px;display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.35;color:#171329;transition:transform .5s var(--ease-glass,ease),opacity .5s}
.sc-cap i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(118,87,246,.1);color:#6543e8;font-style:normal;font-size:11px;font-weight:700}
/* --d: 0 is the current line, 1..2 the ones before it, <0 not yet. */
.sc-cap{transform:translateY(calc(var(--d,0) * -28px));opacity:calc(1 - var(--d,0) * .38)}
.sc-cap[data-d^="-"]{transform:translateY(28px);opacity:0}
.sc-cap[data-d="0"]{font-weight:600}
.sc-cap:not([data-d="0"]){font-size:12px;color:#6e687a}
.sc-cap:not([data-d="0"]) i{background:#f1eff5;color:#8e899b}

/* ── Pause button ───────────────────────────────────────────── */
.sc-pause{position:absolute;right:12px;bottom:12px;z-index:5;width:32px;height:32px;display:grid;place-items:center;border:1px solid #e1dbec;border-radius:50%;background:#fff;color:#625d71;cursor:pointer;box-shadow:0 4px 12px rgba(40,27,70,.08)}
.sc-pause[hidden]{display:none}
.sc-pause:hover{color:#171329}
.sc-pause:focus-visible{outline:3px solid rgba(118,87,246,.3);outline-offset:2px}
.sc-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sc-pause .i-play{display:none}
.sc-stage.is-paused .sc-pause .i-play{display:block;fill:currentColor}
.sc-stage.is-paused .sc-pause .i-pause{display:none}
.sc-stage.is-paused *{animation-play-state:paused!important}

/* ── Monitoring trio (Uptime, Watchdog and Signals scenes) ─── */
.mon-body{min-height:290px}
.mon-card{position:absolute;left:12px;right:12px;top:12px;padding:10px 12px 9px;background:#fff;border:1px solid #e5dfed;border-radius:14px;box-shadow:0 10px 26px rgba(45,30,75,.08)}
.mon-head{display:flex;align-items:center;gap:9px}
.mon-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#7657f6,#a855f7)}
.mon-ico svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mon-id{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.mon-id strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-id small{font-size:9px;color:#9992a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-stack{display:grid;justify-items:end;align-items:center;flex:none}
.mon-stack>*{grid-area:1/1}
.mon-strip{position:relative;display:flex;gap:2px;height:16px;margin-top:10px}
.mon-strip i{flex:1;border-radius:3px;background:#2fbf7c;transition:background-color .45s}
.mon-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:9px;color:#8e899b;white-space:nowrap}
.mon-meta>span:first-child{overflow:hidden;text-overflow:ellipsis}
.mon-meta .mon-stack{font-weight:700;color:#4a4458}
.mon-lane{position:absolute;left:12px;right:12px;top:120px;display:flex;align-items:center}
.mon-node{flex:none;display:flex;align-items:center;gap:6px;padding:6px 9px;background:#fff;border:1px solid #e5dfed;border-radius:10px;box-shadow:0 6px 16px rgba(45,30,75,.07);font-size:10px;font-weight:700;white-space:nowrap;transition:opacity .45s,transform .45s,box-shadow .45s}
.mon-node .sc-mono{font-weight:400}
.mon-node svg{width:13px;height:13px;fill:none;stroke:#8061ec;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mon-wire{position:relative;flex:1;min-width:24px;height:2px;margin:0 6px;background:#e6e0f0;border-radius:2px}
.mon-pkt{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#8b6cf6;box-shadow:0 0 0 3px rgba(139,108,246,.2);opacity:0}
@keyframes mon-run{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.mon-result{position:absolute;left:14px;right:14px;top:160px;display:grid}
.mon-result>*{grid-area:1/1;display:flex;align-items:center;gap:6px;min-width:0;font-size:9.5px;color:#4a4458;white-space:nowrap}
.mon-result .sc-mono{overflow:hidden;text-overflow:ellipsis}
.mon-result small{font-size:9px;color:#8e899b}
.mon-result .sc-pill{flex:none;padding:2px 7px;font-size:9px}
.mon-bad-t{color:#c22f43!important}
.mon-warn-t{color:#a35d00!important}
.mon-alert{position:absolute;left:12px;right:12px;top:186px;display:grid}
.mon-alert>*{grid-area:1/1}
.mon-row{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;background:#fff;border:1px solid #e5dfed;border-left:3px solid #c22f43;border-radius:10px;box-shadow:0 6px 16px rgba(45,30,75,.06);font-size:10px}
.mon-row.is-done{border-left-color:#b9b3c4}
.mon-row b{min-width:0;margin-right:auto;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-row small{flex:none;font-size:9px;color:#8e899b;white-space:nowrap}
.mon-row .sc-pill{flex:none;padding:2px 7px;font-size:9px}
.mon-toast{left:12px;right:12px;bottom:12px;max-width:none;z-index:4}
.mon-toast>span:last-child{min-width:0}
.mon-toast strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-toast-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fde9ec}
.mon-toast-ico svg{width:14px;height:14px;fill:none;stroke:#c22f43;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mon-toast.is-ok .mon-toast-ico{background:#e6f7ef}
.mon-toast.is-ok .mon-toast-ico svg{stroke:#11845b}
.mon-stage .sc-cap{font-size:12px}
.mon-stage .sc-cap:not([data-d="0"]){font-size:11px}
@media (max-width:520px){
  .mon-body{min-height:290px}
}

/* ── Feature row: copy beside a scene (alternating with .flip) ─ */
.feature-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.feature-row+.feature-row{margin-top:96px}
.feature-row.flip>:first-child{order:2}
.feature-row h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 18px}
.feature-row p{color:#625d71;font-size:16px;line-height:1.7;margin:0 0 20px}
.feature-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.feature-trio h3{font-size:18px;margin:18px 0 6px}
.feature-trio p{color:#625d71;font-size:14px;line-height:1.6;margin:0}

@media (max-width:920px){
  .feature-row{grid-template-columns:1fr;gap:32px}
  .feature-row.flip>:first-child{order:0}
  .feature-trio{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sc-body{min-height:280px}
  .sc-node{width:78px;min-height:62px}
  .sc-cap{font-size:12px;left:12px;right:52px}
  /* Captions wrap on a phone, so only the current one stays in the pile. */
  .sc-cap:not([data-d="0"]){opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .sc-stage *,.sc-stage *::after{animation:none!important;transition:none!important}
}