Palmtrees background

css/style.css

@@ -1412,3 +1412,45 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
   .sfB-page-head h1 { font-size: 44px; letter-spacing: -1.5px; }
   .sfB-collab h2 { font-size: 28px; }
 }
+
+/* ── Palm-frond background layer ── */
+.sfB-palms {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.sfB-palm {
+  position: absolute;
+  width: 620px;
+  height: 620px;
+  object-fit: contain;
+  opacity: 0.22;
+  filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg);
+  mix-blend-mode: lighten;
+  transform: var(--flip, none);
+  animation-name: sfB-palm-sway;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  will-change: transform;
+}
+
+.sfB-palm.corner-tl { top: -8%;    left:  -10%; transform-origin: 0%    0%;    }
+.sfB-palm.corner-tr { top: -8%;    right: -10%; transform-origin: 100%  0%;    }
+.sfB-palm.corner-bl { bottom: -8%; left:  -10%; transform-origin: 0%    100%;  }
+.sfB-palm.corner-br { bottom: -8%; right: -10%; transform-origin: 100%  100%;  }
+.sfB-palm.corner-ml  { top: 32%; left:  -8%;  width: 760px; height: 760px; opacity: 0.28; transform-origin: 0%   50%; }
+.sfB-palm.corner-ml2 { top: 62%; left:  -10%; width: 700px; height: 700px; opacity: 0.26; transform-origin: 0%   50%; }
+.sfB-palm.corner-mr  { top: 22%; right: -10%; width: 680px; height: 680px; opacity: 0.26; transform-origin: 100% 50%; }
+.sfB-palm.corner-mr2 { top: 70%; right: -7%;  width: 740px; height: 740px; opacity: 0.28; transform-origin: 100% 50%; }
+
+@keyframes sfB-palm-sway {
+  from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); }
+  to   { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) *  0.5)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sfB-palm { animation: none !important; }
+}