/* Houses of Allah (js/home-houses.js): a full-page moment on the homepage.
 *
 * The stage is sticky. It rises out of the week's night as a tiled wall (the
 * star-and-cross tiling in fine gold) with a gold mihrab in the middle: the
 * ayah is inscribed above the arch and the title sits below it, on the wall,
 * so they are always legible. Ohio (the live map) is seen through the arch. As
 * the section scrolls the arch opens and you step through it into the map; the
 * words go with the wall. Inside, a small glass bar counts the masjids, cities
 * and Jummah sessions, and the masjids pass by in arched frames along a dark
 * ground, which is the same ink as the arcade below, so the hand-off is
 * seamless. Everything is scroll-linked and moves transform and opacity only.
 */
.hoa { --hoa-a: 170svh; position: relative; height: calc(100svh + var(--hoa-a)); background: #0b231f; }
.hoa-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
    /* The band along the foot where the masjids pass: the cards' width (it follows the screen's
       height, which the map and the band share), how high the row stands, the two lines of words
       under each picture (the pictures are 100:118), and so the band's height. Ohio keeps above
       it and below the numbers (js/home-houses.js hoaMapView). */
    --hoa-card: clamp(128px, 17svh, 168px); --hoa-row-b: 8.5svh; --hoa-words: 42px;
    --hoa-band: calc(var(--hoa-row-b) + var(--hoa-card) * 1.18 + var(--hoa-words)); }

