/* ============================================================
   LIVING BACKGROUNDS — house motion layer (living-backgrounds crew,
   Nov 6 2026). One system, every app: copy this file + living-bg.js,
   set the palette vars on .living-host, done. See PATTERN.md in
   ~/workspace/launch-ops/living-backgrounds/.

   Rules baked in:
   - Motion = transform/opacity ONLY (GPU-friendly, no layout thrash).
   - Layers sit BEHIND content (z-index:-1 stack inside the host);
     text always lives on its normal solid plates — contrast untouched.
   - .lb-paused (set by living-bg.js when off-screen / tab hidden)
     freezes every animation on that host.
   - prefers-reduced-motion: static gradient, zero drift.
   ============================================================ */
.living-host{
  position:relative; isolation:isolate; overflow:hidden;
  --lb-a:#22B83B; --lb-b:#3DDC4E; --lb-c:#0B6B22;
  --lb-glow:rgba(61,220,78,.20);
}
.living-host.lb-cosmic{ --lb-a:#7C3AED; --lb-b:#22D3EE; --lb-c:#B45309; --lb-glow:rgba(124,58,237,.28); }
.living-host.lb-obsidian{ --lb-a:#1e3a8a; --lb-b:#1597ec; --lb-c:#312e81; --lb-glow:rgba(21,151,236,.22); }
.living-host.lb-sky{ --lb-a:#0284c7; --lb-b:#38bdf8; --lb-c:#0ea5e9; --lb-glow:rgba(56,189,248,.25); }

.lb-field{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.lb-grad{
  position:absolute; inset:-30%;
  background:
    radial-gradient(42% 55% at 18% 22%, var(--lb-glow), transparent 70%),
    radial-gradient(38% 50% at 84% 78%, var(--lb-glow), transparent 70%),
    linear-gradient(125deg, var(--lb-c) 0%, transparent 45%, var(--lb-a) 130%);
  opacity:.5; animation:lbGradDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes lbGradDrift{
  from{ transform:translate3d(-2.5%,-1.5%,0) rotate(-1.2deg) scale(1.02); }
  to  { transform:translate3d(2.5%,2%,0) rotate(1.4deg) scale(1.07); }
}
.lb-skyline{
  position:absolute; left:0; right:0; bottom:0; height:44px; opacity:.34;
  color:var(--lb-c); animation:lbSkyDrift 48s linear infinite; will-change:transform;
}
.lb-skyline svg{ width:200%; height:100%; display:block; }
@keyframes lbSkyDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.lb-creatures{ position:absolute; inset:0; }
.lb-creature{ position:absolute; color:var(--lb-b); opacity:.5; will-change:transform; }
.lb-creature svg{ display:block; width:100%; height:100%; }
.lb-creature.c-ant{ width:34px; height:24px; bottom:12%; animation:lbAntWalk 34s linear infinite; }
.lb-creature.c-bird1{ width:26px; height:16px; top:14%; animation:lbBirdFly 27s linear infinite; }
.lb-creature.c-bird2{ width:19px; height:12px; top:24%; opacity:.35; animation:lbBirdFly 27s linear infinite; animation-delay:-9s; }
@keyframes lbAntWalk{
  0%{ transform:translateX(-12vw) translateY(0); }
  25%{ transform:translateX(22vw) translateY(-3px); }
  50%{ transform:translateX(48vw) translateY(0); }
  75%{ transform:translateX(74vw) translateY(-3px); }
  100%{ transform:translateX(104vw) translateY(0); }
}
@keyframes lbBirdFly{
  0%{ transform:translateX(-10vw) translateY(0); }
  50%{ transform:translateX(48vw) translateY(-9px); }
  100%{ transform:translateX(106vw) translateY(2px); }
}
.lb-motes{ position:absolute; inset:0; }
.lb-mote{
  position:absolute; bottom:-8px; border-radius:50%;
  background:var(--lb-b); opacity:0; will-change:transform,opacity;
  animation:lbMoteRise 11s linear infinite;
}
@keyframes lbMoteRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.55; }
  80%{ opacity:.4; }
  100%{ transform:translateY(-46vh) translateX(14px); opacity:0; }
}

/* pause wiring (living-bg.js toggles .lb-paused) */
.lb-paused .lb-grad, .lb-paused .lb-skyline, .lb-paused .lb-creature,
.lb-paused .lb-mote, .lb-paused.lb-sheen::after, .lb-paused .lb-sheen::after,
.lb-paused.lb-kenburns img, .lb-paused .lb-kenburns img{
  animation-play-state:paused !important;
}

/* living sheen for primary buttons — a slow light sweep over the fill.
   Apply .lb-sheen to .btn-big / .w-cta / .btn-green etc. */
.lb-sheen{ position:relative; overflow:hidden; }
.lb-sheen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform:translateX(-110%); animation:lbSheen 4.6s ease-in-out infinite;
}
@keyframes lbSheen{ 0%,58%{ transform:translateX(-110%);} 88%,100%{ transform:translateX(110%);} }

/* slow ken-burns for card media (post photos, covers) */
.lb-kenburns{ overflow:hidden; }
.lb-kenburns img{ animation:lbKen 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes lbKen{ from{ transform:scale(1.01) translateX(0); } to{ transform:scale(1.09) translateX(-1.6%); } }

/* ---- Town placements ---- */
/* business hero: the cover becomes the living stage; the head zone
   (logo/name/stats/actions) rides on it, tabs + body below stay calm
   with the field glowing in the gaps between white cards. */
.biz-hero-living{ border-radius:0 0 20px 20px; margin:-6px -16px 0; padding:0 16px 14px; }
.biz-hero-living .biz-cover{ margin:0 -16px 0; border-radius:0; }
.biz-tabbody-living{ position:relative; isolation:isolate; }
.biz-tabbody-living > .lb-field{ inset:-6px -16px; }
.stat-tile{ position:relative; overflow:hidden; }
.stat-tile::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(61,220,78,.14) 55%, transparent 72%);
  transform:translateX(-100%); animation:lbSheen 6.5s ease-in-out infinite;
}
.feed-head-living{ border-radius:0 0 18px 18px; }
.feed-head-living .tabrail{ background:transparent; }

/* light twin: same motion, softer field so white cards + dark ink
   keep their measured contrast (field lives behind plates anyway). */
html[data-theme="light"] .lb-grad{ opacity:.30; }
html[data-theme="light"] .lb-skyline{ opacity:.22; }
html[data-theme="light"] .lb-creature{ opacity:.38; }
html[data-theme="light"] .stat-tile::before{
  background:linear-gradient(120deg, transparent 40%, rgba(29,158,51,.12) 55%, transparent 72%);
}

/* business-page post media: slow ken-burns inside the living tabbody */
.biz-tabbody-living article.post{ overflow:hidden; }
.biz-tabbody-living img.post-hero{ animation:lbKen 22s ease-in-out infinite alternate; will-change:transform; }
.lb-paused img.post-hero{ animation-play-state:paused !important; }

/* ---- ANT BOT (js/ant-bot.js) ---- black disc, white armored ant,
   broom working while it travels. House mark styling only. */
.antbot{
  position:fixed; z-index:9999; width:46px; height:46px; border-radius:50%;
  background:#0a0f0a; border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.45);
  pointer-events:none; will-change:transform;
}
.antbot svg{ display:block; width:100%; height:100%; }
.antbot .antbot-broom{ transform-origin:47px 34px; animation:lbBroom .28s ease-in-out infinite alternate; }
@keyframes lbBroom{ from{ transform:rotate(-9deg); } to{ transform:rotate(13deg); } }
@media (prefers-reduced-motion: reduce){ .antbot .antbot-broom{ animation:none; } }

/* ---- REACTIVE layer (run 4, benchmark addendum Nov 6 22:42) ----
   --lb-flow is set by living-bg.js from REAL activity inside the
   host (Town: posts/reviews rendered = town talking right now).
   Busy town -> faster current. This is the layer the benchmark
   apps don't have: theirs decorate, ours respond. */
.living-host{ --lb-flow:1; }
.living-host .lb-grad{ animation-duration:calc(26s / var(--lb-flow)); }
.living-host .lb-skyline{ animation-duration:calc(48s / var(--lb-flow)); }
.living-host .lb-creature.c-ant{ animation-duration:calc(34s / var(--lb-flow)); }
.living-host .lb-creature.c-bird1,.living-host .lb-creature.c-bird2{ animation-duration:calc(27s / var(--lb-flow)); }
.living-host .lb-mote{ animation-duration:calc(11s / var(--lb-flow)); }

/* ============================================================
   ZONE SEPARATION (owner catch Nov 6 22:31 — reviews, neighbor
   posts and comments were stacked with no split line). A zone
   band = thick colored rule + tinted ground + caps label; the
   eye hits the split before it reads a word. Colors only, text
   stays on its own plates (readability law).
   ============================================================ */
.zone-sep{
  display:flex; align-items:center; gap:8px;
  margin:20px -16px 12px; padding:9px 16px;
  font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); background:var(--panel2);
  border-top:3px solid var(--line); border-bottom:1px solid var(--line);
}
.zone-sep .zs-ic{ font-size:14px; letter-spacing:0; }
.zone-sep.zs-reviews{ border-top-color:var(--amber); background:linear-gradient(90deg, rgba(255,176,32,.20), var(--panel2) 72%); }
.zone-sep.zs-neighbors{ border-top-color:var(--green-deep); background:linear-gradient(90deg, rgba(61,220,78,.20), var(--panel2) 72%); }
.zone-sep.zs-posts{ border-top-color:var(--blue); background:linear-gradient(90deg, rgba(46,107,230,.20), var(--panel2) 72%); }
.zone-sep.zs-comments{ border-top-color:var(--purple); background:linear-gradient(90deg, rgba(168,85,247,.16), var(--panel2) 72%); }
.zone-sep:first-child{ margin-top:4px; }
/* comments = their own labeled zone inside a post card */
.cmt-zone{ margin-top:10px; border-top:2px solid var(--card-line); padding-top:7px; }
.cmt-zone-h{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--card-ink3); }
/* ken-burns on post media inside the living tab body */
.biz-tabbody-living .post-hero,.biz-tabbody-living .post-hero-media{ animation:lbKen 22s ease-in-out infinite alternate; }
.lb-paused .post-hero,.lb-paused .post-hero-media{ animation-play-state:paused !important; }
/* sheen class hook for feed header primary actions */
.feed-head-living .btn-big{ position:relative; overflow:hidden; }

/* ============================================================
   ANT BOT (character layer — NEW badass armored ant only; the
   retired cute ant never renders). .antbot is positioned by
   js/antbot.js; .ab-char spans are the sweep targets.
   ============================================================ */
.antbot{ position:fixed; width:48px; height:48px; z-index:9990; pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)); will-change:left,top; }
.antbot svg{ width:100%; height:100%; display:block; }
.ab-char{ display:inline-block; transition:opacity .16s ease, transform .16s ease; }
.ab-char.ab-gone{ opacity:0; transform:translateY(8px) rotate(26deg) scale(.55); }
@media (prefers-reduced-motion: reduce){ .antbot{ display:none; } }

/* reduced motion: calm static version — gradient stays, drift dies */
@media (prefers-reduced-motion: reduce){
  .lb-grad, .lb-skyline, .lb-creature, .lb-mote,
  .lb-sheen::after, .stat-tile::before, .lb-kenburns img{ animation:none !important; }
  .lb-mote, .lb-creature.c-bird2{ display:none; }
  .lb-grad{ opacity:.35; }
}