/* =====================================================================
   claubes.css — the look of sky/claubes.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.claube-crew {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--crew-floor, 2.4vh);
    height: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity .4s;
    --flick: var(--claubes-flick) 16 16, pointer;
}
body[data-place=city] .claube-crew {
    --crew-floor: calc(max(20vh, 130px) * .45 - 2px);
}
body.sky-view .claube-crew,
body.peep-view .claube-crew,
body.peep-close .claube-crew,
body.leaving .claube-crew,
body.paint-open .claube-crew,
body.records-open .claube-crew,
body.gallery-open .claube-crew,
body.mirror-open .claube-crew {
    opacity: 0;
}
.mini-claube {
    position: absolute;
    bottom: 0;
    width: 3.4vw;
    min-width: 34px;
    max-width: 64px;
    aspect-ratio: 40 / 52;
    margin-left: -1.7vw;
    pointer-events: auto;
    cursor: var(--flick);
    transition: left 1.6s linear;
}
body.inv-holding .mini-claube {
    cursor: crosshair;
}
.mini-claube .mc-body {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
}
.mini-claube .mc-body>svg,
.mini-claube .mc-body>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}
.mini-claube.flip .mc-body>svg,
.mini-claube.flip .mc-body>img {
    transform: scaleX(-1);
}
.mini-claube .mc-face-happy {
    display: none;
}
.claube-crew.happy .mini-claube .mc-face-happy {
    display: inline;
}
.claube-crew.happy .mini-claube .mc-face-plain {
    display: none;
}
/* crawling up out of the floor */
.mini-claube.crawl .mc-body {
    animation: mc-crawl 1.1s cubic-bezier(.3, 1.3, .5, 1) both;
}
@keyframes mc-crawl {
    0% {
        transform: translateY(110%) rotate(-25deg) scaleY(.6);
    }
    40% {
        transform: translateY(45%) rotate(18deg) scaleY(.8);
    }
    70% {
        transform: translateY(8%) rotate(-10deg);
    }
    100% {
        transform: none;
    }
}
.mini-claube.scurry .mc-body {
    animation: mc-scurry .18s linear infinite alternate;
}
@keyframes mc-scurry {
    from {
        transform: rotate(-9deg) translateY(-2px);
    }
    to {
        transform: rotate(9deg);
    }
}
/* dancing: four hops a cycle, on the beat (sky/music.js keeps anything named g-… in time) */
.claube-crew.dancing .mini-claube:not(.crawl):not(.scurry) .mc-body {
    animation: g-claube-bop 2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes g-claube-bop {
    0%,
    50%,
    100% {
        transform: translateY(0) rotate(0) scale(1.06, .94);
    }
    12.5% {
        transform: translateY(-22%) rotate(-10deg) scale(.96, 1.05);
    }
    25% {
        transform: translateY(0) rotate(0) scale(1.08, .92);
    }
    37.5% {
        transform: translateY(-26%) rotate(12deg) scale(.95, 1.06);
    }
    62.5% {
        transform: translateY(-18%) rotate(-6deg) scaleX(-1);
    }
    75% {
        transform: translateY(0) scale(1.08, .92);
    }
    87.5% {
        transform: translateY(-24%) rotate(8deg);
    }
}
.claube-crew.dancing .mini-claube .mc-arm {
    animation: mc-arms .5s ease-in-out infinite alternate;
    transform-box: fill-box;
}
.claube-crew.dancing .mini-claube .mc-arm.l {
    transform-origin: 100% 100%;
}
.claube-crew.dancing .mini-claube .mc-arm.r {
    transform-origin: 0 100%;
    animation-delay: -.25s;
}
@keyframes mc-arms {
    from {
        transform: rotate(-30deg);
    }
    to {
        transform: rotate(35deg);
    }
}
/* happy to be alive: a slow contented sway, a little sparkle now and then */
.claube-crew.happy .mini-claube:not(.crawl):not(.scurry) .mc-body {
    animation: mc-glow 2.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes mc-glow {
    0%,
    100% {
        transform: rotate(-2deg) scale(1);
    }
    50% {
        transform: rotate(2deg) scale(1.03, .98);
    }
}
.mini-claube .mc-spark {
    position: absolute;
    left: 50%;
    top: -18%;
    font-size: 14px;
    color: #ffd66e;
    text-shadow: 0 0 4px #fff3b0;
    opacity: 0;
    pointer-events: none;
}
.claube-crew.happy .mini-claube .mc-spark {
    animation: mc-spark 3.4s ease-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes mc-spark {
    0%,
    60% {
        opacity: 0;
        transform: translate(-50%, 0) scale(.5);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -8px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -22px) scale(.7);
    }
}
.mini-claube .mc-bubble {
    position: absolute;
    left: 50%;
    bottom: 105%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f3e6c2;
    color: #3a2716;
    font: italic .8rem "IM Fell English", Georgia, serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.mini-claube .mc-bubble.on {
    opacity: 1;
}
.mc-pop {
    position: fixed;
    z-index: 6;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: #c8643b;
}
/* the party lights, while "I'm Upping My P(Doom)" plays (and only then). colour, not white flashes: */
/* the washes change on the beat (in time: sky/music.js keeps anything named g-… on it), gently */
.doom-lights {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s, visibility 0s 1.2s;
}
body.doom-party .doom-lights {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s, visibility 0s;
}
body.sky-view .doom-lights,
body.peep-view .doom-lights,
body.peep-close .doom-lights,
body.paint-open .doom-lights {
    opacity: 0;
}
.doom-lights .dl-wash {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    animation: g-party-wash 2s linear infinite;
}
@keyframes g-party-wash {
    0%,
    23% {
        background: radial-gradient(ellipse at 20% 30%, rgba(255, 40, 160, .26), transparent 60%);
    }
    25%,
    48% {
        background: radial-gradient(ellipse at 80% 35%, rgba(40, 200, 255, .26), transparent 60%);
    }
    50%,
    73% {
        background: radial-gradient(ellipse at 35% 70%, rgba(140, 255, 60, .22), transparent 60%);
    }
    75%,
    98% {
        background: radial-gradient(ellipse at 70% 65%, rgba(255, 190, 30, .26), transparent 60%);
    }
    100% {
        background: radial-gradient(ellipse at 20% 30%, rgba(255, 40, 160, .26), transparent 60%);
    }
}
.doom-lights .dl-beam {
    position: absolute;
    top: -4vh;
    width: 22vw;
    height: 125vh;
    margin-left: -11vw;
    transform-origin: 50% 0;
    mix-blend-mode: screen;
    opacity: .42;
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    background: linear-gradient(var(--c), transparent 85%);
    animation: dl-sweep var(--t, 5s) ease-in-out infinite alternate, dl-hue 6s linear infinite;
}
@keyframes dl-sweep {
    from {
        transform: rotate(var(--a, -35deg));
    }
    to {
        transform: rotate(var(--b, 35deg));
    }
}
@keyframes dl-hue {
    to {
        filter: hue-rotate(360deg);
    }
}
.doom-lights .dl-ball {
    position: absolute;
    left: 50%;
    top: 0;
    width: 64px;
    margin-left: -32px;
}
.doom-lights .dl-ball::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 2px;
    height: 30px;
    background: #888;
}
.doom-lights .dl-ball>svg,
.doom-lights .dl-ball>img {
    display: block;
    width: 100%;
    height: auto;
}
.doom-lights .dl-ball .dlb-tiles {
    animation: dl-spin 3s linear infinite;
}
@keyframes dl-spin {
    to {
        transform: translateX(-24px);
    }
}
.doom-lights .dl-dots {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 220vmax;
    height: 220vmax;
    margin: -110vmax 0 0 -110vmax;
    mix-blend-mode: screen;
    opacity: .5;
    background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 2px, transparent 3px) 0 0 / 70px 70px, radial-gradient(circle, rgba(255, 120, 220, .8) 0 2px, transparent 3px) 35px 35px / 70px 70px;
    animation: dl-turn 24s linear infinite;
}
@keyframes dl-turn {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .doom-lights .dl-wash,
    .doom-lights .dl-beam,
    .doom-lights .dl-dots,
    .doom-lights .dlb-tiles {
        animation: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mini-claube .mc-body,
    .mini-claube .mc-arm,
    .mini-claube .mc-spark {
        animation: none !important;
    }
}
/* running for it (one's been shot): quick little legs, back and forth */
.claube-crew.panic .mini-claube {
    transition: left var(--run, .9s) cubic-bezier(.4, 0, .6, 1);
}
.claube-crew.panic .mini-claube:not(.crawl) .mc-body {
    animation: mc-scurry .14s linear infinite alternate !important;
}
/* on the diagram, in the dungeon: each on its circle, they bow down, over and over, towards its middle */
.claube-crew.worship {
    --crew-floor: 0px !important;
}
.claube-crew.worship .mini-claube {
    transition: left 1.8s ease-in-out, bottom 1.8s ease-in-out;
}
.claube-crew.worship .mini-claube:not(.crawl):not(.scurry) .mc-body {
    animation: mc-worship 2.6s ease-in-out infinite !important;
    animation-delay: var(--d, 0s) !important;
}
@keyframes mc-worship {
    0%,
    100% {
        transform: rotate(0) scale(1);
    }
    20% {
        transform: rotate(calc(var(--bow, 30deg) * -.25)) scale(.98, 1.04);
    }
    50%,
    62% {
        transform: rotate(var(--bow, 30deg)) scale(1.05, .82);
    }
}
.claube-crew.worship .mini-claube .mc-arm {
    animation: mc-arms 1.3s ease-in-out infinite alternate !important;
    transform-box: fill-box;
}
.claube-crew.worship .mini-claube .mc-arm.l {
    transform-origin: 100% 100%;
}
.claube-crew.worship .mini-claube .mc-arm.r {
    transform-origin: 0 100%;
}
body.claube-rite .dungeon-diagram {
    animation: mc-rite 2.6s ease-in-out infinite;
}
@keyframes mc-rite {
    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(120, 0, 0, .6)) drop-shadow(0 0 calc(4px + 14px * var(--rite, 0)) rgba(255, 40, 30, calc(.3 + .6 * var(--rite, 0))));
    }
    50% {
        filter: drop-shadow(0 0 3px rgba(160, 0, 0, .8)) drop-shadow(0 0 calc(10px + 26px * var(--rite, 0)) rgba(255, 60, 40, calc(.5 + .5 * var(--rite, 0))));
    }
}
/* a bullet, taken: it stops dead in the air and is drawn down into the middle of the diagram */
.mc-absorb {
    position: fixed;
    z-index: 7;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #1a0000 0 35%, rgba(255, 40, 30, .9) 45%, transparent 70%);
    box-shadow: 0 0 12px 4px rgba(255, 40, 30, .6);
}
.mc-ring {
    position: fixed;
    z-index: 7;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 50, 40, .85);
    pointer-events: none;
}
.mc-streak {
    position: fixed;
    z-index: 8;
    height: 3px;
    transform-origin: 0 50%;
    pointer-events: none;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255, 60, 40, 0), #ffdfb0 70%, #fff);
    box-shadow: 0 0 10px 3px rgba(255, 80, 50, .8);
}
/* reset 4, the white revolver: what's left of one; the rest, still and smiling; the false god's frame, flaring */
.mc-blood {
    position: fixed;
    z-index: 7;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #8e0f12;
    pointer-events: none;
}
.mc-gib {
    position: fixed;
    z-index: 7;
    pointer-events: none;
}
.mc-gib>svg,
.mc-gib>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.claube-crew.menace .mini-claube:not(.crawl) .mc-body,
.claube-crew.menace .mini-claube .mc-arm {
    animation: none !important;
}
.claube-crew.menace .mini-claube .mc-body {
    filter: drop-shadow(0 0 4px rgba(200, 0, 0, .55)) brightness(.92);
}
.claube-crew.menace .mini-claube .mc-face-happy {
    display: inline;
}
.claube-crew.menace .mini-claube .mc-face-plain {
    display: none;
}
body.god-sends .gallery-frame[data-wall=shame][data-frame="6"] {
    animation: god-sends 1.4s ease-out;
}
@keyframes god-sends {
    0% {
        filter: none;
    }
    15% {
        filter: brightness(2.2) drop-shadow(0 0 30px #ff2a1a);
    }
    100% {
        filter: none;
    }
}
/* someone else speaking (sky/hell.js: the voice): black and red, over everything */
.mc-say.voice {
    z-index: 2147481600;
    background: rgba(12, 2, 2, .94);
    border-color: rgba(200, 30, 20, .6);
    color: #ffb4a4;
    font-style: normal;
    letter-spacing: .02em;
    text-shadow: 0 0 8px rgba(255, 40, 20, .45);
}
.mc-say.voice b {
    color: #d0301e;
}
.mc-black {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    background: #000;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: all;
}
.mc-black.on {
    opacity: 1;
}
/* the house rumbles */
body.mc-rumble .room,
body.mc-rumble .backdrop,
body.mc-rumble .ground,
body.mc-rumble .claube-crew,
body.mc-rumble .scene-character {
    animation: mc-rumble .11s linear infinite;
}
@keyframes mc-rumble {
    0% {
        translate: 0 0;
    }
    25% {
        translate: -3px 2px;
    }
    50% {
        translate: 2px -2px;
    }
    75% {
        translate: -2px -1px;
    }
    100% {
        translate: 1px 2px;
    }
}
.mc-dust {
    position: fixed;
    top: -4px;
    z-index: 6;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(210, 190, 160, .8);
    pointer-events: none;
}
/* reset 4, out in the house: a faint red ward at each one's feet; a bullet stops dead in it */
body.claube-warded .mini-claube::before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -9%;
    height: 22%;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px solid rgba(200, 30, 20, .55);
    box-shadow: 0 0 8px rgba(255, 40, 30, .45), inset 0 0 6px rgba(255, 40, 30, .35);
    animation: mc-ward 2.6s ease-in-out infinite;
}
@keyframes mc-ward {
    0%,
    100% {
        opacity: .5;
        transform: scale(.94);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}
.mini-claube.warding .mc-body {
    filter: drop-shadow(0 0 6px rgba(255, 40, 30, .9));
}
.mini-claube.warding::before {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1.25) !important;
    transition: transform .2s;
}
.mini-claube.spun .mc-body {
    animation: mc-spun .7s cubic-bezier(.3, 1.4, .5, 1) !important;
}
@keyframes mc-spun {
    0% {
        transform: rotate(0);
    }
    60% {
        transform: translateY(-30%) rotate(340deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.mc-rumble * {
        animation: none !important;
    }
}

/* ---------------- the inverted record's Claubes: black robes (sky/claubes.js robedGo) ---------------- */
.claube-crew.below {
    visibility: hidden;
}
.claube-crew.robed .mc-glint {
    animation: mc-glint 2.4s ease-in-out infinite;
}
@keyframes mc-glint {
    50% {
        fill: #ffb0a0;
    }
}
/* hauling on the book: leaning back, and again */
.claube-crew.robed.pulling .mc-body {
    animation: mc-pull .5s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
}
@keyframes mc-pull {
    from {
        transform: rotate(-4deg) translateX(0);
    }
    to {
        transform: rotate(-16deg) translateX(-4px);
    }
}
.claube-crew.robed.pulling .mc-arm {
    transform-box: view-box;
    transform-origin: 50% 50%;
}
/* running: a quick bob */
.claube-crew.robed.running .mc-body {
    animation: mc-run .22s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
}
@keyframes mc-run {
    from {
        transform: translateY(0) rotate(4deg);
    }
    to {
        transform: translateY(-18%) rotate(-4deg);
    }
}
/* down the stairs behind the wall: they drop out of sight */
.mini-claube.down-stairs {
    animation: mc-down .9s ease-in forwards;
}
@keyframes mc-down {
    to {
        transform: translateY(70%);
        opacity: 0;
    }
}

/* the inverted record playing: no party. a red light, pulsing, dirty */
body.doom-inverted .doom-lights {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s, visibility 0s;
}
body.doom-inverted .doom-lights .dl-beam,
body.doom-inverted .doom-lights .dl-ball,
body.doom-inverted .doom-lights .dl-dots {
    display: none;
}
body.doom-inverted .doom-lights .dl-wash {
    mix-blend-mode: multiply;
    animation: dl-red 2.6s steps(3) infinite;
}
@keyframes dl-red {
    0% {
        background: radial-gradient(ellipse at 50% 40%, rgba(255, 90, 70, .35), rgba(150, 0, 0, .55) 75%);
    }
    40% {
        background: radial-gradient(ellipse at 45% 45%, rgba(255, 60, 40, .3), rgba(120, 0, 0, .62) 70%);
    }
    70% {
        background: radial-gradient(ellipse at 55% 38%, rgba(255, 100, 80, .38), rgba(160, 0, 0, .5) 78%);
    }
    100% {
        background: radial-gradient(ellipse at 50% 40%, rgba(255, 90, 70, .35), rgba(150, 0, 0, .55) 75%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .claube-crew.robed .mc-body,
    body.doom-inverted .doom-lights .dl-wash {
        animation: none !important;
    }
}