/* =========================================================
   NB SYSTEM — Terminal Driven Portfolio (CSS)
   Compact · Super Tech · Serious · Responsive
   ========================================================= */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid rgba(122,162,255,.75);outline-offset:3px;border-radius:10px}
::selection{background:rgba(106,227,199,.25)}

/* iOS overflow-x “fantasma” fix */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{position:relative}

/* ---------- TOKENS ---------- */
:root{
  --bg:#070A10;
  --bg2:#0B1020;

  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);
  --border2:rgba(255,255,255,.14);

  --text:#E7EAF2;
  --muted:rgba(231,234,242,.65);
  --muted2:rgba(231,234,242,.5);

  --a:#6AE3C7;
  --b:#7AA2FF;
  --c:#B07CFF;

  --shadow:0 30px 90px rgba(0,0,0,.55);
  --shadow2:0 18px 60px rgba(0,0,0,.4);

  --r:14px;
  --r2:20px;

  --max:1280px;
  --pad:clamp(16px,3.2vw,28px);

  /* safe area */
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
}

/* Wider canvas on large screens */
@media (min-width: 1400px){ :root{ --max: 1360px; } }
@media (min-width: 1700px){ :root{ --max: 1480px; } }
@media (min-width: 1900px){ :root{ --max: 1580px; } }
@media (min-width: 2300px){ :root{ --max: 1680px; } }

/* ---------- BASE ---------- */
body.nb{
  background:
    radial-gradient(900px 500px at 12% 6%, rgba(122,162,255,.14), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(106,227,199,.12), transparent 62%),
    radial-gradient(900px 520px at 50% 95%, rgba(176,124,255,.10), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}

/* optional glow tracking (if you set data-glow on body) */
body[data-glow]::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 340px at var(--mx,50%) var(--my,18%),
      rgba(106,227,199,.12), transparent 65%);
  opacity:.9;
  mix-blend-mode:screen;
  z-index:0;
}

/* ambient grid + noise */
body.nb::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 55% at 50% 20%, #000 40%, transparent 70%);
  opacity:.22;
  z-index:0;
}

/* ---------- LAYOUT ---------- */
.wrap{
  width:min(var(--max), 100%);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
  z-index:1;
  max-width:100%;
}

.skip{
  position:absolute;left:-9999px;top:12px;
  background:#fff;color:#000;
  padding:10px 14px;border-radius:12px;
  z-index:9999;
}
.skip:focus{left:12px}

/* ---------- TOP BAR ---------- */
/* ============================
   TOP NAV — premium glass pills
============================ */
.top{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(9,12,18,.78), rgba(9,12,18,.40));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.top__in{
  min-height: 66px;
  padding-top: calc(0px + var(--safeT));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:0;
}
.brand span{
  letter-spacing:.08em;
  font-weight:800;
  font-size:14px;
  opacity:.95;
  white-space:nowrap;
}

/* pill nav */
.navPills{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  max-width:100%;
}

.navPill{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}

.navPill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.navPill.is-active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}

/* CTA */
.navPill--cta{
  background: rgba(122,162,255,.12);
  border-color: rgba(122,162,255,.20);
  color: rgba(255,255,255,.95);
}
.navPill--cta:hover{
  background: rgba(122,162,255,.16);
  border-color: rgba(122,162,255,.26);
}

/* Mobile */
@media (max-width: 780px){
  .top__in{min-height:58px}
  .navPills{gap: 6px; padding: 6px;}
  .navPill{padding: 9px 10px; font-size: 12px;}
}

/* ---------- HERO / STAGE ---------- */
/* ============================
   HERO — more space + better layout
============================ */
.section.hero,
.stage{
  position:relative;
  padding: clamp(46px, 7vw, 110px) 0 clamp(46px, 8vw, 130px);
  overflow:hidden;
}

/* IMPORTANT: evita overflow del canvas */
.section.hero *{max-width:100%}

.hero__in,
.stage__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 6vw, 96px);
  align-items:start;
  position:relative;
}

/* Extra breathing room on very large screens */
@media (min-width: 1400px){
  .hero__in,
  .stage__grid{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(44px, 5vw, 120px);
  }
}

@media (max-width: 980px){
  .hero__in,
  .stage__grid{
    grid-template-columns:1fr;
    gap: 26px;
  }
  .hero__right{order:2}
}

