/* korriwan.com: the butterflies. */
@layer clearing {
  /* the butterflies: one kind for each fairy and a smaller one for each pixie, each with its own wing pattern and colours, flying behind the words */
  .flock {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .bf {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
  }
  .bf .halo {
    position: absolute;
    left: calc(var(--w) * -.85);
    top: calc(var(--w) * -.85);
    width: calc(var(--w) * 1.7);
    height: calc(var(--w) * 1.7);
    border-radius: 50%;
    background: radial-gradient(circle, var(--c) 0%, transparent 64%);
    opacity: calc(var(--halo-o) * .8);   /* until the script first sets it: a glow held still is .8 of what the theme allows */
  }
  .bf .wing {
    position: absolute;
    left: 0;
    top: calc(var(--w) * -.5);
    width: calc(var(--w) * .5);
    height: var(--w);
    transform-origin: 0 50%;
    transform: scaleX(1);
    will-change: transform;
  }
  .bf .wing.wl { transform: scaleX(-1); }
  .bf .body {
    position: absolute;
    left: calc(var(--w) * -.08);
    top: calc(var(--w) * -.5);
    width: calc(var(--w) * .16);
    height: var(--w);
  }
  .bf svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .bf .o {
    fill: none;
    stroke: var(--edge);
    stroke-width: 1.3;
    stroke-linejoin: round;
  }
  .bf .b { fill: var(--edge); }
  /* a pixie is small, so her lines are drawn a little heavier to hold together */
  .bf.pixie .o { stroke-width: 2; }
  .bf.pixie .a { stroke-width: 1.7; }
  .bf .a {
    fill: none;
    stroke: var(--edge);
    stroke-width: 1;
    stroke-linecap: round;
  }
  @media (prefers-reduced-motion: no-preference) {
    .bf {
      animation: wake 1.5s ease backwards;
      animation-delay: calc(.2s + var(--i) * .16s);
    }
    .bf .wing { animation: flap-r var(--flap) ease-in-out infinite; }
    .bf .wing.wl { animation-name: flap-l; }
    .bf.is-called .wing { animation-duration: calc(var(--flap) * .55); }
  }
  @keyframes wake { from { opacity: 0; } }
  @keyframes flap-r { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
  @keyframes flap-l { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-.2); } }
}