/* ============================================================
   RJPMotion.css — live RJP view motion & styling spec
   Exported from the RJP Motion Lab (rjp-settings-custom.json):
   transition=zoom 450ms | entrance=drift 500ms, stagger 200ms ltr
   text=rise 320ms, delay 300ms | style=frosted | easing=soft
   buttons=rounded + arrow hover | choiceFx=focus
   grain + seam sweep + progress bar enabled
   Loaded ONLY by RJPView.cshtml (end of body) — the Edit page
   never loads this file, so the Edit preview keeps the old look.
   ============================================================ */

:root {
    --rjp-ease: cubic-bezier(0.25, 0.8, 0.3, 1);
    --rjp-exit: 450ms;
    --rjp-enter: 500ms;
    --rjp-stagger: 200ms; /* ltr */
    --rjp-text-delay: 300ms;
    --rjp-text: 320ms;
}

/* ---------- Keyframes (new names — never reuse slide-in/slide-out) ---------- */

@keyframes rjpZoomOut {
    to {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes rjpZoomIn {
    from {
        opacity: 0.4;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rjpDriftIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rjpRiseIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rise for the fixed, self-centering card: keeps the -50%,-50% centering
   that plain rjpRiseIn would otherwise wipe out */
@keyframes rjpRiseInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 12px));
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes seamFade {
    0% { opacity: 0; }
    18% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes seamRun {
    from { transform: translateY(-130%); }
    to { transform: translateY(440%); }
}

@keyframes grainShift {
    0%, 100% { background-position: 0 0; }
    16.6% { background-position: -26px 34px; }
    33.3% { background-position: 42px -22px; }
    50% { background-position: -30px -28px; }
    66.6% { background-position: 34px 30px; }
    83.3% { background-position: -20px 12px; }
}

/* ---------- Neutralize legacy live-view animations ----------
   The old rtl tile fade (Edit.css) and per-child re-fades
   (RJPsView.css / RJPsViewMobile.css) are out-cascaded here;
   the polygon wrappers and cards animate instead. */

.live-view #tile1-1tile,
.live-view #tile1-2tile,
.live-view #tile2-2tile,
.live-view #tile1-3tile,
.live-view #tile2-3tile,
.live-view #tile3-3tile {
    animation: none;
    opacity: 1;
}

.live-view [class*="item1container-"],
.live-view [class*="item2container-"],
.live-view [class*="item3container-"] {
    animation: none !important;
    opacity: 1 !important;
}

.live-view .Question1,
.live-view .Question2,
.live-view .Question3,
.live-view .Choice1,
.live-view .Choice2,
.live-view .Choice3,
.live-view .ChoiceText,
.live-view #top-text-1tile-left,
.live-view #top-text-1tile-right {
    animation: none;
    opacity: 1;
}

/* Legacy #defeb0 hover must never fire, armed or not */
.live-view .choice-button:hover {
    background-color: rgba(148, 170, 155, 0.88);
    color: #fff;
}

/* ---------- Entrance: drift ltr on the polygon wrappers ---------- */

.live-view .polygoncontainer {
    opacity: 0;
    animation: rjpDriftIn var(--rjp-enter) var(--rjp-ease) both;
    /* transitions only take effect once .entered releases the fill */
    transition: filter 240ms var(--rjp-ease), transform 380ms var(--rjp-ease);
}

#polygon-tile1-3tile { animation-delay: 0ms; }
#polygon-tile2-3tile { animation-delay: var(--rjp-stagger); }
#polygon-tile3-3tile { animation-delay: calc(2 * var(--rjp-stagger)); }
#polygon-tile1-2tile { animation-delay: 0ms; }
#polygon-tile2-2tile { animation-delay: var(--rjp-stagger); }
#polygon-tile1-1tile { animation-delay: 0ms; }

/* Applied by ViewManager on animationend — releases the both-fill
   lock on transform so choice-focus / :active transitions can act */
.live-view .entered {
    animation: none !important;
    opacity: 1 !important;
}

/* ---------- Text & buttons: rise, per-layout delay ---------- */

.live-view .item1container-3tile,
.live-view .item2container-3tile,
.live-view .item3container-3tile {
    --rise-delay: calc(2 * var(--rjp-stagger) + var(--rjp-text-delay)); /* 700ms */
}

.live-view .item1container-2tile,
.live-view .item3container-2tile {
    --rise-delay: calc(var(--rjp-stagger) + var(--rjp-text-delay)); /* 500ms */
}

.live-view .item1container-1tile,
.live-view .item3container-1tile,
.live-view .item1container-center {
    --rise-delay: var(--rjp-text-delay); /* 300ms */
}

/* Rise on the cards/logos/buttons themselves — never on the columns
   (.next-btn is position:fixed; a transformed ancestor would re-anchor it) */
.live-view .textcontainer,
.live-view .textcontainer-end,
.live-view #middlecontainer,
.live-view .logo1,
.live-view .logo2,
.live-view .button-holder .choice-button,
.live-view .button-holder-end .choice-button,
.live-view .button-holder-center-text .choice-button {
    opacity: 0;
    animation: rjpRiseIn var(--rjp-text) var(--rjp-ease) var(--rise-delay, var(--rjp-text-delay)) both;
}

/* #middlecontainer is position:fixed and centered BY its transform
   (Edit.css translate(-50%,-50%)); use the centering-preserving rise */
.live-view #middlecontainer {
    animation-name: rjpRiseInCenter;
}

