/*
 * ROCKAWAY ISLAMIC CENTER
 * MODERN WEB PLATFORM V2
 *
 * Native Popovers
 * Scroll-driven Animation
 * Scroll-state capability
 * Navigation enhancements
 *
 * Progressive enhancement only.
 */


/* ============================================================
   NATIVE POPOVER
   ============================================================ */

html.ric-modern-v2-ready [popover] {

    max-inline-size:
        min(
            420px,
            calc(100vw - 24px)
        );

    border:
        1px solid
        rgba(25,75,60,.15);

    border-radius:
        18px;

    padding:
        16px;

    background:
        rgba(255,255,255,.98);

    color:
        #173f35;

    box-shadow:
        0 22px 70px
        rgba(0,0,0,.22);
}


html.ric-modern-v2-ready [popover]::backdrop {

    background:
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(2px);
}


/* Open-state support */

@supports selector(:popover-open) {

    html.ric-modern-v2-ready
    [popover]:popover-open {

        opacity:1;
    }
}


@supports selector(:open) {

    html.ric-modern-v2-ready
    details:open {

        --ric-v2-open-state:1;
    }
}


/* ============================================================
   SCROLL-DRIVEN ANIMATION
   ============================================================ */

@supports
    (animation-timeline:view()) {

    html.ric-modern-v2-ready
    .ric-scroll-reveal {

        animation-name:
            ricV2Reveal;

        animation-duration:
            1ms;

        animation-fill-mode:
            both;

        animation-timeline:
            view();

        animation-range:
            entry 5%
            cover 24%;
    }


    @keyframes ricV2Reveal {

        from {

            opacity:.22;

            translate:
                0 14px;

            scale:.985;
        }

        to {

            opacity:1;

            translate:
                0 0;

            scale:1;
        }
    }
}


/* ============================================================
   SCROLL STATE CAPABILITY
   ============================================================ */

@supports
    (container-type:scroll-state) {

    .ric-scroll-state-container {

        container-type:
            scroll-state;
    }


    @container
        scroll-state(stuck:top) {

        .ric-scroll-state-surface {

            box-shadow:
                0 12px 28px
                rgba(0,0,0,.12);

            backdrop-filter:
                blur(14px);
        }
    }
}


/* ============================================================
   NAVIGATION STATE
   ============================================================ */

html.ric-navigation-pending {

    cursor:
        progress;
}


html.ric-navigation-pending
a {

    cursor:
        progress;
}


/* ============================================================
   SAFE REVEAL TARGETS
   ============================================================ */

html.ric-modern-v2-ready
.ric-section-heading,

html.ric-modern-v2-ready
.ric-panel,

html.ric-modern-v2-ready
.ric-feature {

    transform-origin:
        50% 50%;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    html.ric-modern-v2-ready
    .ric-scroll-reveal {

        animation:
            none !important;

        opacity:
            1 !important;

        translate:
            none !important;

        scale:
            1 !important;
    }
}