/* ============================================================
   ZENTAVOR — Corporate Data Warehouses page
   - HERO: global glass .fph-* component (blurred app + clip-mask),
     identical to anti-fraud / BI — NO overrides here.
   - WHAT WE BUILD: 4 "rough panel" capability cards (service angle).
   - INSIDE THE WAREHOUSE: a hand-laid SVG lineage graph (.stage) revealed
     under a left→right scan meridian — sources → dbt staging → dbt marts →
     ClickHouse → certified Gold marts → BI. Nodes light by tier (Bronze warn,
     Silver accent-2, Gold accent, certified pos), edges stroke-draw + flow,
     side panel reveals certified marts, query pulse races the lit path.
     Driven by js/dwh.js. The stage is a fixed dark cinematic island (pinned
     to concept-A tokens) so it stays legible/identical across concepts A/B/C.
   Everything scoped to body[data-page="sol-dwh"]; respects prefers-reduced-motion.
   ============================================================ */

/* map local var names onto canon tokens */
body[data-page="sol-dwh"]{
  --f-disp:var(--font-display); --f-mono:var(--font-mono); --f-body:var(--font-body);
  --e:var(--ease); --expo:var(--ease); --spring:var(--ease-spring);
  --muted:var(--text-muted); --faint:var(--text-faint); --cyan:var(--accent-2);
}

/* ============ HERO ============ */
/* phone + flying cards use the global .fph-* component — NOT overridden here. */
body[data-page="sol-dwh"] .dw-hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
@media (max-width:1080px){ body[data-page="sol-dwh"] .dw-hero{grid-template-columns:1fr;gap:34px;} }
body[data-page="sol-dwh"] .dw-hero-copy .stackline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:30px;font-family:var(--f-mono);font-size:11px;color:var(--faint);}
body[data-page="sol-dwh"] .dw-hero-copy .stackline .s{color:var(--muted);}
body[data-page="sol-dwh"] .dw-hero-copy .stackline .sep{width:3px;height:3px;border-radius:50%;background:var(--faint);opacity:.7;}

/* ============ WHAT WE BUILD — rough-panel capabilities ============ */
body[data-page="sol-dwh"] .dw-build{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;}
@media (max-width:1080px){ body[data-page="sol-dwh"] .dw-build{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ body[data-page="sol-dwh"] .dw-build{grid-template-columns:1fr;} }
body[data-page="sol-dwh"] .dw-cap{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px 22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 40%),var(--surface-solid);
  transition:transform .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e);}
body[data-page="sol-dwh"] .dw-cap::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background-image:var(--grain);background-size:140px 140px;opacity:.05;mix-blend-mode:overlay;pointer-events:none;}
body[data-page="sol-dwh"] .dw-cap::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .5s var(--e),opacity .4s var(--e);}
body[data-page="sol-dwh"] .dw-cap:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:0 30px 60px -28px rgba(0,0,0,.7);}
body[data-page="sol-dwh"] .dw-cap:hover::after{transform:scaleX(1);opacity:1;}
body[data-page="sol-dwh"] .dw-cap>*{position:relative;z-index:1;}
body[data-page="sol-dwh"] .dw-cap-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--accent-soft);margin-bottom:16px;}
body[data-page="sol-dwh"] .dw-cap-ic svg{width:22px;height:22px;}
body[data-page="sol-dwh"] .dw-cap h4{font-family:var(--f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--text);margin:0 0 8px;}
body[data-page="sol-dwh"] .dw-cap p{font-family:var(--f-body);font-weight:300;font-size:14px;line-height:1.5;color:var(--muted);margin:0;}
body[data-page="sol-dwh"] .dw-cap-m{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--accent-soft);font-variant-numeric:tabular-nums;}

/* ============ INSIDE THE WAREHOUSE — lineage graph scan-reveal ============ */
/* the stage is a fixed dark cinematic island — pin concept-A tokens so the
   graph + its dark-assuming chrome read identically across concepts A/B/C. */
body[data-page="sol-dwh"] .stage{
  --text:#F0F0F5; --text-muted:#9CA2AE; --text-faint:#6B7280; --border:rgba(255,255,255,.10);
  --accent:#7C3AED; --accent-soft:#A78BFA; --accent-2:#06B6D4; --pos:#10B981; --warn:#F59E0B;
  position:relative; margin-top:46px; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,#0C0C14,#090910);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 40px 80px -50px rgba(0,0,0,.9);}
body[data-page="sol-dwh"] .stage::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.45;mix-blend-mode:overlay;pointer-events:none;z-index:5;}
body[data-page="sol-dwh"] .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(124,58,237,.07),transparent);}

