/* ============================================================
   heat.css — the thermal texture layer (decided 2026-10-12 in the palette lab).
   Works with heat.js, which adds the class "th" to <html>. Without JS nothing
   here applies and the site is plainly flat.

   RULE (founder): no soft glows or gradients in decoration. Heat is drawn the
   way a thermal sensor draws it: low resolution, hard-edged square blocks of
   flat colour.
   ============================================================ */

/* ---------- film grain, printed on each surface so it scrolls with it ----------
   --gtile / --ftile / --gsize are generated by heat.js (grain strength 20). */
:root.th body{background-image:var(--gtile);background-size:var(--gsize)}
:root.th :is(.titlebar,.panel,.win,.aud,.heat,.consult,.aud-note,.buf,.nl,.tier,.su-form,
  .top,.aside,.callout,.eq,.h3-box,.signup,.kscta,.reward,.lat,.cfg,.anchor,.step,.why .card,.pay,.note,.site,.box){
  background-image:var(--gtile);background-size:var(--gsize)}

/* ---------- background heat blobs: 20px blocks, behind everything ---------- */
.th-back{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
/* panels let a little of the blob field through */
:root.th .panel{background-color:color-mix(in srgb,var(--bg1) 86%,transparent)}

/* ---------- cursor trail: 6px blocks, over the page, fixed to the screen ---------- */
.th-trail{position:fixed;left:0;top:0;z-index:70;pointer-events:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
:root[data-trail="off"] .th-trail{display:none}
/* the trail retires itself 10 s after load (heat.js section 6): it stays visible while the
   whoosh's tail cools, and its toggle takes the heat as a flat, hard-edged flash */
:root[data-trail="off"] .th-trail.th-cooling{display:block}
#trailBtn.th-hit{background:var(--btn);border-color:var(--btn);color:var(--btn-text);transition:none}

/* ---------- heat grain on orange buttons ----------
   The colour stays; grain is blended over it and moves like a live sensor feed,
   and a blocky hot spot (canvas, added by heat.js on first hover) follows the
   cursor. Both layers sit at z-index:-1 inside an isolated button, which puts
   them above the button's own fill but under its label. */
:root.th :is(.cmd.go,.send,.nl button,.cw-next,.bcta,.su-form button,.cfg-dl,.tier .tcta){
  position:relative;isolation:isolate;overflow:hidden}
:root.th :is(.cmd.go,.send,.nl button,.cw-next,.bcta,.su-form button,.cfg-dl,.tier .tcta)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--ftile);background-size:var(--gsize);mix-blend-mode:overlay;opacity:.24;
  animation:th-grain .45s steps(1) infinite}
.th-cv{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
/* buttons that are only orange while hovered (outlined START on the pricing cards,
   the callout button on subpages) carry the texture only while they are orange */
:root.th :is(.tier .tcta,.callout .bcta):not(:hover)::after{opacity:0}
:is(.tier .tcta,.callout .bcta):not(:hover) .th-cv{visibility:hidden}
@keyframes th-grain{0%{background-position:0 0}25%{background-position:-37px 21px}
  50%{background-position:13px -44px}75%{background-position:-52px -9px}}

/* ---------- heat grain in the H.E.A.T. letters (homepage, every language) ----------
   The button grain, clipped to the glyph: the letter's orange and a pre-weakened grain
   tile (--ltile) are blended into one background and cut to the text, so the real font
   stays and the markup does not change. It moves like the buttons' feed. */
:root.th .heat-l{
  -webkit-text-fill-color:transparent;
  background-image:var(--ltile),linear-gradient(var(--accent),var(--accent));
  background-size:var(--gsize),100% 100%;background-blend-mode:overlay;
  -webkit-background-clip:text;background-clip:text;
  animation:th-grain .45s steps(1) infinite}
@media (forced-colors:active){:root.th .heat-l{-webkit-text-fill-color:currentColor;background:none}}

/* the cursor-trail toggle sits in every page's bar; when off it dims */
#trailBtn[aria-pressed="false"]{color:var(--mute)}

/* ---------- reduced motion / touch ----------
   No cursor trail, no live grain, no button hot spot. The blob field stays,
   still. The cursor-trail button hides because it would do nothing. */
@media (prefers-reduced-motion:reduce){
  :root.th :is(.cmd.go,.send,.nl button,.cw-next,.bcta,.su-form button,.cfg-dl,.tier .tcta)::after,
  :root.th .heat-l{animation:none}
  .th-trail,.th-cv,#trailBtn{display:none}
}
@media (pointer:coarse){.th-trail,#trailBtn{display:none}}

/* The [t] shortcut chip heat.js adds to the theme button. Styled here, beside the
   script that injects it, because heat.css is on every page and pages.css is not:
   pricing, join and the notes index rendered it as a bare "t" glued to the label
   ("themet") until 2026-10-13. */
.tg .tb-key{font-family:var(--mono);font-size:12px;line-height:1;color:var(--mute);margin-left:8px}
.tg .tb-key::before{content:"["} .tg .tb-key::after{content:"]"}