/* ==========================================================================
   HALLOWEEN — the landing on 31 October, every year, by the visitor's own clock
   Fetched that day only: the theme script in index.html's <head> sets html.halloween, and the
   loader at the end of <body> then asks for this sheet and for assets/halloween.js, which
   builds the decoration. ?halloween in the address does the same on any day, to preview it.
   Every rule below sits on the decoration's own elements, save five that make room for it on
   the page's, prefixed with .halloween: the hero and the panel it is laid in, the carousel's
   controls, kept above it, the sections down the page, and the footer.

   The colours are the illustration's own — pumpkin, candlelight, night mist — not the
   interface's tokens, and they stay the same in both themes, save the bats, the spiders and the
   webs, drawn in the page's ink so that they stand out on it (dark on light, pale on dark).

   Cost: every animation moves transform or opacity only, which the browser composites without
   painting the page again; the blurs (glow, mist, distant pumpkins) are drawn once, then only
   moved or faded. Nothing moves in a part of the page scrolled away (hw-paused, which
   halloween.js sets on the hero or on a section), nor for a visitor who asked their system for
   less motion. Nothing asks for a layer of its own with will-change: the browser gives a piece
   one while it moves, and the hints kept a hundred alive down the page, which every frame the
   page draws had to lay out again — mid-page, a CPU slowed four times was 38% busy with them
   and 30% without (Chromium, 2026-10-25).
   ========================================================================== */

.hw-decor {
    pointer-events: none
}

/* The ink of the bats, the spiders and the webs: the page's own, dark on a light page and pale
   on a dark one, so that they stand out on it. Written once here, read by each piece; the
   footer, dark in both themes, gives its spider the pale one (THE FOOT OF THE PAGE). */
:root {
    --hw-pale-ink: #c3bad6;
    --hw-pale-thread: rgba(195, 186, 214, .45);
    --hw-pale-web: rgba(222, 216, 236, .26);
    --hw-ink: #1d1a24;
    --hw-thread: rgba(29, 26, 36, .45);
    --hw-web: rgba(40, 38, 48, .32)
}

[data-theme="dark"] {
    --hw-ink: var(--hw-pale-ink);
    --hw-thread: var(--hw-pale-thread);
    --hw-web: var(--hw-pale-web)
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hw-ink: var(--hw-pale-ink);
        --hw-thread: var(--hw-pale-thread);
        --hw-web: var(--hw-pale-web)
    }
}

.halloween .hero,
.halloween .section {
    position: relative
}

/* The panel the phone stands in measures itself for the pumpkins' layout (below). It clips as
   it always does, but with `clip` rather than `hidden`, which would make it a scroll box of its
   own and keep the pumpkins from resting on the bottom of the screen (see .hw-ground). */
.halloween .hero-right {
    container: hw-panel / inline-size;
    overflow: clip
}

/* The carousel's controls stay above every piece of the decoration (3 at most): the mist, the
   halos and the low bats would otherwise pass over the dots and the button. */
.halloween .hero-controls {
    position: relative;
    z-index: 4
}

/* --------------------------------------------------------------------------
   SKIES — where the bats fly and the spiders come down, none of them ever over a line of
   text. In the hero, a band along its top, above its first line (80px of padding on a wide
   screen, 60px of margin on a phone), and the panel the phone stands in, whose overflow clips
   the flights and the threads. Down the page, the same band at the top of every section, above
   its label (100px of padding, 60px on a phone), and the margins beside its text. Container
   units give each flight the same shape at every width.
   -------------------------------------------------------------------------- */

.hw-sky {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    container-type: size
}

.hw-sky-top {
    top: 0;
    left: 0;
    right: 0;
    height: 56px
}

.hw-sky-panel {
    inset: 0;
    container-name: hw-sky
}

/* The margin beside the text column down the page: the section's 48px of padding, the column's
   own 48px, and what the column's 1280px leave of the screen (style.css, .section and .w) —
   96px from 721px, 128px at 1440, 258px at 1700. The 100% is that of the box it is used on,
   as wide as the screen: the formula is carried as it is written, and worked out there. */
.halloween {
    --hw-margin: calc((100% - min(100% - 96px, 1280px)) / 2 + 48px)
}

/* The margins beside a section's text, from its top to its foot. The right one is the left
   one mirrored, so that its bats come in from the right edge of the screen. */
.hw-sky-margin {
    top: 0;
    bottom: 0;
    width: var(--hw-margin)
}

.hw-margin-l {
    left: 0
}

.hw-margin-r {
    right: 0;
    transform: scaleX(-1)
}

/* On a phone the margins are 20px (style.css, .w): nothing flies there. */
@media (max-width: 720px) {
    .hw-sky-margin {
        display: none
    }
}

.hw-bat {
    position: absolute;
    top: 0;
    left: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

/* The flights place a bat's centre; the negative margins below centre the drawing on it. */
.hw-bat svg {
    display: block;
    overflow: visible;
    fill: var(--hw-ink)
}

/* One flap: the wings rise and fall about the shoulders, the body bobs against them. */
.hw-bob {
    animation: hw-bob .2s ease-in-out infinite alternate
}

.hw-wing-l,
.hw-wing-r {
    transform-box: view-box
}

.hw-wing-l {
    transform-origin: 54px 28px;
    animation: hw-flap-l .2s ease-in-out infinite alternate
}

.hw-wing-r {
    transform-origin: 66px 28px;
    animation: hw-flap-r .2s ease-in-out infinite alternate
}

.hw-fast,
.hw-fast .hw-wing-l,
.hw-fast .hw-wing-r {
    animation-duration: .15s
}

.hw-slow,
.hw-slow .hw-wing-l,
.hw-slow .hw-wing-r {
    animation-duration: .27s
}

@keyframes hw-bob {
    from { transform: translateY(3px) }
    to { transform: translateY(-3px) }
}

@keyframes hw-flap-l {
    from { transform: rotate(25deg) }
    to { transform: rotate(-18deg) }
}

@keyframes hw-flap-r {
    from { transform: rotate(-25deg) }
    to { transform: rotate(18deg) }
}

/* Seven bats in the hero. The small, faint ones read as far away; the big one crosses now and
   then. Down the page, each section's band has b1 or b2, and its margins b8 and b9, each with
   its own delay and the height its loop is flown at (halloween.js). */
.hw-b1 { animation-name: hw-fly-b1; animation-duration: 16s; animation-delay: -5s }
.hw-b1 svg { width: 30px; height: 16px; margin: -8px 0 0 -15px }
.hw-b2 { animation-name: hw-fly-b2; animation-duration: 21s; animation-delay: -13s; opacity: .6 }
.hw-b2 svg { width: 22px; height: 12px; margin: -6px 0 0 -11px }
.hw-b3 { animation-name: hw-fly-b3; animation-duration: 13s; animation-delay: -2s }
.hw-b3 svg { width: 56px; height: 30px; margin: -15px 0 0 -28px }
.hw-b4 { animation-name: hw-fly-b4; animation-duration: 15s; animation-delay: -9s }
.hw-b4 svg { width: 40px; height: 21px; margin: -10px 0 0 -20px }
.hw-b5 { animation-name: hw-fly-b5; animation-duration: 17s; animation-delay: -11s }
.hw-b5 svg { width: 34px; height: 18px; margin: -9px 0 0 -17px }
.hw-b6 { animation-name: hw-fly-b6; animation-duration: 11s; animation-delay: -4s }
.hw-b6 svg { width: 88px; height: 47px; margin: -23px 0 0 -44px }
.hw-b7 { animation-name: hw-fly-b7; animation-duration: 24s; animation-delay: -16s; opacity: .5 }
.hw-b7 svg { width: 18px; height: 10px; margin: -5px 0 0 -9px }
.hw-b8 { animation-name: hw-fly-b8; animation-duration: 14s }
.hw-b8 svg { width: 40px; height: 21px; margin: -10px 0 0 -20px }
.hw-b9 { animation-name: hw-fly-b9; animation-duration: 17s }
.hw-b9 svg { width: 34px; height: 18px; margin: -9px 0 0 -17px }

/* SPIDERS — in the hero two, one on either side of the phone, each on a thread from the top of
   the panel: it comes down, bounces a little on the silk, hangs there swaying, then climbs back
   out of sight. Down the page, three more (below).
   The thread is drawn in the spider's own box: the box starts the thread's length above the
   spider, the drawing sits at the foot of its padding, and a 1px stripe of background runs down
   the padding — clipped by the sky, so that it pays out as the spider goes down. It used to be
   the spider's ::before, hanging out of the box and sized in container units: the user's
   Safari drew none of it (capture of 2026-10-25), where Chromium and WebKit 26 did. Inside the
   box and in px, nothing is left for a browser to drop. Each spider sets its length
   (--hw-thread-length), longer than its deepest drop. */
.hw-spider {
    position: absolute;
    top: 0;
    width: 30px;
    margin-top: calc(-1 * var(--hw-thread-length));
    margin-left: -15px;
    padding-top: var(--hw-thread-length);
    background: linear-gradient(var(--hw-thread), var(--hw-thread)) 50% 0 / 1px var(--hw-thread-length) no-repeat;
    animation-iteration-count: infinite
}

.hw-spider svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: var(--hw-ink);
    stroke: var(--hw-ink)
}

