/* פאר הנחל: Mor's request (3.11): the "האש שלי" flame with 148 (נחמן) as a background design (drafts/shared/fire148.css).
   A fixed layer behind the page content, so it stays put while the page scrolls, as in the drafts. In the shop it is a
   plain background image (fire148-b.svg, already coloured: #9b711f at 20%), not the drafts' CSS mask: the full-screen
   masked layer cost frames on a 4x slower phone (the cart drawer and the accordions stuttered; motion 3.11). Sections
   with their own background cover it. */
html { background: var(--paper); }
body { background: transparent !important; position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(fire148-b.svg) 0 0 / 200px 200px repeat;
  animation: f148-in 1.4s .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes f148-in { from { opacity: 0; transform: translateY(14px); } }
/* The opening's words sit on the photo frame's own ground, so the motif gets its own layer there (first screen),
   fading in from the top (the ivory gradient over the tiles, in place of the drafts' mask). */
.op__copy::before {
  content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--ivory), rgba(248, 239, 229, 0) 45%), url(fire148-b.svg) 30px 0 / 200px 200px repeat;
  animation: f148-in 1.4s 1.2s cubic-bezier(.16,1,.3,1) both;
}