/* Cell-morph hero for /whats-new/, /docs/, /learn/ (same look as .cm-hero on /community/: 8px cells, green + violet, shapes morph; community-hero.js + hero-shapes.js)
   + home-style heading reveal for article headings (hero-cells.js). Tokens only. */
.hc-canvas{position:absolute;right:0;top:0;width:68%;height:100%;display:block;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.hc-hero{padding:56px 0 52px}
.hc-hero::after{display:none}
.hc-hero h1{max-width:18ch;font-size:clamp(32px,4.8vw,56px)}
.hc-hero .tp-lede{max-width:52ch}
.hc-hero .container{z-index:2}
.hc-live{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.hc-live i{width:8px;height:8px;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 0 0 rgba(var(--glow),.6)}
@media (max-width:860px){.hc-canvas{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 90%);mask-image:linear-gradient(90deg,transparent,#000 90%)}.hc-hero{padding:40px 0 36px}}
@keyframes hc-pulse{70%{box-shadow:0 0 0 9px rgba(var(--glow),0)}100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
@keyframes hc-show{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hc-live i{animation:hc-pulse 2s infinite}
  /* headings: the home page's tabs-heading reveal (22px rise, .8s/.9s, observed at 40%, 40s no-stall fallback); class added by hero-cells.js, so no-JS shows everything */
  .js .hc-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease,ease),transform .9s var(--ease,ease)}
  .js .hc-rv:not(.in){animation:hc-show 0s 40s forwards}
  .js .hc-rv.in{opacity:1;transform:none}
}
/* 404: the cell canvas sits behind the existing layout (hc-bg); the hero's own padding / h1 caps are not applied. */
.hc-hero.hc-bg .hc-canvas{opacity:.35;width:70%}
.hc-hero.hc-bg h1{max-width:none;font-size:clamp(30px,4.4vw,52px)}
.hc-hero.hc-bg{padding:40px 0 90px}
.hc-hero.hc-bg .nf-grid{position:relative;z-index:2}