/* Final page Finish button: quick rise (also overrides the legacy
   3s .button3-singlechoice delay) */
.live-view .button-holder-feedback .choice-button {
    opacity: 0;
    animation: rjpRiseIn var(--rjp-text) var(--rjp-ease) var(--rjp-text-delay) both;
}

/* ---------- Frosted glass text cards ----------
   !important beats the inline per-question DB background/padding */

.live-view .textcontainer,
.live-view .textcontainer-end,
.live-view #middlecontainer {
    background: rgba(28, 32, 38, 0.42) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    backdrop-filter: blur(14px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    padding: 14px 18px !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .live-view .textcontainer,
    .live-view .textcontainer-end,
    .live-view #middlecontainer {
        background: rgba(28, 32, 38, 0.72) !important;
    }
}

/* ---------- Desktop type scale (live view only; the mobile sheet's
   !important font sizes still win on mobile) ---------- */

.live-view .view-top-text { font-size: 1.5rem; }       /* was 2rem   — tile-page title */
.live-view .view-text { font-size: 1rem; }             /* was 1.2rem — body text */
.live-view #view-text-center { font-size: 1.5rem; }    /* was 2.2rem — centered-page title */
.live-view #view-choice-center { font-size: 1rem; }    /* was 1.3rem — centered-page body */
.live-view .choice-button { font-size: 1rem; }         /* was 1.5rem — all buttons incl. Next/Finish */

/* ---------- Buttons: new look, current sizes kept ---------- */

.live-view .choice-button {
    background: rgba(148, 170, 155, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    border-radius: 9px;
    transition: transform 190ms var(--rjp-ease),
                box-shadow 190ms var(--rjp-ease),
                filter 190ms var(--rjp-ease);
}

    /* children must never be event.target for the index-based click mapping */
    .live-view .choice-button > span {
        pointer-events: none;
    }

    .live-view .choice-button:active {
        transform: translateY(1px) scale(0.965);
        filter: brightness(1.05);
        box-shadow: none;
    }

    .live-view .choice-button .arr {
        display: inline-block;
        width: 0;
        opacity: 0;
        transform: translateX(-8px);
        margin-left: 0;
        vertical-align: baseline;
        transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

@media (hover: hover) {
    body.hover-armed .live-view .choice-button:hover {
        filter: brightness(1.1);
    }

        body.hover-armed .live-view .choice-button:hover .arr {
            width: 15px;
            opacity: 1;
            transform: translateX(0);
            margin-left: 9px;
        }
}

/* ---------- Choice hover focus (classes toggled by ViewManager) ---------- */

.live-view .polygoncontainer.tile-focus {
    filter: brightness(1.07);
    transform: scale(1.03);
}

.live-view .polygoncontainer.tile-dim {
    filter: brightness(0.62) saturate(0.8);
    transform: scale(0.992);
}

/* ---------- Seam light sweep (injected by ViewManager, 2/3-tile only) ---------- */

.live-view .seam-sweep {
    position: fixed;
    top: -6vh;
    left: var(--seam-x);
    width: 2px;
    height: 112vh;
    transform: rotate(var(--seam-rot, 11.2deg));
    transform-origin: 50% 50%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    animation: seamFade 1100ms ease var(--seam-delay, 900ms) both;
}

    .live-view .seam-sweep i {
        display: block;
        width: 100%;
        height: 26%;
        background: linear-gradient(180deg, transparent, rgba(190, 216, 196, 0.95), transparent);
        animation: seamRun 1100ms ease var(--seam-delay, 900ms) both;
    }

/* ---------- Film grain overlay ---------- */

#rjp-grain {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 700ms steps(6) infinite;
}

/* ---------- Journey progress bar ---------- */

#rjp-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.13);
    z-index: 9100;
    pointer-events: none;
}

#rjp-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #7e9a86, #b9d0be);
    box-shadow: 0 0 10px rgba(151, 171, 156, 0.6);
    /* emphasised ease — deliberately not --rjp-ease */
    transition: width 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reduced motion (always ship) ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    #rjp-grain {
        animation: none;
    }
}