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

/* the way out, at the bottom of the hallway (the arrow's drawn pointing right: turned to point down) */
.hallway .room-arrow.hall-out {
    position: absolute;
    left: 57%;
    top: auto;
    bottom: calc(var(--bar-bottom, 12px) + 66px);       /* (above the hotbar, not under it) */
    margin-left: -27px;
}
.hallway .room-arrow.hall-out>svg,
.hallway .room-arrow.hall-out>.art {
    transform: rotate(90deg);
}
.hallway .room-arrow.hall-out:hover,
.hallway .room-arrow.hall-out:focus-visible {
    transform: translateY(4px);
}
.hallway .hall-character.stepping-out {
    animation: pc-out .6s ease-in forwards;
}
@keyframes pc-out {
    to {
        translate: 0 8%;
        scale: 1.12;
        opacity: 0;
    }
}
.porch-back>svg,
.porch-back>.art {
    transform: scaleX(-1);
}
.porch .room-arrow.porch-back:hover,
.porch .room-arrow.porch-back:focus-visible {
    transform: translateX(-4px);
}
/* down the steps to the front garden (11 Oct: "make the center of the porch glow be clickable", and no arrow: it
   was confusing). the gap in the railing (x 700-900 of the 1600-wide porch-frame, from just above the railing's top down to
   the floor) breathes a soft warm light (.porch-steps-glow, below), brighter when you point at it, and a click there goes
   down into the garden. this is the click: see-through, over the traveller (z 6), who stands in front of it */
.porch .porch-steps {
    position: absolute;
    left: 43.75%;
    width: 12.5%;
    top: 60%;
    bottom: var(--floor-h);
    z-index: 6;
    padding: 0;
    border: 0;
    background: none;
}
.porch .porch-steps:focus-visible {
    outline: none;
}
/* the light itself: under the traveller (z 2, after the floor), over the boards and the path in the gap, pooling where the
   steps go down and rising up between the railing's ends */
.porch .porch-steps-glow,
.porch .porch-steps-glow::after {
    left: 40%;
    width: 20%;
    top: 52%;
    bottom: calc(var(--floor-h) * .35);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 46% 30% at 50% 82%, rgba(255, 222, 150, .75), rgba(255, 200, 120, .3) 55%, rgba(255, 190, 110, 0) 100%),
        radial-gradient(ellipse 34% 60% at 50% 62%, rgba(255, 214, 140, .4), rgba(255, 190, 110, 0) 100%);
}
.porch .porch-steps-glow {
    position: absolute;
    animation: ps-breathe 3.4s ease-in-out infinite;
}
.porch .porch-steps-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    opacity: 0;
    transition: opacity .3s;
}
.porch:has(.porch-steps:hover) .porch-steps-glow::after,
.porch:has(.porch-steps:focus-visible) .porch-steps-glow::after {
    opacity: 1;
}
@keyframes ps-breathe {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .porch .porch-steps-glow { animation: none; opacity: .8; }
}
.porch .porch-character.going-down {
    animation: pc-down .45s ease-in forwards;
}
@keyframes pc-down {
    to {
        translate: 0 14%;
        scale: .94;
        opacity: 0;
    }
}
/* the porch: waits below, comes up as the hallway lifts away. open at the top: the site's sky shows through */
.porch {
    position: fixed;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    transform: translateY(100%);
    visibility: hidden;
    --floor-h: 14vh;
    --pd: calc(1 - .55 * var(--dusk, 0));
}
body.in-porch .porch,
body.porch-panning .porch {
    visibility: visible;
    transition: transform .9s cubic-bezier(.55, 0, .25, 1), visibility 0s;
}
body.in-porch .porch {
    transform: none;
}
body.in-porch .hallway {
    translate: 0 -100%;
}
body.porch-now .porch,
body.porch-now .hallway {
    transition: none !important;
}
body.in-porch .sky-links,
body.in-porch .sky-links * {
    visibility: visible !important;
}
/* (the sky's open out here) */
.porch>* {
    position: absolute;
}
.porch .porch-street {
    left: 0;
    right: 0;
    bottom: 22vh;
    height: 40vh;
    z-index: 1;
    filter: brightness(var(--pd));
    pointer-events: none;
}
/* the front yard: from the street's bottom edge (the fence and the gate) down behind the porch floor, so there's ground
   below the railing (the bee's shadow falls on it) */
