/* =========================================================================
   BURNER — Store opening prototype (#/hero-test). Isolated: every rule is
   scoped to .ht, so nothing else on the site is affected.
   ========================================================================= */

/* one continuous wall: type, empty space and the last line all sit under a
   transparent canvas that covers the whole surface */
.ht-surface { position: relative; }

/* first screen: type only, a lot of nothing */
.ht-statement {
  min-height: calc(100svh - var(--hdr-h));
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(24px, 4vw, 56px) var(--gut) 28px;
}
.ht-big { margin: 0; font-size: clamp(40px, 6.2vw, 112px); line-height: 1.06; }   /* headline fits one line on desktop */
.ht-big span { display: block; }
.ht-burn { margin-top: .12em; }                               /* right under the headline */
/* the afterthought: at the very end of the wall, bottom-right, just above the
   last line; out of flow so the wall keeps its height */
.ht-or { position: absolute; right: var(--gut); bottom: 64px; text-align: right; }

/* more wall, nothing on it */
.ht-blank { height: clamp(520px, 80svh, 940px); }
/* last words, bottom-left: "send your burn", and under it a real link to
   the BurnClub. Above the paint layers so the link can be clicked; only the
   link itself catches the pointer, the rest of the wall stays paintable */
.ht-send { position: relative; z-index: 3; pointer-events: none; margin: 0; padding: 14px var(--gut) 44px; }
.ht-send-line { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ht-send-club {
  display: inline-block; margin-top: 3px; pointer-events: auto;
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid);
  transition: color var(--t);
}
.ht-send-club:hover, .ht-send-club:focus-visible { color: var(--fg); outline: none; }

/* the drawing layer: above the type, no frame, starts empty. Touch keeps
   vertical panning for the browser; the script blocks it once a stroke starts */
.ht-wall {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
  cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
/* two layers: the wall keeps every finished coat; the live layer holds the
   stroke in progress at one coat's opacity (same value as COAT in the script) */
.ht-ink { pointer-events: none; }
.ht-live { z-index: 2; opacity: .88; }

/* palette: tools on one line, their options on the next. A zero-height
   sticky rail keeps it in the bottom-left corner of the screen while the
   wall is in view, without taking any room in the layout */
.ht-rail { position: sticky; bottom: 0; height: 0; z-index: 3; }
.ht-tools {
  position: absolute; left: calc(var(--gut) - 8px); bottom: 10px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ht-row, .ht-colors, .ht-opt { display: flex; align-items: center; }
.ht-cap, .ht-drip, .ht-opt-name {
  padding: 7px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.ht-cap.is-on, .ht-drip.is-on { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ht-cap:hover, .ht-drip:hover, .ht-sound:hover, .ht-clear:hover { color: var(--fg); }
/* utilities at the end of the tools: CLEAR above SOUND ON / OFF, small words */
.ht-util { align-self: flex-end; margin: 0 0 7px 10px; display: flex; flex-direction: column; align-items: flex-start; }
.ht-sound, .ht-clear {
  padding: 4px 2px;
  font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fg);
}
.ht-sound[aria-pressed="false"] { color: var(--mid); text-decoration: line-through; text-decoration-thickness: 1px; }
/* spray caps: a hand-drawn cap above each name */
.ht-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 5px 5px; }
.ht-cap-icon { display: block; width: 32px; height: 32px; overflow: visible; transition: transform .12s ease-out; }
.ht-cap.is-on .ht-cap-icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); }   /* picked up, like the tools */
.ht-opt-name { padding-right: 2px; color: var(--fg); }            /* "SQUISH" names the on/off pair */