body[data-page="sol-dwh"] .stage-grid{display:grid;grid-template-columns:1fr 280px;gap:0;}
@media (max-width:880px){ body[data-page="sol-dwh"] .stage-grid{grid-template-columns:1fr;} }
body[data-page="sol-dwh"] .canvas{position:relative;min-height:430px;}
body[data-page="sol-dwh"] .canvas svg{display:block;width:100%;height:auto;}
@media (max-width:880px){ body[data-page="sol-dwh"] .canvas{min-height:340px;} }

/* side panel */
body[data-page="sol-dwh"] .side{position:relative;z-index:2;border-left:1px solid var(--border);background:rgba(255,255,255,.018);padding:22px 20px;display:flex;flex-direction:column;gap:14px;}
@media (max-width:880px){ body[data-page="sol-dwh"] .side{border-left:0;border-top:1px solid var(--border);} }
body[data-page="sol-dwh"] .side-h{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
body[data-page="sol-dwh"] .side-title{font-family:var(--f-disp);font-weight:600;font-size:15px;color:var(--text);margin-top:-6px;}
body[data-page="sol-dwh"] .marts{display:flex;flex-direction:column;gap:8px;}
body[data-page="sol-dwh"] .mart{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--expo),transform .5s var(--expo),border-color .5s var(--expo),background .5s var(--expo);}
body[data-page="sol-dwh"] .mart.on{opacity:1;transform:none;}
body[data-page="sol-dwh"] .mart.cert.on{border-color:rgba(16,185,129,.32);background:rgba(16,185,129,.05);}
body[data-page="sol-dwh"] .mart .nm{font-family:var(--f-mono);font-size:13px;color:var(--text);font-weight:500;}
body[data-page="sol-dwh"] .mart .own{font-size:11px;color:var(--text-faint);grid-column:1;font-family:var(--f-body);}
body[data-page="sol-dwh"] .mart .val{font-family:var(--f-mono);font-size:12px;color:var(--accent-2);text-align:right;}
body[data-page="sol-dwh"] .mart .badge{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--pos);}
body[data-page="sol-dwh"] .mart .badge svg{width:13px;height:13px;}
body[data-page="sol-dwh"] .mart .badge svg path{stroke:var(--pos);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;}
body[data-page="sol-dwh"] .mart.on .badge svg path{animation:rfy-drawcheck .55s var(--expo) .15s forwards;}
@keyframes rfy-drawcheck{to{stroke-dashoffset:0;}}
body[data-page="sol-dwh"] .freshness{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--f-mono);font-size:11.5px;color:var(--text-muted);opacity:0;transition:opacity .6s var(--expo);}
body[data-page="sol-dwh"] .freshness.on{opacity:1;}
body[data-page="sol-dwh"] .freshness b{color:var(--text);font-weight:500;}
body[data-page="sol-dwh"] .freshness .ok{color:var(--pos);}

/* readout (query + proof) */
body[data-page="sol-dwh"] .readout{position:relative;z-index:2;border-top:1px solid var(--border);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:16px 22px;background:rgba(255,255,255,.014);}
@media (max-width:680px){ body[data-page="sol-dwh"] .readout{grid-template-columns:1fr;gap:14px;text-align:left;} }
body[data-page="sol-dwh"] .q-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}
body[data-page="sol-dwh"] .q-latency{display:flex;align-items:baseline;gap:10px;font-family:var(--f-mono);}
body[data-page="sol-dwh"] .q-latency .from{color:var(--text-faint);font-size:15px;text-decoration:line-through;text-decoration-color:rgba(245,158,11,.5);}
body[data-page="sol-dwh"] .q-latency .arrow{color:var(--text-faint);font-size:13px;}
body[data-page="sol-dwh"] .q-latency .to{color:var(--pos);font-size:22px;font-weight:500;opacity:0;transform:translateX(-6px);transition:opacity .5s var(--expo),transform .5s var(--expo);}
body[data-page="sol-dwh"] .q-latency.on .to{opacity:1;transform:none;}
body[data-page="sol-dwh"] .proof{display:flex;gap:22px;flex-wrap:wrap;}
@media (max-width:680px){ body[data-page="sol-dwh"] .proof{gap:16px;} }
body[data-page="sol-dwh"] .proof .p{display:flex;flex-direction:column;gap:2px;}
body[data-page="sol-dwh"] .proof .pv{font-family:var(--f-disp);font-weight:600;font-size:clamp(18px,2.4vw,24px);letter-spacing:-.02em;line-height:1;opacity:0;transform:translateY(6px);transition:opacity .5s var(--spring),transform .5s var(--spring);}
body[data-page="sol-dwh"] .proof.on .pv{opacity:1;transform:none;}
body[data-page="sol-dwh"] .proof .p:nth-child(1) .pv{color:var(--accent-soft);}
body[data-page="sol-dwh"] .proof .p:nth-child(2) .pv{color:var(--accent-2);transition-delay:.08s;}
body[data-page="sol-dwh"] .proof .p:nth-child(3) .pv{color:var(--pos);transition-delay:.16s;}
body[data-page="sol-dwh"] .proof .pl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}

