/* Pale star drift plus ghosts drifting through the plum header. */

.hw-sky,
.hw-sky:after,
.hw-sky::before {
    content: '';
    position: absolute;
    inset: -40px 0 0 0;
    pointer-events: none;
    z-index: 2;
    height: 220px;
    background-image:
        radial-gradient(2px 2px at 40px 30px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 140px 80px, #f6e7b2, transparent),
        radial-gradient(2px 2px at 260px 40px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 380px 110px, #f6e7b2, transparent),
        radial-gradient(2px 2px at 500px 24px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 620px 90px, #fff, transparent),
        radial-gradient(2px 2px at 90px 160px, #f6e7b2, transparent),
        radial-gradient(1.5px 1.5px at 300px 180px, #fff, transparent);
    background-size: 700px 220px;
    animation: hwTwinkle 4.5s ease-in-out infinite;
}

.hw-sky:after { opacity: 0.45; animation-delay: -2s; }
.hw-sky::before { opacity: 0.7; margin-left: 80px; animation-delay: -1s; }

@keyframes hwTwinkle {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}

.hw-ghosts {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.hw-ghost {
    position: absolute;
    display: block;
    line-height: 0;
}

.hw-ghost img {
    display: block;
    width: 100%;
    height: auto;
    animation: hwGhostSway 3.2s ease-in-out infinite;
}

.hw-ghost-1 { width: 84px; opacity: 0.42; animation: hwGhostPath1 24s linear infinite; }
.hw-ghost-2 { width: 48px; opacity: 0.62; animation: hwGhostPath2 17s linear infinite; animation-delay: -6s; }
.hw-ghost-3 { width: 30px; opacity: 0.5; animation: hwGhostPath3 13s linear infinite; animation-delay: -9s; }
.hw-ghost-4 { width: 66px; opacity: 0.32; animation: hwGhostPath4 28s linear infinite; animation-delay: -4s; }
.hw-ghost-5 { width: 40px; opacity: 0.55; animation: hwGhostPath5 19s linear infinite; animation-delay: -12s; }

.hw-ghost-1 img { animation-duration: 3.4s; }
.hw-ghost-2 img { animation-duration: 2.2s; animation-delay: -0.4s; }
.hw-ghost-3 img { animation-duration: 1.8s; animation-delay: -1s; }
.hw-ghost-4 img { animation-duration: 4.1s; animation-delay: -2s; }
.hw-ghost-5 img { animation-duration: 2.7s; animation-delay: -1.5s; }

@keyframes hwGhostSway {
    0%, 100% { transform: translateY(0) rotate(-7deg); }
    50% { transform: translateY(-12px) rotate(8deg); }
}

@keyframes hwGhostPath1 {
    0%   { left: -12%; top: 28%; }
    18%  { left: 10%;  top: 74%; }
    36%  { left: 32%;  top: 14%; }
    54%  { left: 54%;  top: 68%; }
    72%  { left: 76%;  top: 18%; }
    100% { left: 112%; top: 52%; }
}

@keyframes hwGhostPath2 {
    0%   { left: 110%; top: 58%; }
    22%  { left: 82%;  top: 12%; }
    44%  { left: 54%;  top: 80%; }
    68%  { left: 26%;  top: 20%; }
    100% { left: -16%; top: 64%; }
}

@keyframes hwGhostPath3 {
    0%   { left: -8%;  top: 8%; }
    14%  { left: 12%;  top: 46%; }
    30%  { left: 30%;  top: 6%; }
    48%  { left: 50%;  top: 52%; }
    66%  { left: 70%;  top: 10%; }
    84%  { left: 88%;  top: 44%; }
    100% { left: 112%; top: 16%; }
}

@keyframes hwGhostPath4 {
    0%   { left: -14%; top: 78%; }
    20%  { left: 14%;  top: 22%; }
    40%  { left: 36%;  top: 84%; }
    60%  { left: 58%;  top: 16%; }
    80%  { left: 80%;  top: 72%; }
    100% { left: 116%; top: 30%; }
}

@keyframes hwGhostPath5 {
    0%   { left: 108%; top: 36%; }
    16%  { left: 86%;  top: 70%; }
    34%  { left: 64%;  top: 18%; }
    52%  { left: 42%;  top: 62%; }
    70%  { left: 20%;  top: 24%; }
    100% { left: -14%; top: 48%; }
}