/*
 * ==========================================================
 * RIC HOMEPAGE F.2.4.1
 * ISLAMIC DATE-DRIVEN ANIMATION
 * ==========================================================
 */

.ric-f-season {
    --ric-date-gold:#f1c65b;
    --ric-date-aura:.12;
    --ric-date-stars:.13;
    --ric-date-horizon:.07;
}

.ric-f-date-animation {
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}

.ric-f-date-stars,
.ric-f-date-aura,
.ric-f-date-ring,
.ric-f-date-crescent,
.ric-f-date-horizon {
    position:absolute;
    pointer-events:none;
}

/* STAR FIELD */

.ric-f-date-stars {
    inset:0;

    opacity:
        var(--ric-date-stars);

    background-image:
        radial-gradient(
            circle,
            rgba(255,247,212,.9) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle,
            rgba(161,222,205,.72) 0 1px,
            transparent 1.4px
        );

    background-size:
        82px 82px,
        127px 127px;

    background-position:
        17px 21px,
        49px 68px;

    animation:
        ricHijriStars
        13s
        ease-in-out
        infinite;
}

/* CELESTIAL AURA */

.ric-f-date-aura {
    width:min(47vw,620px);
    aspect-ratio:1;

    right:-6%;
    top:50%;

    border-radius:50%;

    opacity:
        var(--ric-date-aura);

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(241,198,91,.22),
            rgba(241,198,91,.06) 38%,
            transparent 70%
        );

    animation:
        ricHijriAura
        11s
        ease-in-out
        infinite;
}

/* SACRED MONTH ORBIT */

.ric-f-date-ring {
    width:min(39vw,520px);
    aspect-ratio:1;

    right:-2%;
    top:50%;

    border:
        1px solid
        rgba(241,198,91,.27);

    border-radius:50%;

    opacity:0;

    transform:
        translateY(-50%);

    animation:
        ricHijriRing
        50s
        linear
        infinite;
}

.ric-f-date-ring::before,
.ric-f-date-ring::after {
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--ric-date-gold);

    box-shadow:
        0 0 16px
        rgba(241,198,91,.7);
}

.ric-f-date-ring::before {
    left:12%;
    top:15%;
}

.ric-f-date-ring::after {
    right:8%;
    bottom:24%;
}

/* CRESCENT */

.ric-f-date-crescent {
    width:64px;
    height:64px;

    right:8%;
    top:13%;

    opacity:.12;

    border-radius:50%;

    box-shadow:
        -15px 4px 0
        var(--ric-date-gold);

    transform:
        rotate(-18deg);

    animation:
        ricHijriCrescent
        13s
        ease-in-out
        infinite;
}

/* HORIZON */

.ric-f-date-horizon {
    left:0;
    right:0;
    bottom:-6%;

    height:40%;

    opacity:
        var(--ric-date-horizon);

    background:
        radial-gradient(
            ellipse at 72% 100%,
            rgba(241,198,91,.7),
            rgba(241,198,91,.13) 35%,
            transparent 72%
        );

    filter:
        blur(11px);

    animation:
        ricHijriHorizon
        14s
        ease-in-out
        infinite;
}

/*
 * Existing content stays above both cosmos layers.
 */

/*
 * F.2.5
 * Preserve the original Stage-F positioning system.
 * Do NOT force every direct child to position:relative.
 */


/* DATE STATUS */

.ric-f-date-status {
    display:none;

    width:fit-content;

    margin-top:9px;

    padding:7px 11px;

    border:
        1px solid
        rgba(241,198,91,.32);

    border-radius:999px;

    background:
        rgba(0,35,29,.58);

    color:#fff;

    font-size:10px;
    font-weight:800;

    backdrop-filter:
        blur(8px);
}

.ric-f-date-status.is-visible {
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.ric-f-date-status::before {
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--ric-date-gold);

    box-shadow:
        0 0 12px
        rgba(241,198,91,.7);
}

/* SACRED MONTHS */

.ric-f-season[data-ric-islamic-sacred="1"] {
    --ric-date-aura:.27;
    --ric-date-stars:.23;
    --ric-date-horizon:.11;
}

.ric-f-season[data-ric-islamic-sacred="1"]
.ric-f-date-ring {
    opacity:.60;
}

