/* About page (js/about.js).
 *
 * Same visual language as the homepage day story: flat illustration, forest
 * and amber on cream, glass chips, the eight-pointed star. Classes are
 * prefixed ab- so nothing collides with theme.css. Only transform, opacity
 * and stroke-dashoffset animate; everything is static under reduced motion.
 */

:root { --ab-ease: cubic-bezier(0.22, 1, 0.36, 1); --ab-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ------------------------------------------------------------- hero -- */
.ab-hero { padding: 4.25rem 0 6.5rem; }
.ab-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; }
.ab-hero h1 .ab-hl { color: var(--amber); }
.ab-hero .lead { font-size: 1.15rem; }
.ab-hero .hero-stats strong { color: var(--amber); font-size: 1.35rem; }
.ab-hero .hero-stats span { display: inline-flex; align-items: baseline; gap: .15rem; }
.ab-rosette { position: absolute; right: max(2vw, calc((100vw - 1320px) / 2 + 1rem)); top: 50%; width: min(30vw, 360px); aspect-ratio: 1;
    translate: 0 -50%; z-index: -1; pointer-events: none; }
.ab-rosette svg { width: 100%; height: 100%; overflow: visible; animation: ab-turn 120s linear infinite; }
.ab-rosette .ring { fill: none; stroke: var(--amber); stroke-width: 1; opacity: .35; }
.ab-rosette .ring.b { opacity: .18; }
.ab-rosette .core { fill: var(--amber); opacity: .92; }
.ab-rosette .moon { fill: #fbeed6; }
.ab-rosette .halo { fill: url(#ab-halo); }
.ab-rosette .unturn { animation: ab-turn 120s linear infinite reverse; transform-origin: 0 0; }
@keyframes ab-turn { to { rotate: 360deg; } }
/* rolling hills edge into the cream page */
.ab-hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 0; display: block; }
.ab-hills .h1 { fill: var(--forest-700); opacity: .55; }
.ab-hills .h2 { fill: var(--cream); }

/* ------------------------------------------------ the illustration -- */
.ab-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 560 / 460; isolation: isolate;
    background: #fbeed6; box-shadow: var(--shadow-lg); }
.ab-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab-art .sun-halo { fill: url(#ab-sun); }
.ab-art .sun { fill: #fff6e2; }
.ab-art .sky-star { fill: var(--amber); opacity: .55; }
.ab-art .cloud { fill: #fff; opacity: .7; animation: ab-drift 40s linear infinite alternate; }
.ab-art .cloud.c2 { animation-duration: 52s; animation-delay: -20s; opacity: .55; }
@keyframes ab-drift { from { translate: -24px 0; } to { translate: 36px 0; } }
.ab-art .hill-a { fill: #efd3a0; }
.ab-art .hill-b { fill: #e6c07e; }
.ab-art .map-shadow { fill: rgba(8, 28, 24, .22); filter: blur(6px); }
.ab-art .land-side { fill: #0b2621; }
.ab-art .land { fill: url(#ab-land); }
.ab-art .lattice { fill: url(#ab-lattice); }
.ab-art .lake { fill: url(#ab-lake); }
.ab-art .river { fill: none; stroke: #7fb7b4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.ab-art .dot { fill: #fbeed6; opacity: .55; transition: opacity .6s ease calc(.9s + var(--i, 0) * 12ms); }
.ab-motion .ab-art:not(.is-on) .dot { opacity: 0; }
.ab-art .cluster { opacity: 1; }
.ab-motion .ab-art:not(.is-on) .cluster { opacity: 0; }
.ab-art .cluster .c-halo { fill: url(#ab-node); }
.ab-art .cluster .c-core { fill: #fbeed6; stroke: var(--amber); stroke-width: 1.4; }
.ab-art .cluster text { font: 700 7.5px var(--font-display); fill: var(--forest); }
.ab-art .city { font: 600 8.5px var(--font-display); fill: rgba(251, 238, 214, .78); letter-spacing: .06em; text-transform: uppercase; }
.ab-art .node { fill: var(--amber); }
.ab-art .node-halo { fill: url(#ab-node); }

/* the threads: amber bonds that draw in once the picture is in view */
.ab-art .thread { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.4s var(--ab-ease) calc(.25s + var(--i, 0) * 180ms); }
.ab-art .thread-glow { stroke: rgba(227, 163, 64, .28); stroke-width: 7; }
.ab-motion .ab-art:not(.is-on) .thread { stroke-dashoffset: 1; }
.ab-art .spark { fill: #fff6e2; transition: opacity .5s ease 1.8s; }
.ab-motion .ab-art:not(.is-on) .spark { opacity: 0; }

/* the three landmarks pop up on their spots */
.ab-art .mark { transform-box: fill-box; transform-origin: 50% 100%;
    transition: opacity .4s ease calc(var(--i, 0) * 140ms), transform .8s var(--ab-spring) calc(var(--i, 0) * 140ms); }
.ab-motion .ab-art:not(.is-on) .mark { opacity: 0; transform: translateY(10px) scale(.8); }
.ab-art .m-shadow { fill: rgba(8, 28, 24, .35); }
.ab-art .m-wall { fill: #fbf3e6; }
.ab-art .m-shade { fill: rgba(18, 54, 47, .1); }
.ab-art .m-trim { fill: #e3a340; }
.ab-art .m-dome { fill: url(#ab-dome); }
.ab-art .m-dome-hi { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 5; stroke-linecap: round; }
.ab-art .m-finial { stroke: #c98424; stroke-width: 2.4; stroke-linecap: round; }
.ab-art .m-crescent { fill: #e3a340; }
.ab-art .m-band { stroke: #e3a340; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .75; fill: none; }
.ab-art .m-win { fill: #ffcf7a; }
.ab-art .m-door { fill: #1b4a40; }
.ab-art .m-door-in { fill: #ffcf7a; }
.ab-art .m-glow { fill: url(#ab-glow); }
.ab-art .h-roof { fill: #c98424; }
.ab-art .h-roof-side { fill: #a86a16; }
.ab-art .h-wall { fill: #fbf3e6; }
.ab-art .h-shade { fill: rgba(18, 54, 47, .1); }
.ab-art .h-door { fill: #245c4f; }
.ab-art .h-win { fill: #ffcf7a; }
.ab-art .h-frame { fill: none; stroke: #1b4a40; stroke-width: 1.2; }
.ab-art .h-chim { fill: #b5652a; }
.ab-art .s-sign { fill: #12362f; }
.ab-art .s-sign-t { font: 700 6.5px var(--font-display); fill: #e3a340; letter-spacing: .14em; }
.ab-art .s-aw-a { fill: #e3a340; }
.ab-art .s-aw-b { fill: #fbf3e6; }

/* glass chips, as on the homepage */
.ab-chip { position: absolute; left: var(--x, auto); right: var(--r, auto); top: var(--y, auto); bottom: var(--b, auto); z-index: 2;
    display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .8rem .45rem .45rem; border-radius: 14px; max-width: 46%;
    background: rgba(255, 255, 255, .9); color: var(--forest); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 16px 32px -18px rgba(8, 28, 24, .5), 0 1px 0 rgba(255, 255, 255, .6) inset; white-space: nowrap;
    font: 600 13px/1.15 var(--font-display);
    transition: opacity .5s ease calc(1s + var(--i, 0) * 150ms), transform .8s var(--ab-spring) calc(1s + var(--i, 0) * 150ms); }
.ab-motion .ab-art:not(.is-on) .ab-chip { opacity: 0; transform: translateY(14px) scale(.9); }
.ab-chip > i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--forest); color: var(--amber); font-size: 15px; flex: 0 0 auto; }
.ab-chip > span { min-width: 0; }
.ab-chip b, .ab-chip small { display: block; overflow: hidden; text-overflow: ellipsis; }
.ab-chip b { font-weight: 650; }
.ab-chip small { font: 500 11.5px/1.2 var(--font-body); color: #5b6964; }
.ab-art.is-on .ab-chip span { animation: ab-bob 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.4s); }
@keyframes ab-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }

/* --------------------------------------------- what you'll find -- */
.ab-feat { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ab-feat-top { position: relative; height: 128px; display: flex; align-items: flex-end; justify-content: space-between; padding: 1rem 1.1rem; isolation: isolate; overflow: hidden; }
.ab-feat-top::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-amber); background-size: 52px 52px; opacity: .14;
    -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%); mask-image: linear-gradient(200deg, #000 10%, transparent 70%); }
.ab-feat-top::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -34px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .12); z-index: -1; }
.ab-feat-top .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem;
    background: rgba(255, 255, 255, .2); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 24px -14px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .5s var(--ab-spring); }
.ab-feat:hover .ic { transform: translateY(-4px) rotate(-6deg); }
.ab-feat-top .n { font: 650 2.1rem/1 var(--font-display); color: #fff; text-align: right; }
.ab-feat-top .n small { display: block; font: 500 .72rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-top: .25rem; }
.ab-feat-top .n:empty { display: none; }
.ab-feat.f-masjid .ab-feat-top { background: radial-gradient(90% 90% at 80% 0%, #245c4f, #12362f 60%, #0b231f); }
.ab-feat.f-jummah .ab-feat-top { background: linear-gradient(170deg, #4ea3d8, #7dbfe9 55%, #b7dff4); }
.ab-feat.f-programs .ab-feat-top { background: linear-gradient(170deg, #c98424, #e9a64c 50%, #f3cd8c); }
.ab-feat.f-market .ab-feat-top { background: linear-gradient(168deg, #3a2352, #7a3460 45%, #d0625a); }
.ab-feat .mo-card-body { flex: 1; display: flex; flex-direction: column; }
.ab-feat .go { margin-top: auto; padding-top: .9rem; font: 600 .9rem var(--font-display); color: var(--forest-600); display: inline-flex; align-items: center; gap: .35rem; }
.ab-feat .go i { transition: transform .25s ease; }
.ab-feat:hover .go i { transform: translateX(4px); }

/* ------------------------------------------ how a listing stays right -- */
.ab-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: ab-step; }
.ab-steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 18px); opacity: .7; }
.ab-step { position: relative; text-align: center; padding: 0 .5rem; }
.ab-step .star { position: relative; width: 56px; height: 56px; margin: 0 auto 1.1rem; display: grid; place-items: center; }
.ab-step .star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-step .star .s-bg { fill: var(--forest); }
.ab-step .star .s-line { fill: none; stroke: var(--amber); stroke-width: 1.2; opacity: .8; }
.ab-step .star i { position: relative; color: var(--amber); font-size: 1.15rem; }
.ab-step h3 { font-size: 1.1rem; font-weight: 650; color: var(--forest); margin-bottom: .4rem; }
.ab-step h3::before { counter-increment: ab-step; content: counter(ab-step) '. '; color: var(--amber-700); }
.ab-step p { color: var(--muted); font-size: .95rem; margin: 0 auto; max-width: 17rem; }
.ab-step .confirmed-badge { margin-top: .7rem; }

/* ---------------------------------------------------- reveal on scroll -- */
.ab-rise { transition: opacity .9s var(--ab-ease), transform .9s var(--ab-ease); transition-delay: calc(var(--d, 0) * 80ms); }
.ab-motion .ab-rise:not(.is-in) { opacity: 0; transform: translateY(22px); }

/* ---------------------------------------------------------- phones -- */
@media (max-width: 991.98px) {
    .ab-rosette { opacity: .45; width: 260px; right: -60px; }
    .ab-steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .ab-steps::before { display: none; }
}
@media (max-width: 767.98px) {
    .page-hero.ab-hero { padding: 1.4rem 0 3.4rem !important; }
    .ab-hero h1 { font-size: 1.75rem !important; }
    .ab-hills { height: 36px; }
    .ab-rosette { width: 180px; right: -50px; top: 40%; opacity: .3; }
    .ab-chip { font-size: 11px; padding: .3rem .55rem .3rem .3rem; gap: .4rem; border-radius: 11px; }
    .ab-chip > i { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; }
    .ab-chip small { font-size: 10px; }
    .ab-mission .fs-5 { font-size: 1rem !important; }
    .ab-feat-top { height: 84px; padding: .7rem .8rem; }
    .ab-feat-top .ic { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
    .ab-feat-top .n { font-size: 1.45rem; }
    .ab-feat-top .n small { font-size: .6rem; }
    .ab-feat .mo-card-body { padding: .8rem .85rem .9rem; }
    .ab-feat h3 { font-size: .98rem !important; }
    .ab-feat p { display: none; }
    .ab-feat .go { padding-top: .45rem; font-size: .82rem; }
}
@media (max-width: 479.98px) {
    .ab-steps { grid-template-columns: 1fr; }
    .ab-step { display: grid; grid-template-columns: 56px 1fr; gap: 0 1rem; text-align: left; }
    .ab-step .star { margin: 0; grid-row: span 3; }
    .ab-step p { margin: 0; }
    .ab-step .confirmed-badge { justify-self: start; }
}

/* ------------------------------------------------- reduced motion -- */
/* Hidden start states only apply under .ab-motion, which the head script sets
   when motion is allowed; without JS the page is simply static. */
@media (prefers-reduced-motion: reduce) {
    .ab-rise, .ab-art .mark, .ab-chip { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ab-art .thread { stroke-dashoffset: 0 !important; transition: none !important; }
    .ab-rosette svg, .ab-rosette .unturn, .ab-art .cloud, .ab-chip span { animation: none !important; }
}