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

.ground-city {
    height: 40vh;
    min-height: 240px;
}
.ground-city .layer {
    overflow: visible;
}
.ground-city .c1 {
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, .2));
}
.ground-city .c2 {
    filter: drop-shadow(0 -3px 6px rgba(0, 0, 0, .28));
}
.ground-city .c3 {
    filter: drop-shadow(0 -5px 8px rgba(0, 0, 0, .34));
}
.ground-city .glass {
    fill: rgba(255, 255, 255, .14);
}
.ground-city .lit {
    fill: #ffd98a;
}
.ground-city .beacon {
    fill: #ff5a4a;
    animation: city-blink 2.4s steps(1) infinite;
}
/* the derelict building: every window dark, some broken or boarded; one boarded window has someone behind it */
.ground-city .dead {
    fill: #06080f;
}
.ground-city .boards {
    fill: #4a3526;
}
.ground-city .cracks {
    fill: none;
    stroke: rgba(0, 0, 0, .45);
    stroke-width: 1;
}
.ground-city .skizy-leak {
    fill: #ffb866;
    filter: drop-shadow(0 0 3px rgba(255, 170, 90, .9));
    animation: skizy-flicker 3.4s ease-in-out infinite;
}
.ground-city .skizy-boards {
    fill: #5b4030;
}
body.skizy-in .ground-city .skizy-boards {
    display: none;
}
body.skizy-in .ground-city .skizy-leak {
    fill: #ffd28a;
    animation: none;
}
/* looking through the telescope the skyline is blown up many times over: the soft shadows go (a shadow on */
/* something that big is more than the browser will draw, and whole rows of buildings would blink out) */
body.peep-view .ground-city .layer,
body.peep-close .ground-city .layer,
body.peep-settling .ground-city .layer,
body.peep-view .ground-city .skizy-leak,
body.peep-close .ground-city .skizy-leak,
body.peep-settling .ground-city .skizy-leak {
    filter: none !important;
}
@keyframes skizy-flicker {
    0%,
    100% {
        opacity: .55;
    }
    40% {
        opacity: .85;
    }
    47% {
        opacity: .35;
    }
    52% {
        opacity: .8;
    }
}
@keyframes city-blink {
    0%,
    60% {
        opacity: 1;
    }
    61%,
    100% {
        opacity: .15;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ground-city .beacon {
        animation: none;
    }
}
/* the rooftop the traveller stands on, in front of the skyline */
.city-roof {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 20vh;
    min-height: 130px;
    pointer-events: none;
    filter: drop-shadow(0 -6px 10px rgba(0, 0, 0, .35));
    transition: transform .9s cubic-bezier(.55, 0, .25, 1), opacity .6s;
}
.city-roof .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.city-roof>.art {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}
.city-roof>.art:not(.glow-layer) {
    filter: brightness(calc(1 - .55 * var(--dusk))) saturate(calc(1 - .3 * var(--dusk)));
}
.city-roof>.glow-layer {
    opacity: var(--dusk);
}
.city-roof .r-bulb {
    fill: #fff0c4;
}
.city-roof .groove {
    width: 46px;
}
.city-roof .roof-pigeon {
    width: 30px;
}
.city-roof .roof-pigeon.two {
    width: 26px;
}
.city-roof .groove>.art:not(.glow-layer),
.city-roof .groove>.placeholder {
    filter: brightness(calc(1 - .5 * var(--dusk)));
}
@media (max-width: 620px) {
    .city-roof .groove {
        width: 34px;
    }
    .city-roof .roof-pigeon {
        width: 22px;
    }
    .city-roof .roof-pigeon.two {
        width: 19px;
    }
}
.city-roof .r-halo {
    fill: url(#roof-glow);
}
.city-roof .roof-door,
.city-roof .roof-door:hover {
    position: absolute;
    left: 43%;
    bottom: 44%;
    height: 58%;
    aspect-ratio: 110 / 120;
    padding: 0;
    background: none;
    pointer-events: auto;
    cursor: pointer;
}
.city-roof .roof-door>svg,
.city-roof .roof-door>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}
.city-roof .roof-door>svg,
.city-roof .roof-door>.art:not(.glow-layer) {
    filter: brightness(calc(1 - .5 * var(--dusk)));
}
.city-roof .roof-door:hover>svg,
.city-roof .roof-door:hover>.art {
    filter: brightness(calc(1.08 - .45 * var(--dusk))) drop-shadow(0 0 8px rgba(255, 220, 150, .5));
}
.city-roof .roof-door .rd-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .95rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.city-roof .roof-door:hover .rd-hint {
    opacity: 1;
}
.city-roof .roof-door .leaf {
    transform-box: fill-box;
    transform-origin: 0 50%;
    transition: transform .4s cubic-bezier(.5, 0, .3, 1);
}
.city-roof .roof-door.open .leaf {
    transform: scaleX(.12);
}
@media (max-width: 620px) {
    .city-roof .roof-door {
        left: 26%;              /* (5 Oct: at 38% the telescope stood in front of it) */
        height: 50%;
    }
}
body.peep-view .city-roof,
body.peep-close .city-roof,
body.sky-view .city-roof,
body.scope-view .city-roof {
    transform: translateY(110%);
    opacity: 0;
}
@media (max-width: 620px) {
    .city-roof {
        height: 17vh;
        min-height: 110px;
    }
}