@media (max-width: 720px){
  .section.hero,
  .stage{
    padding: 34px 0 56px;
  }

  .h1{
    margin: 10px 0 14px;
    line-height: 1.06;
    letter-spacing: -0.01em;
  }

  .lead{margin: 0 0 16px;}

  .heroPoints{gap: 12px;}
  .heroPoint{padding: 12px 12px;}

  .heroCTA{gap: 10px;}
  .heroCTA .btn{width: 100%; justify-content:center;}
}

.hero__left{max-width: 66ch}

/* Better vertical rhythm in the hero */
.h1{margin: 10px 0 18px; line-height: 1.02; letter-spacing: -0.02em;}
.lead{margin: 0 0 20px; line-height: 1.65; max-width: 62ch;}

.eyebrow{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 10px;
}
.grad{
  background:linear-gradient(120deg, var(--a), var(--b), var(--c));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:rgba(231,234,242,.82);
  font-size:13px;
  margin:0 0 14px;
}
.chip__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--a);
  box-shadow:0 0 0 6px rgba(106,227,199,.12);
}

/* Operator hello line spacing */
.section.hero .hello{margin: 14px 0 12px}

/* Hero points */
.heroPoints{
  margin-top: 22px;
  display:grid;
  gap: 14px;
  max-width: 62ch;
}
.heroPoint{
  display:flex;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.heroPoint__k{
  width: 34px;
  opacity: .7;
  letter-spacing: .08em;
}
.heroPoint__v strong{display:block;margin-bottom:2px}

.heroCTA{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}

/* Right panel */
.hero__right{
  position: sticky;
  top: 92px;
  align-self:start;
  max-width: 560px;
  margin-left: auto;
}
@media (max-width: 980px){
  .hero__right{position:relative;top:auto;max-width:100%}
}

/* ============================
   HERO CANVAS (right side)
============================ */
.heroCanvasWrap{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden; /* IMPORTANT: no overflow */
  mask-image: radial-gradient(70% 70% at 78% 40%, #000 45%, transparent 78%);
  opacity:.95;
}
.heroCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter: blur(.2px);
  opacity:.9;
}
.heroCanvasOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(122,162,255,.14), transparent 60%),
    radial-gradient(820px 520px at 92% 55%, rgba(106,227,199,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,10,16,.0), rgba(7,10,16,.28));
  mix-blend-mode: screen;
  opacity:.9;
}

@media (max-width: 980px){
  .heroCanvasWrap{
    opacity:.55;
    mask-image: radial-gradient(80% 70% at 50% 25%, #000 40%, transparent 80%);
  }
}
@media (prefers-reduced-motion: reduce){
  .heroCanvasWrap{display:none;}
}

/* Ultra wide tuning */
@media (min-width: 1600px){
  .heroCanvasWrap{opacity:1}
  .heroCanvasOverlay{
    background:
      radial-gradient(1200px 700px at 75% 35%, rgba(122,162,255,.18), transparent 60%),
      radial-gradient(1000px 600px at 90% 60%, rgba(106,227,199,.14), transparent 65%),
      linear-gradient(180deg, rgba(7,10,16,.0), rgba(7,10,16,.32));
  }
}
@media (min-width: 1800px){
  .section.hero .h1{font-size: clamp(52px, 4.2vw, 72px); line-height: 1.05;}
  .section.hero .lead{font-size: 18px;}
}

/* ---------- PANELS ---------- */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--r2);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.panel__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.16);
}
.tag{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(231,234,242,.62);
}
.sig{
  font-size:12px;
  color:rgba(231,234,242,.5);
}
.panel__body{padding:14px 16px}
.callout{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}
.panel__foot{
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:rgba(231,234,242,.55);
  font-size:13px;
}

/* ---------- TERMINAL ---------- */
.terminal{
  background:#0A0F1B;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r2);
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
  max-width:100%;
}
.terminal::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(900px 340px at 20% 0%, rgba(122,162,255,.12), transparent 55%);
  opacity:.9;
}