/* the map fills the stage, with its own sky for the time of day in Ohio (js/pages/home-map.js) */
/* by day a soft, warm sky (sage mist into cream), not a cold blue, so the step from the night wall into daylight is gentle */
.hoa .home-live-map { position: absolute; inset: 0; padding: 0; background: linear-gradient(180deg, #c8dbd6 0%, #e2eae1 50%, #eee8d8 100%); }
.hoa .home-live-map::before { display: none; }
.hoa .home-live-map[data-phase="dawn"] { background: linear-gradient(180deg, #c7c3e6 0%, #e8d6e8 50%, #f3d3c3 100%); }
.hoa .home-live-map[data-phase="golden"] { background: linear-gradient(180deg, #efc58a 0%, #f6dcb4 55%, #efd3b0 100%); }
.hoa .home-live-map[data-phase="dusk"] { background: linear-gradient(180deg, #3c3a68 0%, #6a4d7c 45%, #b36b6e 100%); }
.hoa .home-live-map[data-phase="night"] { background: linear-gradient(180deg, #0c2230 0%, #10303a 50%, #12362f 100%); }
/* js/home-houses.js grows the map with the mihrab, from small inside the arch
   to full size as you step through, and it stays there while the masjids pass.
   The box is the whole stage and a little more at the sides, as on the Masjids
   page: the land runs on to the screen's edges, its soft side edges
   (js/pages/home-map.js) just off screen, its top fading under the header and
   its foot under the ground. Ohio is framed whole in the room between the
   numbers and the band. */
.hoa .home-live-map .mini-map { position: absolute; left: -4%; right: -4%; top: 0; bottom: 0; height: auto; min-height: 0; will-change: transform; }
/* The picture while the model loads (and the lite map) fades where the model
   does: top 6%, foot 12%, sides by the part of the box off screen (4% of the
   stage each side is 3.7% of the box). */
.hoa .home-live-map .mini-map::before, .hoa .home-live-map .lite-frame {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 3.7%, #000 96.3%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 3.7%, #000 96.3%, transparent 100%); }

/* the ground the masjids pass along: the arcade's ink at the very bottom,
   rising just above the band, so it never darkens Ohio */
.hoa-ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hoa-band) + 28px); z-index: 2; pointer-events: none; opacity: 0; will-change: opacity;
    background:
        radial-gradient(ellipse 60% 38% at 50% 100%, rgba(22, 64, 55, .6), rgba(22, 64, 55, 0)),
        linear-gradient(0deg, #081c18 0%, #081c18 40%, rgba(8, 28, 24, .86) 60%, rgba(8, 28, 24, .38) 84%, rgba(8, 28, 24, 0) 100%); }

/* the tiled wall and the mihrab (drawn by js/home-houses.js to the screen's size) */
.hoa-veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.hoa-veil svg { display: block; width: 100%; height: 100%; }

/* the words on the wall: the ayah above the arch, the title below it */
.hoa-facade { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fbf3e2; will-change: transform, opacity; }
.hoa-ayah { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--arch-top, 32%) + 42px); margin: 0; padding: 0 20px; display: grid; justify-items: center; gap: .2rem; text-align: center; }
.hoa-ayah span { font: 400 clamp(28px, 2.9vw, 42px)/1.45 var(--font-arabic, 'Amiri'), serif; color: #f2cd82; text-shadow: 0 0 22px rgba(227, 163, 64, .28); }
.hoa-ayah small { font-size: 14px; letter-spacing: .01em; color: rgba(251, 243, 226, .78); }
.hoa-facade h2 { position: absolute; left: 0; right: 0; top: calc(var(--arch-bot, 78%) + 20px); margin: 0; padding: 0 20px; text-align: center;
    font: 800 clamp(34px, 4.6vw, 64px)/1.02 var(--font-display); letter-spacing: -.035em; color: #fbf3e2; text-wrap: balance; }

/* inside: a glass bar with the numbers, like the prayer bar at the top of the story */
.hoa-stats { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--nav-h, 62px) + 14px); width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; display: flex;
    padding: 5px 6px; border-radius: 999px; background: rgba(251, 246, 236, .88); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 14px 34px -22px rgba(8, 28, 24, .6); color: #3d4a45; font: 500 13.5px var(--font-body); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.hoa-stats span { padding: 4px 12px; }
.hoa-stats span + span { border-left: 1px solid rgba(18, 54, 47, .12); }
.hoa-stats b { font: 700 15px var(--font-display); color: #12362f; margin-right: .3rem; font-variant-numeric: tabular-nums; }

/* the procession: masjids in arched frames, passing through soft edges */
.hoa-rail { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hoa-band); z-index: 4; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.hoa-row { position: absolute; left: 0; bottom: var(--hoa-row-b); display: flex; gap: 18px; opacity: 0; pointer-events: auto; will-change: transform, opacity; }
.hoa-card { flex: 0 0 auto; width: var(--hoa-card); color: #fbf3e2; text-decoration: none; }
.hoa-card:hover { color: #fff; text-decoration: none; }
.hoa-card .pic { position: relative; display: block; aspect-ratio: 100 / 118; }
.hoa-card .ph { position: absolute; inset: 0; background: #12362f; -webkit-mask: var(--wk-arch) center / 100% 100% no-repeat; mask: var(--wk-arch) center / 100% 100% no-repeat; }
.hoa-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out, ease); }
.hoa-card:hover .ph img { transform: scale(1.05); }
.hoa-card .frame { position: absolute; inset: -3px; background: var(--wk-arch-line) center / 100% 100% no-repeat; pointer-events: none; }
.hoa-card b { display: block; margin-top: 8px; font: 600 14px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoa-card small { display: block; font-size: 11.5px; line-height: 1.4; color: rgba(251, 243, 226, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoa-card:focus-visible { outline: 2px solid #e3a340; outline-offset: 4px; border-radius: 8px; }

.hoa-go { position: absolute; left: 50%; bottom: 2.6vh; z-index: 4; transform: translateX(-50%); opacity: 0; font: 600 15px var(--font-display); color: #f6c46e; text-decoration: none;
    border-bottom: 2px solid rgba(246, 196, 110, .6); padding-bottom: 2px; white-space: nowrap; }
.hoa-go:hover { color: #fbeed6; }

@media (max-width: 991.98px) {
    .hoa { --hoa-a: 160svh; }
    .hoa-stage { --hoa-card: 124px; --hoa-row-b: calc(64px + env(safe-area-inset-bottom) + 50px); --hoa-words: 37px; }
    body:not(.has-tabbar) .hoa-stage { --hoa-row-b: 60px; }
    .hoa-ayah { bottom: calc(100% - var(--arch-top, 32%) + 34px); }
    .hoa-ayah span { font-size: 27px; }
    .hoa-ayah small { font-size: 12.5px; }
    .hoa-facade h2 { top: calc(var(--arch-bot, 74%) + 14px); font-size: clamp(28px, 8vw, 36px); }
    .hoa-stats { top: calc(var(--nav-h, 56px) + 8px); padding: 4px; font-size: 12px; }
    .hoa-stats span { padding: 3px 8px; }
    .hoa-stats b { font-size: 13.5px; margin-right: .2rem; }
    .hoa-row { gap: 12px; }
    .hoa-card b { font-size: 12.5px; margin-top: 6px; }
    .hoa-card small { font-size: 10.5px; }
    .hoa-go { bottom: calc(64px + env(safe-area-inset-bottom) + 14px); font-size: 14px; }
    body:not(.has-tabbar) .hoa-go { bottom: 20px; }
    .hoa-rail { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
}
/* Phones: the arch is wide, so the box runs further past the sides; while it
   is small in the arch, its soft sides sit against the arch's own (10% of the
   stage each side is 8.33% of the box). */
@media (max-width: 699.98px) {
    .hoa .home-live-map .mini-map { left: -10%; right: -10%; }
    .hoa .home-live-map .mini-map::before, .hoa .home-live-map .lite-frame {
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8.33%, #000 91.67%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8.33%, #000 91.67%, transparent 100%); }
}

/* Reduced motion: no wall, no walk; the words, the numbers, the map and a row you can swipe. */
.hoa-static.hoa { height: auto; }
.hoa-static .hoa-stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 4.5rem 0 3rem; }
.hoa-static .hoa-veil, .hoa-static .hoa-ground { display: none; }
.hoa-static .hoa-facade, .hoa-static .hoa-ayah, .hoa-static .hoa-facade h2, .hoa-static .hoa-stats, .hoa-static .hoa-row, .hoa-static .hoa-go {
    position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto; opacity: 1; transform: none; }
.hoa-static .hoa-facade { order: 0; }
.hoa-static .hoa-facade h2 { margin-top: .6rem; }
.hoa-static .hoa-stats { order: 1; }
.hoa-static .hoa-map { order: 2; position: relative; inset: auto; width: 100%; height: 60svh; }
.hoa-static .home-live-map .mini-map { top: 0; bottom: 0; left: 0; right: 0; transform: none; }
/* a block in the page: every edge fades into it (as the model does there) */
.hoa-static .home-live-map .mini-map::before, .hoa-static .home-live-map .lite-frame {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.hoa-static .hoa-rail { order: 3; position: relative; inset: auto; height: auto; align-self: stretch; -webkit-mask-image: none; mask-image: none; pointer-events: auto; }
.hoa-static .hoa-row { overflow-x: auto; padding: 0 20px; scroll-snap-type: x mandatory; }
.hoa-static .hoa-card { scroll-snap-align: start; }
.hoa-static .hoa-go { order: 4; }