/* ============================================================
   Oktoberfest decoration — glasses of beer drifting across the
   chatroom, a foam head on the chat panel, carbonation rising
   through it, plus a serving wench in the corner, low fog and
   embers.

   Art: ui/images/beer-*.svg and ui/images/wench.svg.
   Loaded by ui/templates_d/head.pxtm, markup from
   ui/halloween.inc. Remove those two references to take it
   back off.

   The overlay is pointer-events:none, so it can never block
   a click, and z-index:9999 keeps it under the panels,
   moderation popup and new-features popup (100001+).
   ============================================================ */

#halloween_layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- flight band ---------- */

/* the glasses are confined to this band, which starts below the
   banner (112px with the logo, 52px in iframe mode). clipping here is
   the hard guarantee that nothing flies across the logo or nav buttons. */
.hsky {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 44px;
    overflow: hidden;
}

/* ---------- the beer ---------- */

.hglass {
    position: absolute;
    left: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.hglass-inner {
    animation: hglass-bob 3.4s ease-in-out infinite alternate;
}

.hglass img {
    display: block;
    width: 100%;
    height: auto;
    /* the chat sits on a near-black background, so a soft shadow keeps
       the glass readable instead of melting into it */
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}

/* a dimpled Imperial pint */
.hglass-1 {
    top: 16%;
    width: clamp(38px, 6.5vw, 62px);
    opacity: 0.9;
    animation-name: hglass-path-1;
    animation-duration: 24s;
    animation-delay: -3s;
}

/* the masskrug, biggest of the five */
.hglass-2 {
    top: 36%;
    width: clamp(48px, 9.5vw, 88px);
    opacity: 0.95;
    animation-name: hglass-path-2;
    animation-duration: 32s;
    animation-delay: -13s;
}

/* a weizen vase */
.hglass-3 {
    top: 58%;
    width: clamp(30px, 5.5vw, 50px);
    opacity: 0.8;
    animation-name: hglass-path-3;
    animation-duration: 19s;
    animation-delay: -7s;
}

/* a tall pilsner, flying right-to-left */
.hglass-4 {
    top: 10%;
    width: clamp(26px, 4.6vw, 42px);
    opacity: 0.85;
    animation-name: hglass-path-4;
    animation-duration: 40s;
    animation-delay: -24s;
}

/* a tulip */
.hglass-5 {
    top: 78%;
    width: clamp(38px, 7.5vw, 70px);
    opacity: 0.85;
    animation-name: hglass-path-5;
    animation-duration: 27s;
    animation-delay: -17s;
}

/* stagger the bob so the glasses don't move in unison */
.hglass-2 .hglass-inner {
    animation-duration: 4.1s;
    animation-delay: -1.3s;
}

.hglass-3 .hglass-inner {
    animation-duration: 2.8s;
    animation-delay: -0.7s;
}

.hglass-4 .hglass-inner {
    animation-duration: 5.2s;
    animation-delay: -2.4s;
}

.hglass-5 .hglass-inner {
    animation-duration: 3.7s;
    animation-delay: -1.9s;
}

/* Flight paths: each glass wanders — rising, sinking, tilting —
   rather than tracking a straight line across the screen. */
@keyframes hglass-path-1 {
    0% {
        transform: translate3d(-14vw, 0vh, 0) rotate(0deg);
    }
    16% {
        transform: translate3d(10vw, -4vh, 0) rotate(-6deg);
    }
    34% {
        transform: translate3d(33vw, 3vh, 0) rotate(4deg);
    }
    52% {
        transform: translate3d(56vw, -5vh, 0) rotate(-7deg);
    }
    72% {
        transform: translate3d(80vw, 2vh, 0) rotate(3deg);
    }
    88% {
        transform: translate3d(99vw, -3vh, 0) rotate(-4deg);
    }
    100% {
        transform: translate3d(114vw, 0vh, 0) rotate(0deg);
    }
}

@keyframes hglass-path-2 {
    0% {
        transform: translate3d(-18vw, 4vh, 0) rotate(3deg);
    }
    20% {
        transform: translate3d(6vw, -5vh, 0) rotate(-8deg);
    }
    41% {
        transform: translate3d(31vw, 5vh, 0) rotate(6deg);
    }
    63% {
        transform: translate3d(61vw, -3vh, 0) rotate(-3deg);
    }
    82% {
        transform: translate3d(88vw, 4vh, 0) rotate(5deg);
    }
    100% {
        transform: translate3d(118vw, -1vh, 0) rotate(-3deg);
    }
}

@keyframes hglass-path-3 {
    0% {
        transform: translate3d(-16vw, -3vh, 0) rotate(-4deg);
    }
    22% {
        transform: translate3d(14vw, 4vh, 0) rotate(5deg);
    }
    47% {
        transform: translate3d(44vw, -5vh, 0) rotate(-6deg);
    }
    70% {
        transform: translate3d(76vw, 1vh, 0) rotate(3deg);
    }
    100% {
        transform: translate3d(116vw, -2vh, 0) rotate(0deg);
    }
}

/* the pilsner travels right-to-left, higher and slower */
@keyframes hglass-path-4 {
    0% {
        transform: translate3d(114vw, 1vh, 0) rotate(0deg);
    }
    18% {
        transform: translate3d(86vw, -5vh, 0) rotate(5deg);
    }
    37% {
        transform: translate3d(60vw, 4vh, 0) rotate(-4deg);
    }
    58% {
        transform: translate3d(33vw, -6vh, 0) rotate(7deg);
    }
    78% {
        transform: translate3d(8vw, 2vh, 0) rotate(-3deg);
    }
    100% {
        transform: translate3d(-18vw, -4vh, 0) rotate(0deg);
    }
}

@keyframes hglass-path-5 {
    0% {
        transform: translate3d(-20vw, -4vh, 0) rotate(-3deg);
    }
    25% {
        transform: translate3d(8vw, 4vh, 0) rotate(7deg);
    }
    50% {
        transform: translate3d(40vw, -3vh, 0) rotate(-5deg);
    }
    75% {
        transform: translate3d(78vw, 3vh, 0) rotate(4deg);
    }
    100% {
        transform: translate3d(120vw, 0vh, 0) rotate(0deg);
    }
}

@keyframes hglass-bob {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-9px);
    }
}

