/* ============================================================
   home-hero-field.css — "THE PROOF TERRAIN" pixel field
   Full-bleed pixel-art backdrop for the home hero (#hp-field):
   a warm, layered landscape built out of verified work.

   The wrapper is the FIRST child of <section class="hero">; JS
   adds .hp-on to the hero. All hooks are hp- prefixed. The canvas
   is a low-res buffer (1 cell = 1 canvas pixel) upscaled with
   image-rendering: pixelated, so the DPR is irrelevant.
   ============================================================ */

.hp-field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    /* content stays clickable; JS listens on .hero for the probe
       and the verify wave */
    pointer-events: none;
    /* shown until the first frame lands, and behind the canvas on
       the very first paint: the field's own sky cream */
    background: #f7f5ee;
}

.hp-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* low-res buffer scaled up -> crisp fat pixels */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* The pixel field owns the backdrop: retire the hero's radial
   glows and the faint grid while the field is present. */
.hero.hp-on::before,
.hero.hp-on::after,
.hero.hp-on .container::before {
    display: none;
}

/* Legibility guards while floating over the field. The canvas
   already keeps the measured .hero-inner rect calm (no terrain,
   damped mist / shimmer / wake / verify-tick), so these only
   ground the two translucent chips: the secondary button and the
   eyebrow pill. The primary button is already solid ink and the
   headline's highlight block is already solid accent. */
.hero.hp-on .btn-secondary {
    background: var(--color-bg, #f5f4ef);
}

.hero.hp-on .btn-secondary:hover {
    background: var(--accent-soft, rgba(217, 84, 43, 0.10));
}

.hero.hp-on .eyebrow {
    background: var(--color-surface, #eae7dd);
}

/* The site-wide pixel ground gives .subtitle a cool grey plate +
   halo. Over this field that plate reads as a visible box, and it
   is redundant: the canvas already keeps the text rect a calm
   light sky (luminance stays above ~225, so ink text clears 12:1).
   Drop it inside the hero only. */
.hero.hp-on .subtitle {
    background: transparent;
    box-shadow: none;
}

/* Reduced motion: the script paints one static frame — a fully
   grown, verified massif under warm morning light with its
   complete constellation. Nothing here animates either. */
@media (prefers-reduced-motion: reduce) {
    .hp-canvas {
        transition: none;
        animation: none;
    }
}