/* ==========================================================
   plants.css – hand-tied bunches for the hero corners and
   intro doors. Load AFTER styles.css and enchanted.css.

   Each bunch is flipped inside its own SVG (see index.html),
   so here we only size, place and pivot them. The pivot is
   the point where the stems are tied, so the gentle sway
   moves the bunch like a real stem in a breeze.
   ========================================================== */

/* ---------- Hero corners ---------- */
.hero .posy.sprig--tl,
.hero .posy.sprig--tr,
.hero .posy.sprig--bl,
.hero .posy.sprig--br {
  width: 178px;
  height: 222px;
  transform: none;
  overflow: visible;
}
.hero .posy.sprig--tl { top: 2.9rem;  left: -8px;  bottom: auto; right: auto; transform-origin: 15% 3%; }
.hero .posy.sprig--tr { top: 2.9rem;  right: -8px; bottom: auto; left: auto;  transform-origin: 85% 3%; }
.hero .posy.sprig--bl { bottom: -14px; left: -8px;  top: auto;   right: auto; transform-origin: 15% 97%; }
.hero .posy.sprig--br { bottom: -14px; right: -8px; top: auto;   left: auto;  transform-origin: 85% 97%; }

@media (min-width: 40rem) {
  .hero .posy.sprig--tl,
  .hero .posy.sprig--tr,
  .hero .posy.sprig--bl,
  .hero .posy.sprig--br { width: 240px; height: 300px; }
}
@media (min-width: 60rem) {
  .hero .posy.sprig--tl,
  .hero .posy.sprig--tr,
  .hero .posy.sprig--bl,
  .hero .posy.sprig--br { width: 290px; height: 362px; }
}

/* ---------- Intro doors ---------- */
.intro__panel .posy.sprig--a,
.intro__panel .posy.sprig--b {
  width: 150px;
  height: 188px;
  transform: none;
  overflow: visible;
}
.intro__panel--left  .posy.sprig--a { top: -6px;    left: -6px;  bottom: auto; right: auto; transform-origin: 15% 3%; }
.intro__panel--left  .posy.sprig--b { bottom: -12px; left: -6px;  top: auto;    right: auto; transform-origin: 15% 97%; }
.intro__panel--right .posy.sprig--a { top: -6px;    right: -6px; bottom: auto; left: auto;  transform-origin: 85% 3%; }
.intro__panel--right .posy.sprig--b { bottom: -12px; right: -6px; top: auto;    left: auto;  transform-origin: 85% 97%; }

@media (min-width: 40rem) {
  .intro__panel .posy.sprig--a,
  .intro__panel .posy.sprig--b { width: 220px; height: 275px; }
}

/* A softer sway for the bigger bunches */
.posy { animation-name: posy-sway; }
@keyframes posy-sway {
  from { rotate: -1.6deg; }
  to   { rotate: 1.6deg; }
}

/* ==========================================================
   Small repeats of the plant motif around the page
   ========================================================== */

/* ---------- 1. Section dividers: two tiny leaves either side of the star ---------- */
.divider {
  height: 22px;
  margin-top: .8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 22'%3E%3Cg fill='%239aa688'%3E%3Cellipse cx='49.5' cy='7.6' rx='4.4' ry='2.3' transform='rotate(-30 49.5 7.6)'/%3E%3Cellipse cx='94.5' cy='7.6' rx='4.4' ry='2.3' transform='rotate(30 94.5 7.6)'/%3E%3C/g%3E%3Cg fill='%23b2bba2'%3E%3Cellipse cx='54.5' cy='14.6' rx='3.4' ry='1.8' transform='rotate(24 54.5 14.6)'/%3E%3Cellipse cx='89.5' cy='14.6' rx='3.4' ry='1.8' transform='rotate(-24 89.5 14.6)'/%3E%3C/g%3E%3C/svg%3E") center / 144px 22px no-repeat;
  transition: background-size .9s ease;
}
/* leaves unfurl as the heading scrolls into view */
.reveal:not(.is-visible) .divider { background-size: 0 0; }

/* ---------- 2. A single stem resting on the corner of a few cards ---------- */
.card { position: relative; }
.card-sprig {
  position: absolute;
  top: -50px;
  width: 46px;
  height: 84px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: sway-small 7s ease-in-out infinite alternate;
}
/* stands up from just inside the corner and peeks over the top edge */
.card-sprig--tl { left: 10px;  transform: rotate(-14deg); }               /* tilt; the sway uses "rotate" */
.card-sprig--tr { right: 10px; transform: rotate(14deg) scaleX(-1); }

/* ---------- 3. Footer: a small bunch either side of the names ---------- */
.site-footer > svg.footer-posy {
  position: absolute;
  z-index: 0;
  bottom: -22px;
  width: 118px;
  height: 148px;
  opacity: .9;
  pointer-events: none;
}
/* phones: tucked into the bottom corners, clear of the names and date */
.site-footer > svg.footer-posy--l { right: auto; left: -14px; }
.site-footer > svg.footer-posy--r { left: auto; right: -14px; }

/* wider screens: either side of the names */
@media (min-width: 40rem) {
  .site-footer > svg.footer-posy { width: 170px; height: 212px; bottom: -18px; }
  .site-footer > svg.footer-posy--l { left: auto; right: calc(50% + 120px); }
  .site-footer > svg.footer-posy--r { right: auto; left: calc(50% + 120px); }
}