/* ---------- low fog ---------- */

.hfog {
    position: absolute;
    left: -20%;
    width: 140%;
    bottom: 0;
    height: 34vh;
    background: radial-gradient(ellipse at 50% 100%,
            rgba(170, 200, 230, 0.15), rgba(170, 200, 230, 0.045) 45%,
            rgba(170, 200, 230, 0) 72%);
}

.hfog-1 {
    animation: hfog-drift 70s ease-in-out infinite alternate;
}

.hfog-2 {
    height: 26vh;
    opacity: 0.7;
    animation: hfog-drift 105s ease-in-out infinite alternate-reverse;
}

@keyframes hfog-drift {
    from {
        transform: translate3d(-3%, 0, 0);
    }
    to {
        transform: translate3d(3%, 0, 0);
    }
}

/* ---------- embers ---------- */

.hember {
    position: absolute;
    bottom: 46px;
    left: var(--x, 50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 196, 128, 1);
    box-shadow: 0 0 9px rgba(255, 150, 60, 0.85);
    opacity: 0;
    animation: hember-rise var(--d, 18s) linear infinite;
    animation-delay: var(--t, 0s);
}

@keyframes hember-rise {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    12% {
        opacity: 0.75;
    }
    55% {
        transform: translate3d(9px, -34vh, 0);
        opacity: 0.5;
    }
    85% {
        opacity: 0.22;
    }
    100% {
        transform: translate3d(-6px, -64vh, 0);
        opacity: 0;
    }
}

