/* ============================================================
   airlock · components.css
   Reusable UI: buttons, cards, terminal, tables, animations.
   ============================================================ */

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

/* ---- buttons & link chips ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;padding:15px 26px;border-radius:13px;transition:.28s var(--ease);cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--safe),#19b65c);color:#04210f;box-shadow:0 10px 34px -10px var(--safe-glow)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px var(--safe-glow)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--ink-dim);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.nav-cta{font-family:var(--mono);font-size:.84rem;font-weight:500;padding:9px 17px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(45,214,115,.07);color:var(--ink);transition:.25s var(--ease);white-space:nowrap}
.nav-cta:hover{background:rgba(45,214,115,.16);border-color:var(--safe);transform:translateY(-2px)}
.nav-gh{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-dim);padding:8px 14px;border-radius:10px;border:1px solid var(--line-strong);transition:.25s var(--ease);white-space:nowrap}
.nav-gh:hover{color:var(--ink);border-color:var(--ink-dim);transform:translateY(-2px);background:rgba(255,255,255,.04)}
.foot-gh{display:inline-flex!important;align-items:center;gap:9px;margin-top:16px;font-family:var(--mono);font-size:.85rem;color:var(--ink)!important;padding:10px 16px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(45,214,115,.06);transition:.25s var(--ease);width:max-content}
.foot-gh:hover{border-color:var(--safe);background:rgba(45,214,115,.12);transform:translateY(-2px)}

.hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.76rem;color:var(--ink-dim);padding:8px 16px;border:1px solid var(--line);border-radius:100px;background:rgba(13,19,34,.6);margin-bottom:28px;backdrop-filter:blur(8px)}
.hero-badge b{color:var(--safe);font-weight:600}

/* ---- the animated airlock chamber ---- */
.chamber{position:relative;aspect-ratio:1;max-width:430px;margin:0 auto;width:100%;animation:fadeUp 1.2s var(--ease) .4s both}
.chamber .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-strong)}
.chamber .ring.r1{animation:spin 18s linear infinite;border-style:dashed;border-color:rgba(45,214,115,.35)}
.chamber .ring.r2{inset:13%;animation:spin 26s linear infinite reverse;border-color:rgba(52,214,255,.3)}
.chamber .ring.r3{inset:26%;animation:spin 14s linear infinite;border-color:rgba(155,123,255,.3);border-style:dotted}
@keyframes spin{to{transform:rotate(360deg)}}
.chamber .core{position:absolute;inset:34%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(45,214,115,.3),rgba(13,19,34,.95));border:1px solid var(--line-strong);font-size:2.6rem;box-shadow:0 0 60px -10px var(--safe-glow),inset 0 0 30px rgba(45,214,115,.2);animation:coreGlow 3.5s ease-in-out infinite}
@keyframes coreGlow{0%,100%{box-shadow:0 0 60px -10px var(--safe-glow),inset 0 0 30px rgba(45,214,115,.2)}50%{box-shadow:0 0 90px -6px var(--safe-glow),inset 0 0 44px rgba(45,214,115,.34)}}
.chamber .orbit{position:absolute;inset:0;animation:spin 12s linear infinite}
.chamber .orbit.o2{animation-duration:20s;animation-direction:reverse}
.chamber .node{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);padding:4px 9px;border-radius:7px;background:rgba(13,19,34,.92);border:1px solid var(--line-strong);white-space:nowrap;backdrop-filter:blur(4px)}
.chamber .node.blocked{color:var(--danger);border-color:rgba(255,84,112,.4)}
.chamber .node.allowed{color:var(--safe);border-color:rgba(45,214,115,.4)}
.chamber .orbit.o2 .node{top:auto;bottom:-2px;color:var(--sbx);border-color:rgba(52,214,255,.4)}
.chamber .node span{display:inline-block;animation:counterSpin 12s linear infinite}
.chamber .orbit.o2 .node span{animation-duration:20s;animation-direction:reverse}
@keyframes counterSpin{to{transform:rotate(-360deg)}}

