/* ============================================================
   home-act1.css — act 01 banner: "the proof gate".
   Claims ride a conveyor into a compact verify gate (the
   number-microscope motif from primae-diff, at banner scale);
   proven claims stamp green and pile onto a signed stack; once
   per loop a confident-looking claim fails its digit check and
   drops off the belt. The canvas draws the scene; JS builds an
   interactive overlay inside #hm-act1: a gate hotspot (hover or
   press = half-speed belt + magnified digit check) and replay
   buttons over the signed stack.

   Scoped strictly to #hm-act1 / .hm1-*. Theme-aware via site
   tokens with warm-light fallbacks; verdict colors echo the
   eval.css tokens (--id / --cl / --dv), read by JS with
   fallbacks. Accent orange appears only on interaction
   affordances (hover, focus, replay flash, the seal).
   ============================================================ */

#hm-act1 { position: relative; }

.hm1-stage { position: relative; }

#hm-act1 .hm1-canvas {
    display: block;
    width: 100%;
    height: clamp(260px, 26vw, 330px);
}

/* JS-built overlay, sized to the canvas box */
.hm1-ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
}

/* the verify-gate hotspot — hover/press slows the belt, zooms the check */
.hm1-gate {
    position: absolute;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    transition: border-color 0.18s ease;
}
.hm1-gate:hover { border-color: rgba(217, 84, 43, 0.4); }
.hm1-gate[aria-pressed="true"] {
    cursor: zoom-out;
    border-color: var(--accent, #d9542b);
}
.hm1-gate:focus-visible {
    outline: 2px solid var(--accent, #d9542b);
    outline-offset: 3px;
}

/* signed-stack replay buttons (transparent twins of the canvas cards) */
.hm1-card {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, border-color 0.15s ease;
}
.hm1-card.hm1-on { opacity: 1; pointer-events: auto; }
.hm1-card.hm1-hushed { opacity: 0; pointer-events: none; }
.hm1-card:hover { border-color: rgba(217, 84, 43, 0.55); }
.hm1-card:focus-visible {
    outline: 2px solid var(--accent, #d9542b);
    outline-offset: 2px;
}
.hm1-card.hm1-replay { animation: hm1-replay-flash 0.8s ease; }

@keyframes hm1-replay-flash {
    0%   { box-shadow: 0 0 0 0 rgba(217, 84, 43, 0.5); }
    100% { box-shadow: 0 0 0 12px rgba(217, 84, 43, 0); }
}

.hm1-caption {
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--color-muted, #6c6b61);
}
.hm1-caption strong { color: var(--color-text, #1a1a17); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .hm1-gate, .hm1-card { transition: none; }
    .hm1-card.hm1-replay { animation: none; }
}