/* solana.css — page-specific components for /solana.html only.
   The shell (tokens, type, nav, buttons, cards, terminal, footer, reveal) comes
   from wallie.css. This file adds the escrow-story pieces that live nowhere else,
   built entirely on wallie's tokens so they speak the same visual language.
   Color carries meaning: --acc (green) = money that moved / spendable / paid;
   --lock (purple) = money locked in escrow / a refundable ceiling. */

/* ---- hero proof pill ---- */
.proofline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--mut);
  margin:22px 0 6px;padding:8px 15px;border:1px solid var(--line);border-radius:99px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px)}
.proofline strong{color:var(--acc);font-family:var(--mono);font-weight:600}
.proofline .refund{color:var(--lock)}

/* ---- numbered card label ---- */
.number{display:block;font-family:var(--mono);font-size:12px;color:var(--acc);margin-bottom:13px;letter-spacing:.03em}

/* ---- policy checklist (card 01) ---- */
.checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.checks li{position:relative;padding-left:28px;font-size:14px;line-height:1.5;color:var(--mut)}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:6px;
  background:var(--soft);border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line))}
.checks li::after{content:"✓";position:absolute;left:4px;top:0;color:var(--acc);font-size:12px;font-weight:700;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
html.js .checks li::after{opacity:0;transform:scale(.4)}
.checks li.on{color:var(--ink)}
html.js .checks li.on::after{opacity:1;transform:scale(1)}

/* ---- word-reveal tagline ---- */
.word-reveal{font-family:var(--sans);font-size:clamp(30px,5vw,52px);line-height:1.1;max-width:20ch;
  font-weight:700;letter-spacing:-.035em;margin:0}
.word-reveal .lock{color:var(--lock)}
.word-reveal .go{color:var(--acc)}
html.js .word-reveal span{opacity:.22;transition:opacity .6s var(--ease)}
html.js .word-reveal span.is-visible{opacity:1}

/* ---- money model: green paid vs purple held-in-escrow ---- */
.money{margin-top:22px;padding:26px;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);box-shadow:var(--shadow-sm)}
.money .bar{position:relative;display:flex;height:82px;border-radius:12px;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line);width:100%;transform-origin:left;transition:transform 1s var(--ease)}
html.js .money .bar{transform:scaleX(0)}
html.js .money.on .bar{transform:scaleX(1)}
.money .bar .seg{display:flex;flex-direction:column;justify-content:center;padding:0 18px;font-weight:600;
  font-size:14px;white-space:nowrap;overflow:hidden}
.money .bar .seg small{font-size:12px;font-weight:500;opacity:.9;margin-top:2px}
.seg-paid{flex-basis:30%;background:var(--acc);color:var(--acc-ink)}
.seg-held{flex-basis:70%;background:var(--lock);color:var(--lock-ink);position:relative}
.seg-held::after{content:"";position:absolute;inset:0;transition:opacity .5s var(--ease) .7s;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,
    color-mix(in srgb,#fff 22%,transparent) 9px,color-mix(in srgb,#fff 22%,transparent) 11px)}
html.js .seg-held::after{opacity:0}
.money.on .seg-held::after{opacity:1}
.ret{display:inline-flex;align-items:center;gap:6px}
.money-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 0;font-size:14px;color:var(--mut)}
.money-tags b{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:17px}
.money-tags .is-paid b{color:var(--acc)}
.money-tags .is-refund b{color:var(--lock)}

/* ---- available-balance equation ---- */
.equation{font-family:var(--mono);font-size:clamp(13px,2vw,16px);line-height:2;color:var(--mut);
  margin:24px 0 28px;overflow-wrap:anywhere}
.equation span{display:inline-block;transition:opacity .4s var(--ease),transform .4s var(--ease)}
html.js .equation span{opacity:0;transform:translateY(6px)}
html.js .equation.on span{opacity:1;transform:none}
.equation .lead-term{color:var(--acc);font-weight:600}
.equation .t-spent{color:var(--acc)}
.equation .t-lock{color:var(--lock)}
.equation .op{color:var(--mut)}

/* ---- on-chain proof card ---- */
.proof-card{display:flex;align-items:center;gap:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:30px;margin-top:22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.proof-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(120% 140% at 100% 0,var(--soft),transparent 55%)}
.proof-card>div{position:relative}
.proof-metrics{display:flex;flex-wrap:wrap;gap:12px 30px;margin:14px 0 16px;padding:0;list-style:none}
.proof-metrics div{display:flex;flex-direction:column;gap:4px}
.proof-metrics dt{font-size:13px;color:var(--mut)}
.proof-metrics dd{margin:0;font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.proof-metrics .seller dd{color:var(--acc)}
.proof-metrics .buyer dd{color:var(--lock)}
.finalized{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--acc);
  background:var(--soft);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  border-radius:99px;padding:6px 12px;margin-bottom:4px}
.finalized svg{width:15px;height:15px}
.finalized .tick{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s var(--ease) .2s}
.proof-card.on .finalized .tick{stroke-dashoffset:0}

/* ---- submission videos (dormant until media ships) ---- */
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:22px}
.video-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);box-shadow:var(--shadow-sm)}
.video-card h3{margin-bottom:6px}
.video-card>p{color:var(--mut);font-size:14.5px;min-height:44px;margin-bottom:14px}
.video-card video{display:block;width:100%;height:auto;background:#000;border:1px solid var(--line);border-radius:12px}
.video-links{display:flex;gap:20px;margin:14px 0 0}
.video-links a{font-size:14px;font-weight:600;color:var(--acc)}
.video-links a:hover{text-decoration:underline}

/* ---- responsive ---- */
@media(max-width:860px){
  .video-grid{grid-template-columns:1fr}
  .proof-card{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .money .bar{height:auto;flex-direction:column}
  .money .bar .seg{padding:14px 16px}
  .seg-paid,.seg-held{flex-basis:auto}
}
@media(prefers-reduced-motion:reduce){
  html.js .word-reveal span,html.js .equation span{opacity:1;transform:none}
  html.js .money .bar{transform:none}
  html.js .checks li::after{opacity:1;transform:none}
  html.js .seg-held::after{opacity:1}
  .finalized .tick{stroke-dashoffset:0}
}