/* Hanging, a spider sways about the end of its thread, and its legs pump. */
.hw-sway {
    transform-origin: 50% 0;
    animation: hw-sway 2.6s ease-in-out infinite alternate
}

.hw-legs {
    transform-box: fill-box;
    transform-origin: 50% 40%;
    animation: hw-legs .45s ease-in-out infinite alternate
}

@keyframes hw-sway {
    from { transform: rotate(-6deg) }
    to { transform: rotate(6deg) }
}

@keyframes hw-legs {
    from { transform: scaleX(1) }
    to { transform: scaleX(.88) }
}

/* Each in the middle of the margin beside the phone, at every width: the phone is 380px wide,
   280px on a phone (style.css, .hero-carousel), centred in the panel, so a margin is
   (100cqw − phone) / 2 and its middle a quarter of that from the panel's edge. */
.hw-s1 { left: calc((100cqw - 380px) / 4); animation-name: hw-drop-1; animation-duration: 17s; animation-delay: -4s }
.hw-s2 { left: calc(100cqw - (100cqw - 380px) / 4); animation-name: hw-drop-2; animation-duration: 21s; animation-delay: -12s }

/* Their drops are shares of the panel, 34% at most: 1200px of thread reach the top of a panel
   up to 3500px tall. */
.hw-s1,
.hw-s2 {
    --hw-thread-length: 1200px
}

@media (max-width: 720px) {
    .hw-s1 { left: calc((100cqw - 280px) / 4) }
    .hw-s2 { left: calc(100cqw - (100cqw - 280px) / 4) }
}

/* Down fast and slowing, a bounce on the silk, a long hang, up slowly, then a while out of
   sight above the panel (-40px). The depth is a share of the panel's height (cqh). */
@keyframes hw-drop-1 {
    0%, 6% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.25, .6, .3, 1) }
    20% { transform: translateY(34cqh); animation-timing-function: ease-in-out }
    24% { transform: translateY(31.5cqh); animation-timing-function: ease-in-out }
    28% { transform: translateY(34cqh) }
    60% { transform: translateY(34cqh); animation-timing-function: cubic-bezier(.5, 0, .75, .4) }
    76%, 100% { transform: translateY(-40px) }
}

@keyframes hw-drop-2 {
    0%, 12% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.25, .6, .3, 1) }
    26% { transform: translateY(24cqh); animation-timing-function: ease-in-out }
    30% { transform: translateY(22cqh); animation-timing-function: ease-in-out }
    34% { transform: translateY(24cqh) }
    66% { transform: translateY(24cqh); animation-timing-function: cubic-bezier(.5, 0, .75, .4) }
    82%, 100% { transform: translateY(-40px) }
}

/* Down the page, from the top of a section: in the middle of a margin, down to beside the
   section's title (s3); on a phone, which has no margins, in the band above the label, near
   the right edge (s4). Their depths are in px, and so are their threads, just longer than the
   drop: a share of a section 3,400px tall would let them down past the screen. */
.hw-s3 { left: 50%; animation-name: hw-drop-3; animation-duration: 19s; --hw-thread-length: 260px }
.hw-s4 { display: none; left: 84%; width: 22px; margin-left: -11px; animation-name: hw-drop-4; animation-duration: 15s; --hw-thread-length: 80px }

@media (max-width: 720px) {
    .hw-s4 { display: block }
}

@keyframes hw-drop-3 {
    0%, 8% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.25, .6, .3, 1) }
    22% { transform: translateY(172px); animation-timing-function: ease-in-out }
    26% { transform: translateY(160px); animation-timing-function: ease-in-out }
    30% { transform: translateY(172px) }
    62% { transform: translateY(172px); animation-timing-function: cubic-bezier(.5, 0, .75, .4) }
    78%, 100% { transform: translateY(-40px) }
}

@keyframes hw-drop-4 {
    0%, 10% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.25, .6, .3, 1) }
    24% { transform: translateY(20px); animation-timing-function: ease-in-out }
    28% { transform: translateY(16px); animation-timing-function: ease-in-out }
    32% { transform: translateY(20px) }
    64% { transform: translateY(20px); animation-timing-function: cubic-bezier(.5, 0, .75, .4) }
    80%, 100% { transform: translateY(-40px) }
}

/* In a narrow panel — a phone — the near bats and the spiders come down to scale with the phone
   drawn there. */
@container hw-sky (max-width: 639px) {
    .hw-b3 svg { width: 42px; height: 22px; margin: -11px 0 0 -21px }
    .hw-b4 svg { width: 30px; height: 16px; margin: -8px 0 0 -15px }
    .hw-b6 svg { width: 60px; height: 32px; margin: -16px 0 0 -30px }
    .hw-spider { width: 22px; margin-left: -11px }
}

/* From 1551px the carousel writes its captions and annotations beside the phone (style.css,
   the `max-width:1550px` rule that hides them below). The three bats that fly low in the
   panel, and the spider on the phone's left, where the annotations are, would cross those
   lines, so they stay home there; the others keep to the panel's top. Same threshold as
   style.css: test_halloween.py holds the two together. */
@media (min-width: 1551px) {
    .hw-b3,
    .hw-b4,
    .hw-b5,
    .hw-s1 {
        display: none
    }
}

/* --------------------------------------------------------------------------
   GHOSTS — in the page's ink like the bats and the spiders, a little faded. Down the page, one
   in each section's margin, on its spider's side and below it, rising through the margin as it
   sways, then fading out; at the foot of the page, one rising from behind the pumpkins on the
   footer's edge, looking round, and sinking back. None for a visitor who asked for less motion,
   nor on a phone, whose margins are 20px and whose footer edge has 60px of room.
   -------------------------------------------------------------------------- */

.hw-ghost {
    position: absolute;
    width: 36px;
    opacity: 0;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

.hw-ghost svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: var(--hw-ink)
}

