/* ==========================================================================
   Leaf backdrop layout. GENERATED by tools/build_backdrop.py from
   design/leaf-layout.json (Leaf Arranger, saved 2026-10-04T19:33:41.450Z).
   Do not edit by hand: rearrange in the Leaf Arranger and rebuild.
   ========================================================================== */

.plants { position: absolute; inset: 0; }
.plants--phone { display: none; }
@media (max-width: 599px) {
  .plants--desktop { display: none; }
  .plants--phone { display: block; }
}

.plant { position: absolute; height: auto; }
.plant--fade-frond { -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%); mask-image: linear-gradient(to right, #000 50%, transparent 100%); }
.plant--fade-fan-tl { -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 95%); mask-image: linear-gradient(135deg, #000 50%, transparent 95%); }
.plant--fade-base { -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 6%, #000 26%, #000 70%, transparent 100%); mask-image: radial-gradient(circle at 100% 100%, transparent 6%, #000 26%, #000 70%, transparent 100%); }
.plant--frond { opacity: var(--art-frond-opacity); }

/* Desktop and tablet (600px and up) */
.plant--desktop-1 { left: 29.75%; top: -3.33vh; width: 28vw; transform: translate(-50%, -50%) rotate(24.9deg); }
.plant--desktop-2 { left: 24.12%; top: 7.65vh; width: 28vw; transform: translate(-50%, -50%) rotate(34.4deg); }
.plant--desktop-3 { left: 19.16%; top: -2.12vh; width: 22vw; transform: translate(-50%, -50%) rotate(38.8deg); }
.plant--desktop-4 { left: 7.05%; top: 36.16vh; width: 30vw; transform: translate(-50%, -50%) rotate(21.5deg); }
.plant--desktop-5 { left: 1.88%; top: 41.73vh; width: 27vw; transform: translate(-50%, -50%) rotate(78deg); }
.plant--desktop-6 { left: 9.75%; top: 30.86vh; width: 16.5vw; transform: translate(-50%, -50%) rotate(15.1deg); }
.plant--desktop-7 { left: 84.84%; bottom: 23.04vh; width: 28vw; transform: translate(-50%, 50%) rotate(6.5deg) scaleX(-1); }
.plant--desktop-8 { left: 2.28%; top: 26.06vh; width: 24vw; transform: translate(-50%, -50%) rotate(52deg); }
.plant--desktop-9 { left: 12.41%; top: 16.79vh; width: 27.14vw; transform: translate(-50%, -50%) rotate(0deg); }
.plant--desktop-10 { left: 84.56%; bottom: 7.96vh; width: 28.5vw; transform: translate(-50%, 50%) rotate(177deg); }
.plant--desktop-11 { left: 97.23%; bottom: 40.44vh; width: 27vw; transform: translate(-50%, 50%) rotate(-106deg); }
.plant--desktop-12 { left: 65.15%; bottom: 18.49vh; width: 15vw; transform: translate(-50%, 50%) rotate(-164deg); }
.plant--desktop-13 { left: 93.46%; bottom: 28.14vh; width: 22.8vw; transform: translate(-50%, 50%) rotate(-124.1deg); }
.plant--desktop-14 { left: 87.65%; bottom: 21.77vh; width: 30.6vw; transform: translate(-50%, 50%) rotate(4.1deg); }

/* Phones (under 600px) */
.plant--phone-1 { left: 73.6%; top: -0.63vh; width: 44.8vw; transform: translate(-50%, -50%) rotate(-21.2deg) scaleX(-1); }
.plant--phone-2 { left: 100.5%; top: 5.53vh; width: 44.8vw; transform: translate(-50%, -50%) rotate(-55.7deg) scaleX(-1); }
.plant--phone-3 { left: 33.15%; top: 1.62vh; width: 45.13vw; transform: translate(-50%, -50%) rotate(-6deg); }
.plant--phone-4 { left: 1.24%; top: 13.22vh; width: 40.62vw; transform: translate(-50%, -50%) rotate(78deg); }
.plant--phone-5 { left: 32.28%; top: 4.51vh; width: 24.82vw; transform: translate(-50%, -50%) rotate(22deg); }
.plant--phone-6 { left: 96.12%; top: 0.75vh; width: 35.9vw; transform: translate(-50%, -50%) rotate(133.5deg); }
.plant--phone-7 { left: -3.96%; bottom: 20.26vh; width: 40.62vw; transform: translate(-50%, 50%) rotate(5.6deg); }
.plant--phone-8 { left: 20.6%; top: 7.37vh; width: 43.59vw; transform: translate(-50%, -50%) rotate(0deg); }
.plant--phone-9 { left: -3.37%; bottom: 25.09vh; width: 44.8vw; transform: translate(-50%, 50%) rotate(-11.3deg); }
.plant--phone-10 { left: 105.34%; bottom: 13.48vh; width: 44.8vw; transform: translate(-50%, 50%) rotate(7.6deg) scaleX(-1); }