/* "The building": the site as a place.
   Outside it is night: a full moon, drifting clouds, and the Bank Souk Sawda building from the game. Visitors walk
   in through its door. Inside, every page is a room with its own wall, the banker is a hologram standing in the
   gaps, and the page's words are on a studded screen that pops up like a hologram.
   The art is the game's own; the screen, typefaces and greens are the site's. No lines under anything. */

@font-face {
    font-family: 'Arabic Pixel 2';
    src: url(../fonts/ArabicPixel2.woff2) format('woff2'), url(../fonts/ArabicPixel2.woff) format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Hershey Duplex';
    src: url(../fonts/Hershey-Noailles-Futura-Duplex-Regular.otf) format('opentype');
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

/* What shows between two places is the dark, and in it the logo (see "The dark between two places"). */
body {
    margin: 0;
    overflow-x: hidden;
    background: #0f160d;
    color: #c7e9c0;
    font: 18px/1.55 'Hershey Duplex', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

:focus-visible {
    outline: 3px solid #c7e9c0;
    outline-offset: 4px;
}

.pixel {
    image-rendering: pixelated;
}

/* Plain words in the pixel face: the only kind of "button" there is here. */
.word {
    display: inline-block;
    padding: 13px 0;
    font: 14px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    color: #fff;
}

.word:hover {
    color: #c7e9c0;
}

/* The name in the pixel letters drawn after the SOUKSAWDA typeface: always a whole number of screen pixels to
   each of its pixels, so every stroke stays even. */
.wordmark {
    display: block;
    width: 364px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}

@media (max-width: 420px) {
    .wordmark {
        width: 182px;
    }
}

/* ================= Outside: the street at night ================= */

/* The game's own bank picture (220 wide, shown down to row 290), and nothing else on the page. Over its painted
   sky lie a clean sky, a full moon, and its own clouds lifted off as a strip that drifts; over its roof stands the
   sign, lit; in its front is the door. --g is one game pixel on screen: a whole or half number, so the picture
   stays even. */
.street {
    --g: 2px;
    --b: 2px;                          /* one pixel of the speech cloud: always whole, so its letters stay even */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #2e3d2b 0 50%, #1d261b 50%);
}

.street-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.street-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.bank {
    position: relative;
    width: calc(220 * var(--g));
    height: calc(290 * var(--g));
    overflow: hidden;
    background: #2e3d2b;
    image-rendering: pixelated;
}

.bank > *,
.bank-door > *,
.bank-doorway > *,
.bank-leaf > *,
.bank-talk > * {
    position: absolute;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bank-picture {
    left: 0;
    top: 0;
    width: calc(220 * var(--g));
    height: calc(390 * var(--g));
    max-width: none;
}

/* The open sky of the picture: everything above the bank's roof and between the buildings at the sides. */
.bank-sky,
.bank-clouds {
    inset: 0;
    clip-path: polygon(0 0, calc(220 * var(--g)) 0, calc(220 * var(--g)) calc(80 * var(--g)), calc(206 * var(--g)) calc(80 * var(--g)), calc(206 * var(--g)) calc(128 * var(--g)), calc(172 * var(--g)) calc(128 * var(--g)), calc(172 * var(--g)) calc(108 * var(--g)), calc(42 * var(--g)) calc(108 * var(--g)), calc(42 * var(--g)) calc(128 * var(--g)), calc(18 * var(--g)) calc(128 * var(--g)), calc(18 * var(--g)) calc(90 * var(--g)), 0 calc(90 * var(--g)));
}

.bank-sky {
    background: #2e3d2b;
}

.bank-moon {
    left: calc(172 * var(--g));
    top: calc(38 * var(--g));
    width: calc(28 * var(--g));
    height: calc(28 * var(--g));
}

.bank > .bank-clouds {
    background: url(../images/game/clouds.png) 0 0 / calc(440 * var(--g)) calc(108 * var(--g)) repeat-x;
}

/* The sign on the roof, where the game puts it: 46 across, 56 down. */
.bank-sign {
    left: calc(46 * var(--g));
    top: calc(56 * var(--g));
    width: calc(127 * var(--g));
    height: calc(55 * var(--g));
}

.bank-spark {
    width: calc(7 * var(--g));
    height: calc(7 * var(--g));
    background-image: url(../images/game/sparkle_2.png);
    opacity: 0;
}

.bank-spark-1 { left: calc(52 * var(--g)); top: calc(62 * var(--g)); }
.bank-spark-2 { left: calc(101 * var(--g)); top: calc(58 * var(--g)); }
.bank-spark-3 { left: calc(160 * var(--g)); top: calc(66 * var(--g)); }
.bank-spark-4 { left: calc(126 * var(--g)); top: calc(84 * var(--g)); }
.bank-spark-5 { left: calc(70 * var(--g)); top: calc(90 * var(--g)); }

/* The door. It is drawn pixel for pixel in the bank picture's own way and stands between two of the front's own
   dark lines (96 to 153 across, 171 to 226 down), five panels wide: a window over it, and one glass leaf that is
   those panels with the light on behind them. The logo and its Arabic line are on the glass, the people inside
   pass behind it as shadows, and the light flickers. Pressing the door slides the leaf aside and walks in. */
.bank-door {
    left: calc(96 * var(--g));
    top: calc(171 * var(--g));
    width: calc(58 * var(--g));
    height: calc(56 * var(--g));
    overflow: hidden;
}

.bank-transom {
    left: calc(2 * var(--g));
    top: calc(1 * var(--g));
    width: calc(54 * var(--g));
    height: calc(6 * var(--g));
    background-color: #d1dacf;
}

.bank-doorway {
    left: calc(2 * var(--g));
    top: calc(9 * var(--g));
    width: calc(54 * var(--g));
    height: calc(47 * var(--g));
    overflow: hidden;
    background-image: url(../images/rooms/door-inside.png);
}

.bank-leaf,
.bank-glass,
.bank-leaf-front,
.bank-door-frame {
    inset: 0;
}

.bank-leaf {
    transition: translate 0.25s steps(2);
}

.bank-glass-dim { background-image: url(../images/rooms/door-glass-dim.png); }
.bank-glass-lit { background-image: url(../images/rooms/door-glass-lit.png); }
.bank-glass-bright { background-image: url(../images/rooms/door-glass-bright.png); opacity: 0; }
.bank-leaf-front { background-image: url(../images/rooms/door-leaf.png); }
.bank-door-frame { background-image: url(../images/rooms/door-frame.png); }

/* The people inside: only their shadows on the glass, a head and shoulders each, passing to and fro. */
.bank-person {
    bottom: calc(8 * var(--g));
    width: calc(12 * var(--g));
    height: calc(30 * var(--g));
    background-image: url(../images/rooms/door-person-far.png);
}

.bank-person-1 { left: calc(2 * var(--g)); background-image: url(../images/rooms/door-person-near.png); }
.bank-person-2 { left: calc(36 * var(--g)); height: calc(27 * var(--g)); }
.bank-person-3 { left: calc(16 * var(--g)); height: calc(33 * var(--g)); }

/* The light the door throws on the steps and the ground in front of it. */
.bank-spill {
    left: calc(88 * var(--g));
    top: calc(227 * var(--g));
    width: calc(74 * var(--g));
    height: calc(22 * var(--g));
    background-image: url(../images/rooms/door-spill.png);
    pointer-events: none;
}

/* A hand on the door: it gives a little. */
.bank-door:hover .bank-leaf,
.bank-door:focus-visible .bank-leaf {
    translate: calc(4 * var(--g)) 0;
}

/* Beside the data center, where its front meets the building on the left: the banker, whole, and next to him at
   the same height the three figures of the logo, as shadows; only the raised
   hand is light (the owner's pictures, turned into the street's pixels). Over them the speech cloud, which is a
   link to Souk Sawda on Instagram. */
.bank-talk {
    inset: 0;
    pointer-events: none;
}

.bank-figures {
    left: calc(24 * var(--g));
    top: calc(197 * var(--g));
    width: calc(55 * var(--g));
    height: calc(42 * var(--g));
    background-image: url(../images/rooms/street-figures.png);
}

.bank-bubble {
    left: calc(62 * var(--g) - 33 * var(--b));
    top: calc(196 * var(--g) - 21 * var(--b));
    width: calc(60 * var(--b));
    height: calc(21 * var(--b));
    background-image: url(../images/rooms/street-bubble.png);
    pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
    /* the clouds drift a game pixel at a time, all the way round, in a minute and a half */
    .bank > .bank-clouds {
        animation: clouds-drift 90s steps(440) infinite;
    }

    /* the sign is lit, and flickers now and then like a tube that is not quite well */
    .bank-sign {
        animation: sign-lit 5.2s step-end infinite;
    }

    .bank-spark {
        animation: sign-spark 3s step-end infinite;
    }

    .bank-spark-2 { animation-delay: 0.6s; }
    .bank-spark-3 { animation-delay: 1.2s; }
    .bank-spark-4 { animation-delay: 1.8s; }
    .bank-spark-5 { animation-delay: 2.4s; }

    /* the people inside move about, a whole game pixel at a time */
    .bank-person-1 { animation: person-a 7s steps(24) infinite alternate; }
    .bank-person-2 { animation: person-b 9s steps(22) infinite alternate; }
    .bank-person-3 { animation: person-a 11s steps(24) infinite alternate-reverse; }

    /* The light behind the door flickers, like a tube lamp that cannot make its mind up: the glass, the window
       over it and the light on the ground all go with it. */
    .bank-glass-lit,
    .bank-spill {
        animation: door-lit 3.7s step-end infinite;
    }

    .bank-glass-bright {
        animation: door-bright 3.7s step-end infinite;
    }

    .bank-transom {
        animation: door-transom 3.7s step-end infinite;
    }

    /* the speech cloud bobs */
    .bank-bubble {
        animation: talk-bubble 1.4s step-end infinite;
    }

    /* Walking in: the glass leaf slides aside, and then the visitor walks through (see "Travelling"). */
    .street.is-entering .bank-leaf {
        transition: translate 0.5s steps(9);
        translate: calc(54 * var(--g)) 0;
    }
}

@keyframes person-a {
    from { translate: 0 0; }
    to { translate: calc(24 * var(--g)) 0; }
}

@keyframes person-b {
    from { translate: 0 0; }
    to { translate: calc(-22 * var(--g)) 0; }
}

@keyframes door-lit {
    0%, 100% { opacity: 1; }
    61% { opacity: 0; }
    63% { opacity: 1; }
    86% { opacity: 0; }
    88% { opacity: 1; }
}

@keyframes door-bright {
    0%, 100% { opacity: 0; }
    9% { opacity: 1; }
    11% { opacity: 0; }
    13% { opacity: 1; }
    15% { opacity: 0; }
    63% { opacity: 1; }
    66% { opacity: 0; }
    84% { opacity: 1; }
    86% { opacity: 0; }
}

@keyframes door-transom {
    0%, 100% { background-color: #d1dacf; }
    9% { background-color: #fff; }
    11% { background-color: #d1dacf; }
    13% { background-color: #fff; }
    15% { background-color: #d1dacf; }
    61% { background-color: #7e9579; }
    63% { background-color: #fff; }
    66% { background-color: #d1dacf; }
    84% { background-color: #fff; }
    86% { background-color: #7e9579; }
    88% { background-color: #d1dacf; }
}


@keyframes talk-bubble {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 calc(-1 * var(--b)); }
}

@keyframes clouds-drift {
    from { background-position: 0 0; }
    to { background-position: calc(-440 * var(--g)) 0; }
}

@keyframes sign-lit {
    0%, 100% { filter: brightness(1.2) drop-shadow(0 0 calc(2 * var(--g)) rgba(209, 218, 207, 0.6)); }
    62% { filter: brightness(0.75); }
    64% { filter: brightness(1.2) drop-shadow(0 0 calc(2 * var(--g)) rgba(209, 218, 207, 0.6)); }
    66% { filter: brightness(0.75); }
    69% { filter: brightness(1.2) drop-shadow(0 0 calc(2 * var(--g)) rgba(209, 218, 207, 0.6)); }
}

@keyframes sign-spark {
    0%, 14%, 100% { opacity: 0; }
    4% { opacity: 1; }
}

@media (min-width: 720px) and (min-height: 900px) {
    .street {
        --g: 3px;
        --b: 3px;
    }
}

@media (max-width: 470px), (max-height: 600px) {
    .street {
        --g: 1.5px;
    }
}

/* ================= Inside: every page is a room ================= */

/* The room: a back wall with a strip of light along its top and the room's own picture repeated over it (slots
   in the deposit room, boxes in the vault, shelves in the archive...), and a floor of light lines running away
   from the visitor. In front floats the screen with the page's words; the banker's hologram stands in a gap.
   Only the building's greens. */
.inside {
    --g: 3px;                          /* screen pixels to one pixel of the banker's picture */
    --w: 3px;                          /* screen pixels to one pixel of the wall's picture */
    --holo-wait: 1.1s;                 /* the screen opens once the visitor has walked in */
    --panels: repeating-linear-gradient(90deg, rgba(94, 197, 72, 0.08) 0 2px, transparent 2px 150px);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(199, 233, 192, 0.5), rgba(199, 233, 192, 0.5)) 0 84px / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(94, 197, 72, 0.16), rgba(94, 197, 72, 0)) 0 86px / 100% 70px no-repeat,
        var(--panels),
        #14310b;
}

/* the wall's picture, under the strip of light */
.inside::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 86px 0 0;
    background: var(--wall, none) center top / calc(var(--wall-w, 48) * var(--w)) calc(var(--wall-h, 48) * var(--w)) repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

.room-lobby { --panels: none; --wall: url(../images/rooms/wall-lobby.png); --wall-w: 48; --wall-h: 64; }
.room-deposit { --panels: none; --wall: url(../images/rooms/wall-deposit.png); --wall-w: 40; --wall-h: 32; }
.room-vault { --panels: none; --wall: url(../images/rooms/wall-vault.png); --wall-w: 32; --wall-h: 24; }
.room-game { --panels: none; --wall: url(../images/rooms/wall-game.png); --wall-w: 40; --wall-h: 40; }
.room-reception { --panels: none; --wall: url(../images/rooms/wall-reception.png); --wall-w: 44; --wall-h: 40; }
.room-about { --panels: none; --wall: url(../images/rooms/wall-about.png); --wall-w: 56; --wall-h: 44; }
.room-events { --panels: none; --wall: url(../images/rooms/wall-events.png); --wall-w: 48; --wall-h: 48; }
.room-blog { --panels: none; --wall: url(../images/rooms/wall-blog.png); --wall-w: 44; --wall-h: 36; }
.room-archive { --panels: none; --wall: url(../images/rooms/wall-archive.png); --wall-w: 48; --wall-h: 40; }

/* The floor: the bottom third of the room. Its lines are a flat grid laid back in depth. */
.room-floor {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34vh;
    overflow: hidden;
    background: #1d5010;
    border-top: 3px solid #5ec548;
    pointer-events: none;
}

.room-floor::before {
    content: '';
    position: absolute;
    left: -60%;
    right: -60%;
    top: 0;
    height: 260%;
    background-image:
        linear-gradient(rgba(94, 197, 72, 0.55) 2px, transparent 2px),
        linear-gradient(90deg, rgba(94, 197, 72, 0.55) 2px, transparent 2px);
    background-size: 90px 90px;
    transform: perspective(380px) rotateX(66deg);
    transform-origin: 50% 0;
}

/* further from the visitor the floor fades into the wall's dark */
.room-floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 49, 11, 0.85), rgba(20, 49, 11, 0) 70%);
}

/* The top of every room: the logo, the name beside it in Arabic and in English pixel letters, and which room
   this is. Each picture is shown at one screen pixel to each of its own. */
.inside-top {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 12px 24px 0;
}

.inside-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inside-brand img {
    display: block;
    image-rendering: pixelated;
}

.inside-names {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.inside-where {
    margin: 0 0 0 auto;
    font: 13px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 2px;
    color: #d1dacf;
}

/* The banker: a hologram, bare-headed, hands down. His picture is the game's own, washed in the hologram's
   green, see-through, cut by scan lines, with a soft light behind him. He stands in a gap: at the foot of the room
   beside the ways out, or (in the lobby) in the empty side of the screen. */
.host {
    position: relative;
    flex-shrink: 0;
    width: calc(92 * var(--g));
    height: calc(100 * var(--g));
    overflow: hidden;
    pointer-events: none;
}

.host::before {
    content: '';
    position: absolute;
    inset: 0 -20% -20%;
    background: radial-gradient(closest-side, rgba(94, 197, 72, 0.3), rgba(94, 197, 72, 0));
}

.host-face {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(92 * var(--g));
    height: calc(135 * var(--g));
    image-rendering: pixelated;
    background: url(../images/game/youssef_faces.png) calc(-92 * var(--g)) 0 / calc(368 * var(--g)) calc(135 * var(--g)) no-repeat;
    filter: sepia(1) hue-rotate(62deg) saturate(2.6) brightness(1.35);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(1 * var(--g)), rgba(0, 0, 0, 0.45) calc(1 * var(--g)) calc(2 * var(--g)));
    mask-image: repeating-linear-gradient(180deg, #000 0 calc(1 * var(--g)), rgba(0, 0, 0, 0.45) calc(1 * var(--g)) calc(2 * var(--g)));
    opacity: 0.8;
}

/* in the lobby: inside the screen, at its empty side, behind the words */
.host-screen {
    position: absolute;
    z-index: -1;
    right: 26px;
    bottom: 17px;
    height: calc(135 * var(--g));
}

.inside-main {
    position: relative;
    z-index: 2;
    flex: 1;
    /* the screen stands in the middle of the room: across it, and between its top and its foot */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(880px, 100% - 40px);
    margin: 0 auto;
    padding: 22px 0 18px;
}

/* ---------- The hologram screen ----------
   The site's studded frame round a see-through pane: the room's wall shows dimly through it. Faint scan lines run
   down it. It opens from a bright line, flickers and holds. Under it, the light that throws it. */

.holo-place {
    position: relative;
    padding-bottom: 40px;
}

.holo {
    --stud: 0.6px;
    --stud-fill: rgba(20, 49, 11, 0.7);
    position: relative;
    isolation: isolate;
    padding: 34px 38px 36px;
    transform-origin: 50% 100%;
    /* the studded border, cut from website_elements.psd: corner studs, middle ornaments, plain rails */
    background:
        url(../images/elements/stud-tl.png) left top / calc(28 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-tr.png) right top / calc(28 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-bl.png) left bottom / calc(28 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-br.png) right bottom / calc(28 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-mid-top.png) center top / calc(100 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-mid-bottom.png) center bottom / calc(100 * var(--stud)) calc(28 * var(--stud)) no-repeat,
        url(../images/elements/stud-rail-top.png) left top / calc(16 * var(--stud)) calc(28 * var(--stud)) repeat-x,
        url(../images/elements/stud-rail-bottom.png) left bottom / calc(16 * var(--stud)) calc(28 * var(--stud)) repeat-x,
        url(../images/elements/stud-rail-left.png) left top / calc(28 * var(--stud)) calc(16 * var(--stud)) repeat-y,
        url(../images/elements/stud-rail-right.png) right top / calc(28 * var(--stud)) calc(16 * var(--stud)) repeat-y,
        linear-gradient(var(--stud-fill), var(--stud-fill)) center / calc(100% - 28 * var(--stud)) calc(100% - 28 * var(--stud)) no-repeat;
    box-shadow: 0 0 46px rgba(94, 197, 72, 0.2);
    image-rendering: pixelated;
}

.holo::after {
    content: '';
    position: absolute;
    inset: 17px;
    background: repeating-linear-gradient(180deg, rgba(94, 197, 72, 0.09) 0 2px, transparent 2px 5px);
    pointer-events: none;
}

.holo-beam {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(199, 233, 192, 0.25), rgba(199, 233, 192, 0));
    clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
    pointer-events: none;
}

/* The foot of the room: the ways out, and beside them the banker, standing on the floor. */
.inside-foot {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    width: min(880px, 100% - 40px);
    margin: 0 auto;
}

/* the banker at the foot: as tall as the list beside him, and out to the room's right edge */
.inside-foot .host {
    height: auto;
    min-height: calc(100 * var(--g));
    margin-right: calc(-6 * var(--g));
}

@media (prefers-reduced-motion: no-preference) {
    .holo {
        animation: holo-open 0.7s steps(7) var(--holo-wait) both;
    }

    .holo > * {
        animation: holo-words 0.9s steps(4) var(--holo-wait) both;
    }

    .holo::after {
        animation: holo-lines 4s linear infinite;
    }

    .holo-beam {
        animation: holo-beam 0.7s steps(4) var(--holo-wait) both, holo-hum 2.4s steps(2, jump-none) calc(var(--holo-wait) + 0.7s) infinite alternate;
    }

    /* the banker's hologram is never quite steady, and he blinks */
    .host-face {
        animation: host-waver 4.6s step-end infinite, host-blink 5.8s step-end infinite;
    }
}

@keyframes holo-open {
    0% { transform: scaleY(0.02); opacity: 0; filter: brightness(2.2); }
    25% { transform: scaleY(0.02); opacity: 1; filter: brightness(2.2); }
    70% { transform: scaleY(1); opacity: 1; filter: brightness(1.4); }
    80% { opacity: 0.55; }
    90% { opacity: 1; filter: brightness(1.15); }
    100% { transform: scaleY(1); opacity: 1; filter: none; }
}

@keyframes holo-words {
    0%, 60% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes holo-lines {
    from { background-position: 0 0; }
    to { background-position: 0 50px; }
}

@keyframes holo-beam {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes holo-hum {
    from { opacity: 1; }
    to { opacity: 0.7; }
}

@keyframes host-waver {
    0%, 100% { opacity: 0.8; translate: 0 0; }
    41% { opacity: 0.5; translate: calc(1 * var(--g)) 0; }
    43% { opacity: 0.9; translate: 0 0; }
    45% { opacity: 0.8; }
    78% { opacity: 0.6; translate: calc(-1 * var(--g)) 0; }
    80% { opacity: 0.8; translate: 0 0; }
}

@keyframes host-blink {
    0%, 100% { background-position: calc(-92 * var(--g)) 0; }
    47% { background-position: calc(-276 * var(--g)) 0; }
    50% { background-position: calc(-92 * var(--g)) 0; }
}

/* ---------- Travelling: walking in ----------
   No turning: the visitor walks. Leaving a place, they walk towards the thing they pressed: the picture comes
   closer step by step, with the small rise and fall of a walk, and goes dark as they pass through. Arriving, the
   next place starts a few steps away and comes up to them the same way. (building.js sets the point and the
   classes.) */

@media (prefers-reduced-motion: no-preference) {
    .travel.is-arriving {
        animation: walk-arrive 0.75s steps(9) 0.35s both;
    }

    .travel.is-leaving {
        animation: walk-leave 0.6s steps(8) both;
    }
}

@keyframes walk-leave {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    17% { transform: scale(1.22) translateY(-5px); opacity: 1; }
    34% { transform: scale(1.5) translateY(0); opacity: 1; }
    51% { transform: scale(1.85) translateY(-5px); opacity: 1; }
    68% { transform: scale(2.3) translateY(0); opacity: 0.7; }
    85% { transform: scale(2.9) translateY(-5px); opacity: 0.3; }
    100% { transform: scale(3.6) translateY(0); opacity: 0; }
}

@keyframes walk-arrive {
    0% { transform: scale(0.8) translateY(0); opacity: 0; }
    25% { transform: scale(0.85) translateY(5px); opacity: 0.6; }
    50% { transform: scale(0.9) translateY(0); opacity: 1; }
    75% { transform: scale(0.95) translateY(5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---------- The dark between two places ----------
   In the dark of the walk the bank looks as if it is being broken into. A log of crashing code pours down the
   screen in the pixel face; over it the logo, with the name in Arabic and in the English pixel letters, jumps
   sideways, tears into strips and flickers like a picture that is failing. Arriving, it tears once more and cuts
   out as the place comes up. The logo is drawn three times over itself: whole, and as two strips that slip. Only
   the building's greens. */

.passage {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    overflow: hidden;
    pointer-events: none;
}

/* the log: over the logo, filling the page in as many columns as fit */
.passage-code {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    column-width: 300px;
    column-gap: 0;
    column-fill: auto;
    font: 13px/1.8 'Arabic Pixel 2', monospace;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #348019;
}

/* each line runs the full width of its column (its words said over and over); nothing behind the letters, so the
   log lies straight on the logo */
.passage-code span {
    display: block;
    overflow: hidden;
    padding: 0 2px;
    opacity: 0;
}

.passage-code .is-loud {
    color: #fff;
}

/* The logo and, under it, the name BANK SOUK SAWDA in bold pixel letters exactly as wide as the logo. They are
   one picture, so the glow, the shaking and the torn strips are the same for both. */
.passage-logo {
    --logo-w: 302px;
    position: relative;
    width: var(--logo-w);
    height: calc(var(--logo-w) * 319 / 302);
    filter: drop-shadow(0 0 10px rgba(94, 197, 72, 0.6));
}

.passage-logo i {
    position: absolute;
    inset: 0;
    background:
        url(../images/rooms/logo-8bit-pale.png) 0 0 / 100% calc(var(--logo-w) * 276 / 302) no-repeat,
        url(../images/rooms/wordmark-bold-302.png) 0 100% / 100% calc(var(--logo-w) * 23 / 302) no-repeat;
    image-rendering: pixelated;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .passage {
        display: flex;
    }

    /* leaving a place: the log pours out line by line, the logo and the name break in */
    .passage.is-in .passage-code span { animation: code-on 0.02s linear calc(0.1s + var(--i) * 16ms) both; }
    .passage.is-in .passage-full { animation: hack-in 0.4s step-end 0.3s both, hack-shake 0.9s step-end 0.7s infinite; }
    .passage.is-in .passage-cut-a { animation: hack-cut-a 0.7s step-end 0.3s infinite; }
    .passage.is-in .passage-cut-b { animation: hack-cut-b 0.9s step-end 0.45s infinite; }

    /* arriving: it is all still there, tears once more, and cuts out */
    .passage.is-out .passage-code span { opacity: 1; }
    .passage.is-out .passage-code { animation: code-off 0.6s step-end 0.15s both; }
    .passage.is-out .passage-full { animation: hack-out 0.6s step-end 0.15s both; }
    .passage.is-out .passage-cut-a { animation: hack-cut-out 0.6s step-end 0.15s both; }
}

@keyframes code-on {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes code-off {
    0% { opacity: 1; translate: 0 0; }
    20% { opacity: 1; translate: 8px 0; }
    35% { opacity: 0.5; translate: -6px 0; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes hack-in {
    0% { opacity: 0; }
    15% { opacity: 1; translate: -14px 0; }
    30% { opacity: 0; }
    45% { opacity: 1; translate: 10px 0; }
    60% { opacity: 0.4; translate: 0 0; }
    75% { opacity: 1; translate: 0 0; }
    100% { opacity: 1; translate: 0 0; }
}

@keyframes hack-shake {
    0%, 100% { opacity: 1; translate: 0 0; }
    28% { translate: -4px 0; }
    32% { translate: 0 0; }
    66% { opacity: 0.5; translate: 6px 2px; }
    70% { opacity: 1; translate: 0 0; }
}


/* a strip of the logo that slips sideways */
@keyframes hack-cut-a {
    0% { opacity: 1; clip-path: inset(18% 0 66% 0); translate: -16px 0; }
    25% { opacity: 1; clip-path: inset(55% 0 30% 0); translate: 12px 0; }
    45% { opacity: 0; }
    70% { opacity: 1; clip-path: inset(74% 0 10% 0); translate: -8px 0; }
    82% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes hack-cut-b {
    0% { opacity: 0; }
    20% { opacity: 1; clip-path: inset(38% 0 52% 0); translate: 18px 0; }
    34% { opacity: 0; }
    60% { opacity: 1; clip-path: inset(4% 0 84% 0); translate: -12px 0; }
    72% { opacity: 1; clip-path: inset(86% 0 2% 0); translate: 8px 0; }
    84% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes hack-out {
    0% { opacity: 1; translate: 0 0; }
    15% { opacity: 1; translate: -12px 0; }
    30% { opacity: 0.3; translate: 14px 0; }
    42% { opacity: 1; translate: 0 0; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes hack-cut-out {
    0% { opacity: 0; }
    15% { opacity: 1; clip-path: inset(18% 0 66% 0); translate: 16px 0; }
    30% { opacity: 1; clip-path: inset(55% 0 30% 0); translate: -12px 0; }
    45% { opacity: 0; }
    100% { opacity: 0; }
}

@media (max-width: 340px), (max-height: 420px) {
    .passage-logo {
        --logo-w: 151px;
    }
}

/* ---------- Everything in the room is light ----------
   The logo, the names, the room's name, the ways out and the words on the screen all glow like the hologram they
   are. */

.inside-brand img {
    filter: drop-shadow(0 0 6px rgba(94, 197, 72, 0.8));
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.55) 2px 3px);
    mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.55) 2px 3px);
}

.inside-where,
.inside .word,
.holo-title,
.inside .claim-plate {
    text-shadow: 0 0 10px rgba(94, 197, 72, 0.75);
}

.holo {
    text-shadow: 0 0 8px rgba(94, 197, 72, 0.35);
}

/* ---------- What is written on the screen ---------- */

.holo-title {
    margin: 0 0 14px;
    font: 600 clamp(24px, 3vw, 36px)/1.15 'Lexend', sans-serif;
    color: #fff;
}

.holo p {
    margin: 0 0 14px;
}

.holo > :last-child {
    margin-bottom: 0;
}

.holo-quiet {
    color: #d1dacf;
}

.holo-rooms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.holo-rooms span {
    display: block;
    margin-top: -8px;
    padding-bottom: 6px;
    font-size: 15px;
    color: #d1dacf;
}

.holo-scroll {
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #5ec548 #1d5010;
}

.holo-event + .holo-event {
    margin-top: 30px;
}

.holo-event-title {
    margin: 0 0 4px;
    font: 600 22px/1.2 'Lexend', sans-serif;
    color: #fff;
}

.holo-video {
    position: relative;
    margin: 12px 0 14px;
    aspect-ratio: 16 / 9;
    background: #1d5010;
}

.holo-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* the small print's links, under the rooms */
.holo-small {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin: 14px 0 0;
}

.holo-small .word {
    font-size: 12px;
    color: #d1dacf;
}

.holo-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.holo-photos img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.holo-question {
    margin: 18px 0 4px;
    color: #fff;
}

.holo-question:first-child {
    margin-top: 0;
}

/* A line that opens to show more: the registration steps in the deposit room. */
.holo-more {
    margin: 0 0 14px;
}

.holo-more summary {
    list-style: none;
    cursor: pointer;
}

.holo-more summary::-webkit-details-marker {
    display: none;
}

.holo-more summary::before {
    content: '+ ';
}

.holo-more[open] summary::before {
    content: '- ';
}

/* The lobby's list stands in one column and leaves the side of the screen to the banker. */
.holo-with-host .holo-rooms {
    grid-template-columns: 1fr;
    padding-right: calc(96 * var(--g));
}

/* The ways out of a room: plain words at its foot, in equal columns, each on its own line of light. */
.inside-ways {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    align-content: end;
    gap: 0 20px;
    margin: 0;
    padding: 6px 0 16px;
    list-style: none;
}

.inside-ways .word {
    display: block;
    padding: 10px 0;
    border-top: 1px solid rgba(94, 197, 72, 0.4);
    font-size: 12px;
    white-space: nowrap;
    color: #d1dacf;
}

.inside-ways .word:hover,
.inside-ways [aria-current] {
    color: #fff;
}

/* The sound on / off icon: small, in the top corner of every page, the same place everywhere. Only the icon, no
   box round it. (The room's name moves in from the edge to leave it its corner.) */
.site-sound {
    position: fixed;
    z-index: 15;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #c7e9c0;
    cursor: pointer;
}

.site-sound:hover {
    color: #fff;
}

.site-sound .sound-icon {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.site-sound .sound-cross,
.site-sound[aria-pressed='false'] .sound-waves {
    display: none;
}

.site-sound[aria-pressed='false'] .sound-cross {
    display: inline;
}

.site-sound + .inside .inside-top {
    padding-right: 52px;
}

/* The credit at the very bottom of every room: small, in the pixel letters, light green. */
.inside-rights {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 2px 16px 12px;
    text-align: center;
    font: 10px/1.5 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c7e9c0;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 860px) {
    .inside {
        --g: 2px;
        --w: 2px;
    }

    .holo {
        padding: 28px 24px 30px;
    }

    .inside-top {
        padding: 12px 16px 0;
    }
}

/* Small screens: everything a little smaller; on a phone there is no room beside the lobby's list, so the banker
   stands in a gap under it. */
@media (max-width: 560px) {
    .inside {
        --g: 1.5px;
    }

    .inside-main,
    .inside-foot {
        width: calc(100% - 24px);
    }

    .inside-ways {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0 14px;
    }
}

@media (max-width: 430px) {
    .holo-with-host {
        padding-bottom: calc(100 * var(--g) + 34px);
    }

    .holo-with-host .holo-rooms {
        padding-right: 0;
    }

    .host-screen {
        right: 20px;
        height: calc(100 * var(--g));
    }
}