@layer components {
  .floating-lemons {
    --lemon-size: 150px;
    --lemon-ratio-mid: 0.8;
    --lemon-ratio-small: 0.7;
    --lemon-overlap: 0.2;

    --lemon-main: var(--lemon-size);
    --lemon-mid: calc(var(--lemon-size) * var(--lemon-ratio-mid));
    --lemon-small: calc(var(--lemon-size) * var(--lemon-ratio-small));
    --gap: calc(1 - var(--lemon-overlap));

    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  .floating-lemons img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: var(--size);
  }

  /* The main lemon leads, then the mid one, then the small one. */
  .floating-lemons img:nth-child(1) {
    --size: var(--lemon-main);
    z-index: 1;
    rotate: -14deg;
  }

  .floating-lemons img:nth-child(2) {
    --size: var(--lemon-mid);
    rotate: 20deg;
  }

  .floating-lemons img:nth-child(3) {
    --size: var(--lemon-small);
    rotate: 8deg;
  }

  /* Stacked runs read better with the main lemon in the middle. */
  .floating-lemons[data-layout="column"] img:nth-child(1),
  .floating-lemons[data-layout="row"] img:nth-child(1) {
    --size: var(--lemon-mid);
    z-index: 0;
  }

  .floating-lemons[data-layout="column"] img:nth-child(2),
  .floating-lemons[data-layout="row"] img:nth-child(2) {
    --size: var(--lemon-main);
    z-index: 1;
  }

  /* Each item sits after the sum of the previous ones, minus the overlap. */
  .floating-lemons[data-layout="column"] {
    width: var(--lemon-main);
    height: calc(
      (var(--lemon-mid) + var(--lemon-main)) * var(--gap) + var(--lemon-small)
    );
  }

  .floating-lemons[data-layout="column"] img {
    left: 50%;
    margin-left: calc(var(--size) / -2);
  }

  .floating-lemons[data-layout="column"] img:nth-child(2) {
    top: calc(var(--lemon-mid) * var(--gap));
  }

  .floating-lemons[data-layout="column"] img:nth-child(3) {
    top: calc((var(--lemon-mid) + var(--lemon-main)) * var(--gap));
  }

  .floating-lemons[data-layout="row"] {
    width: calc(
      (var(--lemon-mid) + var(--lemon-main)) * var(--gap) + var(--lemon-small)
    );
    height: var(--lemon-main);
  }

  .floating-lemons[data-layout="row"] img {
    top: 50%;
    margin-top: calc(var(--size) / -2);
  }

  .floating-lemons[data-layout="row"] img:nth-child(2) {
    left: calc(var(--lemon-mid) * var(--gap));
  }

  .floating-lemons[data-layout="row"] img:nth-child(3) {
    left: calc((var(--lemon-mid) + var(--lemon-main)) * var(--gap));
  }

  /* The corner keeps the main lemon in the quoin and spreads the other two
       inwards, so the run bends the right way on whichever corner it sits. */
  .floating-lemons[data-layout="corner"] {
    width: calc(var(--lemon-main) * var(--gap) + var(--lemon-mid));
    height: calc(var(--lemon-main) * var(--gap) + var(--lemon-small));
  }

  .floating-lemons[data-anchor$="right"][data-layout="corner"] img {
    left: auto;
    right: 0;
  }

  .floating-lemons[data-anchor^="bottom"][data-layout="corner"] img {
    top: auto;
    bottom: 0;
  }

  .floating-lemons[data-layout="corner"] img:nth-child(2) {
    left: calc(var(--lemon-main) * var(--gap));
  }

  .floating-lemons[data-anchor$="right"][data-layout="corner"]
    img:nth-child(2) {
    left: auto;
    right: calc(var(--lemon-main) * var(--gap));
  }

  .floating-lemons[data-layout="corner"] img:nth-child(3) {
    top: calc(var(--lemon-main) * var(--gap));
  }

  .floating-lemons[data-anchor^="bottom"][data-layout="corner"]
    img:nth-child(3) {
    top: auto;
    bottom: calc(var(--lemon-main) * var(--gap));
  }

  /* Anchors place the group; edges centre it on the axis they run along. */
  .floating-lemons[data-anchor="left"],
  .floating-lemons[data-anchor="right"] {
    top: 50%;
    translate: 0 -50%;
  }

  .floating-lemons[data-anchor="top"],
  .floating-lemons[data-anchor="bottom"] {
    left: 50%;
    translate: -50% 0;
  }

  .floating-lemons[data-anchor="left"],
  .floating-lemons[data-anchor="top-left"],
  .floating-lemons[data-anchor="bottom-left"] {
    left: var(--lemon-inset-x, -55px);
  }

  .floating-lemons[data-anchor="right"],
  .floating-lemons[data-anchor="top-right"],
  .floating-lemons[data-anchor="bottom-right"] {
    right: var(--lemon-inset-x, -55px);
  }

  .floating-lemons[data-anchor="top"],
  .floating-lemons[data-anchor="top-left"],
  .floating-lemons[data-anchor="top-right"] {
    top: var(--lemon-inset-y, -55px);
  }

  .floating-lemons[data-anchor="bottom"],
  .floating-lemons[data-anchor="bottom-left"],
  .floating-lemons[data-anchor="bottom-right"] {
    bottom: var(--lemon-inset-y, -55px);
  }

  @media (max-width: 1024px) {
    .floating-lemons {
      --lemon-size: 100px;
    }
  }

  /* Each lemon drifts on its own clock so the group never bobs in unison. */
  @media (prefers-reduced-motion: no-preference) {
    .floating-lemons img {
      animation: lemon-float var(--lemon-float-dur, 7s) ease-in-out
        var(--lemon-float-delay, 0s) infinite;
    }

    .floating-lemons img:nth-child(2) {
      --lemon-float-dur: 8.5s;
      --lemon-float-delay: -1.5s;
    }

    .floating-lemons img:nth-child(3) {
      --lemon-float-dur: 6.5s;
      --lemon-float-delay: -3s;
    }
  }

  @keyframes lemon-float {
    50% {
      transform: translateY(-12px);
    }
  }
}