/* =============================================================
   NxTGen DeCrypt — animated brand mark  (logic: /js/brand.js)

   The approved logo raster is cut into three aligned layers (icon,
   wordmark, tagline) that reassemble pixel-for-pixel inside .bm-stage.
   Nothing is redrawn or re-typeset.

   --p  (0 → 1) is set by brand.js from the scroll position (0 → 80px)
        on each .bm, so everything below is scroll-synchronised and
        reverses by itself on the way back up. Only transform/opacity
        depend on it, so the per-frame work stays on the compositor.
   .is-compact is a hysteresis flag (no flicker) used for the few
        non-continuous changes.
   ============================================================= */
.bm{
  --h:38px; --p:0;
  position:relative; display:block; flex:none;
  height:var(--h); width:calc(var(--h) * 1119 / 395);
  overflow:hidden;
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.bm-stage{
  position:absolute; left:0; top:0;
  width:calc(var(--h) * 1119 / 395); height:var(--h);
  transform-origin:0 50%;
  transform:scale(calc(1 - .14 * var(--p)));
}
.bm-p{ position:absolute; display:block; }
.bm .bm-p img{ display:block; width:100%; height:100%; max-width:none; border-radius:0; }

/* layer geometry = crop boxes of the source logo (1119 x 395) */
.bm-word{ left:0; top:0;      width:100%; height:88.10%; }
.bm-tag { left:0; top:91.39%; width:100%; height:8.61%; }

/* compact: tagline fades, wordmark re-centres in the box, a faint gold glow rises */
.bm-tag { opacity:calc(1 - 2.4 * var(--p)); transform:translateY(calc(var(--p) * -4px)); }
.bm-word{ transform:translateY(calc(var(--p) * 6.75%)); }
.bm-glow{
  position:absolute; left:-8%; top:-12%; width:76%; height:124%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(240,180,41,.16), rgba(240,180,41,0));
  opacity:calc(var(--p) * .85);
}

/* ---- initial reveal: wordmark, then tagline (~0.8s total) ---- */
@keyframes bm-word-in{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
@keyframes bm-tag-in { from{ opacity:0; transform:translateY(6px); }  to{ opacity:1; transform:none; } }
.bm-word img{ animation:bm-word-in .6s cubic-bezier(.2,.7,.2,1) backwards; }
.bm-tag  img{ animation:bm-tag-in  .52s cubic-bezier(.2,.7,.2,1) .28s backwards; }
.bm[data-still] .bm-p img{ animation:none; }

/* ---- gold highlight: a soft light band masked to the gold lettering ---- */
.bm-sheen{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  -webkit-mask:url(/assets/brand/gold.png) center / 100% 100% no-repeat; mask:url(/assets/brand/gold.png) center / 100% 100% no-repeat;
}
.bm-sheen::before{
  content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,243,200,.85) 50%, transparent 70%);
}
@keyframes bm-sweep{ to{ transform:translateX(130%); } }
.bm.sheen .bm-sheen::before{ animation:bm-sweep .95s cubic-bezier(.4,0,.2,1) both; }

/* ---- sizes per context ---- */
.nav .bm{ --h:44px; }
.brand-block .bm{ --h:56px; }
.brand{ display:inline-flex; align-items:center; }
.nav.scrolled{ border-bottom-color:rgba(240,180,41,.20); }

/* ---- phones ---- */
@media (max-width:768px){ .brand-block .bm{ --h:38px; } }
@media (max-width:420px){
  .nav .bm{ --h:34px; }
  .brand-block .bm{ --h:34px; }
}
@media (max-width:360px){
  .nav .bm{ --h:21px; }                     /* keeps the landing CTA on one line at 320px */
  .brand-block .bm{ --h:30px; }
}

/* ---- compact sticky dock for the desktop terminal pages (header scrolls away there) ---- */
.brand-dock{
  position:fixed; top:0; left:0; right:0; z-index:55;
  background:rgba(8,9,10,.9); border-bottom:1px solid rgba(240,180,41,.20);
  visibility:hidden; opacity:0; transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s linear .3s;
}
.brand-dock.show{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.brand-dock-in{
  max-width:var(--content-max, 1600px); margin:0 auto; height:48px;
  padding:0 var(--edge-pad, 28px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand-dock a.brand-dock-link{ display:inline-flex; align-items:center; border-radius:6px; }
.brand-dock .bm{ --h:36px; }
.brand-dock-page{
  font:600 11.5px/1 var(--mono, ui-monospace, monospace); letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim, #8b949c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:769px){ .brand-dock{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } }
@media (max-width:768px){ .brand-dock{ display:none; } }

/* ---- reduced motion: no reveal, sweeps or transitions; compact state still switches (instantly) ---- */
@media (prefers-reduced-motion:reduce){
  .bm, .bm *, .brand-dock{ animation:none !important; transition:none !important; }
  .bm-sheen{ display:none; }
}