/* demot-dark.css: Pohjavirta. Koko sivu on paperinvaalea; tumma esiintyy vain
   Verifiable AI -ikkunan sisalla mustekehyksessa. 1px-suoni kulkee marginaalissa
   ja solmut syttyvat (#0099FF) kun demo kaynnistyy (demot-scroll.js lisaa .lit).
   Kuri: --pad vain vaakareunuksiin, radius enintaan 2px, ei varjoja,
   vain transform/opacity/stroke-dashoffset animoituu.
   Spec: docs/superpowers/specs/2026-07-21-demosivu-pohjavirta-design.md */

/* ---- sisaltokaista sivutasolle (nykytilassa se elaa .os-workissa) ---- */
main.demot { padding-inline: var(--pad); }
.demot .os-work { padding-inline: calc(var(--ch) * 2); }
.demot .sec.g { padding-inline: 0; }

/* ---- hero ---- */
.demot-intro { max-width: none; min-height: 72svh; display: flex; flex-direction: column;
  justify-content: flex-end; padding-bottom: calc(var(--line) * 2); position: relative; }
.dive-kicker { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  margin-bottom: calc(var(--line) * 1.5); }
.demot-intro h1 { font-size: clamp(2.6rem, 8.5vw, 6.5rem); line-height: .98; }
.demot-intro > p:not(.dive-kicker):not(.virta-count) { max-width: 52ch; }
.virta-count { position: absolute; top: calc(var(--line) * 2); right: 0;
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .08em; color: var(--dim); }
.virta-origin { display: block; margin-top: calc(var(--line) * 1.5); height: 72px; position: relative; }
.virta-origin::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px;
  border-radius: 50%; background: #0099FF; transform: translateX(-3.5px); }
.virta-origin::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 0;
  width: 1px; background: rgba(var(--ink-rgb), .18); }

