/* korriwan.com: the flowers along the foot of the clearing. */
@layer clearing {
  /* the flowers along the foot of the clearing: sakura, Spanish bluebells, amaryllis and hortensias.
     The garden is a line along the ground. Each plant stands on it in a box of its own and sways
     from its foot; the stems below the ground stand still, behind the footer bar. */
  .garden {
    --s: 1;   /* how large the plants are drawn; the script makes them smaller on a narrow screen */
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    isolation: isolate;
    pointer-events: none;
  }
  .garden .roots {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: var(--under);
  }
  .plant {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
  }
  .plant svg {
    position: absolute;
    left: calc(var(--s) * -70px);
    bottom: 0;
    display: block;
    width: calc(var(--s) * 140px);
    height: calc(var(--s) * 180px);
    overflow: visible;
  }
  /* the tall ones stand at the back */
  .plant.amaryllis { z-index: 1; }
  .plant.hortensia { z-index: 2; }
  .plant.bluebell { z-index: 3; }
  @media (prefers-reduced-motion: no-preference) {
    .plant {
      animation: sway var(--t) ease-in-out var(--d) infinite alternate;
      will-change: transform;
    }
  }
  @keyframes sway {
    from { transform: rotate(calc(var(--lean) * -1)); }
    to { transform: rotate(var(--lean)); }
  }
  .garden .stalk,
  .garden .twig {
    fill: none;
    stroke: var(--stem);
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .garden .stalk.fine { stroke-width: .9; }
  .garden .stalk.stout { stroke-width: 3.4; }
  .garden .twig {
    stroke: var(--sakura-twig);
    stroke-width: 1.3;
  }
  .garden .twig.stout { stroke-width: 2.3; }
  .garden .stalk.dusky { stroke: var(--amaryllis-stem); }   /* the bare stem of the belladonna lily */
  .sakura .buds { fill: var(--sakura-heart); }
  .bluebell .buds { fill: var(--bluebell-deep); }
  .amaryllis .bud {
    fill: var(--amaryllis);
    stroke: var(--amaryllis-deep);
    stroke-width: .7;
  }
  .garden .funnel { fill: var(--amaryllis-deep); }
  .garden .mop { fill: color-mix(in srgb, var(--p, var(--hortensia)) 55%, var(--hortensia-deep)); }
  .garden .blush { stop-color: var(--sakura-heart); }
  .garden .throat-white { stop-color: var(--amaryllis-throat); }
  .garden .throat-pink { stop-color: var(--amaryllis); }
  .garden .throat-deep { stop-color: var(--amaryllis-deep); }
  /* the parts of a flower head. The heads are set out with <use>, and a copy made by <use> is
     only styled by a rule that names its own class and nothing above it, so these stand alone. */
  .leaf {
    fill: var(--leaf);
    stroke: var(--stem);
    stroke-width: .6;
    stroke-linejoin: round;
  }
  .vein {
    fill: none;
    stroke: var(--stem);
    stroke-width: .5;
    stroke-linecap: round;
    opacity: .7;
  }
  /* sakura */
  .petals {
    fill: var(--sakura);
    stroke: color-mix(in srgb, var(--sakura-heart) 60%, transparent);
    stroke-width: .5;
    stroke-linejoin: round;
  }
  .stamens {
    fill: none;
    stroke: var(--sakura-heart);
    stroke-width: .8;
    stroke-linecap: round;
    stroke-dasharray: .01 1.695;   /* a ring of seven dots */
  }
  /* Spanish bluebells */
  .bell {
    fill: var(--bluebell);
    stroke: var(--bluebell-deep);
    stroke-width: .5;
    stroke-linejoin: round;
  }
  .bell-line {
    fill: none;
    stroke: var(--bluebell-deep);
    stroke-width: .6;
    stroke-linecap: round;
    opacity: .7;
  }
  /* amaryllis: the tepals are filled from the throat outwards, white to pink, by a gradient the script draws */
  .tepal {
    stroke: color-mix(in srgb, var(--amaryllis-deep) 70%, transparent);
    stroke-width: .4;
    stroke-linejoin: round;
  }
  .streak {
    fill: var(--amaryllis-deep);
    opacity: .6;
  }
  .filaments,
  .anthers {
    fill: none;
    stroke: var(--amaryllis-throat);
    stroke-width: .6;
    stroke-linecap: round;
  }
  .anthers {
    stroke: var(--amaryllis-anther);
    stroke-width: 1;
  }
  /* hortensias: every floret is handed its own blend of the head's two colours as --p */
  .floret {
    fill: var(--p, var(--hortensia));
    stroke: color-mix(in srgb, var(--p, var(--hortensia)) 50%, var(--hortensia-deep));
    stroke-width: .4;
    stroke-linejoin: round;
  }
  .eye { fill: var(--hortensia-deep); }
}