/* Cinder "live flame graph" hero animation. Drop-in component: a .cf-stage element with a canvas.
   Namespaced with cf- to avoid collisions with the site's Tailwind classes. The canvas does the
   drawing (js/cinder-flame.js); this file is the frame, chrome and reduced-motion fallback.
   Used on the R&D grid (rd/index.html, .cf-inset variant) and the Cinder page hero. */
.cf-stage{
  --cf-hot:#fbeecb; --cf-amber:#f0b53c; --cf-orange:#d9772a; --cf-ember:#9a3f22;
  --cf-text:#f6ede0; --cf-text2:rgba(246,231,210,.68); --cf-dim:rgba(240,181,60,.42);
  --cf-line:rgba(240,181,60,.13);
  --cf-sans:"Inter",system-ui,-apple-system,sans-serif;
  --cf-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:radial-gradient(125% 85% at 50% 122%, #451f0f 0%, #1c1310 42%, #0b0a0d 100%);
  border:1px solid var(--cf-line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(14px,2.4vw,26px); display:flex; flex-direction:column;
  font-family:var(--cf-sans); color:var(--cf-text);
}
/* fill a fixed-size parent (the R&D grid's aspect-[16/9] link) instead of setting our own aspect */
.cf-stage.cf-inset{position:absolute; inset:0; aspect-ratio:auto; height:100%; width:100%; border:0; border-radius:inherit; box-shadow:none}
.cf-stage *{box-sizing:border-box}

.cf-tag{position:absolute; top:clamp(12px,2vw,20px); right:clamp(12px,2vw,22px);
  font-family:var(--cf-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cf-dim); text-align:right; line-height:1.5; z-index:2}
.cf-tag b{display:block; color:var(--cf-text); font-size:1.55rem; font-weight:600; letter-spacing:.04em}

.cf-cmd{font-family:var(--cf-mono); font-size:clamp(.72rem,1.5vw,.9rem); color:var(--cf-text2);
  display:flex; align-items:center; gap:.55em; position:relative; z-index:2}
.cf-cmd .p{color:var(--cf-amber)}
.cf-cmd .f{color:var(--cf-text)}
.cf-cur{width:8px;height:1.05em;background:var(--cf-amber);display:inline-block;translate:0 2px;animation:cf-blink 1s steps(1) infinite}
@keyframes cf-blink{50%{opacity:0}}

.cf-canvas{position:relative; z-index:1; display:block; flex:1; width:100%; min-height:0; margin-top:clamp(10px,1.6vw,16px)}

.cf-foot{margin-top:clamp(8px,1.2vw,12px); font-family:var(--cf-mono); font-size:.6rem; letter-spacing:.02em;
  color:var(--cf-dim); display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); position:relative; z-index:2; white-space:nowrap}
.cf-foot b{color:var(--cf-text); font-weight:600}
.cf-foot .cf-leak{color:var(--cf-amber)}
.cf-foot .cf-grow{flex:1}
@media (max-width:520px){ .cf-foot .cf-leak, .cf-foot span:nth-child(2){ display:none } }

/* Reduced motion: js draws a single static frame and stops; hide the blinking caret. */
@media (prefers-reduced-motion:reduce){ .cf-cur{animation:none} }