/* ============================================================
   ROCKAWAY ISLAMIC CENTER
   3D DIRECTIONAL IMAGE ENGINE V1
   ============================================================ */

:root {
    --ric3d-perspective: 1050px;
    --ric3d-radius: 22px;
    --ric3d-duration: 520ms;
    --ric3d-shadow:
        0 16px 38px rgba(0,0,0,.16),
        0 4px 12px rgba(0,0,0,.10);
}

/* ------------------------------------------------------------
   HOST
   ------------------------------------------------------------ */

.ric3d-host {
    position: relative;
    isolation: isolate;
    perspective: var(--ric3d-perspective);
    transform-style: preserve-3d;
}

/* Images selected by JS */
img.ric3d-image {
    --ric3d-rx: 0deg;
    --ric3d-ry: 0deg;
    --ric3d-tx: 0px;
    --ric3d-ty: 0px;
    --ric3d-scale: 1;

    position: relative;
    z-index: 2;

    transform-origin: 50% 50%;
    backface-visibility: hidden;

    transform:
        perspective(var(--ric3d-perspective))
        translate3d(
            var(--ric3d-tx),
            var(--ric3d-ty),
            0
        )
        rotateX(var(--ric3d-rx))
        rotateY(var(--ric3d-ry))
        scale3d(
            var(--ric3d-scale),
            var(--ric3d-scale),
            1
        );

    transition:
        transform var(--ric3d-duration)
            cubic-bezier(.19,.8,.25,1),
        filter var(--ric3d-duration) ease,
        box-shadow var(--ric3d-duration) ease;

    will-change: transform;
}

/* ------------------------------------------------------------
   ACTIVE DEPTH
   ------------------------------------------------------------ */

.ric3d-host.ric3d-active img.ric3d-image {
    --ric3d-scale: 1.025;

    filter:
        saturate(1.035)
        contrast(1.015);

    box-shadow: var(--ric3d-shadow);
}

/* ------------------------------------------------------------
   DIRECTIONAL DEFAULTS
   ------------------------------------------------------------ */

.ric3d-host[data-ric3d-dir="right"].ric3d-active
img.ric3d-image {
    --ric3d-tx: 10px;
    --ric3d-ry: 2deg;
}

.ric3d-host[data-ric3d-dir="left"].ric3d-active
img.ric3d-image {
    --ric3d-tx: -10px;
    --ric3d-ry: -2deg;
}

.ric3d-host[data-ric3d-dir="up"].ric3d-active
img.ric3d-image {
    --ric3d-ty: -9px;
    --ric3d-rx: 2deg;
}

.ric3d-host[data-ric3d-dir="down"].ric3d-active
img.ric3d-image {
    --ric3d-ty: 9px;
    --ric3d-rx: -2deg;
}

/* ------------------------------------------------------------
   DIRECTION ARROW
   ------------------------------------------------------------ */

.ric3d-arrow {
    --ric3d-arrow-x: 0px;
    --ric3d-arrow-y: 0px;
    --ric3d-arrow-rotate: 0deg;

    position: absolute;
    z-index: 5;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    pointer-events: none;
    user-select: none;

    border-radius: 999px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(11,107,68,.94),
            rgba(18,145,91,.88)
        );

    border: 1px solid rgba(255,255,255,.46);

    box-shadow:
        0 8px 22px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: .88;

    transform:
        translate3d(
            var(--ric3d-arrow-x),
            var(--ric3d-arrow-y),
            30px
        )
        rotate(var(--ric3d-arrow-rotate));

    transition:
        transform 520ms cubic-bezier(.19,.8,.25,1),
        opacity 300ms ease,
        box-shadow 300ms ease;
}

.ric3d-arrow::before {
    content: "➜";
    display: block;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
}

/* Right */
.ric3d-host[data-ric3d-dir="right"] .ric3d-arrow {
    right: 14px;
    top: 50%;
    margin-top: -21px;
}

