/* ============================================================
   ui-anima-hero-field.css — "a city of interfaces" pixel field
   Full-bleed pixel-art backdrop for the UI-Anima hero
   (#ufx-field). All classes are ufx- prefixed. Injected wrapper
   is the FIRST child of <section class="hero">; JS adds .ufx-on
   to the hero.
   ============================================================ */

.ufx-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 */
}

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

/* Legibility guard while floating over the skyline: the
   secondary button gets a solid ground (primary is already
   solid ink; the section label sits in the calm sky band). */
.hero.ufx-on .btn-secondary {
    background: var(--color-bg, #f5f4ef);
}
.hero.ufx-on .btn-secondary:hover {
    background: var(--accent-soft, rgba(217, 84, 43, 0.10));
}