/* ============================================================
   NetRisk.io — "From data to trust" verification act
   A single persistent stage that MORPHS continuously with scroll:
   one vendor climbs 5 verification levels, AI agents activate,
   source logos fly in, the trust ring fills, a profile assembles.
   ============================================================ */

.tf-stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: 234px 1fr 330px;
  gap: 26px; align-items: center;
  padding: calc(var(--nav-h) + 40px) 40px 92px;
  max-width: 1340px; margin-inline: auto;
}
.tf-ladder { gap: 8px; }

/* level accent that the whole stage tints toward (set by JS) */
.cine-act[data-act="trustflow"] { --lvl: var(--neutral); --lvl-12: rgba(140,138,130,.13); --lvl-20: rgba(140,138,130,.26); }

/* ---------- LEFT: verification ladder ---------- */
.tf-ladder { display: flex; flex-direction: column-reverse; gap: 10px; position: relative; }
.tf-rung {
  display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center;
  padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: rgba(255,255,255,.015);
  opacity: .4; transform: translateX(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s, background .5s;
}
.tf-rung .rg-ico {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--text-3); background: rgba(255,255,255,.03);
  transition: color .5s, border-color .5s, background .5s, box-shadow .5s;
}
.tf-rung .rg-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); transition: color .5s; }
.tf-rung .rg-t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-2); margin-top: 1px; line-height: 1.15; transition: color .5s; }
.tf-rung.reached { opacity: 1; transform: none; border-color: var(--border-2); }
.tf-rung.reached .rg-ico { color: var(--rc); border-color: var(--rc-20); background: var(--rc-12); }
.tf-rung.reached .rg-k { color: var(--rc); }
.tf-rung.reached .rg-t { color: var(--text); }
.tf-rung.current { border-color: var(--rc-20); background: var(--rc-12); box-shadow: 0 0 0 1px var(--rc-20), 0 10px 36px -14px var(--rc-40); }
.tf-rung.current .rg-ico { box-shadow: 0 0 22px -4px var(--rc-40); }
/* per-rung color vars (set inline in HTML) */

/* the rising fill spine behind the ladder */
.tf-spine { position: absolute; left: -16px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.tf-spine i { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(0deg, var(--lvl), var(--lvl)); box-shadow: 0 0 14px var(--lvl); transition: height .25s linear, background .5s; border-radius: 3px; }

/* ---------- CENTER: the trust orb + agents ---------- */
.tf-core { position: relative; aspect-ratio: 1/1; max-width: 460px; width: 100%; margin-inline: auto; display: grid; place-items: center; }

/* trust ring */
.tf-ring { position: absolute; inset: 6%; }
.tf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tf-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 4; }
.tf-ring .ring-fill { fill: none; stroke: var(--lvl); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px var(--lvl)); transition: stroke .5s; }
.tf-ring .ring-tick { stroke: rgba(255,255,255,.14); stroke-width: 2; }

/* orbiting AI agents */
.tf-agent {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 132px; text-align: center; pointer-events: none;
  opacity: .28; filter: grayscale(.6); transition: opacity .5s var(--ease), filter .5s, transform .5s;
}
.tf-agent .ag-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: rgba(19,22,27,.92); box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap;
}
.tf-agent .ag-chip .ag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ai); }
.tf-agent .ag-llm { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--text-3); }
.tf-agent .ag-task { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); line-height: 1.3; }
.tf-agent.on { opacity: 1; filter: none; }
.tf-agent.on .ag-chip { border-color: var(--ai-20); box-shadow: 0 0 26px -8px var(--ai-20), var(--shadow-md); }
.tf-agent.on .ag-chip .ag-dot { box-shadow: 0 0 10px var(--ai); animation: ag-blink 1.1s ease-in-out infinite; }
@keyframes ag-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce){ .tf-agent.on .ag-chip .ag-dot { animation: none; } }

/* vendor logo tile at the very center */
.tf-vendor {
  position: relative; z-index: 3; width: 38%; aspect-ratio: 1/1; border-radius: 24px;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 42% 36%, var(--lvl-12), transparent 64%), var(--elevated);
  border: 1px solid var(--lvl-20); box-shadow: 0 0 70px -18px var(--lvl-20), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .5s, box-shadow .5s;
}
.tf-vendor .vlogo-big {
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #635BFF; background: #fff;
  box-shadow: var(--shadow-md);
}
.tf-vendor .v-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-top: 12px; }
.tf-vendor .v-level {
  margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lvl); display: inline-flex; align-items: center; gap: 7px; transition: color .5s;
}
.tf-vendor .v-level .vl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lvl); box-shadow: 0 0 10px var(--lvl); }
.tf-vendor.pulsing { animation: tf-pulse 2.4s ease-in-out infinite; }
@keyframes tf-pulse { 0%,100%{ box-shadow: 0 0 70px -18px var(--lvl-20), inset 0 1px 0 rgba(255,255,255,.05);} 50%{ box-shadow: 0 0 90px -10px var(--lvl-20), 0 0 0 6px var(--lvl-12), inset 0 1px 0 rgba(255,255,255,.05);} }
@media (prefers-reduced-motion: reduce){ .tf-vendor.pulsing { animation: none; } }

