/* Light page colors and the hero's automatic day/night photograph. */
:root {
    --theme-page: #fbf9f5;
    --theme-panel: #fbf9f5;
    --theme-card: #fff;
    --theme-soft: #f0ebe2;
    --theme-text: #18342e;
    --theme-subtle: #77756e;
    --theme-stroke: #e5ded2;
    --theme-accent: #073c30;
}
body { background: var(--theme-page); color: var(--theme-text); }

/* The photographed facade and sky keep their independent parallax offsets. */
.hero-mosque-media {
    position: absolute;
    z-index: 1;
    inset: -3% 0 auto;
    width: 100%;
    height: 106%;
    transform: translate3d(0, var(--hero-mosque-scroll), 0) scale(1.01);
    transform-origin: center;
    transition: transform 100ms linear;
    will-change: transform;
}
.hero-mosque-media .hero-image {
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-position: 50% 56%;
    filter: saturate(1.08) contrast(1.02);
    transition: filter .85s ease;
}
.hero-night-facade {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 56%;
    opacity: 0;
    transition: opacity .85s ease;
    pointer-events: none;
}
.hero-sky { transition: filter .85s ease; }
.hero-night-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, #08162236, transparent 65%);
    transition: opacity .85s ease;
}
.hero-night-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 7% 18%, #e6effa 0 1px, transparent 1.6px),
        radial-gradient(circle at 19% 39%, #d8e5fa 0 .8px, transparent 1.5px),
        radial-gradient(circle at 32% 12%, #eff4f9 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 43% 32%, #f3f0dc 0 .8px, transparent 1.4px),
        radial-gradient(circle at 55% 10%, #e8f1f7 0 1px, transparent 1.6px),
        radial-gradient(circle at 67% 36%, #dce9f2 0 .8px, transparent 1.5px),
        radial-gradient(circle at 79% 16%, #f8f4dc 0 1px, transparent 1.6px),
        radial-gradient(circle at 92% 31%, #e0edfa 0 .8px, transparent 1.5px);
    background-size: 960px 620px;
    opacity: .56;
    animation: hero-stars-drift 160s linear infinite paused;
}
.hero-night-moon {
    position: absolute;
    top: clamp(105px, 16%, 185px);
    left: 0;
    width: clamp(44px, 4.8vw, 68px);
    aspect-ratio: 1;
    overflow: visible;
    filter: drop-shadow(0 0 7px #e7f0ffaa) drop-shadow(0 0 23px #d2e3ff8a);
    animation: hero-moon-drift 260s linear infinite paused;
    animation-delay: -55s;
}
.hero-shade { transition: opacity .85s ease; }
.hero-night-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, #06131fcd, #091d2b88 36%, #091c2b19 73%, #07192335),
        linear-gradient(0deg, #06151fc2, transparent 60%, #071a2b32);
    transition: opacity .85s ease;
}
@keyframes hero-stars-drift { to { background-position: -960px 0; } }
@keyframes hero-moon-drift {
    from { transform: translate3d(calc(115vw + 160px), 0, 0); }
    to { transform: translate3d(-200px, 0, 0); }
}
.hero[data-hero-phase="night"] { background: #081925; }
.hero[data-hero-phase="night"] .hero-night-sky-track { opacity: 1; }
.hero[data-hero-phase="night"] .hero-night-facade { opacity: 1; }
.hero[data-hero-phase="night"] .hero-night-atmosphere { opacity: 1; }
.hero[data-hero-phase="night"] .hero-night-stars,
.hero[data-hero-phase="night"] .hero-night-moon { animation-play-state: running; }
.hero[data-hero-phase="night"] .hero-shade { opacity: 0; }
.hero[data-hero-phase="night"] .hero-night-shade { opacity: 1; }
@media(max-width:560px) {
    .hero-mosque-media .hero-image { object-position: 50% 50%; }
    .hero-night-facade { object-position: 50% 50%; }
    .hero-night-moon { top: 17%; }
    .hero-night-shade {
        background: linear-gradient(90deg, #071621d0, #08192677 58%, #08192638),
            linear-gradient(0deg, #07151ecf, transparent 63%);
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-night-stars, .hero-night-moon { animation: none !important; }
    .hero-night-moon { transform: translate3d(72vw, 0, 0); }
}

/* Let the photographed night sky continue cleanly behind the header at the hero. */
body:has(.hero[data-hero-phase="night"]) .site-header:not(.is-scrolled) {
    background: transparent;
}