/* Live backdrops, v3 (7 Nov 2026). Built by assets/js/live.js; phones only, and only while the band is on screen.
 * Everything that moves does so on transform or opacity only (compositor-only: no blend modes, no SVG filters,
 * no animated shadows), so the phone's CPU stays idle. Layer order inside a photo band: the section's own photo
 * (fallback) → .ld-live → .ld-live-par (parallax wrapper: the drifting photo or the clip, the light on the water,
 * glints, window lights, the horizon shimmer) → the birds → the band's gradient (::before, z-index -1) → words. */
@media (max-width:900px){
.ld-live{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ld-live-par{position:absolute;inset:-6%}
.ld-live-on .ld-live-par{will-change:transform}
.ld-live-ph{position:absolute;inset:-5%;background-repeat:no-repeat;background-size:cover;transform:scale(1)}
/* 7 Nov 07:27 (owner: "still look static"): a drift you can actually see — wider travel, a shorter cycle. */
.ld-live-on .ld-live-ph{will-change:transform;animation:ldDrift 22s ease-in-out infinite alternate}
@keyframes ldDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.8%,-1.8%)}}
/* The clip, when a band has one: over the still; the still shows again if autoplay is refused. */
.ld-live-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.ld-live-on .ld-live-v{opacity:1}
.ld-live-nov .ld-live-v{display:none}
/* A soft light passing over the lower half, like sun on water (plain translucent gradient, no blending). */
.ld-live-sweep{position:absolute;left:-60%;right:-60%;top:40%;bottom:0;opacity:0;background:linear-gradient(100deg,transparent 43%,rgba(255,244,214,.13) 50%,transparent 57%)}
.ld-live-on .ld-live-sweep{opacity:1;will-change:transform;animation:ldSweep 13s ease-in-out infinite alternate}
@keyframes ldSweep{from{transform:translateX(-28%)}to{transform:translateX(28%)}}
/* The dunes: a slow shimmer along the horizon band. */
.ld-live-horizon{position:absolute;left:0;right:0;top:34%;height:16%;opacity:0;background:linear-gradient(180deg,transparent,rgba(255,236,200,.14) 50%,transparent)}
.ld-live-on .ld-live-horizon{animation:ldHorizon 7s ease-in-out infinite alternate}
@keyframes ldHorizon{from{opacity:.25;transform:translateY(0) scaleY(1)}to{opacity:.7;transform:translateY(2px) scaleY(1.08)}}
/* Points of light: glints on the water, window lights at dusk. Each is a radial gradient animated on opacity. */
.ld-live-glints,.ld-live-lights{position:absolute;inset:0}
.ld-live-glints i,.ld-live-lights i{position:absolute;border-radius:50%;opacity:0;transform:scale(.5)}
.ld-live-glints i{background:radial-gradient(circle,#fff 0 28%,rgba(255,255,255,.35) 45%,transparent 70%)}
.ld-live-lights i{background:radial-gradient(circle,#FFE9A8 0 30%,rgba(255,220,140,.35) 50%,transparent 72%)}
.ld-live-on .ld-live-glints i{animation:ldGlint 4s ease-in-out infinite}
@keyframes ldGlint{0%,55%,100%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1)}}
.ld-live-on .ld-live-lights i{animation:ldTwinkle 5s ease-in-out infinite}
@keyframes ldTwinkle{0%,100%{opacity:.12}35%{opacity:.12}50%{opacity:.85;transform:scale(1)}72%{opacity:.15}}
/* Birds: distant, few, sky only. */
.ld-live-birds{position:absolute;left:0;top:0;width:100%;overflow:visible}
.ld-live-birds .b{fill:rgba(13,31,51,.6);transform:translate(-40px,var(--y,40px))}
.ld-live-on .ld-live-birds .b{animation:ldFly linear infinite}
/* Across in the first half of the cycle, then away for the second: a crossing, then a long gap. */
@keyframes ldFly{0%{transform:translate(-40px,var(--y,40px))}50%{transform:translate(var(--fx,500px),calc(var(--y,40px) - 12px))}50.01%,100%{transform:translate(-40px,var(--y,40px))}}
.ld-live-birds .b.f{fill:rgba(13,31,51,.5);transform:translate(calc(-60px + var(--ox,0px)),var(--y,40px))}
.ld-live-on .ld-live-birds .b.f{animation:ldFlock linear infinite}
@keyframes ldFlock{0%{transform:translate(calc(-60px + var(--ox,0px)),var(--y,40px))}22%{transform:translate(calc(var(--fx,500px) + var(--ox,0px)),calc(var(--y,40px) - 10px))}22.01%,100%{transform:translate(calc(-60px + var(--ox,0px)),var(--y,40px))}}
.ld-live-birds .w{transform-origin:0 0;animation:ldFlap .7s ease-in-out infinite alternate;animation-play-state:paused}
.ld-live-on .ld-live-birds .w{animation-play-state:running}
@keyframes ldFlap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
/* The pause control: a small pill, bottom left, out of the way of the WhatsApp button. */
.ld-motion{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid rgba(13,31,51,.18);background:rgba(251,249,244,.86);color:var(--ink,#0D1F33);font-family:inherit;font-size:12px;font-weight:500;line-height:1;letter-spacing:.02em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px -10px rgba(13,31,51,.4);cursor:pointer}
.ld-motion:focus-visible{outline:2px solid var(--gold,#E3BF20);outline-offset:2px}
html.ld-motion-off .ld-live *{animation-play-state:paused!important}
}
@media (min-width:901px){.ld-motion{display:none}}