/* source logos flying into the orb */
.tf-source {
  position: absolute; transform: translate(-50%,-50%) scale(.6); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: rgba(19,22,27,.95); box-shadow: var(--shadow-md);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap;
  opacity: 0; transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.tf-source .src-ico { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; flex: none; }
.tf-source.in { opacity: 1; }

/* ---------- RIGHT: assembling trust profile ---------- */
.tf-profile {
  align-self: center;
  background: linear-gradient(180deg, rgba(26,30,37,.94), rgba(15,18,23,.96));
  border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tf-prof-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.tf-prof-head .ph-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: #635BFF; font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.tf-prof-head .ph-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.tf-prof-head .ph-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.tf-prof-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill); color: var(--lvl); border: 1px solid var(--lvl-20); background: var(--lvl-12);
  display: inline-flex; align-items: center; gap: 6px; transition: color .5s, border-color .5s, background .5s;
}
.tf-prof-badge .pb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lvl); }

.tf-prof-score { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); }
.tf-prof-score .ts-num { font-family: var(--font-editorial); font-style: italic; font-size: 46px; line-height: 1; color: var(--lvl); transition: color .5s; min-width: 74px; }
.tf-prof-score .ts-meta { flex: 1; }
.tf-prof-score .ts-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tf-prof-score .ts-bar { height: 7px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); overflow: hidden; margin-top: 8px; }
.tf-prof-score .ts-bar i { display: block; height: 100%; width: 0%; border-radius: var(--r-pill); background: var(--lvl); box-shadow: 0 0 12px var(--lvl); transition: width .25s linear, background .5s; }

.tf-prof-rows { padding: 8px 16px 16px; display: grid; gap: 1px; }
.tf-erow {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tf-erow:last-child { border-bottom: 0; }
.tf-erow.in { opacity: 1; transform: none; }
.tf-erow .er-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--erc); background: var(--erc-12); border: 1px solid var(--erc-20); font-size: 11px; }
.tf-erow .er-t { font-size: 13px; color: var(--text); }
.tf-erow .er-s { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.tf-erow .er-state { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: var(--r-pill); color: var(--erc); border: 1px solid var(--erc-20); background: var(--erc-12); white-space: nowrap; }

/* big level phrase that floats under the orb (the only "copy") */
.tf-phrase {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); text-align: center; z-index: 5; pointer-events: none; width: max-content;
}
.tf-phrase .tp {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 10px); opacity: 0;
  font-family: var(--font-editorial); font-style: italic; font-size: clamp(22px, 3vw, 34px); color: var(--text);
  white-space: nowrap; transition: opacity .5s, transform .5s;
}
.tf-phrase .tp .accent { color: var(--lvl); }
.tf-phrase .tp.on { opacity: 1; transform: translate(-50%, 0); position: relative; }

/* ---------- static / mobile ---------- */
body.cine-static .tf-stage {
  position: relative; inset: auto; grid-template-columns: 1fr; gap: 22px;
  padding: 32px 0; max-width: none;
}
body.cine-static .tf-ladder { flex-direction: column; }
body.cine-static .tf-spine { display: none; }
body.cine-static .tf-agent { position: relative; transform: none; opacity: 1; filter: none; width: auto; left: auto !important; top: auto !important; flex-direction: row; }
body.cine-static .tf-core { max-width: 320px; }
body.cine-static .tf-source { display: none; }
body.cine-static .tf-phrase { position: relative; left: auto; bottom: auto; transform: none; margin: 8px auto 0; }
body.cine-static .tf-phrase .tp { position: relative; opacity: 1; transform: none; left: auto; }
body.cine-static .tf-phrase .tp:not(:last-child) { display: none; }
body.cine-static .tf-erow { opacity: 1; transform: none; }
body.cine-static .tf-agents-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

@media (max-width: 1080px) and (min-width: 761px) {
  .tf-stage { grid-template-columns: 210px 1fr 300px; gap: 18px; padding-inline: 24px; }
}
@media (max-width: 760px) {
  .tf-agent .ag-task { display: none; }
}