/* ---------- foam head on the chat panel ---------- */

/* the script in ui/halloween.inc pins this to the panel's top edge and
   sets its width, so it always spans the chat exactly. the ::after bar
   is the body of the head; the two radial layers are the lobes sitting
   proud of it, which repeat at different pitches so the foam never
   looks like a row of identical bumps. */
.hfoam {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 22px;
    background:
        radial-gradient(circle at 50% 100%,
            #ffffff 0 58%, rgba(255, 255, 255, 0) 60%) 0 100% / 30px 22px repeat-x,
        radial-gradient(circle at 50% 100%,
            #fdf6e7 0 58%, rgba(253, 246, 231, 0) 60%) 15px 100% / 19px 17px repeat-x;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.hfoam::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(180deg, #fffdf8, #efdfc2);
    border-radius: 0 0 2px 2px;
}

/* ---------- carbonation ---------- */

/* sized to the chat panel and clipped by it, so the fizz stays inside
   the chat space and vanishes at its edges */
.hchatclip {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hbubble {
    position: absolute;
    left: var(--x, 50%);
    bottom: -10px;
    width: var(--s, 4px);
    height: var(--s, 4px);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
            #ffffff 0 34%, rgba(255, 247, 222, 0.7) 58%,
            rgba(255, 226, 160, 0.12) 100%);
    box-shadow: 0 0 5px rgba(255, 232, 180, 0.45);
    opacity: 0;
    animation: hbubble-rise var(--d, 9s) linear infinite;
    animation-delay: var(--t, 0s);
}

/* bottom is a percentage of the panel, so the rise fills the chat space
   whatever height it has; the small drift keeps the fizz off dead straight
   lines */
@keyframes hbubble-rise {
    0% {
        bottom: -10px;
        transform: translateX(0) scale(0.7);
        opacity: 0;
    }
    8% {
        opacity: 0.9;
    }
    35% {
        transform: translateX(7px) scale(1);
    }
    68% {
        transform: translateX(-5px) scale(1.02);
        opacity: 0.75;
    }
    100% {
        bottom: 101%;
        transform: translateX(3px) scale(1.05);
        opacity: 0;
    }
}

/* ---------- the serving wench ---------- */

/* she is sized to the chat panel and clipped by it, so when she sinks she
   disappears into the chatbox instead of sliding over the input bar */
.hwench {
    position: absolute;
    right: 12px;
    bottom: 0;
    display: block;
    width: clamp(112px, 12.5vw, 170px);
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.55));
    animation: hwench-bob 4s ease-in-out infinite alternate;
}

/* 0 = whole picture in the corner, 60% = sunk to the shoulders. the
   percentage is of her own height, so it holds at every size. */
@keyframes hwench-bob {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(60%);
    }
}

/* ---------- mobile chat view ---------- */

/* the mobile template's top bar is 30pt + 5pt padding (~53px) and its
   chat panel runs from 48pt to 40pt, so the flight band is
   re-anchored to that layout */
.halloween-m .hsky {
    top: 60px;
    bottom: 56px;
}

.halloween-m .hwench {
    right: 6px;
    width: clamp(84px, 26vw, 118px);
}

.halloween-m .hfoam {
    height: 16px;
    background:
        radial-gradient(circle at 50% 100%,
            #ffffff 0 58%, rgba(255, 255, 255, 0) 60%) 0 100% / 21px 16px repeat-x,
        radial-gradient(circle at 50% 100%,
            #fdf6e7 0 58%, rgba(253, 246, 231, 0) 60%) 10px 100% / 13px 12px repeat-x;
}

.halloween-m .hfoam::after {
    height: 6px;
}

/* ---------- respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .hglass,
    .hember,
    .hbubble {
        display: none;
    }
    .hfog,
    .hwench {
        animation: none;
    }
}