/* ============================================================
   MEDIATRIX — NODE BOXES (process page)
   The Process page's boxes re-drawn as Dark Star Labs "node" panels: a
   brand-tinted panel with chamfered corners and a raised tab in the middle
   of the top edge, with a faint four-point star. The panel is drawn by
   ::after, clipped to the same shape (no outline frame). lib/motion/node-boxes.js
   animates them in.
   ============================================================ */

.page .hcard,.page .steps li{
  --c:16px;          /* corner chamfer */
  --t:9px;           /* height of the raised top tab */
  --stroke:0px;      /* no outline frame: the yellow-tinted panel only */
  --frame:polygon(0 calc(var(--t) + var(--c)),var(--c) var(--t),30% var(--t),calc(30% + var(--t)) 0,
    calc(70% - var(--t)) 0,70% var(--t),calc(100% - var(--c)) var(--t),100% calc(var(--t) + var(--c)),
    100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)));
  position:relative;isolation:isolate;
  background:none;
  box-shadow:none;
  clip-path:var(--frame);
  transition:background .4s var(--ease-out),transform .45s var(--ease-out);
}
.page .hcard::after,.page .steps li::after{
  content:"";position:absolute;inset:var(--stroke);z-index:-1;
  clip-path:var(--frame);
  background:
    /* faint star, bottom right */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4C21 15 25 19 36 20C25 21 21 25 20 36C19 25 15 21 4 20C15 19 19 15 20 4Z' fill='%23FFC300' fill-opacity='.22'/%3E%3C/svg%3E") no-repeat right 14px bottom 14px/26px 26px,
    /* the sweep of light that crosses on hover */
    linear-gradient(105deg,transparent 35%,rgba(255,213,77,.16) 50%,transparent 65%) no-repeat -160% 0/60% 100%,
    linear-gradient(180deg,rgba(255,195,0,.13) 0%,rgba(255,195,0,.04) 55%,rgba(255,195,0,.09) 100%),
    #110f09;
  transition:background-position .9s var(--ease-out),filter .4s var(--ease-out);
}
.page .hcard > *,.page .steps li > *{position:relative}
.page .hcard__bar{display:none}

.page .hcard{padding:calc(28px + var(--t)) 24px 30px}
.page .hcard__no{font-size:.6875rem;letter-spacing:0}
.page .hcard__name{word-spacing:.12em}

/* hover: panel warms, light sweeps across, box lifts */
.page .hcard:hover,.page .steps li:hover{transform:translateY(-6px)}
.page .hcard:hover::after,.page .steps li:hover::after{filter:brightness(1.35)}
.page .hcard:hover::after,.page .steps li:hover::after{background-position:right 14px bottom 14px,260% 0,0 0,0 0}

/* the Neuro Loop list: one slim node per step */
.page .steps{gap:12px}
.page ol.steps > li{
  --c:12px;--t:6px;
  padding:calc(16px + var(--t)) 46px 16px 22px;border-bottom:0;align-items:center;
}
.page .steps li::after{background-size:20px 20px,60% 100%,auto,auto;background-position:right 12px center,-160% 0,0 0,0 0}
.page .steps li:hover::after{background-position:right 12px center,260% 0,0 0,0 0}
.page .steps li:hover{transform:translateX(8px)}

@media (prefers-reduced-motion:reduce){
  .page .hcard,.page .steps li,.page .hcard::after,.page .steps li::after{transition:none}
  .page .hcard:hover,.page .steps li:hover{transform:none}
}