/* ---- terminal ---- */
.terminal{background:linear-gradient(180deg,#0b1220,#080c16);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);font-family:var(--mono)}
.terminal .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.terminal .bar .dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}
.terminal .bar .title{margin-left:8px;font-size:.78rem;color:var(--ink-faint)}
.terminal .body{padding:18px 20px;font-size:.86rem;line-height:1.85;overflow-x:auto}
.terminal .body .cmt{color:var(--ink-faint)}
.terminal .body .prompt{color:var(--safe)}
.terminal .body .cmd{color:var(--ink)}
.terminal .body .ok{color:var(--safe)}
.terminal .body .warn{color:var(--trust)}
.terminal .body .bad{color:var(--danger)}
.terminal .body .cy{color:var(--sbx)}
.terminal .body .dim{color:var(--ink-faint)}
.typing{border-right:2px solid var(--safe);white-space:nowrap;overflow:hidden;display:inline-block;vertical-align:bottom}

/* ---- attack table (problem) ---- */
.attack-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:36px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.attack-table th,.attack-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:.96rem;vertical-align:top}
.attack-table thead th{background:rgba(255,255,255,.025);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
.attack-table tbody tr:last-child td{border-bottom:0}
.attack-table .x{color:var(--danger);font-weight:600}
.attack-table .v{color:var(--safe);font-weight:600}
.attack-table td:first-child{font-weight:600;color:var(--ink)}
.attack-table tbody tr{transition:background .2s}
.attack-table tbody tr:hover{background:rgba(45,214,115,.04)}

/* ---- mode cards ---- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.mode{position:relative;padding:30px 26px;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line);overflow:hidden;transition:.4s var(--ease)}
.mode::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:linear-gradient(180deg,var(--accent,var(--line-strong)),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;transition:opacity .4s}
.mode:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 30px 60px -28px var(--accent-glow)}
.mode:hover::before{opacity:1}
.mode.run{--accent:var(--safe);--accent-glow:var(--safe-glow)}
.mode.dev{--accent:var(--trust);--accent-glow:rgba(255,176,46,.4)}
.mode.sbx{--accent:var(--sbx);--accent-glow:var(--sbx-glow)}
.mode .ribbon{position:absolute;top:18px;right:-34px;transform:rotate(45deg);background:var(--accent);color:#04210f;font-size:.62rem;font-weight:800;letter-spacing:.1em;padding:5px 40px;font-family:var(--mono)}
.mode .m-ico{font-size:2rem;margin-bottom:14px;display:block}
.mode h3{font-size:1.32rem;font-weight:800;margin-bottom:4px}
.mode .m-cmd{font-family:var(--mono);font-size:.82rem;color:var(--accent);margin-bottom:16px}
.mode .m-for{font-size:.92rem;color:var(--ink-dim);margin-bottom:18px;min-height:42px}
.mode ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.mode ul li{font-size:.88rem;color:var(--ink-dim);display:flex;gap:9px;align-items:flex-start}
.mode ul li b{color:var(--ink);font-weight:600}
.mode ul li .k{color:var(--accent);flex-shrink:0;font-family:var(--mono);font-size:.78rem;margin-top:2px}

/* ---- feature grid ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.feat{padding:26px 24px;border-radius:var(--radius);background:rgba(13,19,34,.55);border:1px solid var(--line);transition:.35s var(--ease);position:relative;overflow:hidden}
.feat:hover{transform:translateY(-6px);border-color:var(--line-strong);background:rgba(17,26,46,.7)}
.feat .f-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px;background:linear-gradient(145deg,rgba(45,214,115,.16),rgba(52,214,255,.1));border:1px solid var(--line-strong)}
.feat h4{font-size:1.06rem;font-weight:700;margin-bottom:7px}
.feat p{font-size:.9rem;color:var(--ink-dim)}
.feat p code,.scen-item code,.sec-sub code,.cmd-row code,.panel-card code{font-size:.85em}

/* ---- scenarios ---- */
.scen{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:46px}
.scen-item{display:flex;gap:16px;padding:22px;border-radius:14px;border:1px solid var(--line);background:rgba(13,19,34,.4);transition:.3s var(--ease);align-items:flex-start}
.scen-item:hover{border-color:var(--line-strong);transform:translateX(6px)}
.scen-item .s-ico{font-size:1.5rem;flex-shrink:0}
.scen-item h4{font-size:1.02rem;margin-bottom:4px}
.scen-item p{font-size:.88rem;color:var(--ink-dim)}
.tag{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.7rem;padding:3px 10px;border-radius:6px;border:1px solid var(--line-strong)}
.tag.run{color:var(--safe);background:rgba(45,214,115,.07)}
.tag.dev{color:var(--trust);background:rgba(255,176,46,.07)}
.tag.sbx{color:var(--sbx);background:rgba(52,214,255,.07)}

/* ---- commands table ---- */
.cmd-table{margin-top:46px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cmd-row{display:grid;grid-template-columns:minmax(170px,250px) 1fr;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line);transition:background .2s;align-items:baseline}
.cmd-row:last-child{border-bottom:0}
.cmd-row:hover{background:rgba(45,214,115,.04)}
.cmd-row code{font-family:var(--mono);font-size:.88rem;color:var(--safe);font-weight:500}
.cmd-row .desc{font-size:.92rem;color:var(--ink-dim)}
.cmd-group-label{padding:13px 22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.step{position:relative;padding:30px 26px 26px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(13,19,34,.5)}
.step .num{position:absolute;top:-18px;left:26px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.05rem;color:#04210f;background:linear-gradient(135deg,var(--safe),#19b65c);box-shadow:0 8px 22px -8px var(--safe-glow)}
.step h4{margin:14px 0 8px;font-size:1.12rem}
.step p{font-size:.9rem;color:var(--ink-dim);margin-bottom:12px}
.step code,.codeblock{display:block;font-family:var(--mono);font-size:.8rem;color:var(--sbx);background:#080c16;border:1px solid var(--line);padding:11px 14px;border-radius:9px;overflow-x:auto}
.inline-code{font-family:var(--mono);color:var(--safe)}

/* ---- documented attacks (the news cards) ---- */
.attack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
.atk{display:flex;flex-direction:column;padding:26px 24px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,84,112,.05),rgba(13,19,34,.4));transition:.35s var(--ease);position:relative;overflow:hidden}
.atk:hover{transform:translateY(-6px);border-color:rgba(255,84,112,.4);box-shadow:0 26px 50px -28px var(--danger-glow)}
.atk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.atk-year{font-family:var(--mono);font-size:.72rem;color:var(--danger);border:1px solid rgba(255,84,112,.35);padding:3px 10px;border-radius:6px;background:rgba(255,84,112,.06)}
.atk-impact{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint)}
.atk h4{font-size:1.12rem;font-weight:800;margin-bottom:8px}
.atk h4 code{color:var(--ink);font-size:.92em}
.atk p{font-size:.9rem;color:var(--ink-dim);margin-bottom:18px;flex:1}
.atk-srcs{display:flex;flex-wrap:wrap;gap:8px}
.src-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--ink-dim);border:1px solid var(--line-strong);padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.02);transition:.22s var(--ease)}
.src-pill:hover{color:var(--ink);border-color:var(--safe);background:rgba(45,214,115,.08);transform:translateY(-2px)}
.src-pill::after{content:"↗";opacity:.6;font-size:.8em}
.verified{display:inline-flex;align-items:center;gap:7px;margin-top:34px;font-family:var(--mono);font-size:.78rem;color:var(--safe);border:1px dashed rgba(45,214,115,.4);padding:9px 15px;border-radius:10px;background:rgba(45,214,115,.04)}

