/* Browser walks src left->right, stops at first local hit.
   Mac/Win: uses local Comic Sans MS, zero download.
   iOS: no local match -> fetches Comic Neue ttf. Conditional load, no JS. */
@font-face {
    font-family: "ComicStack";
    src:
        local("Comic Sans MS"),
        local("ComicSansMS"),
        local("Chalkboard SE"),
        url("https://fonts.gstatic.com/s/comicneue/v9/4UaErEJDsxBrF37olUeD_xHMwps.ttf")
            format("truetype");
    font-display: swap;
}

body {
    background: #111;
    overflow-x: hidden;
}

h1,
p {
    margin-top: 0px;
    margin-bottom: 50px;
    text-align: center;
    font-family: "ComicStack", cursive;
    line-height: 2.2;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: #fff;
    /* white core + 18 neon shadow layers (20deg steps) = 19 color steps */
    text-shadow:
        -4px 4px hsl(0, 100%, 45%),
        -8px 8px hsl(20, 100%, 45%),
        -12px 12px hsl(40, 100%, 45%),
        -16px 16px hsl(60, 100%, 45%),
        -20px 20px hsl(80, 100%, 45%),
        -24px 24px hsl(100, 100%, 45%),
        -28px 28px hsl(120, 100%, 45%),
        -32px 32px hsl(140, 100%, 45%),
        -36px 36px hsl(160, 100%, 45%),
        -40px 40px hsl(180, 100%, 45%),
        -44px 44px hsl(200, 100%, 45%),
        -48px 48px hsl(220, 100%, 45%),
        -52px 52px hsl(240, 100%, 45%),
        -56px 56px hsl(260, 100%, 45%),
        -60px 60px hsl(280, 100%, 45%),
        -64px 64px hsl(300, 100%, 45%),
        -68px 68px hsl(320, 100%, 45%),
        -72px 72px hsl(340, 100%, 45%);
}

/* base letters sit still (cheap). only the JS "flyers" move. */
.bounce {
    display: inline-block;
}

/* fixed center label, pinned to viewport middle, above canvas */
#center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: none;
    text-align: center;
    font-family: "ComicStack", cursive;
    text-transform: lowercase;
    color: #fff;
    font-size: 2.5rem;
    letter-spacing: 0.15rem;
}

/* flyers live on a canvas, not the DOM. one layer, rainbow trail. */
#trail {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}