/* APEX – ambient section loops (card B31), base layer. Markup + one-loop-at-a-time logic: ambient.js.
   The layer covers its (position:relative) section, blends with the page, fades out at the top and bottom, and keeps a
   viewport-sized picture in view while the section scrolls (sticky), so a tall section never blows the loop up.
   Per placement: --amb-o (opacity), --amb-ft / --amb-fb (fade lengths). Light theme: the dark loops are multiplied into the
   white page (a screen blend would vanish on white), so they read as a faint shaded texture.
   The section's content needs position:relative + z-index:1 so it paints above the layer. */
.amb{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--amb-o,.2);mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--amb-ft,20%),#000 calc(100% - var(--amb-fb,20%)),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 var(--amb-ft,20%),#000 calc(100% - var(--amb-fb,20%)),transparent)}
.amb--l5{mix-blend-mode:multiply;--amb-o:.16}
.amb__in{position:sticky;top:0;height:100vh;height:100lvh;max-height:100%;overflow:hidden}
.amb__in>img,.amb__in>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* the video fades in over its poster once it really plays (ambient.js adds .is-on) */
.amb__in>video{opacity:0;transition:opacity 1.4s var(--ease)}
.amb.is-on .amb__in>video{opacity:1}
/* phones and reduced motion: poster only – a hidden video is never in view, so lazy-video.js never requests it */
@media (max-width:768px),(prefers-reduced-motion:reduce){.amb__in>video{display:none}}
@media print{.amb{display:none}}