.term__bar{
  height:44px;
  display:flex;align-items:center;gap:8px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#070B14;
}
.dot{width:10px;height:10px;border-radius:50%}
.dot--r{background:#ff6b6b}
.dot--y{background:#feca57}
.dot--g{background:#1dd1a1}
.term__title{
  margin-left:auto;
  font-size:12px;
  color:rgba(231,234,242,.55);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:.02em;
}

.term__body{
  padding:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:14px;
  position:relative;
}

.term__out{
  max-height: 260px;
  overflow:auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}
.term__out::-webkit-scrollbar{height:10px;width:10px}
.term__out::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}

.term__line{margin:0 0 8px; color:rgba(231,234,242,.88)}
.term__line.dim{color:rgba(231,234,242,.55)}
.term__prompt{color:var(--a)}
.term__cursor{display:inline-block;transform:translateY(1px);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.term__inputrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.10);
}
.term__input{
  flex:1;
  background:transparent;
  border:0;
  color:rgba(231,234,242,.92);
  outline:none;
  padding:8px 0;
  min-width:0;
}
.term__hint{
  margin-top:12px;
  font-size:13px;
  color:rgba(231,234,242,.55);
}
kbd{
  font-family:ui-monospace, monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}

/* ---------- OUTPUT VIEW (rendered sections) ---------- */
.view{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r2);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.view__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
}
.view__title{font-weight:700;letter-spacing:.2px}
.view__meta{
  font-size:12px;color:rgba(231,234,242,.55);
  font-family:ui-monospace, monospace;
}
.view__body{padding:16px}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){.grid3{grid-template-columns:1fr}}

.card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:16px;
}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:rgba(231,234,242,.75);font-size:14px;line-height:1.55}
.list{margin:0;padding-left:18px;color:rgba(231,234,242,.78)}
.list li{margin:6px 0}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn--p{
  background:linear-gradient(120deg, rgba(106,227,199,.95), rgba(122,162,255,.95));
  color:#071018;
  box-shadow:0 18px 50px rgba(122,162,255,.22);
}
.btn--p:hover{transform:translateY(-1px);box-shadow:0 22px 70px rgba(122,162,255,.28)}
.btn--g{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.10);
  color:rgba(231,234,242,.92);
}
.btn--g:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- FOOTER ---------- */
.footer{
  padding:34px 0 calc(44px + var(--safeB));
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:60px;
}
.footer .wrap{
  display:flex;gap:12px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  color:rgba(231,234,242,.6);
  font-size:13px;
}

/* ---------- SMALL HELPERS ---------- */
.hr{height:1px;background:rgba(255,255,255,.08);margin:14px 0}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:13px;color:rgba(231,234,242,.82);
  margin-top: 6px;
}

/* =========================================================
   BOOT GATE — centered terminal panel
   ========================================================= */
.app[aria-hidden="true"]{display:none}

.boot{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:clamp(16px, 3vw, 28px);
  background:
    radial-gradient(1000px 560px at 18% 12%, rgba(122,162,255,.18), transparent 60%),
    radial-gradient(1000px 620px at 86% 18%, rgba(106,227,199,.14), transparent 62%),
    radial-gradient(900px 620px at 50% 92%, rgba(176,124,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,10,16,.92), rgba(11,16,32,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}
.boot[aria-hidden="true"]{display:none}

.boot__panel{
  width:min(980px, 100%);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0A0F1B;
  box-shadow: 0 50px 180px rgba(0,0,0,.78);
  position:relative;
  max-width:100%;
}

.boot__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(122,162,255,.14), transparent 55%),
    radial-gradient(760px 320px at 86% 10%, rgba(106,227,199,.10), transparent 58%);
  opacity:.9;
}

.boot__bar{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  background:#070B14;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:1;
}
.boot__dots{display:flex;align-items:center;gap:8px}
.boot__dots .dot{width:10px;height:10px;border-radius:50%}
.boot__title{
  margin-left:auto;
  font-size:12px;
  color:rgba(231,234,242,.6);
  letter-spacing:.06em;
  text-transform:lowercase;
}
.boot__skip{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(231,234,242,.86);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.boot__skip:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

.boot__body{
  position:relative;
  z-index:1;
  padding:18px 18px 8px;
  min-height:180px;
  max-height:44vh;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:14px;
  color:rgba(231,234,242,.88);
}
.boot__body::-webkit-scrollbar{height:10px;width:10px}
.boot__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}

.boot__row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px 14px;
  border-top:1px dashed rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.boot__in{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  color:rgba(231,234,242,.92);
  padding:10px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:14px;
}
.boot__cursor{color:rgba(231,234,242,.55);animation:blink 1s steps(1) infinite}

.boot__hint{
  position:relative;
  z-index:1;
  padding:0 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(231,234,242,.55);
  font-size:13px;
}
.boot__hint .pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:12.5px;
}

@media (min-width: 1100px){ .boot__panel{transform:translateY(-2vh)} }
@media (min-width: 1800px){ .boot__panel{ width: min(1120px, 92vw); } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================
   Welcome personalized hello
============================ */
.hello{
  margin: 10px 0 8px;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hello::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.18));
  box-shadow: 0 0 0 4px rgba(74,144,226,.10), 0 0 24px rgba(74,144,226,.25);
}
#helloName{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 800;
}