/* ---- suoni-raili + solmut ---- */
.virta { position: relative; }
@media (min-width: 901px) {
  .virta::before { content: ''; position: absolute; top: 0; bottom: 0;
    left: calc(var(--pad) * -.5); width: 1px; background: rgba(var(--ink-rgb), .12); }
}
.demo, .dive-statement { position: relative; }
.virta-node { display: none; }
@media (min-width: 901px) {
  .virta-node { display: block; position: absolute; top: 9.5rem;
    left: calc(var(--pad) * -.5); width: 9px; height: 9px; border-radius: 50%;
    transform: translateX(-4.5px); border: 1px solid rgba(var(--ink-rgb), .35);
    background: var(--bg); transition: background .4s var(--ease), border-color .4s var(--ease); }
  .demo.lit .virta-node { background: #0099FF; border-color: #0099FF; }
  /* solmupulssi: laajeneva rengas kerran syttyessa */
  .demo.lit .virta-node::after { content: ''; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid #0099FF; animation: virtaring .6s cubic-bezier(.19,1,.22,1) forwards; }
  @keyframes virtaring { from { transform: scale(1); opacity: .5; } to { transform: scale(2.5); opacity: 0; } }
  /* pulssipiste: valopiste laskeutuu suonta pitkin solmuun kerran */
  .demo.lit .virta-node::before { content: ''; position: absolute; left: 3px; top: 3px;
    width: 3px; height: 3px; border-radius: 50%; background: #0099FF;
    animation: virtadrop .8s var(--ease) forwards; }
  @keyframes virtadrop { from { transform: translateY(-90px); opacity: 0; }
    30% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }
}
@media (max-width: 900px) {
  .virta .demo { border-left: 1px solid rgba(var(--ink-rgb), .12); padding-left: calc(var(--ch) * 2); }
}

/* ---- kohtausnumerot ---- */
.virta-scene { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .08em; color: var(--faint); margin-bottom: calc(var(--line) * .5); }

/* ---- tumma ikkuna: 1px mustekehys, ei varjoja, mittapuskuri ---- */
.demo .os { box-shadow: none; }
/* koko graafi nakyy suoraan, ei sisaista vieritysta (Walterin paatos 21.7.) */
.demo[data-demo="tietopohja"] .os { border: 1px solid #141414; border-radius: 2px; }
.demo[data-demo="tietopohja"] { padding-block: calc(var(--line) * 4); }

/* ---- statement + haaroitus ---- */
.dive-statement { min-height: 46vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: var(--line); padding-block: calc(var(--sec) * .4); }
.dive-stmt { font-family: 'Inter Tight', var(--sans); font-weight: 700;
  letter-spacing: -.025em; font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.06; color: var(--ink); max-width: 24ch; margin: 0; }
.virta-branch { width: min(100%, 880px); margin-inline: auto; }
.virta-branch svg { display: block; width: 100%; height: auto; }
.virta-branch path { stroke: rgba(var(--ink-rgb), .25); stroke-width: 1; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.virta-branch.lit path { animation: virtadraw .8s var(--ease) forwards; }
@keyframes virtadraw { to { stroke-dashoffset: 0; } }
.virta-branch circle { fill: var(--bg); stroke: rgba(var(--ink-rgb), .35); stroke-width: 1; }
.virta-branch.lit circle { fill: #0099FF; stroke: #0099FF; transition: fill .4s .6s, stroke .4s .6s; }
.virta-branch-labels { display: flex; justify-content: space-between; width: min(100%, 880px);
  margin: calc(var(--line) * .5) auto 0; }
.virta-branch-labels a { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .08em; color: var(--dim); text-decoration: none; }
.virta-branch-labels a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .virta-branch { display: none; }
  .virta-branch-labels { flex-direction: column; align-items: flex-start;
    gap: calc(var(--ch) * .75); width: auto; margin-top: var(--line); }
}

/* ---- LIVE-piste kaynnissa olevan demon os-barissa: demot-scroll.js lisaa
   spanin kerran ignite()-kutsussa, jottei ruudunlukija lue pseudo-contentia ---- */
.virta-live { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: #0099FF; margin-left: auto; animation: virtalive 2s ease-in-out infinite; }
@keyframes virtalive { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- CTA:n katkoviivasolmu ---- */
.virta-final { display: flex; align-items: center; gap: calc(var(--ch) * 1.5);
  margin-bottom: var(--line); }
.virta-final::before { content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 1px dashed rgba(var(--ink-rgb), .5); flex: none; }
.virta-final span { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .08em; color: var(--dim); }

/* ---- footer-wordmark ---- */
.f-mark { margin-top: calc(var(--line) * 3); }

/* ---- ink-teema: valot yossa ---- */
html[data-mood="ink"] .virta .demo:not([data-demo="tietopohja"]) .os {
  --bg: #F3F3F2; --bg-rgb: 243, 243, 242; --ink: #141414; --ink-rgb: 20, 20, 20;
  --dim: #737373; --faint: #A0A0A0; --hairline: rgba(20, 20, 20, .12);
  --panel: #EAEAE8; --panel-hover: #E1E1DE; --light: #141414;
  --good: #3f6f4e; --warn: #8a6d1f; --crit: #9a3b34;
  --good-bg: rgba(63, 111, 78, .10); --warn-bg: rgba(138, 109, 31, .10); --crit-bg: rgba(154, 59, 52, .10);
}
html[data-mood="ink"] .demo[data-demo="tietopohja"] .os { border-color: rgba(243, 243, 242, .16); }

/* ---- mobiili ---- */
@media (max-width: 720px) {
  .demot-intro { min-height: 58svh; }
  .demot-intro h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .virta-count { position: static; margin-bottom: var(--line); }
}

/* ---- reduced-motion: solmut ja haaroitus valmiiksi piirrettyina ---- */
@media (prefers-reduced-motion: reduce) {
  .virta-branch path { stroke-dashoffset: 0; animation: none; }
  .virta-branch circle { fill: #0099FF; stroke: #0099FF; transition: none; }
  .demo.lit .virta-node::before, .demo.lit .virta-node::after { animation: none; content: none; }
  .virta-live { animation: none; }
}