/* ============================================================
   primae-hero-field.css — "the solver is running" pixel field
   Full-bleed pixel-art backdrop for the Primae hero
   (#pfx-field): a live damped wave-equation solve, quantized
   into warm contour bands. All classes are pfx- prefixed. The
   wrapper is the FIRST child of <section class="hero">; JS adds
   .pfx-on to the hero.
   ============================================================ */

.pfx-field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none; /* content stays clickable; JS listens on .hero */

    /* melt the plot into the page at the very top and bottom so
       the field never reads as a pasted-in rectangle */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        #000 3.5%,
        #000 96.5%,
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        #000 3.5%,
        #000 96.5%,
        rgba(0, 0, 0, 0) 100%);
}

.pfx-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.pfx-on::before,
.hero.pfx-on::after,
.hero.pfx-on .container::before {
    display: none;
}

/* Legibility guard while floating over the field: the secondary
   button gets a solid ground (the primary is already solid ink,
   and the JS caps the contour bands under every text line, so
   the headline and subtitle sit on cream/pale sand). */
.hero.pfx-on .btn-secondary {
    background: var(--color-bg, #f5f4ef);
}
.hero.pfx-on .btn-secondary:hover {
    background: var(--accent-soft, rgba(217, 84, 43, 0.10));
}