/* DigiStore · Phase 2.11.5 — the ambient background flow, and the polish on the browse band under the hero.
   Linked from layouts/app.blade.php with ?v=filemtime(), so this file cannot be a version behind the shop.
   Written by update-ecommerce-background-flow.txt; deleting that link and this file takes the feature out. */

/* ── the layer ───────────────────────────────────────────────────────────────
   position:fixed + inset:0 so the drift covers the window rather than the page,
   z-index:0 (a negative one would be painted UNDER body's own background and vanish),
   contain:strict so its compositing never re-lays-out the shop. */
.bg-flow{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;contain:strict}
.bg-flow-i{
  position:absolute;bottom:-180px;width:var(--fbg-sz,74px);height:var(--fbg-sz,74px);
  object-fit:contain;opacity:0;filter:blur(.4px) saturate(.85);
  will-change:transform,opacity;
  animation:bgFlowUp var(--fbg-dur,26s) linear infinite;
  animation-delay:calc(var(--i) * -1.9s);      /* negative: already in flight at first paint */
}
/* Seven lanes with their own size and pace, so it reads as drift and not as a marching grid.
   Everything is a multiplier of the owner's two numbers — no size is hard-coded here. */
.bg-flow-i:nth-child(7n+1){left:4%;width:calc(var(--fbg-sz,74px) * .84);animation-duration:calc(var(--fbg-dur,26s) * 1.16)}
.bg-flow-i:nth-child(7n+2){left:17%;width:calc(var(--fbg-sz,74px) * 1.14);animation-duration:calc(var(--fbg-dur,26s) * .92)}
.bg-flow-i:nth-child(7n+3){left:30%;width:calc(var(--fbg-sz,74px) * .74);animation-duration:calc(var(--fbg-dur,26s) * 1.30)}
.bg-flow-i:nth-child(7n+4){left:45%;width:calc(var(--fbg-sz,74px) * 1.03);animation-duration:calc(var(--fbg-dur,26s) * 1.04)}
.bg-flow-i:nth-child(7n+5){left:60%;width:calc(var(--fbg-sz,74px) * .90);animation-duration:calc(var(--fbg-dur,26s) * 1.22)}
.bg-flow-i:nth-child(7n+6){left:74%;width:calc(var(--fbg-sz,74px) * 1.20);animation-duration:calc(var(--fbg-dur,26s) * .84)}
.bg-flow-i:nth-child(7n+7){left:88%;width:calc(var(--fbg-sz,74px) * .79);animation-duration:calc(var(--fbg-dur,26s) * 1.38)}
/* The square is sized by the height control, so a tall lane never becomes a wide gap. */
.bg-flow-i{height:var(--fbg-sz,74px)}
@keyframes bgFlowUp{
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0 }
  12%  { opacity:var(--fbg-op,.13) }
  88%  { opacity:var(--fbg-op,.13) }
  100% { transform:translate3d(22px,-118vh,0) rotate(300deg); opacity:0 }
}
/* A light theme used to be pinned to opacity:0 — invisible, but still animating fourteen images.
   It now gets the same flow, dimmed and desaturated, which is the only difference a shop wants. */
:root[data-theme="light"] .bg-flow-i,body.theme-light .bg-flow-i{filter:blur(.5px) saturate(.7) contrast(.92)}

/* No looping animation for a visitor who asked for less movement, no flow at all on a phone unless the
   owner switched it on, and never on paper. */
@media (prefers-reduced-motion:reduce){.bg-flow{display:none!important}}
@media (max-width:760px){.bg-flow:not([data-fbg-mobile="1"]){display:none}}
@media print{.bg-flow{display:none!important}}

/* ── the browse band under the hero: 'Browse categories' / 'What are you looking for?' ──────
   Same tiles, tidier rhythm. The rules are written against .sp-page .sp-cat so they beat
   public/css/shop.css without editing it (and without a !important that the next phase will
   have to fight). Nothing here moves a tile to a different place — a shopper's muscle memory
   about where the categories are is worth more than a redesign. */
.sp-page .sp-cats{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px}
.sp-page .sp-cat{
  border-radius:15px;padding:10px 10px 11px;gap:8px;
  transition:transform .16s var(--ease-out,cubic-bezier(.22,.8,.3,1)),border-color .16s ease,box-shadow .16s ease;
}
.sp-page .sp-cat:hover{transform:translateY(-2px)}
.sp-page .sp-cat:focus-visible{outline:2px solid var(--primary,#f85606);outline-offset:2px}
.sp-page .sp-cat img{border-radius:11px;transition:transform .2s ease}
.sp-page .sp-cat:hover img{transform:scale(1.03)}
.sp-page .sp-cat strong{font-size:.84rem;letter-spacing:-.01em}
.sp-page .sp-cat em{
  align-self:flex-start;padding:2px 7px;border-radius:999px;font-size:.66rem;
  background:var(--surface-2,#f6f6f6);border:1px solid var(--border-soft,rgba(16,24,40,.06));
}
.sp-page .sp-hd h2{font-size:clamp(1.24rem,2.5vw,1.62rem);letter-spacing:-.04em}
@media (min-width:1200px){.sp-page .sp-cats{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}}
@media (max-width:380px){.sp-page .sp-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}
@media (prefers-reduced-motion:reduce){
  .sp-page .sp-cat,.sp-page .sp-cat img{transition:none}
  .sp-page .sp-cat:hover{transform:none}
  .sp-page .sp-cat:hover img{transform:none}
}