/* tools: four hand-drawn things lying by the wall, a tiny label under each */
.ht-kind {
  position: relative; width: 48px; padding: 2px 0 7px; outline: none;
  display: flex; flex-direction: column; align-items: center;
}
.ht-icon {
  width: 38px; height: 38px; overflow: visible; transition: transform .14s ease-out;
  transform: translateY(var(--dy)) rotate(var(--rot)) scale(var(--sc));     /* each lies its own way */
}
/* uneven gaps: laid down, not aligned */
.ht-kind-marker { margin-left: 7px; } .ht-kind-mop { margin-left: 2px; } .ht-kind-roller { margin-left: 6px; }
.ht-kind-label {
  margin-top: 4px; font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mid);
}
.ht-picked { position: absolute; left: 6px; right: 6px; bottom: 1px; width: 36px; height: 5px; opacity: 0; }
/* picked up: lifted, tilted, label inked, a scrawl underneath */
.ht-kind.is-on .ht-icon { transform: translateY(calc(var(--dy) - 5px)) rotate(calc(var(--rot) - 7deg)) scale(calc(var(--sc) * 1.08)); }
.ht-kind.is-on .ht-kind-label, .ht-kind:hover .ht-kind-label { color: var(--fg); }
.ht-kind.is-on .ht-picked { opacity: 1; }
.ht-kind:hover .ht-icon { transform: translateY(calc(var(--dy) - 1px)) rotate(var(--rot)) scale(calc(var(--sc) * 1.04)); }
.ht-kind.is-on:hover .ht-icon { transform: translateY(calc(var(--dy) - 5px)) rotate(calc(var(--rot) - 7deg)) scale(calc(var(--sc) * 1.08)); }
.ht-kind:focus-visible .ht-kind-label { color: var(--fg); text-decoration: underline; }

/* the little tells, hover or picked: can shakes and mists, marker leaves a
   line, mopper drips, roller lays a white coat */
.ht-icon .fx-mist, .ht-icon .fx-drip { opacity: 0; transition: opacity .14s, transform .18s ease-out; transform-box: fill-box; }
.ht-icon .fx-drip { transform-origin: top; transform: scaleY(0); }
.ht-icon .fx-ink { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform .2s ease-out; }
.ht-icon .fx-coat { transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform .22s ease-out; }
.ht-icon .ic-body { transform-box: fill-box; transform-origin: 50% 90%; }
.ht-kind-spray:hover .ic-body, .ht-kind-spray.is-on .ic-body { animation: ht-shake .26s ease-in-out 1; }
.ht-kind-spray:hover .fx-mist, .ht-kind-spray.is-on .fx-mist { opacity: 1; transform: translate(1px, -1px); }
.ht-kind-marker:hover .fx-ink, .ht-kind-marker.is-on .fx-ink { transform: scaleX(1); }
.ht-kind-mop:hover .fx-drip, .ht-kind-mop.is-on .fx-drip { opacity: 1; transform: scaleY(1); }
.ht-kind-roller:hover .fx-coat, .ht-kind-roller.is-on .fx-coat { transform: scaleX(1); }
.ht-kind-roller .fx-coat { filter: drop-shadow(0 0 .6px rgba(12, 12, 12, .45)); }   /* white on paper needs an edge */
/* shaken: a quick rattle of the can (see the shake detector in the script) */
.ht-kind-spray.is-rattling .ic-body { animation: ht-rattle .26s linear 1; }
@keyframes ht-rattle {
  20% { transform: translateX(-1.5px) rotate(-5deg); } 40% { transform: translateX(1.5px) rotate(5deg); }
  60% { transform: translateX(-1px) rotate(-3deg); } 80% { transform: translateX(1px) rotate(2deg); }
}
@keyframes ht-shake {
  25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}
/* the paint pile: loose, overlapping samples in three ragged rows. Each
   sample carries its own tilt, size and drop (set inline) */
