/* ============================================================
   ARCHITECTURE — storage paradigms, decoded
   Two lineages (warehouse + lake/delta) converging into a lakehouse.
   Mirrors the hero viz technique: fixed-ratio scene, absolute nodes,
   animated SVG flow beneath. Collapses to a vertical stack on mobile.
   ============================================================ */

.arch-lead{ max-width:760px; margin:-10px 0 0; color:var(--fg-mute);
  font-size:clamp(15px,1.25vw,17px); line-height:1.7; }
.arch-lead b{ color:var(--fg); font-weight:600; }
.arch-lead .amber{ color:var(--amber); font-weight:600; }

.arch{ margin-top:clamp(36px,5vw,68px); }
.arch-scene{ position:relative; width:100%; aspect-ratio:1100/620; }
.arch-cap{ margin-top:26px; font-family:var(--mono); font-size:12px; color:var(--fg-dim); letter-spacing:.04em; }

/* ---- animated flow layer ---- */
.arch-flow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.arch-flow .fb{ fill:none; stroke:color-mix(in oklab, var(--accent) 22%, transparent); stroke-width:1.4; }
.arch-flow .fb.warm{ stroke:color-mix(in oklab, var(--amber) 26%, transparent); }
.arch-flow .fd{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:2 12; stroke-linecap:round;
  animation:flowdash .9s linear infinite; filter:drop-shadow(0 0 3px var(--accent)); }
.arch-flow .fd.warm{ stroke:var(--amber); filter:drop-shadow(0 0 3px var(--amber)); }
.arch-flow .pkt{ fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent)); }
.arch-flow .pkt.warm{ fill:var(--amber); filter:drop-shadow(0 0 5px var(--amber)); }
.arch-flow .al{ fill:var(--fg-dim); font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
body.reduce .arch-flow .fd{ animation:none; }

/* ---- node card ---- */
.an{ position:absolute; z-index:2; transform:translate(-50%,-50%); width:21%;
  border:1px solid var(--line-2); border-radius:10px; padding:15px 16px 16px;
  background:linear-gradient(180deg, rgba(14,18,19,.95), rgba(11,14,15,.97)); backdrop-filter:blur(7px);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.9);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 11px, transparent 11px 22px); }
.an-h{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-mute); }
.an-h .ic{ width:15px; height:15px; color:var(--teal); flex-shrink:0; }
.an-tag{ display:inline-block; margin-top:11px; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--line); border-radius:2px; padding:3px 7px; }
.an-name{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em; line-height:1; font-size:clamp(17px,1.5vw,21px); margin-top:11px; }
.an-def{ font-size:12.5px; line-height:1.5; color:var(--fg-mute); margin-top:9px; }
.an-best{ font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--fg-dim); margin-top:10px; }
.an-best b{ color:var(--teal); font-weight:500; }
.an-tech{ display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.an-tech span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; color:var(--teal);
  border:1px solid color-mix(in oklab, var(--teal) 30%, transparent); padding:2px 7px; border-radius:2px;
  background:color-mix(in oklab, var(--teal) 7%, transparent); }

/* compact entry / exit rails */
.an.slim{ padding:14px 14px 15px; }
.an .an-rows{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.an .an-rows .r{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg); }
.an .an-rows .r .ri{ width:15px; height:15px; color:var(--fg-mute); flex-shrink:0; }

/* warehouse = the structured/governed lineage → amber */
.an.warm .an-h .ic{ color:var(--amber); }
.an.warm .an-tech span{ color:var(--amber); border-color:color-mix(in oklab, var(--amber) 32%, transparent);
  background:color-mix(in oklab, var(--amber) 7%, transparent); }
.an.warm .an-best b{ color:var(--amber); }

/* lakehouse = the convergence → highlighted */
.an.hl{ border-color:color-mix(in oklab, var(--accent) 50%, transparent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 20%,transparent), 0 26px 64px -22px color-mix(in oklab,var(--accent) 42%,transparent); }
.an.hl::after{ content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%); }
.an.hl .an-h{ color:var(--teal); }
.an-eq{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-family:var(--mono); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal); }
.an-eq b{ color:var(--amber); font-weight:500; }
.an-medallion{ display:flex; gap:6px; margin-top:12px; }
.an-medallion span{ flex:1; text-align:center; font-family:var(--mono); font-size:8.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--line); border-radius:2px; padding:4px 2px; }
.an-medallion span.g{ color:var(--teal); border-color:color-mix(in oklab,var(--teal) 30%,transparent); }

/* desktop node placement (left/top are CENTERS via translate -50%,-50%) */
.a-ingest{    left:8%;  top:50%; width:15%; }
.a-warehouse{ left:34%; top:18%; width:21%; }
.a-lake{      left:31%; top:82%; width:19%; }
.a-delta{     left:53%; top:82%; width:19%; }
.a-lakehouse{ left:78%; top:50%; width:21%; }
.a-consume{   left:94.5%; top:50%; width:11%; }

/* reveal — preserve centering transform (matches hero .viz-card approach) */
.an[data-reveal]{ opacity:0; transform:translate(-50%,-50%); transition:opacity .85s cubic-bezier(.16,1,.3,1); }
.an[data-reveal].in{ opacity:1; transform:translate(-50%,-50%); }
body.reduce .an[data-reveal]{ opacity:1 !important; transform:translate(-50%,-50%) !important; }

/* ---- mobile: collapse to a readable vertical stack ---- */
@media (max-width:920px){
  .arch-scene{ aspect-ratio:auto; display:flex; flex-direction:column; gap:13px; }
  .arch-flow{ display:none; }
  .an{ position:static; transform:none !important; width:auto !important; }
  .an[data-reveal]{ transform:translateY(22px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
  .an[data-reveal].in{ transform:none; }
  body.reduce .an[data-reveal]{ transform:none !important; }
  .an::before{ content:"↓"; display:block; text-align:center; color:var(--fg-dim);
    font-family:var(--mono); font-size:13px; margin:-9px 0 9px; }
  .a-ingest::before{ content:none; }
}