/* Left */
.ric3d-host[data-ric3d-dir="left"] .ric3d-arrow {
    left: 14px;
    top: 50%;
    margin-top: -21px;
    --ric3d-arrow-rotate: 180deg;
}

/* Up */
.ric3d-host[data-ric3d-dir="up"] .ric3d-arrow {
    left: 50%;
    top: 14px;
    margin-left: -21px;
    --ric3d-arrow-rotate: -90deg;
}

/* Down */
.ric3d-host[data-ric3d-dir="down"] .ric3d-arrow {
    left: 50%;
    bottom: 14px;
    margin-left: -21px;
    --ric3d-arrow-rotate: 90deg;
}

/* ------------------------------------------------------------
   ARROW FOLLOWS DIRECTION
   ------------------------------------------------------------ */

.ric3d-host[data-ric3d-dir="right"].ric3d-active
.ric3d-arrow {
    --ric3d-arrow-x: 9px;
}

.ric3d-host[data-ric3d-dir="left"].ric3d-active
.ric3d-arrow {
    --ric3d-arrow-x: -9px;
}

.ric3d-host[data-ric3d-dir="up"].ric3d-active
.ric3d-arrow {
    --ric3d-arrow-y: -8px;
}

.ric3d-host[data-ric3d-dir="down"].ric3d-active
.ric3d-arrow {
    --ric3d-arrow-y: 8px;
}

.ric3d-host.ric3d-active .ric3d-arrow {
    opacity: 1;

    box-shadow:
        0 11px 28px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.30);
}

/* ------------------------------------------------------------
   BACKGROUND DEPTH GLOW
   ------------------------------------------------------------ */

.ric3d-host::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 8%;
    right: 8%;
    top: 12%;
    bottom: 4%;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(16,133,83,.18),
            transparent 68%
        );

    filter: blur(22px);

    opacity: 0;

    transform:
        translate3d(0,12px,-20px)
        scale(.94);

    transition:
        opacity 500ms ease,
        transform 600ms cubic-bezier(.19,.8,.25,1);

    pointer-events: none;
}

.ric3d-host.ric3d-active::before {
    opacity: 1;

    transform:
        translate3d(0,3px,-20px)
        scale(1.03);
}

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (hover:hover) and (pointer:fine) {

    .ric3d-host {
        cursor: default;
    }

    .ric3d-host:hover .ric3d-arrow {
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   TABLET / MOBILE
   Less aggressive motion.
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    :root {
        --ric3d-perspective: 850px;
    }

    .ric3d-arrow {
        width: 38px;
        height: 38px;
    }

    .ric3d-arrow::before {
        font-size: 19px;
    }

    .ric3d-host[data-ric3d-dir="right"] .ric3d-arrow {
        right: 9px;
        margin-top: -19px;
    }

    .ric3d-host[data-ric3d-dir="left"] .ric3d-arrow {
        left: 9px;
        margin-top: -19px;
    }

    .ric3d-host[data-ric3d-dir="up"] .ric3d-arrow {
        top: 9px;
        margin-left: -19px;
    }

    .ric3d-host[data-ric3d-dir="down"] .ric3d-arrow {
        bottom: 9px;
        margin-left: -19px;
    }

    .ric3d-host.ric3d-active img.ric3d-image {
        --ric3d-scale: 1.018;
    }
}

/* Narrow phones */
@media (max-width: 520px) {

    .ric3d-arrow {
        width: 34px;
        height: 34px;
        opacity: .82;
    }

    .ric3d-arrow::before {
        font-size: 17px;
    }
}

/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

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

    img.ric3d-image,
    .ric3d-arrow,
    .ric3d-host::before {
        transition: none !important;
        animation: none !important;
    }

    img.ric3d-image {
        transform: none !important;
    }

    .ric3d-host::before {
        transform: none !important;
    }

    .ric3d-arrow {
        transform:
            rotate(var(--ric3d-arrow-rotate)) !important;
    }
}