/*
 * facet-field.css — the faceted background field (partials/facet_field.php).
 * Spec: docs/REDESIGN-PROPOSAL.md §3.3 (hero field), §2.7 R6′ (ambient budget).
 * Queued by the partial itself (Assets::style), so it loads only on pages that
 * render a field. Placement/opacity belong to the host page's sheet.
 *
 * R1: the drift animates `transform` only; the glint animates `opacity` only.
 * R2: the loop is declared inside (prefers-reduced-motion: no-preference).
 * R4: js/ambient.js toggles .is-offscreen on [data-ambient]; motion.css pauses.
 * No [data-ambient] = a static field (final CTA, blog covers, hero fallback).
 */

.lp-ff {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.lp-ff-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}
.lp-ff-tri { stroke: var(--line); stroke-width: 1; }
.lp-ff-t1 { fill: var(--facet-1); }
.lp-ff-t2 { fill: var(--facet-2); }
.lp-ff-t3 { fill: var(--facet-3); }
/* Glint layer (§2.7 "Hero facet glint", T39): printed only on an ambient
   field, inside the drift group so it moves with the facets. Invisible at
   rest, so the static field (reduced motion, no animation) is unchanged. */
.lp-ff-glint { fill: var(--facet-3); stroke: none; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .lp-ff[data-ambient] .lp-ff-drift {
        animation: lp-ff-drift var(--dur-ambient) var(--ease-in-out) infinite;
    }
    /* Three phase groups, a third of the loop apart. */
    .lp-ff[data-ambient] .lp-ff-glint {
        animation: lp-ff-glint var(--dur-ambient) var(--ease-in-out) infinite;
    }
    .lp-ff[data-ambient] .lp-ff-g1 { animation-delay: calc(var(--dur-ambient) / -3); }
    .lp-ff[data-ambient] .lp-ff-g2 { animation-delay: calc(var(--dur-ambient) / -1.5); }
}
@keyframes lp-ff-glint {
    0%, 100% { opacity: 0; }
    30%, 45% { opacity: .9; }
}
/* Slow 12-unit ellipse; the 48-unit overscan in FacetField keeps edges hidden. */
@keyframes lp-ff-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(12px, -6px); }
    50%      { transform: translate(0, -12px); }
    75%      { transform: translate(-12px, -6px); }
}