/* SHA'BAN */

.ric-f-season[data-ric-islamic-season="shaban"] {
    --ric-date-aura:.24;
    --ric-date-stars:.27;
    --ric-date-horizon:.13;
}

.ric-f-season[data-ric-islamic-season="shaban"]
.ric-f-date-crescent {
    opacity:.32;
}

/* RAMADAN */

.ric-f-season[data-ric-islamic-season="ramadan"] {
    --ric-date-aura:.33;
    --ric-date-stars:.42;
    --ric-date-horizon:.18;
}

.ric-f-season[data-ric-islamic-season="ramadan"]
.ric-f-date-crescent {
    opacity:.48;
}

/* LAST TEN NIGHTS */

.ric-f-season[data-ric-islamic-season="ramadan-last-ten"] {
    --ric-date-aura:.44;
    --ric-date-stars:.62;
    --ric-date-horizon:.20;
}

.ric-f-season[data-ric-islamic-season="ramadan-last-ten"]
.ric-f-date-ring {
    opacity:.58;
}

/* EID AL-FITR */

.ric-f-season[data-ric-islamic-season="eid-fitr"] {
    --ric-date-aura:.48;
    --ric-date-stars:.52;
    --ric-date-horizon:.35;
}

.ric-f-season[data-ric-islamic-season="eid-fitr"]
.ric-f-date-ring {
    opacity:.80;
}

/* DHUL-HIJJAH FIRST TEN */

.ric-f-season[data-ric-islamic-season="dhul-hijjah-ten"] {
    --ric-date-aura:.38;
    --ric-date-stars:.35;
    --ric-date-horizon:.40;
}

.ric-f-season[data-ric-islamic-season="dhul-hijjah-ten"]
.ric-f-date-ring {
    opacity:.68;
}

/* ARAFAH */

.ric-f-season[data-ric-islamic-season="arafah"] {
    --ric-date-aura:.48;
    --ric-date-stars:.40;
    --ric-date-horizon:.55;
}

/* EID AL-ADHA */

.ric-f-season[data-ric-islamic-season="eid-adha"] {
    --ric-date-aura:.50;
    --ric-date-stars:.50;
    --ric-date-horizon:.42;
}

.ric-f-season[data-ric-islamic-season="eid-adha"]
.ric-f-date-ring {
    opacity:.82;
}

/* TASHRIQ */

.ric-f-season[data-ric-islamic-season="tashriq"] {
    --ric-date-aura:.31;
    --ric-date-stars:.29;
    --ric-date-horizon:.25;
}

/* FIRST DAY OF ANY HIJRI MONTH */

.ric-f-season[data-ric-islamic-new-month="1"]
.ric-f-date-crescent {
    opacity:.48;
}

/* MOTION */

@keyframes ricHijriAura {

    0%,
    100% {
        transform:
            translateY(-50%)
            scale(.97);
    }

    50% {
        transform:
            translateY(-50%)
            scale(1.04);
    }
}

@keyframes ricHijriRing {

    from {
        transform:
            translateY(-50%)
            rotate(0deg);
    }

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }
}

@keyframes ricHijriStars {

    0%,
    100% {
        filter:
            brightness(.78);
    }

    50% {
        filter:
            brightness(1.18);
    }
}

@keyframes ricHijriHorizon {

    0%,
    100% {
        transform:
            scaleX(.92);
    }

    50% {
        transform:
            scaleX(1.08);
    }
}

@keyframes ricHijriCrescent {

    0%,
    100% {
        transform:
            rotate(-18deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-15deg)
            translateY(-5px);
    }
}

/* PHONE */

