/* korriwan.com: the signs in the sky. */
@layer clearing {
  /* the signs: small drawings in starlight, spread about the page, each in a part of its own. They
     are there to be found, not noticed: small and dim, and a little brighter while the pointer is
     on them. The first is an infinity, half blue and half pink, with a four-pointed star of the
     other colour beyond each open end. The script puts it on the left of the sky, wherever the
     wordmark and the heading leave room. */
  .sign {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(36px, 3.2vw, 46px);
    overflow: visible;
    transform: translate(-50%, -50%) rotate(-6deg);
    opacity: calc(.2 + var(--night) * .12);
    transition: opacity .6s ease;
    pointer-events: none;
  }
  .sign.is-lit { opacity: calc(.4 + var(--night) * .16); }
  .sign.is-away { display: none; }
  /* then two dogs, each drawn in lines of one colour with a glow of its own. The schnauzer, in silver,
     stands beside the sun or moon and looks at it. The beagle, in a brownish orange, stands over the
     hills on the right, turned round to face into the page. */
  .sign.dog {
    width: clamp(44px, 4.2vw, 60px);
    transform: translate(-50%, -50%);
  }
  .sign.schnauzer { color: var(--sign-silver); }
  .sign.beagle {
    transform: translate(-50%, -50%) scaleX(-1);
    color: var(--sign-amber);
  }
  /* and a family of four white ducks, walking in a line over the hills on the left. White hardly
     shows against the pale land by day, so by day they are let through more strongly than the rest. */
  .sign.ducks {
    width: clamp(78px, 7.6vw, 108px);
    transform: translate(-50%, -50%);
    color: var(--sign-white);
    opacity: calc(.7 - var(--night) * .38);
  }
  .sign.ducks.is-lit { opacity: calc(.95 - var(--night) * .39); }
  .sign.dog .lines,
  .sign.ducks .lines { stroke: currentColor; }
  .sign.dog .patch { fill: currentColor; }
  .sign .blue { fill: var(--sign-blue); stop-color: var(--sign-blue); }
  .sign .pink { fill: var(--sign-pink); stop-color: var(--sign-pink); }
  .sign .lines path { vector-effect: non-scaling-stroke; }
  .sign .haze {
    opacity: calc(.3 + var(--night) * .3);
    transition: opacity .6s ease;
  }
  .sign.is-lit .haze { opacity: calc(.5 + var(--night) * .4); }
  .sign .glow { opacity: calc(.2 + var(--night) * .5); }
  @media (prefers-reduced-motion: no-preference) {
    .sign .st { animation: twinkle var(--t) ease-in-out var(--d) infinite alternate; }
  }
  @keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .sign, .sign .haze { transition: none; }
  }
}