/*
 * Drooping ivy on the shop's pages: a garland with pink bows along the top (body::before), and
 * long strands hanging down either edge where the content doesn't reach (body::after). The
 * pictures come from script/ivy.ts. They sit behind everything and scroll away with the page. The
 * designer and the admin keep their working space clear, so they don't get any.
 *
 * Both sway gently, as if in a breeze: each leans a little to one side and back, pinned at the
 * top, so the ends of the strands move most. The two lean on different rhythms so they never
 * move in step. Only transforms are animated (cheap for the browser), and people who ask their
 * device for less motion get still vines.
 */
/* A leaning strand at the edge mustn't make the page any wider. Body clips the vines to its own
   box; that only works while the root's overflow isn't visible (otherwise body's is handed to the
   window instead, where it no longer clips anything). */
html:not(:has(body.admin, .designer)) { overflow-x: clip; }

body:not(.admin):not(:has(.designer)) {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(60rem 40rem at 0% 0%, rgb(255 182 214 / 0.55), transparent 70%),
    radial-gradient(50rem 40rem at 100% 100%, rgb(203 186 255 / 0.55), transparent 70%),
    url("/assets/plasma-5450aea4.svg") top left / 56.25rem auto repeat,
    linear-gradient(160deg, var(--blush), var(--lavender)) fixed;
}

body:not(.admin):not(:has(.designer))::before,
body:not(.admin):not(:has(.designer))::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  transform-origin: top center;
}

body:not(.admin):not(:has(.designer))::before {
  height: 11rem;
  background: url("/assets/ivy-garland-4e1a71d6.svg") top center / 40rem auto repeat-x;
  --lean: 2deg;
}

body:not(.admin):not(:has(.designer))::after {
  height: min(62.5rem, 100%);
  background:
    url("/assets/ivy-left-3c6a4c0b.svg") top left / 18.75rem auto no-repeat,
    url("/assets/ivy-right-c1f4f4ca.svg") top right / 18.75rem auto no-repeat;
  --lean: 0.8deg;
}

@keyframes ivy-sway {
  from { transform: skewX(calc(var(--lean) * -1)); }
  to { transform: skewX(var(--lean)); }
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.admin):not(:has(.designer))::before,
  body:not(.admin):not(:has(.designer))::after {
    will-change: transform;
    animation: ivy-sway 7s ease-in-out infinite alternate;
  }
  body:not(.admin):not(:has(.designer))::before {
    animation-duration: 5.3s;
    animation-delay: -2s;
  }
}

/* Room under the garland for the header, whose name and links sit on frosted pills so they
   read clearly over the leaves. */
body:not(.admin):not(:has(.designer)) .site-header { padding-top: 3.25rem; }
body:not(.admin):not(:has(.designer)) :is(.wordmark, .site-nav) {
  padding: 0.35rem 0.9rem;
  background: var(--card);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Medium screens: the content reaches the edges, so the strands get shorter and fainter. */
@media (max-width: 75rem) {
  body:not(.admin):not(:has(.designer))::before {
    height: 8.5rem;
    opacity: 0.75;
    background-size: 32rem auto;
  }
  body:not(.admin):not(:has(.designer))::after {
    height: min(40rem, 100%);
    opacity: 0.75;
    background-size: 11rem auto, 11rem auto;
  }
}

@media (max-width: 40rem) {
  body:not(.admin):not(:has(.designer))::before {
    height: 6.5rem;
    background-size: 24rem auto;
  }
  body:not(.admin):not(:has(.designer))::after {
    height: min(26rem, 100%);
    background-size: 6.5rem auto, 6.5rem auto;
  }
  body:not(.admin):not(:has(.designer)) .site-header { padding-top: 2.5rem; }
}

/* The divider under the big headings: a sprig of ivy instead of a pink bar. */
.bar {
  width: 10rem;
  height: 2.125rem;
  margin-top: 1rem;
  background: url("/assets/ivy-sprig-8c4c72ed.svg") center / contain no-repeat;
  border-radius: 0;
}