.porch .porch-yard {
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(22vh + 1px);
    z-index: 1;
    filter: brightness(var(--pd));
    pointer-events: none;
}
.porch .porch-yard>svg,
.porch .porch-yard>.art,
.porch .porch-street>svg,
.porch .porch-street>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.porch .ps-lamp {
    opacity: calc(.15 + .85 * var(--dusk, 0));
}
.porch .ps-windows {
    opacity: calc(.2 + .8 * var(--dusk, 0));
}
.porch .porch-frame {
    inset: 0;
    z-index: 2;
    filter: brightness(var(--pd));
    pointer-events: none;
}
.porch .porch-frame>svg,
.porch .porch-frame>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.porch .room-floor {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--floor-h);
    z-index: 2;
    pointer-events: none;
    filter: brightness(var(--pd));
}
.porch .room-floor .placeholder,
.porch .room-floor>.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}
.porch .room-floor .placeholder {
    border-top: 7px solid #5a3e28;
    background: linear-gradient(rgba(0, 0, 0, .28), transparent 40%), repeating-linear-gradient(to right, transparent 0 118px, rgba(0, 0, 0, .28) 118px 121px), repeating-linear-gradient(to bottom, #8a6444 0 18px, #7a563a 18px 20px);
}
/* the things on the porch */
.porch .furnish {
    z-index: 3;
    padding: 0;
    border: 0;
    background: none;
    filter: brightness(var(--pd));
}
.porch button.furnish {
    cursor: pointer;
}
.porch button.furnish:hover,
.porch button.furnish:focus-visible {
    outline: none;
    filter: brightness(var(--pd)) drop-shadow(0 0 8px rgba(255, 220, 150, .55));
}
.porch .furnish>svg,
.porch .furnish>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.porch .kh-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 6;
    font: italic .95rem "IM Fell English", Georgia, serif;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.porch button:hover .kh-hint,
.porch button:focus-visible .kh-hint,
.porch .porch-neighbour:hover .kh-hint,
.porch .porch-watcher:hover .kh-hint {
    opacity: 1;
}
.porch .porch-door {
    left: .4%;
    bottom: calc(var(--floor-h) - 1vh);
    width: 10.2%;                                           /* (11 Oct: it was far too narrow at 7.6%) */
    height: 54vh;
}
.porch .porch-door>svg,
.porch .porch-door>.art {
    object-fit: fill;
}
.porch .porch-lamp {
    left: calc(5.5% - max(1.1vw, 11px));                    /* (over the door, now the door's wider) */
    bottom: calc(var(--floor-h) + 54vh);
    width: 2.2vw;
    min-width: 22px;
    aspect-ratio: 30 / 50;
    pointer-events: none;
}
.porch .porch-lamp .pl-glass {
    opacity: calc(.3 + .7 * var(--dusk, 0));
}
.porch .porch-lamp::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 140, .32), rgba(255, 214, 140, 0) 62%);
    opacity: var(--dusk, 0);
    pointer-events: none;
}
.porch .porch-chair {
    left: 17%;
    bottom: 4vh;
    height: 27vh;
    aspect-ratio: 120 / 170;
    transform-origin: 50% 92%;
}
.porch .porch-chair.rock {
    animation: pc-rock 1.5s ease-in-out 3;
}
.porch .porch-chair.rocking {
    animation: pc-rock 1.7s ease-in-out infinite;
}
@keyframes pc-rock {
    0%,
    100% {
        rotate: 0deg;
    }
    25% {
        rotate: -5deg;
    }
    75% {
        rotate: 4deg;
    }
}
.porch .porch-mailbox {
    left: 81.6%;
    bottom: 44vh;
    width: 5.4vw;
    min-width: 54px;
    aspect-ratio: 70 / 50;
    overflow: visible;
}
.porch .porch-flag {
    position: absolute;
    right: -4%;
    bottom: 26%;
    height: 78%;
    aspect-ratio: 10 / 40;
    transform-origin: 50% 88%;
    rotate: 90deg;
    transition: rotate .7s cubic-bezier(.5, 1.6, .5, 1);
}
.porch .porch-flag>svg,
.porch .porch-flag>.art {
    display: block;
    width: 100%;
    height: 100%;
}
.porch .porch-mailbox.up .porch-flag {
    rotate: 0deg;
}
/* across the street: the neighbours in their window, the crows on the wire, the man walking by, the one who watches */
.porch .porch-neighbour {
    left: 73.8%;
    bottom: 42vh;
    width: 2.9%;
    height: 4vh;
    z-index: 1;
    opacity: 0;
    transition: opacity .4s;
}
.porch .porch-neighbour>svg,
.porch .porch-neighbour>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}
.porch .porch-neighbour.on {
    opacity: 1;
}
.porch .porch-neighbour .pn-arm {
    transform-box: fill-box;
    transform-origin: 0% 100%;
}
.porch .porch-neighbour.on .pn-arm {
    animation: pn-wave .5s ease-in-out infinite alternate;
}
.porch .porch-neighbour.on:has(> .art) {
    animation: none;
}
@keyframes pn-wave {
    from {
        rotate: -18deg;
    }
    to {
        rotate: 22deg;
    }
}
.porch .porch-crows {
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.porch .porch-crow {
    position: absolute;
    bottom: 55.7vh;
    height: 3vh;
    aspect-ratio: 40 / 30;
    filter: brightness(var(--pd));
    transition: transform .12s;
}
.porch .porch-crow>svg,
.porch .porch-crow>.art {
    display: block;
    width: 100%;
    height: 100%;
}
.porch .porch-crow.c1 {
    left: 45%;
}
.porch .porch-crow.c2 {
    left: 49.5%;
    bottom: 55.4vh;
}
.porch .porch-crow.c3 {
    left: 53%;
    bottom: 55.3vh;
}
.porch .porch-crow.c4 {
    left: 57.6%;
    bottom: 55.4vh;
}
.porch .porch-crow.c5 {
    left: 61%;
}
.porch .porch-crow.flip {
    transform: scaleX(-1);
}
.porch .porch-crows.stare .pc-eye {
    fill: #f4f0e0;
    r: 1.6;
}
.porch .porch-walker {
    left: -8%;
    bottom: 36vh;
    height: 10vh;
    aspect-ratio: 40 / 110;
    z-index: 1;
    filter: brightness(var(--pd));
    pointer-events: none;
}
.porch .porch-walker>svg,
.porch .porch-walker>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.porch .porch-walker .pw-l,
.porch .porch-walker .pw-r {
    transform-box: fill-box;
    transform-origin: 50% 0;
}
.porch .porch-walker.going .pw-l {
    animation: pw-step .6s ease-in-out infinite alternate;
}
.porch .porch-walker.going .pw-r {
    animation: pw-step .6s ease-in-out infinite alternate-reverse;
}
@keyframes pw-step {
    from {
        rotate: -16deg;
    }
    to {
        rotate: 16deg;
    }
}
.porch .porch-watcher {
    aspect-ratio: 40 / 140;
    z-index: 1;
    display: none;
    cursor: default;
}
.porch .porch-watcher>svg,
.porch .porch-watcher>.art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}
.porch .porch-watcher.w0 {
    display: block;
    left: 26.4%;
    bottom: 35.6vh;
    height: 8vh;
}
.porch .porch-watcher.w1 {
    display: block;
    left: 60%;
    bottom: 31.4vh;
    height: 11.5vh;
}
.porch .porch-watcher.w2 {
    display: block;
    left: 47.6%;
    bottom: 21vh;
    height: 17vh;
}
.porch .porch-watcher.w3 {
    display: block;
    left: 47.2%;
    bottom: 10vh;
    height: 31vh;
    z-index: 4;
}
.porch .porch-character {
    left: calc(var(--porch-stand) * 1%);
    bottom: 3vh;
    height: var(--traveller-h);
    z-index: 5;
}
@media (max-width: 620px) {
    .porch .porch-chair {
        height: 17vh;
    }
    .porch .porch-door {
        width: 11.5%;
        height: 40vh;
    }
    .porch .porch-lamp {
        left: calc(6.15% - max(1.1vw, 11px));
        bottom: calc(var(--floor-h) + 40vh);
    }
}