/* ---------- CONSOLE DOCK SECTION ---------- */
.dock{
  padding: clamp(26px, 4.5vw, 54px) 0;
  padding-bottom: calc(clamp(26px, 4.5vw, 54px) + var(--safeB));
}
.dock .terminal{transform: translateZ(0)}

/* Terminal-driven navigation: show one section at a time */
.section.is-hidden{display:none !important}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{
  opacity:0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
  transition:
    opacity .9s ease,
    transform 1.05s cubic-bezier(.2,.9,.2,1),
    filter 1.05s ease;
  will-change: opacity, transform, filter;
}
.reveal--left{transform: translate3d(-18px, 8px, 0)}
.reveal--right{transform: translate3d(18px, 8px, 0)}
.reveal--up{transform: translate3d(0, 18px, 0)}
.reveal.is-in{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}
.stagger > *{transition-delay: calc(var(--i, 0) * 90ms)}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal--left,.reveal--right,.reveal--up{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

/* =========================================================
   MOBILE KEYBOARD MODE (NO JS NEEDED)
   - trigger when #termIn gets focus (iOS friendly)
   - also supports body.kb-open if you still use it
========================================================= */

@media (max-width: 820px){

  /* trigger: input focus OR kb-open */
  body.nb:has(#termIn:focus) .dock,
  body.nb.kb-open .dock{
    padding: 12px 0;
    padding-bottom: calc(12px + var(--safeB));
  }

  body.nb:has(#termIn:focus) .terminal,
  body.nb.kb-open .terminal{
    border-radius: 16px;
  }

  body.nb:has(#termIn:focus) .term__bar,
  body.nb.kb-open .term__bar{
    height: 38px;
  }

  body.nb:has(#termIn:focus) .term__body,
  body.nb.kb-open .term__body{
    padding: 12px;
    font-size: 13px;
  }

  /* output: smaller but readable */
  body.nb:has(#termIn:focus) .term__out,
  body.nb.kb-open .term__out{
    max-height: 120px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  body.nb:has(#termIn:focus) .term__hint,
  body.nb.kb-open .term__hint{
    display:none;
  }

  /* IMPORTANT: stop horizontal scroll by force on mobile */
  body.nb:has(#termIn:focus),
  body.nb.kb-open{
    overflow-x:hidden;
  }
}
/* Prevent iOS Safari input auto-zoom (handled below in mobile block) */

/* =========================================================
   MOBILE POLISH — console commands spacing + better pills
   - fixes “too close” look in the console commands section
   - improves tappable targets on small screens
========================================================= */
@media (max-width: 820px){

  /* overall dock breathing room */
  .dock{
    padding: 22px 0;
    padding-bottom: calc(22px + var(--safeB));
  }

  /* terminal spacing */
  .terminal{
    border-radius: 18px;
  }
  .term__body{
    padding: 16px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* output rhythm */
  .term__line{ margin: 0 0 10px; }

  /* headings inside terminal blocks */
  .terminal h1,
  .terminal h2,
  .terminal h3{
    margin: 18px 0 10px !important;
    line-height: 1.15;
  }

  /* cards shown in terminal output */
  .terminal .card{
    padding: 18px;
    border-radius: 18px;
  }

  /* pill rows and chips (used for command buttons) */
  .pillrow{
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 16px;
  }

  /* ensure pills wrap and are easy to tap */
  .pill,
  .terminal [data-cmd]{
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 999px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* if pills are anchor tags, make them full tap target */
  .pill a{ display:inline-flex; align-items:center; justify-content:center; }
}

/* =========================================================
   MOBILE KEYBOARD — prevent iOS “zoomed scroll” feel
   - keep layout stable when keyboard opens
   - ensures the section can still be reached after typing
========================================================= */
@media (max-width: 820px){

  /* lock horizontal scrolling during keyboard */
  body.nb:has(#termIn:focus),
  body.nb.kb-open{
    overflow-x: hidden;
  }

  /* reduce layout jump by keeping console visible but not overly tall */
  body.nb:has(#termIn:focus) .term__out,
  body.nb.kb-open .term__out{
    max-height: 110px;
  }

  /* iOS Safari: avoid auto-zoom on focus */
  #termIn,
  #bootIn,
  input,
  textarea,
  select{
    font-size: 16px;
  }
}