/* In the middle of a margin, at the height halloween.js gives it (top). */
.hw-g1 { left: 50%; margin-left: -18px; animation-name: hw-haunt; animation-duration: 15s }

/* Behind the middle pumpkin of the footer's group, its top 89px above the edge at the highest:
   under the 100px the last section leaves there. It sinks 16px rather than 34, so that out of
   sight it rests 2px above the edge, behind the pumpkin, whose foot is 2px under it: sunk 34px,
   its tails showed over the footer as it faded in and out (36/255 on a pixel, measured). */
.hw-g2 { right: 138px; bottom: 18px; --hw-sink: 16px; animation-name: hw-rise; animation-duration: 11s; animation-delay: -3s }

/* In the hero, behind the right-hand pumpkins at the foot of the phone, its size a share of the
   phone's: clear of the caption that, from 1551px, stands at the phone's mid-height on that
   side. Out of a panel too narrow for the scene beside the phone (with the pumpkins it hides). */
.hw-g3 { left: 116%; bottom: 56px; width: 9.5%; animation-name: hw-rise; animation-duration: 12s; animation-delay: -2s }

/* In from below, swaying, out above, then a while unseen. */
@keyframes hw-haunt {
    0% { opacity: 0; transform: translate(0, 60px) rotate(-3deg) }
    16% { opacity: .7; transform: translate(9px, 30px) rotate(3deg) }
    34% { opacity: .78; transform: translate(-7px, 0) rotate(-3deg) }
    52% { opacity: .7; transform: translate(9px, -30px) rotate(3deg) }
    68%, 100% { opacity: 0; transform: translate(0, -60px) rotate(0deg) }
}

/* Up from behind the pumpkin, a look round, and back down out of sight: as far down as the
   ghost's --hw-sink says, the depth its pumpkins hide. */
@keyframes hw-rise {
    0%, 12% { opacity: 0; transform: translateY(var(--hw-sink, 34px)) rotate(0deg) }
    30% { opacity: .75; transform: translateY(0) rotate(-4deg) }
    44% { opacity: .8; transform: translateY(-26px) rotate(4deg) }
    58% { opacity: .75; transform: translateY(0) rotate(-2deg) }
    76%, 100% { opacity: 0; transform: translateY(var(--hw-sink, 34px)) rotate(0deg) }
}

@media (max-width: 720px) {
    .hw-g2 {
        display: none
    }
}

/* --------------------------------------------------------------------------
   WEBS — in two corners: the hero's top left, inside the 80px above its first line (the 60px
   on a phone), and the phone panel's top right, over its grid. They do not move, so a visitor
   who asked for less motion keeps them. One-pixel threads whatever their size.
   -------------------------------------------------------------------------- */

.hw-web {
    position: absolute;
    z-index: 2;
    display: block;
    aspect-ratio: 1
}

.hw-web svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--hw-web)
}

.hw-web path {
    stroke-width: 1;
    vector-effect: non-scaling-stroke
}

.hw-web-page {
    top: 0;
    left: 0;
    width: 76px
}

@media (max-width: 900px) {
    .hw-web-page {
        width: 52px
    }
}

/* The web's corner is its top left: mirrored, it hangs in the top right. */
.hw-web-panel {
    top: 0;
    right: 0;
    width: clamp(72px, 20cqw, 170px);
    transform: scaleX(-1)
}

/* --------------------------------------------------------------------------
   PUMPKINS — jack-o'-lanterns at the foot of the phone, after a night photograph: bodies
   almost black, the carved faces lit from inside, a warm halo around, the distant ones blurred.
   They stand on .hw-ground, a line as wide as the phone laid just under it: left and width are
   shares of the phone's width, and so is bottom (cqw), the phone being 1.97 times taller than
   wide. They do not move; only their candlelight flickers, each pumpkin to its own rhythm.

   On a screen too short to show the foot of the phone — 1280 x 800, 1366 x 768, 1536 x 864:
   the panel is taller than the screen — the line holds to the bottom of the screen instead,
   12px above it, until the foot of the phone comes into view; there they settle and scroll
   away with it. Always standing on something, never in mid-air. A phone in one column keeps
   them at the foot of the phone: the buttons' pumpkins are its first screen's (below).
   -------------------------------------------------------------------------- */

.hw-ground {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    width: 100%;
    max-width: 380px;
    height: 0;
    margin: 0 auto;
    container-type: inline-size
}

@media (max-width: 900px) {
    .hw-ground {
        position: relative;
        bottom: auto
    }
}

/* The phone is drawn smaller there (style.css, .hero-right .hero-carousel). */
@media (max-width: 720px) {
    .hw-ground {
        max-width: 280px
    }
}

.hw-pumpkin {
    position: absolute;
    display: block;
    aspect-ratio: 200 / 170
}

.hw-pumpkin svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

/* The candle inside: the lit face and the halo flicker together, as one flame. Each is its own
   element, which the browser lays on a layer of its own while it fades, so that the flicker is
   a fade it composites; the face's glow is a shadow drawn once, then faded with it. As the face
   fades the dark body shows through it, and the carving dims as a guttering candle would. Each
   pumpkin keeps its own pace, set with its place below (--hw-flame, --hw-flame-at), so that no
   two flicker as one. */
.hw-halo,
.hw-lit {
    animation: hw-flicker var(--hw-flame, 3s) ease-in-out var(--hw-flame-at, 0s) infinite
}

.hw-lit {
    filter: drop-shadow(0 0 4px rgba(255, 179, 71, .9)) drop-shadow(0 0 10px rgba(255, 140, 40, .45))
}

/* A distant pumpkin is blurred as a whole, so its light stays still: a fade under a blur would
   have the blur drawn again at every frame. */
.hw-far {
    filter: blur(1.6px)
}

.hw-far .hw-halo,
.hw-far .hw-lit {
    animation: none
}

/* Mostly steady, with quick small wavers and, twice a turn, a deeper dip. */
@keyframes hw-flicker {
    0%, 100% { opacity: 1 }
    7% { opacity: .84 }
    10% { opacity: .97 }
    18% { opacity: .78 }
    22% { opacity: .93 }
    31% { opacity: .62 }
    35% { opacity: .95 }
    46% { opacity: .86 }
    52% { opacity: 1 }
    59% { opacity: .8 }
    63% { opacity: .9 }
    71% { opacity: .58 }
    76% { opacity: .94 }
    84% { opacity: .82 }
    90% { opacity: .98 }
    95% { opacity: .8 }
}

/* Beside the phone, as on the mock-up: on the left a large one and a far one, on the right a
   large one, one further back and a far one. Positions measured on the 1440 x 900 mock-up,
   where the phone is 380 x 749. */
.hw-pk-f1 { left: -43.2%; bottom: 15.6cqw; width: 14.7%; opacity: .7 }
.hw-pk-a  { left: -37.6%; bottom: -3.2cqw; width: 36.3%; --hw-flame: 3.3s; --hw-flame-at: -.6s }
.hw-pk-f2 { left: 132.1%; bottom: 17.5cqw; width: 13.2%; opacity: .65 }
.hw-pk-c  { left: 121.6%; bottom: 8.7cqw; width: 22.1%; opacity: .92; --hw-flame: 2.7s; --hw-flame-at: -1.9s }
.hw-pk-b  { left: 102.1%; bottom: -3.2cqw; width: 31.6%; --hw-flame: 3.8s; --hw-flame-at: -2.4s }

/* A panel too narrow for the scene beside the phone — the two columns below 1328px, a phone:
   the two large pumpkins come to the phone's lower corners, the others stay out. The width a
   container query reads is the panel's content box, inside its 32px (24px) of padding: 600px
   of it leave 150px beside a 380px phone, the large pumpkin's 143px and a margin. */
