/* "Muslim Ohio, in your pocket" (js/home-day.js).
 *
 * The section is tall and its stage is sticky. JS maps scroll to p (0..2),
 * three scenes (Welcome, Pray, Community), and writes opacity/transform on the
 * sky layers, copy, phone screens and icons every frame, so everything glides
 * with the finger. When a scene arrives (.is-on, [data-act]) its cards slide in
 * one after another, a notification drops in and the prayer ring fills. This
 * file lays the pieces out and styles the phone and its app screens. Class
 * prefix d- because theme.css already owns .chip, .art, .sky and friends.
 */

:root { --nav-h: 62px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (max-width: 991.98px) { :root { --nav-h: calc(56px + env(safe-area-inset-top)); } }

.day { position: relative; height: calc(100svh + 2 * 64svh); margin-top: calc(-1 * var(--nav-h)); }
.day-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; --night: 0; }
@media (max-width: 991.98px) {
    .day { height: calc(100svh + 2 * 58svh); }
    /* Phones: the stage fills the TALLEST viewport (address bar hidden), so nothing
       peeks in when the bar collapses; everything that matters is placed inside the
       SMALLEST one (--vis, bar shown), so nothing hides behind it either. */
    .day-stage { --vis: 100svh; height: 100lvh; }
    body.has-tabbar .day-stage { --vis: calc(100svh - 64px - env(safe-area-inset-bottom)); height: calc(100lvh - 64px - env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ sky -- */
.d-sky { position: absolute; inset: 0; z-index: -3; }
.d-sky-l { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.d-sky-l.s0 { opacity: 1; background: linear-gradient(180deg, #c3c6ec 0%, #dccfea 38%, #f6d8c9 72%, #fbeee2 100%); }
.d-sky-l.s1 { background: linear-gradient(180deg, #86c3ea 0%, #bfe2f5 50%, #eef7fb 100%); }
.d-sky-l.s2 { background: linear-gradient(180deg, #edb35e 0%, #f5d59c 45%, #fcefd8 100%); }
.d-sky-l.s3 { background: linear-gradient(168deg, #3d2554 0%, #7d3761 36%, #d2665b 68%, #f3ac70 100%); }
.d-sky-l.s4 { background: radial-gradient(90% 70% at 72% 8%, #173f37 0%, #0b231f 55%, #061512 100%); }
.d-stars { position: absolute; inset: 0; opacity: var(--night); }
.d-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; transform: scale(var(--s)); opacity: .8; animation: d-twinkle 3.4s ease-in-out var(--d) infinite alternate; }
@keyframes d-twinkle { from { opacity: .25; } to { opacity: .95; } }
.d-sun, .d-moon { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; pointer-events: none; }
.d-sun { width: 130px; height: 130px; margin: -65px 0 0 -65px; background: radial-gradient(circle, #fffaf0 0 32%, rgba(255, 219, 150, .6) 35%, rgba(255, 219, 150, 0) 70%); }
.d-moon { width: 90px; height: 90px; margin: -45px 0 0 -45px; opacity: 0; background: radial-gradient(circle, rgba(251, 238, 214, .2), rgba(251, 238, 214, 0) 68%); }
.d-moon i { position: absolute; inset: 24px; border-radius: 50%; box-shadow: 10px -6px 0 0 #fbeed6; transform: rotate(-12deg); }

/* Ohio's skyline, masjid domes and minarets among the towers */
.d-skyline { position: absolute; left: 0; right: 0; bottom: 11%; width: 100%; height: 22%; z-index: -2; }
.d-skyline path { fill: #12362f; opacity: calc(.12 + var(--night) * .55); }
.d-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 11.5%; z-index: -1; background: #f3e9d8; }
/* at night the ground meets the city at its tone and settles into the same ink as the
   week below, so the horizon has no step and the story hands over without a seam */
.d-ground::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0e2b25, #0b231f 85%); opacity: var(--night); border-radius: inherit; }

/* ------------------------------------------------------------ the phone -- */
.d-art { position: absolute; z-index: 1; left: 60%; top: calc(50% + var(--nav-h) / 2 + 4svh); transform: translate(-50%, -50%);
    height: min(76svh, 700px); aspect-ratio: 9 / 18.6; }
.d-blob { position: absolute; left: -45%; right: -45%; top: 8%; bottom: 8%; z-index: -1; border-radius: 50%; opacity: calc(1 - var(--night) * .95);
    background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.d-phone { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 80%; }
.d-phone-frame { position: absolute; inset: 0; border-radius: 13% / 6.3%; background: #111a18; padding: 3.2%;
    box-shadow: 0 60px 90px -45px rgba(8, 28, 24, .65), 0 0 0 1.5px #2c3633 inset, 0 0 0 4px rgba(255, 255, 255, .06); }
.d-island { position: absolute; z-index: 3; top: 2.6%; left: 50%; width: 30%; height: 3.2%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.d-screen { position: absolute; inset: 3.2%; border-radius: 10.6% / 5.1%; overflow: hidden; background: #f7f2e8; display: flex; flex-direction: column; }
.d-appbar { display: flex; align-items: center; gap: 7px; padding: 13% 14px 8px; }
.d-appbar b { font: 700 13.5px var(--font-display); color: #12362f; letter-spacing: -.01em; }
.d-city { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 3px 4px 3px 9px; box-shadow: 0 4px 10px -6px rgba(8, 28, 24, .35); color: #a86a16; font-size: 11px; }
.d-city select { border: 0; background: transparent; font: 600 11.5px var(--font-display); color: #12362f; padding: 1px 2px; max-width: 92px; cursor: pointer; }
.d-city select:focus-visible { outline: 2px solid #e3a340; border-radius: 6px; }
.d-views { position: relative; flex: 1; min-height: 0; }
.d-view { position: absolute; inset: 0; padding: 2px 13px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; will-change: transform, opacity; }
.d-view + .d-view { transform: translateX(104%); }
.d-tabbar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px 5px 6%; background: #fff; border-top: 1px solid #eee4d3; }
.d-tabbar span { display: grid; justify-items: center; gap: 1px; font: 600 9px var(--font-display); color: #8a948f; }
.d-tabbar span i { font-size: 14px; color: #5b6964; }
.d-tab-ind { position: absolute; top: 0; left: 5px; width: calc((100% - 10px) / 5); height: 3px; border-radius: 0 0 3px 3px; background: #e3a340; will-change: transform; }

/* app screens */
.d-card { display: block; background: #fff; border-radius: 16px; padding: 12px; color: #17211e; text-decoration: none; box-shadow: 0 10px 22px -16px rgba(8, 28, 24, .45); }
a.d-card:hover { color: #17211e; text-decoration: none; }
.d-lbl { font: 700 9px var(--font-display); letter-spacing: .13em; text-transform: uppercase; color: #e3a340; }
.d-lbl-out { color: #7a847f; margin: 3px 2px -3px; }
.d-hello { font: 700 21px/1.1 var(--font-display); letter-spacing: -.02em; color: #12362f; margin: 4px 2px 0; }
.d-date { font-size: 11px; color: #5b6964; margin: -4px 2px 2px; }
.d-np { background: linear-gradient(150deg, #1d4f44, #0d2823); color: #fff; }
.d-np-row { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.d-np-row b { font: 700 19px var(--font-display); }
.d-np-row span { font-size: 12px; color: rgba(255, 255, 255, .78); }
.d-np .d-count { margin-left: auto; font: 600 11.5px var(--font-display); color: #fbeed6; white-space: nowrap; }
.d-np-big .d-np-row b { font-size: 24px; }
.d-np-top { display: flex; align-items: center; gap: 11px; }
.d-np-top > span:last-child { min-width: 0; flex: 1; }
.d-np-at { display: block; font-size: 12px; color: rgba(255, 255, 255, .75); margin-top: -2px; }
.d-times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.d-times span { background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 5px 1px; text-align: center; font: 600 10.5px var(--font-display); }
.d-times small { display: block; font: 500 8px var(--font-body); opacity: .75; }
.d-times .on { background: #e3a340; color: #081c18; }
.d-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-tiles a { display: grid; gap: 1px; background: #fff; border-radius: 14px; padding: 10px; color: #17211e; text-decoration: none; box-shadow: 0 8px 18px -14px rgba(8, 28, 24, .4); }
.d-tiles i { font-size: 17px; color: #a86a16; margin-bottom: 2px; }
.d-tiles b { font: 600 12.5px var(--font-display); }
.d-tiles small { font-size: 10px; color: #5b6964; }
.d-row { display: flex; align-items: center; gap: 10px; }
.d-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #12362f; color: #e3a340; font-size: 15px; }
.d-main { min-width: 0; flex: 1; }
.d-main b { display: block; font: 600 13px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-main small { display: block; font-size: 10.5px; color: #5b6964; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-pills { display: grid; gap: 3px; justify-items: end; }
.d-pills em { font: normal 600 10px var(--font-display); background: #fbeed6; color: #7a4a12; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.d-prog { padding: 14px; }
.d-day { display: inline-block; font: 700 9.5px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #a86a16; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
.d-prog b { display: block; font: 600 16px/1.2 var(--font-display); letter-spacing: -.01em; }
.d-prog small { display: block; font-size: 11px; color: #5b6964; margin-top: 3px; }
.d-at { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font: 600 11px var(--font-display); color: #12362f; background: #eaf3ee; padding: 4px 8px; border-radius: 8px; }
.d-logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: #f3ead9; display: grid; place-items: center; color: #a86a16; font-size: 18px; }
.d-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-bizrow .d-main b { font-size: 13px; }
.d-ok { color: #1f7a55; font-size: 15px; }
.d-more { font: 600 11.5px var(--font-display); color: #12362f; text-align: center; padding: 4px; }
.d-list { display: grid; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 22px -16px rgba(8, 28, 24, .45); }
.d-list:empty { display: none; }
.d-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 12px; color: #17211e; text-decoration: none; }
.d-mini + .d-mini { border-top: 1px solid #f0e8da; }
a.d-mini:hover { color: #17211e; text-decoration: none; background: #fcf8f0; }
.d-mini b { font: 600 12px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-mini small { grid-column: 1; font-size: 10px; color: #5b6964; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-mini em { grid-column: 2; grid-row: 1 / span 2; font: normal 600 10px var(--font-display); background: #fbeed6; color: #7a4a12; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }

/* The prayer ring: how far through the current prayer's time we are. --ring is
   set on the stage (0 until the Pray scene arrives, so it fills each time). */
.d-ring { position: relative; flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; }
.d-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.d-ring circle { fill: none; stroke-width: 3.4; }
.d-ring .rb { stroke: rgba(255, 255, 255, .14); }
.d-ring .rf { stroke: #e3a340; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ring, 0) * 100); transition: stroke-dashoffset 1.6s var(--ease-out) .3s; }
.d-ring i { font-size: 16px; color: #f6c46e; }

/* A notification drops onto the phone's screen when Pray or Community arrives.
   (Phones show none: the prayer bar and the cards already say it.) */
.d-note { display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(-14px) scale(.96); pointer-events: none;
    transition: opacity .35s ease, transform .6s var(--ease-out); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    box-shadow: 0 16px 34px -18px rgba(8, 28, 24, .55), 0 0 0 1px rgba(18, 54, 47, .06); color: #12362f; }
.d-note small { display: block; font: 600 9.5px var(--font-display); letter-spacing: .02em; color: #7a847f; }
.d-note b { display: block; font: 700 12.5px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-note b .d-count { font-weight: 600; color: #a86a16; }
.d-note > span:last-child { min-width: 0; }
.d-tico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #12362f; color: #f6c46e; font-size: 14px; }
.day-stage[data-act="1"] .d-note[data-s="1"], .day-stage[data-act="2"] .d-note[data-s="2"] { opacity: 1; transform: none; transition-delay: .45s; }
.d-note { position: absolute; z-index: 4; top: 9.5%; left: 5px; right: 5px; padding: 8px 10px; border-radius: 16px; }

/* A scene arrives: its cards slide in one after another. Off-scene they fade. */
.d-view > *, .d-copy .d-mcard, .d-copy .d-ctas { transition: opacity .25s ease; }
.d-view:not(.is-on) > *, .d-copy:not(.is-on) .d-mcard, .d-copy:not(.is-on) .d-ctas { opacity: 0; }
.d-view.is-on > *, .d-copy.is-on .d-mcard, .d-copy.is-on .d-ctas { animation: d-in .75s var(--ease-out) both; animation-delay: calc(.1s + var(--k, 0) * .09s); }
.d-view > :nth-child(2), .d-copy > :nth-child(5) { --k: 1; }
.d-view > :nth-child(3), .d-copy > :nth-child(6) { --k: 2; }
.d-view > :nth-child(4), .d-copy > :nth-child(7) { --k: 3; }
.d-view > :nth-child(5) { --k: 4; }
.d-view > :nth-child(6) { --k: 5; }
.d-view > :nth-child(n+7) { --k: 6; }
@keyframes d-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* While the intro's veil covers the page the first scene waits (js/home-day.js
   holdForIntro); removing .d-held starts its entrance as the veil opens. */
.d-held .d-view > *, .d-held .d-copy .d-mcard, .d-held .d-copy .d-ctas { animation: none !important; opacity: 0 !important; }
.d-ctas { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }

/* ------------------------------------------------------------ copy -- */
.d-copies { position: absolute; inset: 0; z-index: 3; margin: 0 auto; pointer-events: none; }
.d-copy { position: absolute; top: calc(50% + var(--nav-h) / 2); width: min(480px, 40vw); pointer-events: auto; opacity: 0; will-change: transform, opacity; color: #12362f; }
.d-copy[data-i="0"] { opacity: 1; transform: translateY(-50%); }
.d-when { display: inline-block; font: 700 12px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #a86a16; margin-bottom: .9rem; }
.d-copy h1, .d-copy h2 { font: 700 clamp(38px, 4.3vw, 62px)/1.02 var(--font-display); letter-spacing: -0.038em; color: inherit; margin: 0 0 1rem; text-wrap: balance; }
.d-copy p { font-size: 1.07rem; line-height: 1.55; color: inherit; opacity: .78; max-width: 40ch; margin: 0 0 1.2rem; }
.d-hl { background-image: linear-gradient(rgba(227, 163, 64, .55), rgba(227, 163, 64, .55)); background-repeat: no-repeat; background-position: 0 88%;
    background-size: calc(var(--hl, 1) * 100%) .34em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.d-copy[data-i="2"] .d-hl { background-image: linear-gradient(rgba(227, 163, 64, .62), rgba(227, 163, 64, .62)); }
.d-copy[data-i="2"] { color: #fff4e8; }
.d-copy[data-i="2"] .d-when { color: #f6c46e; }
.d-copy[data-i="2"] h2, .d-copy[data-i="2"] p { text-shadow: 0 1px 14px rgba(4, 16, 13, .35); }
.day-cta { display: inline-flex; align-items: center; gap: .4rem; font: 600 15px var(--font-display); color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.day-cta::after { content: '\2192'; transition: transform .2s; }
.day-cta:hover { color: inherit; text-decoration: none; }
.day-cta:hover::after { transform: translateX(4px); }
.d-scrollhint { display: inline-flex; align-items: center; gap: .45rem; font: 600 13px var(--font-display); color: #5b6964; }
.d-scrollhint i { animation: d-nudge 1.8s ease-in-out infinite; }
@keyframes d-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

/* ------------------------------------------------------------ pill -- */
.day-pill { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5; display: flex; gap: 2px; padding: 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 16px 36px -20px rgba(8, 28, 24, .55); }
.day-pill button { display: inline-flex; align-items: center; gap: 0; padding: 8px 9px; border: 0; border-radius: 999px; background: transparent; color: #12362f; font: 600 13px var(--font-display); cursor: pointer; transition: background-color .3s, gap .3s, padding .3s; }
.day-pill button i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #12362f; transition: background-color .3s; }
.day-pill button span { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width .45s var(--ease-out), opacity .3s; }
.day-pill button.on { background: rgba(18, 54, 47, .09); gap: 7px; padding-right: 13px; }
.day-pill button.on i { background: #12362f; }
.day-pill button.on span { max-width: 90px; opacity: 1; }
.day-pill button:focus-visible { outline: 2px solid #e3a340; outline-offset: 1px; }

@media (min-width: 992px) { .day-pill { left: max(28px, calc((100vw - 1320px) / 2 + 20px)); transform: none; bottom: 26px; } }
/* laptops and big screens */
@media (min-width: 992px) and (max-width: 1279.98px) { .d-art { left: 62%; height: min(72svh, 600px); } .d-copy { width: min(400px, 40vw); } }
@media (min-width: 1800px) { .d-art { height: min(76svh, 800px); left: 60%; } .d-masjid { width: min(26vw, 560px); } .d-copy { width: 560px; } }


/* ------------------------------------------------------------ prayer bar -- */
.d-pbar { position: absolute; z-index: 6; top: calc(var(--nav-h) + 12px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 14px 34px -22px rgba(8, 28, 24, .55); color: #12362f; white-space: nowrap; }
.d-pcity { display: inline-flex; align-items: center; gap: 4px; color: #a86a16; font-size: 13px; padding-right: 8px; border-right: 1px solid rgba(18, 54, 47, .12); }
.d-pcity select { border: 0; background: transparent; font: 600 13px var(--font-display); color: #12362f; cursor: pointer; padding: 2px 0; }
.d-pcity select:focus-visible { outline: 2px solid #e3a340; border-radius: 6px; }
.d-ptimes { display: flex; gap: 2px; }
.d-ptimes span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px; font: 600 13px var(--font-display); font-variant-numeric: tabular-nums; }
.d-ptimes small { font: 500 11.5px var(--font-body); color: #5b6964; }
.d-ptimes span.on { background: #12362f; color: #fff; }
.d-ptimes span.on small { color: #f6c46e; }
.d-pnext { font: 600 12.5px var(--font-display); color: #a86a16; padding-left: 8px; border-left: 1px solid rgba(18, 54, 47, .12); }
.d-pnext:empty { display: none; }
.d-pnext b { color: #12362f; }

/* --------------------------------------------------------- the masjid -- */
.d-masjid { position: absolute; z-index: 0; left: 82%; bottom: 10.5%; width: min(28vw, 460px); aspect-ratio: 400 / 330; transform: translateX(-50%); pointer-events: none; }
.d-mq-wrap { position: absolute; inset: 0; will-change: opacity, transform; transform-origin: 50% 100%; }
.d-mq { width: 100%; height: 100%; display: block; overflow: visible; }
.d-mq .m-wall { fill: var(--wall, #fbf3e6); }
.d-mq .m-shade { fill: rgba(18, 54, 47, .08); }
.d-mq .m-trim { fill: #e3a340; }
.d-mq .m-dome, .d-mq .m-dome-s { fill: url(#mq-dome); }
.d-mq .dA { stop-color: var(--dome-a, #2f7362); }
.d-mq .dB { stop-color: var(--dome-b, #1b4a40); }
.d-mq .m-dome-hi { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 5; stroke-linecap: round; }
.d-mq .m-finial { stroke: #c98424; stroke-width: 2.4; stroke-linecap: round; }
.d-mq .m-crescent { fill: #e3a340; }
.d-mq .m-band { stroke: #e3a340; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .75; fill: none; }
.d-mq .m-win { fill: #2c6a5a; }
.d-mq .m-door { fill: #1b4a40; }
.d-mq .m-door-in { fill: #245c4f; }
.d-mq .m-lit path { fill: #ffcf7a; opacity: var(--glow, 0); }
.d-mq .m-glows ellipse { fill: url(#mq-glow); opacity: var(--glow, 0); }
.d-mq .m-shadow { fill: rgba(8, 28, 24, .16); }
.d-tree { position: absolute; bottom: 2%; width: 11%; aspect-ratio: .8; filter: brightness(calc(1 - var(--night) * .55)); }
.d-tree::before { content: ''; position: absolute; left: 44%; right: 44%; bottom: 0; height: 34%; border-radius: 3px; background: #6b4a2b; }
.d-tree::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 80%; border-radius: 48% 52% 44% 46% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .18) 0 16%, transparent 17%), radial-gradient(circle at 70% 62%, rgba(0, 0, 0, .1) 0 26%, transparent 27%), linear-gradient(160deg, #5c9a65, #2f6a3e);
    box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .12); }
.d-tree.t1 { left: -12%; }
.d-tree.t2 { left: 101%; width: 9%; }
.d-prop { position: absolute; left: var(--x); top: var(--y); opacity: 0; will-change: transform, opacity; }
.d-bird { width: 22px; height: 10px; }
.d-bird::before, .d-bird::after { content: ''; position: absolute; top: 3px; width: 12px; height: 2px; border-radius: 2px; background: #3d4a45; }
.d-bird::before { left: 0; transform: rotate(22deg); transform-origin: right center; }
.d-bird::after { right: 0; transform: rotate(-22deg); transform-origin: left center; }
/* the lanterns lit for the evening: the same fanous that hangs on the week's garland below */
.d-lantern { width: 3.8%; aspect-ratio: 1 / 2; background: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 48%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f8dc9c%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23e3a340%22/%3E%3Cstop offset=%221%22 stop-color=%22%23b97a22%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22l%22 cx=%22.5%22 cy=%22.62%22 r=%22.62%22%3E%3Cstop offset=%220%22 stop-color=%22%23fffbe9%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23ffd98a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f0a93e%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M7.4 31.8V19.6C7.4 17.3 9.6 16 12 15.4C14.4 16 16.6 17.3 16.6 19.6V31.8Z%22 fill=%22url(%23l)%22/%3E%3Cg fill=%22url(%23g)%22%3E%3Cpath d=%22M12 5.8C9.2 7.4 7.4 9.3 6.9 11.4H17.1C16.6 9.3 14.8 7.4 12 5.8Z%22/%3E%3Crect x=%225.4%22 y=%2211.4%22 width=%2213.2%22 height=%222.3%22 rx=%221.1%22/%3E%3Cpath d=%22M6.6 33.2H17.4L12 40.4Z%22/%3E%3Ccircle cx=%2212%22 cy=%2246%22 r=%221%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%23d99a3c%22 stroke-width=%221.3%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%223.4%22 r=%222.2%22/%3E%3Cpath d=%22M6.4 14H17.6L18.8 17.4V30.2L17.6 33.2H6.4L5.2 30.2V17.4Z%22/%3E%3Cpath d=%22M12 40V45.2%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.d-lantern::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1.2px; height: 150%; margin-left: -.6px; background: rgba(246, 196, 110, .6); }
.d-lantern::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: 560%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 205, 120, .5), rgba(255, 190, 90, .14) 55%, rgba(255, 190, 90, 0)); }

/* phone-only compact cards in the copy */
.d-mcard { display: none; }
@media (min-width: 992px) and (max-width: 1279.98px) { .d-masjid { left: 83%; width: min(27vw, 360px); } }

/* ------------------------------------------------------------ phones -- */
@media (max-width: 991.98px) {
    .d-art { left: 50%; top: calc(var(--nav-h) + 8px); transform: translateX(-50%); height: 64%; }
    .d-skyline { bottom: auto; top: calc(var(--vis) * .43); height: calc(var(--vis) * .12); }
    .d-view { gap: 7px; }
    .d-times { margin-top: 7px; }
    .d-ground { top: calc(var(--vis) * .53); bottom: 0; height: auto; z-index: 2; border-radius: 26px 26px 0 0; background: transparent;
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -18px 40px -24px rgba(8, 28, 24, .45); }
    .d-ground::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .92); opacity: var(--card-day, 1); }
    .d-ground::after { background: #0b231f; opacity: var(--card-night, var(--night)); }
    .d-copy { top: calc(var(--vis) * .53 + 1rem); left: 1rem; right: 1rem; width: auto; transform: none; }
    .d-copy[data-i="0"] { transform: none; }
    .d-copy[data-i="2"] h2, .d-copy[data-i="2"] p { text-shadow: none; }
    .d-when { margin-bottom: .35rem; font-size: 11px; }
    .d-copy h1, .d-copy h2 { font-size: clamp(27px, 7.6vw, 34px); margin-bottom: .5rem; }
    .d-copy p { font-size: .92rem; line-height: 1.45; margin-bottom: .75rem; }
    .day-cta { font-size: 14px; }
    /* Phones: the scene dots sit in the copy card's top corner, level with the
       eyebrow, so they never cover the cards or the links. */
    .day-pill { bottom: auto; left: auto; right: .8rem; top: calc(var(--vis) * .53 + .8rem); transform: none; padding: 3px; gap: 0;
        background: rgba(18, 54, 47, .06); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .day-pill button, .day-pill button.on { padding: 6px; gap: 0; background: transparent; }
    .day-pill button span { display: none; }
    .day-pill button i { width: 8px; height: 8px; }
    .day-stage[data-act="2"] .day-pill { background: rgba(255, 255, 255, .1); }
    .day-stage[data-act="2"] .day-pill button i { border-color: #f6c46e; }
    .day-stage[data-act="2"] .day-pill button.on i { background: #f6c46e; }
}

/* Phones: the prayer bar sits right under the header, where the intro's logo
   lands; it waits while the intro plays and drops in just after the logo is home. */
@media (max-width: 991.98px) {
    .d-pbar { transition: opacity .45s ease .12s, transform .6s var(--ease-out) .12s; }
    .intro-playing .d-pbar { opacity: 0; transform: translateY(-8px); }
}
@media (max-width: 991.98px) {
    .d-art { display: none; }
    .d-pbar { left: 10px; right: 10px; transform: none; top: calc(var(--nav-h) + 6px); flex-wrap: wrap; gap: 2px 8px; padding: 6px 8px 5px; border-radius: 16px; white-space: normal; }
    .d-pcity { border: 0; padding: 0; font-size: 12px; }
    .d-pcity select { font-size: 12.5px; }
    .d-pnext { margin-left: auto; border: 0; padding: 0; font-size: 12px; order: 1; }
    .d-ptimes { order: 2; }
    .d-ptimes { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
    .d-ptimes span { display: grid; justify-items: center; gap: 0; padding: 3px 0 4px; border-radius: 10px; font-size: 12.5px; }
    .d-ptimes small { font-size: 9.5px; }
    .d-masjid { left: 50%; bottom: auto; top: calc(var(--nav-h) + 78px); height: calc(var(--vis) * .53 - var(--nav-h) - 80px); width: auto; max-width: 84vw; }
    .d-npm { gap: 11px; }
    .d-npm .d-ring { width: 40px; height: 40px; }
    .d-npm .d-ring .rb { stroke: rgba(18, 54, 47, .12); }
    .d-npm .d-ring i { color: #a86a16; font-size: 14px; }
    .d-npm .d-main b { font-size: 16px; }
    .d-npm .d-count { font: 600 12px var(--font-display); color: #7a4a12; background: #fbeed6; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
    .d-copy[data-i="2"] .d-mcard, .d-copy[data-i="2"] .d-npm { color: #17211e; }
    .d-ctas { gap: .5rem 1.2rem; }
    /* the lanterns hang between the minarets and the dome, clear of the prayer bar */
    .d-lantern { width: 4.6%; }
    .d-lantern.l1 { left: 26%; top: 16%; } .d-lantern.l3 { left: 70%; top: 16%; } .d-lantern.l2 { display: none; }
    .d-mcard { display: flex; margin: 0 0 .55rem; }
    .d-mcard.d-card { padding: 9px 12px; border-radius: 14px; }
    .d-mcard .d-main small { font-size: 10.5px; }
    .d-mcard .d-main b { font-size: 14px; }
    .d-mcard > .bi-chevron-right { color: #a86a16; }
    .d-ico-day { font: 700 10px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
    .d-ico-day.is-long { font-size: 8.5px; letter-spacing: .02em; }
    .d-logo-sm { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
    .d-mlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .d-mlinks a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; background: #fff; border-radius: 12px; font: 600 11px var(--font-display); color: #12362f; text-decoration: none; box-shadow: 0 8px 18px -14px rgba(8, 28, 24, .4); }
    .d-mlinks i { font-size: 16px; color: #a86a16; }
    /* Welcome: the words at the top of the card, the scroll hint at its foot */
    .d-copy[data-i="0"] { display: flex; flex-direction: column; height: calc(var(--vis) * .47 - 2rem); }
    .d-copy[data-i="0"] .d-scrollhint { font-size: 12.5px; margin-top: auto; }
}
@media (max-width: 991.98px) and (max-height: 760px) {
    .d-copy h1, .d-copy h2 { font-size: clamp(24px, 6.8vw, 29px); }
    .d-copy p { -webkit-line-clamp: 2 !important; }
    .d-copy p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 600px) and (max-width: 991.98px) { .d-copy { max-width: 560px; } }
/* Short phones: the scene's cards say it; drop the paragraph under the headline. */
@media (max-width: 991.98px) and (max-height: 700px) { .d-copy[data-i="1"] p, .d-copy[data-i="2"] p { display: none; } }

/* ------------------------------------------------------ the rest of the page -- */
/* Get involved: the next morning. The last card slides up over the arcade carrying the
   story's first light (the dawn at the top of the page) fading into paper, with the words
   straight on it, so the page ends where it began. */
.involve { padding: 3.5rem 0 4rem; }
.involve.involve-sheet { background: linear-gradient(180deg, #fbe9da 0%, #fbf2e6 45%, #fffdf8 100%); }
/* The sheet and the footer together cover the arcade's last screen, or the arcade would
   peek out under the footer on a tall screen (--footer-h: js/pages/home.js). */
.arcade:not(.ar-static) + .involve-sheet { min-height: calc(100svh - var(--footer-h, 0px)); display: flex; align-items: center; }
.involve-band { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem 2.6rem; flex-wrap: wrap; color: var(--forest); }
.involve-band .eyebrow { color: #a86a16; }
.involve-band .eyebrow::before { display: none; }
.involve-band h2 { font: 700 clamp(26px, 2.8vw, 40px)/1.1 var(--font-display); letter-spacing: -0.03em; margin: .35rem 0 0; color: #12362f; max-width: 24ch; text-wrap: balance; }
.involve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.involve-actions .btn-outline-forest { --bs-btn-border-color: rgba(18, 54, 47, .5); --bs-btn-hover-bg: rgba(18, 54, 47, .06); border-width: 1.5px; }
.involve-ig { color: #12362f; font: 600 14px var(--font-display); display: inline-flex; gap: .4rem; align-items: center; margin-left: .4rem; }
.involve-ig:hover { color: #a86a16; }
@media (max-width: 991.98px) {
    .involve { padding: 2.4rem 0 2.8rem; }
    .involve-band h2 { font-size: clamp(24px, 6.6vw, 30px); }
    .involve-ig { flex-basis: 100%; margin: .3rem 0 0; }
    .involve > .container { padding-left: 16px; padding-right: 16px; }
}

/* ----------------------------------------------- reduced motion: static -- */
.day-static .day { height: auto; margin-top: 0; }
.day-static .day-stage { position: relative; height: auto; overflow: visible; padding: 2rem 0 3rem; }
.day-static .d-art { position: relative; right: auto; left: auto; top: auto; transform: none; margin: 1rem auto 0; height: 560px; }
.day-static .d-view:not([data-i="0"]), .day-static .day-pill, .day-static .d-sun, .day-static .d-moon, .day-static .d-scrollhint { display: none; }
.day-static .d-ground, .day-static .d-skyline { display: none; }
.day-static .d-copies { position: relative; }
.day-static .d-copy { position: relative; top: auto; left: auto; right: auto; width: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; padding: 1.75rem 0; color: #12362f; }
.day-static .d-copy .d-when { color: #a86a16; }
.day-static .d-copy[data-i="0"] { height: auto; }
.day-static .d-copy h2, .day-static .d-copy p { text-shadow: none; }

.day-static .d-pbar { position: relative; top: auto; left: auto; right: auto; transform: none; margin: 0 auto 1rem; width: fit-content; max-width: calc(100% - 2rem); }
.day-static .d-masjid { position: relative; left: auto; top: auto; bottom: auto; transform: none; margin: 0 auto; width: min(80vw, 420px); height: auto; }
.day-static .d-prop, .day-static .d-note { display: none; }
.day-static .d-view > *, .day-static .d-copy .d-mcard, .day-static .d-copy .d-ctas { animation: none; opacity: 1; }
.day-static .d-mcard { margin-top: .5rem; }

/* The homepage story is pinned; a rubber-band pull at the top made it look like it bounced. */
html:has(#day) { overscroll-behavior-y: none; }