/* an upright phone (11 Oct: "just have it scroll across the porch scene if you tap right"): the porch is two and a
   half screens wide instead of squeezed into one, and you see a part of it at a time: the door end, the steps, the mailbox
   end. porch.js sets --porch-pan (how far along, px) and moves the view with the arrows at the screen's sides (.porch-look,
   outside the porch so they stay put) or a swipe; the view follows the traveller when they walk */
.porch-look {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 620px) {
    .porch {
        width: 250vw;
        translate: calc(var(--porch-pan, 0) * -1px) 0;
    }
    body.in-porch .porch {
        transition: transform .9s cubic-bezier(.55, 0, .25, 1), translate .8s cubic-bezier(.45, 0, .25, 1), visibility 0s;
    }
    body.porch-look-now .porch {
        transition: none !important;
    }
    .room-arrow.porch-look {
        position: fixed;
        top: auto;
        bottom: 16px;
        margin-top: 0;
        z-index: 4;
    }
    .room-arrow.porch-look.look-left {
        left: 8px;
    }
    .room-arrow.porch-look.look-right {
        right: 8px;
    }
    .room-arrow.porch-look.look-left>svg,
    .room-arrow.porch-look.look-left>.art {
        transform: scaleX(-1);
    }
    .room-arrow.porch-look.look-left:hover,
    .room-arrow.porch-look.look-left:focus-visible {
        transform: translateX(-4px);
    }
    body.in-porch.porch-look-l:not(.porch-panning):not(.bee-talking):not(.sky-view) .porch-look.look-left,
    body.in-porch.porch-look-r:not(.porch-panning):not(.bee-talking):not(.sky-view) .porch-look.look-right {
        visibility: visible;
        opacity: .5;
        pointer-events: auto;
    }
    body.in-porch.porch-look-l:not(.porch-panning):not(.bee-talking):not(.sky-view) .porch-look.look-left:hover,
    body.in-porch.porch-look-r:not(.porch-panning):not(.bee-talking):not(.sky-view) .porch-look.look-right:hover {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .porch .porch-chair.rocking,
    .porch .porch-neighbour.on .pn-arm,
    .porch .porch-walker .pw-l,
    .porch .porch-walker .pw-r {
        animation: none !important;
    }
}

/* the porch's dancers (sky/music.js GROOVES): they move while a record plays */
.porch .porch-chimes {
    left: 30%;
    top: 8.6vh;
    width: 3.6vw;
    min-width: 34px;
    z-index: 3;
    filter: brightness(var(--pd));
}
.porch .porch-gnome {
    left: 80%;
    bottom: calc(var(--floor-h) - 1.5vh);
    width: 4.4vw;
    min-width: 40px;
    z-index: 4;
    filter: brightness(var(--pd));
}