@container hw-panel (max-width: 599px) {
    .hw-pk-f1,
    .hw-pk-f2,
    .hw-pk-c,
    .hw-fog-front,
    .hw-g3 {
        display: none
    }

    .hw-pk-a { left: -16%; width: 30% }
    .hw-pk-b { left: 86%; width: 28% }
}

/* Where the annotations show (see the bats above), the left of the phone is theirs: no
   pumpkins there, and no mist either, which left alone read as a grey band with nothing in it,
   running to the panel's edge. It fades in from the phone's left edge to about its middle:
   31% and 50% of either bank's box (the viewBoxes in halloween.js). */
@media (min-width: 1551px) {
    .hw-pk-a,
    .hw-pk-f1 {
        display: none
    }

    .hw-fog {
        -webkit-mask-image: linear-gradient(to right, transparent 31%, #000 50%);
        mask-image: linear-gradient(to right, transparent 31%, #000 50%)
    }
}

/* Mist, in the dark theme only: on a light page it would not show. It drifts, slowly.
   Each bank is drawn in a frame 760 wide laid across 200% of the ground, the frame's left edge
   at -50%; each box is that frame grown to the bank's viewBox (halloween.js), which holds the
   whole of its blur. Boxes the size of the frame cut the blur, and showed it: a straight edge
   at both ends of the mist and along its foot, plain where the annotations leave the left of
   the phone bare. A box below: its viewBox, then where the frame's foot is. */

.hw-fog {
    position: absolute;
    display: none;
    animation: hw-drift 26s ease-in-out infinite alternate
}

/* viewBox -130 -14 1020 184; the frame's foot, 120 down it, is 1cqw under the ground. */
.hw-fog-back {
    left: calc(-50% - 200% * 130 / 760);
    width: calc(200% * 1020 / 760);
    bottom: calc(-1cqw - 200cqw * (170 - 120) / 760);
    aspect-ratio: 1020 / 184
}

/* viewBox -110 -28 960 146; the frame's foot, 80 down it, is 10.4cqw under the ground. */
.hw-fog-front {
    left: calc(-50% - 200% * 110 / 760);
    width: calc(200% * 960 / 760);
    bottom: calc(-10.4cqw - 200cqw * (118 - 80) / 760);
    aspect-ratio: 960 / 146;
    animation-duration: 34s
}

[data-theme="dark"] .hw-fog {
    display: block
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hw-fog {
        display: block
    }
}

@keyframes hw-drift {
    from { transform: translateX(-30px) }
    to { transform: translateX(30px) }
}

/* On a phone the foot of the phone is below the first screen: three more pumpkins sit at the
   end of the hero's buttons, where the second one leaves the row free. Distances from the
   row's lower right corner, measured on the 390 x 844 mock-up; the near one is 64px, which
   keeps its top 5px under the first button (70px touched it). */
.hw-cta-patch {
    display: none
}

@media (max-width: 900px) {
    .halloween .hero-cta {
        position: relative
    }

    .hw-cta-patch {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 3
    }

    .hw-pk-cf { right: 88px; bottom: 12px; width: 30px; opacity: .7 }
    .hw-pk-cc { right: -12px; bottom: 5px; width: 44px; opacity: .92; --hw-flame: 2.9s; --hw-flame-at: -1.1s }
    .hw-pk-ca { right: 16px; bottom: -3px; width: 64px; --hw-flame: 3.4s; --hw-flame-at: -2.2s }
}

/* Under 360px the far one would touch the second button. */
@media (max-width: 359px) {
    .hw-pk-cf {
        display: none
    }
}

/* --------------------------------------------------------------------------
   THE FOOT OF THE PAGE — lit pumpkins standing on the footer's top edge, in the room the last
   section leaves above it: its bottom padding, 100px (60px on a phone), and more on the right
   of a wide screen, where its second column ends sooner. A group at the right of the text
   column, and from 721px one more on its left. A last spider hangs from the same edge into the
   footer's own empty top, 64px (48px on a phone, style.css, footer). The footer is dark in both
   themes, so that spider is drawn in the pale ink in both.
   -------------------------------------------------------------------------- */

.halloween footer {
    position: relative
}

/* The ground: the footer's top edge, as wide as the text column above it. */
.hw-foot,
.hw-sky-foot {
    position: absolute;
    top: 0;
    left: var(--hw-margin);
    right: var(--hw-margin)
}

.hw-foot {
    z-index: 3;
    height: 0
}

.hw-sky-foot {
    height: 64px
}

/* Distances from the column's edges; a hair under the edge, so that they rest on it. */
.hw-pk-ea { right: 24px; bottom: -2px; width: 96px; --hw-flame: 3.1s; --hw-flame-at: -1.4s }
.hw-pk-eb { right: 128px; bottom: -2px; width: 62px; opacity: .92; --hw-flame: 2.8s; --hw-flame-at: -.3s }
.hw-pk-ec { right: 104px; bottom: 22px; width: 36px; opacity: .7 }
.hw-pk-ed { left: 6%; bottom: -2px; width: 70px; --hw-flame: 3.6s; --hw-flame-at: -2.7s }

.hw-s5 { left: 34%; animation-name: hw-drop-5; animation-duration: 16s; animation-delay: -6s; --hw-thread-length: 80px }

.hw-sky-foot .hw-spider {
    --hw-ink: var(--hw-pale-ink);
    --hw-thread: var(--hw-pale-thread)
}

@keyframes hw-drop-5 {
    0%, 10% { transform: translateY(-40px); animation-timing-function: cubic-bezier(.25, .6, .3, 1) }
    24% { transform: translateY(16px); animation-timing-function: ease-in-out }
    28% { transform: translateY(12px); animation-timing-function: ease-in-out }
    32% { transform: translateY(16px) }
    64% { transform: translateY(16px); animation-timing-function: cubic-bezier(.5, 0, .75, .4) }
    80%, 100% { transform: translateY(-40px) }
}

/* On a phone: the column's 20px of margin, 60px of room above the edge, 48px under it. */
@media (max-width: 720px) {
    .hw-foot,
    .hw-sky-foot {
        left: 20px;
        right: 20px
    }

    .hw-sky-foot {
        height: 48px
    }

    .hw-pk-ea { right: 8px; width: 60px }
    .hw-pk-eb { right: 72px; width: 40px }
    .hw-pk-ec { right: 56px; bottom: 16px; width: 24px }
    .hw-pk-ed { display: none }
    .hw-s5 { width: 22px; margin-left: -11px }
}

/* --------------------------------------------------------------------------
   THE STRIP'S SOUND — a round button before the time in the strip that shows a track playing,
   which plays an excerpt of Danse macabre (halloween.js, listen). In the strip's own colours,
   the same in both themes as the strip is: the accent of its bar, the icon in its black. The
   only piece of the decoration that takes a press, so the only one with a focus ring.
   -------------------------------------------------------------------------- */

/* The row it shares with the strip's time: beside the progress row, not in it, which assistive
   technology reads as an image. Its 32px take no more height than the time's 16px, the margins
   giving the rest back, so that nothing under the strip moves when it is put in — 8 to 16px did
   (measured in Chromium, 390 to 1440px). The strip's own gap, 14px, keeps the 8px it overhangs. */
.hw-np-row {
    display: flex;
    align-items: center;
    gap: 12px
}

.hw-np-row .np-progress {
    flex: 1;
    min-width: 0
}

.hw-np-play {
    flex: none;
    width: 32px;
    height: 32px;
    margin: -8px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--warn);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.hw-np-play svg {
    width: 14px;
    height: 14px;
    fill: currentColor
}

.hw-np-play .ic-pause,
.hw-np-play.playing .ic-play {
    display: none
}

.hw-np-play.playing .ic-pause {
    display: inline
}

.hw-np-play:focus-visible {
    outline: 2px solid var(--warn-line);
    outline-offset: 3px
}

/* --------------------------------------------------------------------------
   THE ORANGE GHOST — the day's game (halloween.js, hunt): shown to one visitor at a time, in
   the band at the top of a section, above its label, where the bats and the spiders go — 44px
   from the band's top 6px, inside the 60px a phone leaves there. A real button, 44px to the
   finger, the ghost in candlelight rather than in the page's ink. On the skies' level (3) and
   laid after them in its section, so in front of them, and under the carousel's controls like
   every piece of the day. It bobs where it stands; for a visitor who asked for less motion it
   stands still, and stays: it is the game, not a decoration.
   -------------------------------------------------------------------------- */

.hw-orange {
    position: absolute;
    top: 6px;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    animation: hw-bob 3.2s ease-in-out infinite
}

/* The orange of the app's own switches (audiogravity.ui, themes/minimal.css, dark:
   --switch-notification-bg), so that the ghost reads as the app's. It needs no edge: it stands
   at 3.6:1 on the light page's white and 3.3:1 on its grey band, 5.6:1 on the dark page — a
   control's shape needs 3:1. */
.hw-orange svg {
    display: block;
    width: 36px;
    height: auto;
    overflow: visible;
    fill: #ea580c;
    filter: drop-shadow(0 0 6px rgba(234, 88, 12, .7))
}

.hw-orange:focus-visible {
    outline: 2px solid var(--warn-line);
    outline-offset: 2px
}

@keyframes hw-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg) }
    50% { transform: translateY(-4px) rotate(3deg) }
}