@media (max-width:700px) {

    .ric-f-date-aura {
        width:420px;
        right:-220px;
    }

    .ric-f-date-ring {
        width:330px;
        right:-165px;
    }

    .ric-f-date-crescent {
        width:48px;
        height:48px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion:reduce) {

    .ric-f-date-stars,
    .ric-f-date-aura,
    .ric-f-date-ring,
    .ric-f-date-crescent,
    .ric-f-date-horizon {
        animation:none !important;
    }
}


/* RIC-F25-FINAL-POLISH-START */

/*
 * ==========================================================
 * RIC HOMEPAGE F.2.5
 * FINAL COSMOS LAYOUT POLISH
 *
 * Pure presentation layer.
 * Does not modify Hijri or astronomy calculations.
 * ==========================================================
 */


/*
 * Keep the actual textual UI over the decorative
 * celestial layers without overriding original positioning.
 */

.ric-f-copy,
.ric-f-title,
.ric-f-hijri,
.ric-f-message,
.ric-f-coming-month,
.ric-f-month-explorer,
.ric-f-cosmos-readout,
.ric-f-cosmos-source,
.ric-f-date-status {
    z-index:4;
}


/*
 * DESKTOP CURRENT MONTH
 *
 * Avoid:
 *
 * Rabi al-
 * Thani
 *
 * on normal desktop widths.
 */

@media (min-width:901px) {

    .ric-f-title {
        white-space:nowrap;

        width:max-content;

        max-width:none;

        font-size:
            clamp(
                31px,
                2.35vw,
                43px
            );

        line-height:.98;

        letter-spacing:-.035em;
    }

}


/*
 * Cosmos canvas:
 *
 * Leave a small protected right margin so the Moon and
 * its label are not pressed against the section boundary.
 *
 * This also pulls the Earth slightly inward.
 */

@media (min-width:1101px) {

    .ric-f-cosmos-canvas {
        left:0 !important;

        right:44px !important;

        width:
            calc(
                100% - 44px
            ) !important;

        filter:
            brightness(1.08)
            saturate(1.04);
    }

}


@media
    (min-width:701px)
    and
    (max-width:1100px) {

    .ric-f-cosmos-canvas {
        left:0 !important;

        right:22px !important;

        width:
            calc(
                100% - 22px
            ) !important;

        filter:
            brightness(1.06);
    }

}


/*
 * Do not crop the mobile sky.
 */

@media (max-width:700px) {

    .ric-f-cosmos-canvas {
        left:0 !important;
        right:0 !important;

        width:100% !important;

        filter:
            brightness(1.04);
    }

}


/*
 * Astronomy chips:
 * keep them compact but easier to scan.
 */

.ric-f-cosmos-readout {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:7px;

    max-width:
        min(
            100%,
            720px
        );
}


.ric-f-cosmos-chip {
    white-space:nowrap;
}


/*
 * Keep the central copy comfortable and prevent it from
 * running into the Earth/Moon area.
 */

@media (min-width:1101px) {

    .ric-f-copy {
        max-width:
            min(
                650px,
                55vw
            );
    }

}


/*
 * Upcoming sacred month gets a restrained gold hierarchy.
 */

.ric-f-coming-month {
    max-width:100%;

    box-shadow:
        inset 0 0 0 1px
        rgba(241,198,91,.04);
}


.ric-f-coming-label {
    letter-spacing:.035em;
}


/*
 * Month explorer should remain above all celestial graphics.
 */

.ric-f-month-explorer {
    position:relative;

    z-index:6;
}


/*
 * Keep animation purely decorative and non-interactive.
 */

.ric-f-date-animation,
.ric-f-date-animation *,
.ric-f-cosmos-canvas {
    pointer-events:none !important;
}


/*
 * Slightly soften ordinary-date animation.
 * Special Islamic dates continue to use the stronger
 * values defined by F.2.4.1.
 */

.ric-f-season[
    data-ric-islamic-season="steady"
]
.ric-f-date-aura {
    opacity:.10;
}


.ric-f-season[
    data-ric-islamic-season="steady"
]
.ric-f-date-ring {
    opacity:0;
}


/*
 * MOBILE
 */

@media (max-width:700px) {

    .ric-f-title {
        white-space:normal;

        width:auto;

        max-width:100%;

        line-height:1.02;
    }


    .ric-f-cosmos-readout {
        gap:5px;
    }


    .ric-f-cosmos-chip {
        padding:6px 8px;

        font-size:9px;
    }


    .ric-f-coming-month {
        width:100%;
    }

}


/*
 * REDUCED MOTION
 */

@media (prefers-reduced-motion:reduce) {

    .ric-f-date-animation * {
        animation:none !important;
    }

}

/* RIC-F25-FINAL-POLISH-END */