.ht-colors { flex-wrap: wrap; width: 318px; padding: 4px 0 2px 2px; }
.ht-paint {
  position: relative; width: 26px; height: 27px; margin: 0 -1px -2px 0;
  display: grid; place-items: center; outline: none;
}
.ht-paint svg, .ht-current svg {
  width: 28px; height: 28px; overflow: visible;
  transform: translateY(var(--dy)) rotate(var(--r)) scale(var(--s));
  transition: transform .12s ease-out, filter .12s ease-out;
}
.ht-paint:hover svg { transform: translateY(calc(var(--dy) - 1px)) rotate(var(--r)) scale(calc(var(--s) * 1.1)); }
/* picked up: lifted off the pile, a bit bigger, casting a small shadow */
.ht-paint.is-on { z-index: 1; }
.ht-paint.is-on svg {
  transform: translate(-1px, calc(var(--dy) - 4px)) rotate(calc(var(--r) * -.4)) scale(calc(var(--s) * 1.32));
  filter: drop-shadow(1px 3px 0 rgba(12, 12, 12, .22));
}
.ht-paint:focus-visible svg { filter: drop-shadow(0 0 0 var(--fg)) drop-shadow(1px 2px 0 rgba(12, 12, 12, .35)); }
/* phones only: one sample of the current colour that opens the pile */
.ht-current { display: none; }
/* marker width: three dots; spray: caps. Only the current tool's option shows,
   the roller has none (and no colour) */
/* hidden options stay laid out (invisible, out of flow): showing them later is
   then instant instead of a first-time text layout */
.ht-opt { margin-left: 10px; position: absolute; visibility: hidden; pointer-events: none; }
.ht-tools[data-kind="marker"] .ht-opt[data-for="marker"],
.ht-tools[data-kind="spray"] .ht-opt[data-for="spray"],
.ht-tools[data-kind="mop"] .ht-opt[data-for="mop"] { position: static; visibility: visible; pointer-events: auto; }
.ht-tools[data-kind="roller"] .ht-sub { display: none; }
/* marker tips: a hand-drawn nib above each name (same treatment as the caps) */
.ht-w, .ht-mh { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 5px 5px; }
.ht-mhs, .ht-squish { display: flex; align-items: center; }            /* mopper: heads, then SQUISH on/off */
.ht-squish { margin-left: 8px; }
.ht-w span, .ht-mh span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.ht-w.is-on span, .ht-mh.is-on span { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ht-w:hover span, .ht-mh:hover span { color: var(--fg); }
.ht-w-icon { display: block; width: 32px; height: 32px; overflow: visible; transition: transform .12s ease-out; }
.ht-w.is-on .ht-w-icon, .ht-mh.is-on .ht-w-icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.ht-live.is-rolling { cursor: cell; }

@media (max-width: 860px) {
  .ht-blank { height: 64svh; min-height: 420px; }
  /* phones: two narrow columns at the left edge (tools | colour + option),
     clear of "OR DON’T." and easy to tap */
  .ht-tools { flex-direction: row; align-items: flex-end; left: calc(var(--gut) - 10px); }
  .ht-row, .ht-opt { flex-direction: column; align-items: flex-start; }
  .ht-drip, .ht-opt-name { padding: 9px 8px; }
  .ht-util { margin: 2px 0 0 4px; align-self: flex-start; }
  .ht-sound, .ht-clear { padding: 10px 4px; }
  .ht-cap { padding: 3px 4px 6px; }
  .ht-tools[data-kind="spray"] .ht-opt[data-for="spray"] { display: grid; grid-template-columns: repeat(2, auto); }
  .ht-kind { width: 52px; padding: 3px 0 8px; }
  /* the pile folds into the current colour; open, it sits above the tools */
  .ht-current { display: grid; place-items: center; width: 40px; height: 40px; }
  .ht-colors {
    display: none; position: absolute; left: 0; bottom: calc(100% + 6px);
    width: 258px; padding: 8px 6px; background: var(--bg); box-shadow: 0 0 0 1px var(--line);
  }
  .ht-tools.is-open .ht-colors { display: flex; }
  .ht-paint { width: 36px; height: 36px; margin: 0; }
  .ht-opt { margin: 4px 0 0; }
  .ht-w, .ht-mh { padding: 3px 4px 6px; }
  .ht-squish { margin: 2px 0 0; }
  .ht-tools[data-kind="marker"] .ht-opt[data-for="marker"] { display: grid; grid-template-columns: repeat(2, auto); }
}