/* The window a caught ghost opens: the key, the three steps that activate it, the rules. In the
   page's own colours and type, whichever theme it is in. Its margin given back: the browser
   centres a modal window with `margin: auto`, which the page's reset (style.css, `*`) takes
   away — it stood in the top left corner. */
.hw-catch {
    margin: auto;
    width: min(440px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-size-md);
    line-height: 1.55
}

.hw-catch::backdrop {
    background: rgba(0, 0, 0, .55)
}

.hw-catch h2 {
    margin: 0 0 12px;
    font-size: var(--font-size-xl);
    line-height: 1.25
}

.hw-catch p,
.hw-catch ol {
    margin: 0 0 12px
}

.hw-catch ol {
    padding-left: 20px
}

/* Underlined: the page's links lose theirs (style.css, `a`), and these sit in a sentence. */
.hw-catch a {
    color: inherit;
    text-decoration: underline
}

.hw-catch-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.hw-catch-key code {
    font-family: var(--mono);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: .04em;
    user-select: all
}

.hw-catch-note {
    color: var(--text3);
    font-size: var(--font-size-sm)
}

.hw-catch-copy,
.hw-catch-close {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg2);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer
}

.hw-catch form {
    margin: 4px 0 0;
    text-align: right
}

/* --------------------------------------------------------------------------
   STILLNESS — a browser that cannot read container units (Safari before 16) drops every
   declaration written with them, so the pieces they place stay out rather than misplaced: the
   skies, not to pile the bats and spiders in a corner; the panel's web, which grew to 300px
   over the phone; the pumpkins at the foot of the phone, which hung under it. The buttons' and
   the footer's are placed in px, and stay. A visitor who asked for less motion gets the webs
   and the pumpkins, unlit by any flicker; and nothing moves in a part of the page out of sight.
   -------------------------------------------------------------------------- */

