/* ══════════════════════════════════════════════════════════════
   flowers.css — a posy of wildflowers in a stoneware jug.
   Seen from above, so the blooms read as a loose canopy of small
   discs and the jug as a ring with a dark mouth.
   ══════════════════════════════════════════════════════════════ */

.posy {
  position: absolute;
  left: 10%;
  top: 3%;
  width: 19%;
  aspect-ratio: 0.92;
  z-index: 7;
  filter: blur(calc((1 - var(--px)) * 2.6px));
}

.posy__shadow {
  position: absolute;
  inset: 24% -6% -6% -4%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 42% 54%,
    hsl(var(--shadow-hue) / 0.5),
    transparent 74%
  );
  filter: blur(13px);
  transform: rotate(var(--sun-angle)) translateY(5%) scaleX(1.12)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
}

/* Stems fanning up out of the jug mouth. */
.posy__stems {
  position: absolute;
  left: 32%;
  bottom: 22%;
  width: 36%;
  height: 56%;
}
.posy__stems i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.6px;
  height: var(--l);
  translate: -50% 0;
  rotate: var(--a);
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #7e9450 0%, #5f7a3c 54%, #445a2a 100%);
  border-radius: 1px;
  box-shadow: 0.5px 0 1px rgba(30, 44, 16, 0.4);
}

/* The canopy of blooms. */
.posy__blooms {
  position: absolute;
  inset: 0 0 34% 0;
}
.bl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(13% * var(--s));
  aspect-ratio: 1;
  border-radius: 50%;
  /* Petals: a conic ring of lobes around a small dark eye. */
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(226, 178, 62, 0.95) 0 16%,
      transparent 22%
    ),
    repeating-conic-gradient(
      from 0deg,
      var(--petal, #fdfaf2) 0deg 30deg,
      var(--petal-sh, #e6dcc6) 30deg 45deg
    );
  box-shadow:
    0 1px 3px hsl(var(--shadow-hue) / 0.5),
    inset 0 0 4px rgba(140, 120, 80, 0.3);
  filter: drop-shadow(0 1px 1px rgba(60, 44, 20, 0.3));
}
.bl--w {
  --petal: #fdfaf2;
  --petal-sh: #e4d9c2;
}
.bl--p {
  --petal: #d9a8c4;
  --petal-sh: #b8809f;
}
.bl--y {
  --petal: #f0d488;
  --petal-sh: #d4b45e;
}

/* Stoneware jug, seen from above: a lit ring and a dark mouth. */
.posy__jug {
  position: absolute;
  left: 26%;
  bottom: 0;
  width: 48%;
  aspect-ratio: 1.05;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    #d8c7a8 0%,
    #bda98a 34%,
    #91805f 74%,
    #6b5c42 100%
  );
  box-shadow:
    inset -5px -7px 15px rgba(50, 38, 22, 0.45),
    inset 6px 8px 16px rgba(255, 246, 224, 0.4),
    0 4px 10px hsl(var(--shadow-hue) / 0.5);
}
.posy__jug-glaze {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 202deg,
    transparent 0deg,
    rgba(255, 250, 232, 0.34) 24deg,
    transparent 58deg
  );
  mix-blend-mode: screen;
  filter: blur(1.3px);
}
.posy__jug-mouth {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 34%,
    #4a3d2a 0%,
    #2e2519 60%,
    #1b160e 100%
  );
  box-shadow:
    inset 0 3px 8px rgba(10, 8, 4, 0.8),
    0 0 0 2px rgba(216, 199, 168, 0.5);
}