/* ============================================================
   ROCKAWAY ISLAMIC CENTER
   PRAYER SCENE DIRECTIONAL DEPTH V2

   IMPORTANT:
   Existing prayer-scene CSS owns `transform`.
   This engine deliberately uses the independent `translate`
   property so existing keyframe transforms continue untouched.
   ============================================================ */

.ric-home .ric-scene-visual {
    perspective: 1100px;
    transform-style: preserve-3d;
}

.ric-home .ric-scene-enhanced {
    transform-style: preserve-3d;
}

/* ------------------------------------------------------------
   DEPTH LAYERS
   ------------------------------------------------------------ */

.ric-home .ric-depth-layer {
    transition:
        translate 480ms cubic-bezier(.19,.8,.25,1),
        filter 420ms ease;

    will-change:
        transform,
        translate;

    backface-visibility: hidden;
}

/*
 * Existing transform / animation stays exactly as-is.
 * Only the independent translate channel is added.
 */

.ric-home .ric-depth-sky {
    translate:
        var(--ric-v2-sky-x, 0px)
        var(--ric-v2-sky-y, 0px);
}

.ric-home .ric-depth-base {
    translate:
        var(--ric-v2-base-x, 0px)
        var(--ric-v2-base-y, 0px);
}

.ric-home .ric-depth-foreground {
    translate:
        var(--ric-v2-front-x, 0px)
        var(--ric-v2-front-y, 0px);
}


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

.ric-home
.ric-scene-card.ric-direction-active
.ric-depth-base {
    filter:
        saturate(1.025)
        contrast(1.01);
}

.ric-home
.ric-scene-card.ric-direction-active
.ric-depth-foreground {
    filter:
        saturate(1.045)
        contrast(1.015);
}


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

.ric-home .ric-scene-direction-arrow {
    position: absolute;
    z-index: 40;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 999px;

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

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(13,108,71,.94),
            rgba(21,149,97,.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,.28);

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

    opacity: .64;

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

    transform-origin: 50% 50%;
}

.ric-home .ric-scene-direction-arrow::before {
    content: "➜";

    display: block;

    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}


/* RIGHT */

.ric-home
.ric-scene-card[data-ric-scene-dir="right"]
.ric-scene-direction-arrow {
    right: 11px;
    top: 50%;

    margin-top: -19px;
}

.ric-home
.ric-scene-card[data-ric-scene-dir="right"]
.ric-scene-direction-arrow {
    translate:
        var(--ric-v2-arrow-x, 0px)
        var(--ric-v2-arrow-y, 0px);
}


/* LEFT */

.ric-home
.ric-scene-card[data-ric-scene-dir="left"]
.ric-scene-direction-arrow {
    left: 11px;
    top: 50%;

    margin-top: -19px;

    transform: rotate(180deg);

    translate:
        var(--ric-v2-arrow-x, 0px)
        var(--ric-v2-arrow-y, 0px);
}


/* UP */

.ric-home
.ric-scene-card[data-ric-scene-dir="up"]
.ric-scene-direction-arrow {
    left: 50%;
    top: 11px;

    margin-left: -19px;

    transform: rotate(-90deg);

    translate:
        var(--ric-v2-arrow-x, 0px)
        var(--ric-v2-arrow-y, 0px);
}


/* DOWN */

.ric-home
.ric-scene-card[data-ric-scene-dir="down"]
.ric-scene-direction-arrow {
    left: 50%;
    bottom: 11px;

    margin-left: -19px;

    transform: rotate(90deg);

    translate:
        var(--ric-v2-arrow-x, 0px)
        var(--ric-v2-arrow-y, 0px);
}


/* ACTIVE ARROW */

.ric-home
.ric-scene-card.ric-direction-active
.ric-scene-direction-arrow {
    opacity: .96;

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


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

.ric-home .ric-scene-visual::after {
    pointer-events: none;
}

.ric-home
.ric-scene-card.ric-direction-active
.ric-scene-visual {
    --ric-v2-depth-glow: 1;
}


/* ------------------------------------------------------------
   PHONE / TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .ric-home .ric-scene-visual {
        perspective: 850px;
    }

    .ric-home .ric-scene-direction-arrow {
        width: 34px;
        height: 34px;

        opacity: .60;
    }

    .ric-home .ric-scene-direction-arrow::before {
        font-size: 18px;
    }

    .ric-home
    .ric-scene-card[data-ric-scene-dir="right"]
    .ric-scene-direction-arrow {
        right: 8px;
        margin-top: -17px;
    }

    .ric-home
    .ric-scene-card[data-ric-scene-dir="left"]
    .ric-scene-direction-arrow {
        left: 8px;
        margin-top: -17px;
    }

    .ric-home
    .ric-scene-card[data-ric-scene-dir="up"]
    .ric-scene-direction-arrow {
        top: 8px;
        margin-left: -17px;
    }

    .ric-home
    .ric-scene-card[data-ric-scene-dir="down"]
    .ric-scene-direction-arrow {
        bottom: 8px;
        margin-left: -17px;
    }
}


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

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

    .ric-home .ric-depth-layer {
        translate: 0 0 !important;
        transition: none !important;
    }

    .ric-home .ric-scene-direction-arrow {
        translate: 0 0 !important;
        transition: none !important;
        opacity: .38;
    }
}