@supports not (width: 1cqw) {
    .hw-sky,
    .hw-web-panel,
    .hw-ground {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-sky,
    .hw-ghost {
        display: none
    }

    .hw-halo,
    .hw-lit,
    .hw-fog {
        animation: none
    }

    .hw-orange {
        animation: none
    }
}

.hw-paused .hw-decor,
.hw-paused .hw-decor *,
.hw-paused .hw-orange {
    animation-play-state: paused
}

/* --------------------------------------------------------------------------
   FLIGHTS — each bat's path, sampled from a smooth curve through the points below and walked
   at an even speed, the bat leaning a little toward where it goes. Drawn on the 1440 x 900
   mock-up: the top band in cqw of its width and px of its 56px; the panel in cqw and cqh.
   Points (x, y on that screen): b1 -60,20 300,12 640,28 980,14 1300,26 1520,16 · b2 1510,38
   1150,30 800,42 450,32 120,40 -60,34 · b3 1520,660 1260,560 1060,430 900,320 800,190 770,60
   800,-70 · b4 1520,330 1380,300 1310,410 1350,540 1440,560 1480,470 1420,400 1530,330 ·
   b5 834,1027 784,827 824,627 764,447 814,287 924,127 974,7 · b6 (still until 55%) 1620,300
   1380,220 1180,170 1000,110 880,-120 · b7 1520,240 1350,200 1200,250 1050,200 1150,150
   1300,190 1530,170. The panel starts at x 720 and y 97 there, and measures 720 x 896.
   The margins' two, in cqw of a margin drawn 160px wide (0 at the screen's edge) and in px
   about the height they are laid at: b8 (still until 35%) -48,140 19,100 64,50 96,0 83,-50
   48,-80 22,-55 42,-15 77,-30 64,-95 -48,-150 · b9 (still until 45%) -48,170 40,140 88,100
   35,60 88,20 38,-20 83,-60 16,-110 -48,-140. At most 60cqw out from the edge: in the
   narrowest margin, 96px, no bat comes nearer than 18px to the text (measured in Chromium,
   2026-10-25, 721 to 1366px wide).
   -------------------------------------------------------------------------- */

@keyframes hw-fly-b1{0.0%{transform:translate(-4.2cqw,20px) rotate(10deg)}3.1%{transform:translate(-0.7cqw,19px) rotate(10deg)}7.5%{transform:translate(4.1cqw,16px) rotate(10deg)}12.7%{transform:translate(9.7cqw,14px) rotate(10deg)}17.9%{transform:translate(15.5cqw,12px) rotate(10deg)}22.8%{transform:translate(20.8cqw,12px) rotate(10deg)}27.2%{transform:translate(25.6cqw,14px) rotate(10deg)}31.5%{transform:translate(30.4cqw,18px) rotate(10deg)}35.8%{transform:translate(35.1cqw,23px) rotate(10deg)}40.0%{transform:translate(39.7cqw,26px) rotate(10deg)}44.3%{transform:translate(44.4cqw,28px) rotate(10deg)}48.6%{transform:translate(49.2cqw,27px) rotate(10deg)}53.0%{transform:translate(54.0cqw,23px) rotate(10deg)}57.3%{transform:translate(58.7cqw,19px) rotate(10deg)}61.6%{transform:translate(63.4cqw,16px) rotate(10deg)}65.8%{transform:translate(68.1cqw,14px) rotate(10deg)}70.0%{transform:translate(72.7cqw,15px) rotate(10deg)}74.3%{transform:translate(77.4cqw,18px) rotate(10deg)}78.5%{transform:translate(82.0cqw,22px) rotate(10deg)}82.4%{transform:translate(86.3cqw,25px) rotate(10deg)}86.1%{transform:translate(90.3cqw,26px) rotate(10deg)}89.5%{transform:translate(94.0cqw,25px) rotate(10deg)}92.8%{transform:translate(97.6cqw,23px) rotate(10deg)}95.7%{transform:translate(100.9cqw,20px) rotate(10deg)}98.2%{transform:translate(103.6cqw,18px) rotate(10deg)}100.0%{transform:translate(105.6cqw,16px) rotate(10deg)}}
@keyframes hw-fly-b2{0.0%{transform:translate(104.9cqw,38px) rotate(-10deg)}3.1%{transform:translate(101.5cqw,37px) rotate(-10deg)}7.6%{transform:translate(96.6cqw,34px) rotate(-10deg)}12.7%{transform:translate(91.0cqw,32px) rotate(-10deg)}18.0%{transform:translate(85.2cqw,30px) rotate(-10deg)}22.9%{transform:translate(79.9cqw,30px) rotate(-10deg)}27.4%{transform:translate(75.0cqw,31px) rotate(-10deg)}31.9%{transform:translate(70.1cqw,34px) rotate(-10deg)}36.3%{transform:translate(65.2cqw,38px) rotate(-10deg)}40.8%{transform:translate(60.4cqw,41px) rotate(-10deg)}45.2%{transform:translate(55.6cqw,42px) rotate(-10deg)}49.7%{transform:translate(50.7cqw,41px) rotate(-10deg)}54.2%{transform:translate(45.8cqw,39px) rotate(-10deg)}58.7%{transform:translate(40.9cqw,36px) rotate(-10deg)}63.1%{transform:translate(36.0cqw,33px) rotate(-10deg)}67.5%{transform:translate(31.2cqw,32px) rotate(-10deg)}72.0%{transform:translate(26.4cqw,33px) rotate(-10deg)}76.5%{transform:translate(21.5cqw,35px) rotate(-10deg)}80.9%{transform:translate(16.7cqw,37px) rotate(-10deg)}85.0%{transform:translate(12.2cqw,39px) rotate(-10deg)}88.5%{transform:translate(8.3cqw,40px) rotate(-10deg)}91.6%{transform:translate(5.0cqw,40px) rotate(-10deg)}94.4%{transform:translate(2.0cqw,38px) rotate(-10deg)}96.7%{transform:translate(-0.6cqw,37px) rotate(-10deg)}98.6%{transform:translate(-2.6cqw,35px) rotate(-10deg)}100.0%{transform:translate(-4.2cqw,34px) rotate(-10deg)}}
@keyframes hw-fly-b3{0.0%{transform:translate(111.1cqw,62.8cqh) rotate(-9deg)}3.4%{transform:translate(106.1cqw,61.4cqh) rotate(-9deg)}8.2%{transform:translate(98.9cqw,59.3cqh) rotate(-9deg)}13.7%{transform:translate(90.6cqw,56.9cqh) rotate(-9deg)}19.3%{transform:translate(82.3cqw,54.3cqh) rotate(-9deg)}24.3%{transform:translate(75.0cqw,51.7cqh) rotate(-9deg)}28.8%{transform:translate(68.8cqw,49.0cqh) rotate(-9deg)}33.1%{transform:translate(63.0cqw,46.0cqh) rotate(-8deg)}37.3%{transform:translate(57.5cqw,43.0cqh) rotate(-8deg)}41.3%{transform:translate(52.3cqw,40.0cqh) rotate(-8deg)}45.2%{transform:translate(47.2cqw,37.2cqh) rotate(-8deg)}48.9%{transform:translate(42.3cqw,34.6cqh) rotate(-8deg)}52.4%{transform:translate(37.5cqw,32.2cqh) rotate(-8deg)}55.8%{transform:translate(33.0cqw,29.9cqh) rotate(-8deg)}59.0%{transform:translate(28.8cqw,27.5cqh) rotate(-8deg)}62.2%{transform:translate(25.0cqw,24.9cqh) rotate(-7deg)}65.2%{transform:translate(21.5cqw,22.1cqh) rotate(-7deg)}68.2%{transform:translate(18.4cqw,19.2cqh) rotate(-6deg)}71.1%{transform:translate(15.6cqw,16.3cqh) rotate(-6deg)}73.9%{transform:translate(13.1cqw,13.3cqh) rotate(-5deg)}76.6%{transform:translate(11.1cqw,10.4cqh) rotate(-4deg)}79.0%{transform:translate(9.5cqw,7.5cqh) rotate(-4deg)}81.4%{transform:translate(8.3cqw,4.6cqh) rotate(-3deg)}83.8%{transform:translate(7.5cqw,1.7cqh) rotate(-2deg)}86.0%{transform:translate(7.1cqw,-1.2cqh) rotate(-1deg)}88.3%{transform:translate(6.9cqw,-4.1cqh) rotate(0deg)}90.8%{transform:translate(7.3cqw,-7.3cqh) rotate(2deg)}93.5%{transform:translate(8.2cqw,-10.6cqh) rotate(2deg)}96.1%{transform:translate(9.3cqw,-13.9cqh) rotate(3deg)}98.4%{transform:translate(10.4cqw,-16.7cqh) rotate(3deg)}100.0%{transform:translate(11.1cqw,-18.6cqh) rotate(3deg)}}
@keyframes hw-fly-b4{0.0%{transform:translate(111.1cqw,26.0cqh) rotate(-10deg)}2.5%{transform:translate(108.3cqw,25.3cqh) rotate(-9deg)}6.2%{transform:translate(104.3cqw,24.2cqh) rotate(-10deg)}10.2%{transform:translate(99.7cqw,23.0cqh) rotate(-10deg)}14.1%{transform:translate(95.2cqw,22.4cqh) rotate(-10deg)}17.2%{transform:translate(91.7cqw,22.7cqh) rotate(-9deg)}20.0%{transform:translate(88.9cqw,24.1cqh) rotate(-8deg)}23.2%{transform:translate(86.3cqw,26.3cqh) rotate(-6deg)}26.6%{transform:translate(84.3cqw,29.1cqh) rotate(-4deg)}30.0%{transform:translate(82.8cqw,32.1cqh) rotate(-3deg)}33.1%{transform:translate(81.9cqw,34.9cqh) rotate(-1deg)}36.3%{transform:translate(82.0cqw,37.9cqh) rotate(1deg)}39.8%{transform:translate(82.7cqw,41.2cqh) rotate(2deg)}43.4%{transform:translate(84.0cqw,44.4cqh) rotate(4deg)}46.8%{transform:translate(85.7cqw,47.3cqh) rotate(5deg)}49.5%{transform:translate(87.5cqw,49.4cqh) rotate(7deg)}51.9%{transform:translate(89.7cqw,50.9cqh) rotate(9deg)}54.4%{transform:translate(92.3cqw,51.8cqh) rotate(10deg)}56.9%{transform:translate(95.2cqw,52.3cqh) rotate(10deg)}59.1%{transform:translate(97.8cqw,52.2cqh) rotate(10deg)}61.1%{transform:translate(100.0cqw,51.7cqh) rotate(9deg)}63.1%{transform:translate(101.8cqw,50.4cqh) rotate(6deg)}65.6%{transform:translate(103.4cqw,48.4cqh) rotate(5deg)}68.3%{transform:translate(104.7cqw,46.1cqh) rotate(3deg)}71.0%{transform:translate(105.4cqw,43.7cqh) rotate(2deg)}73.1%{transform:translate(105.6cqw,41.6cqh) rotate(-2deg)}75.2%{transform:translate(104.4cqw,39.9cqh) rotate(-6deg)}77.8%{transform:translate(102.1cqw,38.3cqh) rotate(-8deg)}80.5%{transform:translate(99.5cqw,36.8cqh) rotate(-8deg)}82.8%{transform:translate(97.6cqw,35.3cqh) rotate(-5deg)}84.4%{transform:translate(97.2cqw,33.8cqh) rotate(3deg)}86.8%{transform:translate(99.0cqw,32.1cqh) rotate(8deg)}90.2%{transform:translate(102.4cqw,30.3cqh) rotate(9deg)}94.1%{transform:translate(106.4cqw,28.6cqh) rotate(9deg)}97.6%{transform:translate(110.0cqw,27.1cqh) rotate(9deg)}100.0%{transform:translate(112.5cqw,26.0cqh) rotate(9deg)}}
@keyframes hw-fly-b5{0.0%{transform:translate(15.8cqw,103.8cqh) rotate(-3deg)}2.6%{transform:translate(14.7cqw,100.8cqh) rotate(-3deg)}6.3%{transform:translate(13.0cqw,96.5cqh) rotate(-3deg)}10.5%{transform:translate(11.1cqw,91.5cqh) rotate(-3deg)}14.9%{transform:translate(9.6cqw,86.3cqh) rotate(-2deg)}18.9%{transform:translate(8.9cqw,81.5cqh) rotate(-0deg)}22.6%{transform:translate(9.4cqw,77.0cqh) rotate(2deg)}26.4%{transform:translate(10.9cqw,72.4cqh) rotate(3deg)}30.2%{transform:translate(12.6cqw,67.9cqh) rotate(3deg)}34.0%{transform:translate(14.0cqw,63.5cqh) rotate(2deg)}37.5%{transform:translate(14.4cqw,59.2cqh) rotate(-1deg)}41.0%{transform:translate(13.4cqw,55.0cqh) rotate(-3deg)}44.6%{transform:translate(11.4cqw,50.8cqh) rotate(-4deg)}48.3%{transform:translate(9.0cqw,46.8cqh) rotate(-4deg)}51.7%{transform:translate(7.0cqw,42.9cqh) rotate(-3deg)}54.9%{transform:translate(6.1cqw,39.1cqh) rotate(-1deg)}58.0%{transform:translate(6.4cqw,35.3cqh) rotate(1deg)}61.0%{transform:translate(7.4cqw,31.8cqh) rotate(3deg)}64.0%{transform:translate(8.9cqw,28.2cqh) rotate(4deg)}67.2%{transform:translate(10.9cqw,24.7cqh) rotate(4deg)}70.4%{transform:translate(13.1cqw,21.2cqh) rotate(5deg)}73.8%{transform:translate(15.7cqw,17.6cqh) rotate(5deg)}77.6%{transform:translate(19.0cqw,13.8cqh) rotate(6deg)}81.3%{transform:translate(22.4cqw,10.2cqh) rotate(6deg)}84.9%{transform:translate(25.7cqw,6.6cqh) rotate(6deg)}88.1%{transform:translate(28.3cqw,3.3cqh) rotate(5deg)}91.0%{transform:translate(30.4cqw,0.2cqh) rotate(4deg)}93.8%{transform:translate(32.0cqw,-3.0cqh) rotate(4deg)}96.4%{transform:translate(33.4cqw,-5.9cqh) rotate(3deg)}98.5%{transform:translate(34.5cqw,-8.3cqh) rotate(3deg)}100.0%{transform:translate(35.3cqw,-10.0cqh) rotate(3deg)}}
@keyframes hw-fly-b6{0%{transform:translate(125.0cqw,22.7cqh)}55.0%{transform:translate(125.0cqw,22.7cqh) rotate(-9deg)}56.7%{transform:translate(120.4cqw,21.4cqh) rotate(-9deg)}59.2%{transform:translate(113.8cqw,19.6cqh) rotate(-9deg)}62.1%{transform:translate(106.2cqw,17.5cqh) rotate(-9deg)}64.9%{transform:translate(98.5cqw,15.4cqh) rotate(-10deg)}67.5%{transform:translate(91.7cqw,13.7cqh) rotate(-10deg)}69.7%{transform:translate(85.7cqw,12.4cqh) rotate(-10deg)}71.8%{transform:translate(80.0cqw,11.3cqh) rotate(-10deg)}73.8%{transform:translate(74.5cqw,10.3cqh) rotate(-10deg)}75.7%{transform:translate(69.2cqw,9.3cqh) rotate(-10deg)}77.7%{transform:translate(63.9cqw,8.1cqh) rotate(-10deg)}79.6%{transform:translate(58.6cqw,7.2cqh) rotate(-10deg)}81.5%{transform:translate(53.3cqw,6.5cqh) rotate(-10deg)}83.4%{transform:translate(48.2cqw,5.5cqh) rotate(-10deg)}85.2%{transform:translate(43.3cqw,4.0cqh) rotate(-9deg)}87.1%{transform:translate(38.9cqw,1.5cqh) rotate(-7deg)}89.6%{transform:translate(34.8cqw,-2.9cqh) rotate(-5deg)}92.5%{transform:translate(30.8cqw,-8.7cqh) rotate(-4deg)}95.5%{transform:translate(27.3cqw,-14.9cqh) rotate(-4deg)}98.2%{transform:translate(24.4cqw,-20.4cqh) rotate(-4deg)}100.0%{transform:translate(22.2cqw,-24.2cqh) rotate(-4deg)}}
@keyframes hw-fly-b7{0.0%{transform:translate(111.1cqw,16.0cqh) rotate(-10deg)}2.4%{transform:translate(107.9cqw,15.2cqh) rotate(-10deg)}5.9%{transform:translate(103.2cqw,14.0cqh) rotate(-10deg)}9.9%{transform:translate(97.9cqw,12.8cqh) rotate(-10deg)}14.0%{transform:translate(92.4cqw,11.8cqh) rotate(-10deg)}17.5%{transform:translate(87.5cqw,11.5cqh) rotate(-10deg)}20.7%{transform:translate(83.2cqw,12.1cqh) rotate(-10deg)}24.0%{transform:translate(79.0cqw,13.5cqh) rotate(-9deg)}27.3%{transform:translate(74.9cqw,15.2cqh) rotate(-9deg)}30.4%{transform:translate(70.8cqw,16.5cqh) rotate(-10deg)}33.5%{transform:translate(66.7cqw,17.1cqh) rotate(-10deg)}36.9%{transform:translate(61.9cqw,16.7cqh) rotate(-10deg)}40.8%{transform:translate(56.7cqw,15.6cqh) rotate(-10deg)}44.6%{transform:translate(51.7cqw,14.3cqh) rotate(-9deg)}47.7%{transform:translate(47.8cqw,12.8cqh) rotate(-9deg)}49.5%{transform:translate(45.8cqw,11.5cqh) rotate(-4deg)}50.7%{transform:translate(46.3cqw,10.2cqh) rotate(6deg)}52.8%{transform:translate(48.6cqw,8.8cqh) rotate(9deg)}55.5%{transform:translate(52.0cqw,7.4cqh) rotate(9deg)}58.5%{transform:translate(55.9cqw,6.4cqh) rotate(10deg)}61.3%{transform:translate(59.7cqw,5.9cqh) rotate(10deg)}63.9%{transform:translate(63.3cqw,6.3cqh) rotate(10deg)}66.7%{transform:translate(67.0cqw,7.3cqh) rotate(9deg)}69.9%{transform:translate(71.1cqw,8.6cqh) rotate(9deg)}73.3%{transform:translate(75.6cqw,9.8cqh) rotate(10deg)}76.9%{transform:translate(80.6cqw,10.4cqh) rotate(10deg)}81.3%{transform:translate(86.7cqw,10.3cqh) rotate(10deg)}86.6%{transform:translate(94.1cqw,9.9cqh) rotate(10deg)}92.0%{transform:translate(101.5cqw,9.2cqh) rotate(10deg)}96.7%{transform:translate(108.0cqw,8.6cqh) rotate(10deg)}100.0%{transform:translate(112.5cqw,8.1cqh) rotate(10deg)}}
@keyframes hw-fly-b8{0%{transform:translate(-30.0cqw,140px)}35.0%{transform:translate(-30.0cqw,140px) rotate(9deg)}36.1%{transform:translate(-24.1cqw,135px) rotate(9deg)}37.7%{transform:translate(-15.6cqw,127px) rotate(9deg)}39.6%{transform:translate(-5.9cqw,119px) rotate(9deg)}41.5%{transform:translate(3.7cqw,109px) rotate(8deg)}43.1%{transform:translate(11.9cqw,100px) rotate(8deg)}44.6%{transform:translate(18.5cqw,91px) rotate(7deg)}46.0%{transform:translate(24.5cqw,81px) rotate(7deg)}47.4%{transform:translate(30.0cqw,70px) rotate(6deg)}48.8%{transform:translate(35.1cqw,60px) rotate(6deg)}50.1%{transform:translate(40.0cqw,50px) rotate(6deg)}51.4%{transform:translate(45.0cqw,40px) rotate(6deg)}52.8%{transform:translate(49.9cqw,30px) rotate(6deg)}54.1%{transform:translate(54.4cqw,20px) rotate(5deg)}55.2%{transform:translate(57.9cqw,10px) rotate(4deg)}56.3%{transform:translate(60.0cqw,0px) rotate(2deg)}57.4%{transform:translate(60.4cqw,-10px) rotate(-0deg)}58.5%{transform:translate(59.4cqw,-21px) rotate(-2deg)}59.7%{transform:translate(57.5cqw,-31px) rotate(-3deg)}60.8%{transform:translate(54.8cqw,-41px) rotate(-4deg)}61.8%{transform:translate(51.9cqw,-50px) rotate(-5deg)}62.8%{transform:translate(48.3cqw,-58px) rotate(-6deg)}64.0%{transform:translate(43.8cqw,-66px) rotate(-7deg)}65.0%{transform:translate(39.0cqw,-73px) rotate(-8deg)}66.0%{transform:translate(34.2cqw,-78px) rotate(-9deg)}66.7%{transform:translate(30.0cqw,-80px) rotate(-10deg)}67.4%{transform:translate(25.9cqw,-79px) rotate(-9deg)}68.2%{transform:translate(21.7cqw,-75px) rotate(-8deg)}69.1%{transform:translate(17.9cqw,-69px) rotate(-6deg)}70.0%{transform:translate(15.1cqw,-62px) rotate(-4deg)}70.7%{transform:translate(13.8cqw,-55px) rotate(-1deg)}71.5%{transform:translate(14.3cqw,-47px) rotate(2deg)}72.6%{transform:translate(16.2cqw,-37px) rotate(4deg)}73.7%{transform:translate(19.2cqw,-28px) rotate(5deg)}74.7%{transform:translate(22.7cqw,-20px) rotate(7deg)}75.5%{transform:translate(26.2cqw,-15px) rotate(9deg)}76.2%{transform:translate(30.5cqw,-14px) rotate(10deg)}77.1%{transform:translate(35.8cqw,-15px) rotate(10deg)}78.0%{transform:translate(41.1cqw,-18px) rotate(9deg)}78.9%{transform:translate(45.5cqw,-23px) rotate(7deg)}79.8%{transform:translate(48.1cqw,-30px) rotate(3deg)}80.9%{transform:translate(49.4cqw,-40px) rotate(1deg)}82.2%{transform:translate(50.0cqw,-53px) rotate(-0deg)}83.7%{transform:translate(49.1cqw,-67px) rotate(-2deg)}85.3%{transform:translate(46.1cqw,-82px) rotate(-5deg)}87.0%{transform:translate(40.0cqw,-95px) rotate(-7deg)}89.3%{transform:translate(28.8cqw,-108px) rotate(-9deg)}92.2%{transform:translate(13.1cqw,-120px) rotate(-9deg)}95.3%{transform:translate(-4.1cqw,-132px) rotate(-9deg)}98.1%{transform:translate(-19.5cqw,-143px) rotate(-9deg)}100.0%{transform:translate(-30.0cqw,-150px) rotate(-9deg)}}
@keyframes hw-fly-b9{0%{transform:translate(-30.0cqw,170px)}45.0%{transform:translate(-30.0cqw,170px) rotate(10deg)}46.3%{transform:translate(-22.1cqw,166px) rotate(10deg)}48.1%{transform:translate(-10.8cqw,161px) rotate(10deg)}50.1%{transform:translate(2.2cqw,154px) rotate(9deg)}52.2%{transform:translate(14.7cqw,147px) rotate(9deg)}53.9%{transform:translate(25.0cqw,140px) rotate(9deg)}55.4%{transform:translate(33.6cqw,133px) rotate(9deg)}56.8%{transform:translate(41.8cqw,125px) rotate(8deg)}58.2%{transform:translate(48.7cqw,116px) rotate(7deg)}59.2%{transform:translate(53.4cqw,108px) rotate(5deg)}60.0%{transform:translate(55.0cqw,100px) rotate(-2deg)}61.0%{transform:translate(51.4cqw,92px) rotate(-8deg)}62.5%{transform:translate(43.1cqw,84px) rotate(-9deg)}64.1%{transform:translate(33.4cqw,76px) rotate(-9deg)}65.6%{transform:translate(25.3cqw,68px) rotate(-8deg)}66.5%{transform:translate(21.9cqw,60px) rotate(0deg)}67.4%{transform:translate(25.3cqw,52px) rotate(8deg)}68.9%{transform:translate(33.4cqw,44px) rotate(9deg)}70.6%{transform:translate(43.2cqw,36px) rotate(9deg)}72.0%{transform:translate(51.4cqw,28px) rotate(8deg)}73.0%{transform:translate(55.0cqw,20px) rotate(0deg)}73.9%{transform:translate(51.9cqw,12px) rotate(-7deg)}75.3%{transform:translate(44.3cqw,4px) rotate(-9deg)}76.9%{transform:translate(35.1cqw,-4px) rotate(-9deg)}78.3%{transform:translate(27.2cqw,-12px) rotate(-7deg)}79.2%{transform:translate(23.8cqw,-20px) rotate(-1deg)}80.1%{transform:translate(26.7cqw,-28px) rotate(7deg)}81.4%{transform:translate(34.1cqw,-36px) rotate(9deg)}83.0%{transform:translate(42.8cqw,-43px) rotate(8deg)}84.3%{transform:translate(49.8cqw,-51px) rotate(7deg)}85.2%{transform:translate(51.9cqw,-60px) rotate(-2deg)}86.3%{transform:translate(47.9cqw,-70px) rotate(-7deg)}87.8%{transform:translate(40.1cqw,-80px) rotate(-8deg)}89.7%{transform:translate(30.0cqw,-91px) rotate(-8deg)}91.6%{transform:translate(19.4cqw,-101px) rotate(-9deg)}93.2%{transform:translate(10.0cqw,-110px) rotate(-9deg)}94.8%{transform:translate(1.2cqw,-118px) rotate(-9deg)}96.3%{transform:translate(-8.1cqw,-125px) rotate(-9deg)}97.8%{transform:translate(-17.0cqw,-131px) rotate(-9deg)}99.1%{transform:translate(-24.6cqw,-136px) rotate(-9deg)}100.0%{transform:translate(-30.0cqw,-140px) rotate(-9deg)}}