/* ============================================================================
   GEPA — ambient lattice layer

   Sits behind every page. The canvas itself is painted by gepa-ambient.js,
   which reads the three colours below from this element — so the same script
   produces a teal-and-gold mesh on forest and a quiet gilt one on paper,
   without knowing which page it is on.
   ========================================================================== */

.amb {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Paper is the default surface for most of the product. Kept low so it
       reads as texture behind content rather than as something to look at. */
    --amb-cold: rgba(10, 70, 60, .10);
    --amb-hot: rgba(176, 138, 46, .55);
    --amb-dot: rgba(10, 70, 60, .16);
    opacity: 0;
    animation: amb-in 1.2s ease-out .15s forwards;
}

/* On forest the mesh can carry its original colour: teal cooling to gold. */
.surface-forest .amb,
body.pl .amb,
.grid-home .amb {
    --amb-cold: rgba(18, 137, 122, .18);
    --amb-hot: rgba(244, 194, 76, .9);
    --amb-dot: rgba(18, 137, 122, .3);
}

@keyframes amb-in { to { opacity: 1; } }

/* Content sits above it, always. */
body > header,
body > main,
body > footer,
.site-header,
.site-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .amb { animation: none; opacity: 1; }
}

/* The script already declines on a coarse pointer; this keeps the element out
   of the paint tree there too rather than leaving an empty canvas behind. */
@media (pointer: coarse) {
    .amb { display: none; }
}