/* ---- references list ---- */
.refs{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ref{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 22px;border-bottom:1px solid var(--line);transition:background .2s}
.ref:last-child{border-bottom:0}
.ref:hover{background:rgba(52,214,255,.04)}
.ref .ref-num{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint)}
.ref .ref-title{font-size:.95rem;color:var(--ink)}
.ref .ref-title span{display:block;font-size:.8rem;color:var(--ink-faint);font-family:var(--mono);margin-top:2px}
.ref .ref-src{font-family:var(--mono);font-size:.76rem;color:var(--sbx);white-space:nowrap}
.ref .ref-src::after{content:" ↗";opacity:.6}

/* ---- security split + panels ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
.panel-card{padding:30px 28px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(13,19,34,.5)}
.panel-card.good{border-color:rgba(45,214,115,.3);background:linear-gradient(180deg,rgba(45,214,115,.06),transparent)}
.panel-card.warn{border-color:rgba(255,176,46,.3);background:linear-gradient(180deg,rgba(255,176,46,.06),transparent)}
.panel-card h3{font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.panel-card ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.panel-card li{font-size:.92rem;color:var(--ink-dim);display:flex;gap:11px;align-items:flex-start}
.panel-card li b{color:var(--ink);font-weight:600}
.panel-card.good li::before{content:"✓";color:var(--safe);font-weight:800;flex-shrink:0}
.panel-card.warn li::before{content:"!";color:var(--trust);font-weight:800;flex-shrink:0;width:18px;height:18px;border:1.5px solid var(--trust);border-radius:50%;display:grid;place-items:center;font-size:.72rem}

/* ---- file tree (now with links) ---- */
.tree{font-family:var(--mono);font-size:.86rem;line-height:2.05;color:var(--ink-dim);margin-top:26px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(8,12,22,.7);overflow-x:auto}
.tree .dir{color:var(--sbx);font-weight:600}
.tree a.file{color:var(--ink);border-bottom:1px dotted var(--line-strong);transition:.2s}
.tree a.file:hover{color:var(--safe);border-color:var(--safe)}
.tree .note{color:var(--ink-faint)}

/* ---- cta banner ---- */
.cta-banner{text-align:center;padding:clamp(54px,8vw,90px) 40px;border-radius:28px;background:linear-gradient(135deg,rgba(45,214,115,.1),rgba(52,214,255,.08),rgba(155,123,255,.08));border:1px solid var(--line-strong);position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(45,214,115,.18),transparent 60%)}
.cta-banner>*{position:relative}
.cta-banner h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:18px}
.cta-banner p{color:var(--ink-dim);max-width:54ch;margin:0 auto 30px;font-size:1.08rem}

/* ---- component responsive ---- */
@media (max-width:960px){
  .chamber{max-width:340px;order:-1}
  .modes,.feat-grid,.steps{grid-template-columns:1fr}
  .scen,.split,.attack-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cmd-row{grid-template-columns:1fr;gap:6px}
  .attack-table{font-size:.84rem}
  .attack-table th,.attack-table td{padding:13px 14px}
  .ref{grid-template-columns:auto 1fr;gap:10px}
  .ref .ref-src{grid-column:2;text-align:left}
}