/* SVG node + edge styling */
body[data-page="sol-dwh"] .node-g{opacity:.42;transition:opacity .55s var(--expo);}
body[data-page="sol-dwh"] .node-g.on{opacity:1;}
body[data-page="sol-dwh"] .node-box{rx:9;ry:9;fill:#0E0E18;stroke:rgba(255,255,255,.12);stroke-width:1;transition:stroke .55s var(--expo),fill .55s var(--expo);}
body[data-page="sol-dwh"] .node-g.on .node-box{fill:#12121E;}
body[data-page="sol-dwh"] .node-glow{opacity:0;transition:opacity .6s var(--expo);}
body[data-page="sol-dwh"] .node-g.on .node-glow{opacity:1;}
body[data-page="sol-dwh"] .node-label{font-family:var(--f-mono);font-size:11px;fill:var(--text-muted);text-anchor:middle;dominant-baseline:middle;transition:fill .55s var(--expo);}
body[data-page="sol-dwh"] .node-g.on .node-label{fill:var(--text);}
body[data-page="sol-dwh"] .node-sub{font-family:var(--f-mono);font-size:8.5px;fill:var(--text-faint);text-anchor:middle;dominant-baseline:middle;}
body[data-page="sol-dwh"] .node-g.t-bronze.on .node-box{stroke:rgba(245,158,11,.55);}
body[data-page="sol-dwh"] .node-g.t-silver.on .node-box{stroke:rgba(6,182,212,.55);}
body[data-page="sol-dwh"] .node-g.t-gold.on .node-box{stroke:rgba(167,139,250,.6);}
body[data-page="sol-dwh"] .node-g.t-cert.on .node-box{stroke:rgba(16,185,129,.6);}
body[data-page="sol-dwh"] .node-g.t-bi.on .node-box{stroke:rgba(6,182,212,.4);}

/* edges: flowing dashed stroke */
body[data-page="sol-dwh"] .edge{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;stroke-dasharray:6 7;stroke-dashoffset:0;opacity:0;transition:opacity .5s var(--expo);}
body[data-page="sol-dwh"] .edge.on{opacity:1;animation:rfy-flow 1.1s linear infinite;}
@keyframes rfy-flow{to{stroke-dashoffset:-26;}}
body[data-page="sol-dwh"] .edge.t-bronze.on{stroke:rgba(245,158,11,.5);}
body[data-page="sol-dwh"] .edge.t-silver.on{stroke:rgba(6,182,212,.5);}
body[data-page="sol-dwh"] .edge.t-gold.on{stroke:rgba(167,139,250,.55);}
body[data-page="sol-dwh"] .edge.t-cert.on{stroke:rgba(16,185,129,.5);}

body[data-page="sol-dwh"] .col-title{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--text-faint);text-anchor:middle;}
body[data-page="sol-dwh"] .scan-line{stroke:url(#scanGrad);stroke-width:2;opacity:0;}
body[data-page="sol-dwh"] .scan-glow{stroke:url(#scanGrad);stroke-width:22;opacity:0;filter:url(#softBlur);}
body[data-page="sol-dwh"] .pulse-dot{fill:var(--pos);filter:url(#dotGlow);opacity:0;}

/* reduced motion: show resolved frame, no playback */
@media (prefers-reduced-motion:reduce){
  body[data-page="sol-dwh"] .edge.on{animation:none;}
  body[data-page="sol-dwh"] .mart{transition:none;}
  body[data-page="sol-dwh"] .proof .pv,
  body[data-page="sol-dwh"] .q-latency .to{transition:none;}
}