/* ==================================================================
   HubBits & MorDocs — Customer Vault & Chamber Passage R1
   Shared presentation and motion only. Business logic stays untouched.
   ================================================================== */

body.hm-vault-surface {
    --hm-vault-accent-rgb: 157, 111, 237;
    --hm-vault-secondary-rgb: 111, 163, 156;
    --hm-vault-gold-rgb: 216, 188, 120;
    isolation: isolate;
}

body[data-hm-vault="gateway"] {
    --hm-vault-accent-rgb: 119, 165, 158;
    --hm-vault-secondary-rgb: 145, 104, 210;
}

body[data-hm-vault="wares"] {
    --hm-vault-accent-rgb: 159, 112, 238;
    --hm-vault-secondary-rgb: 112, 170, 157;
}

body[data-hm-vault="ware-record"] {
    --hm-vault-accent-rgb: 183, 143, 218;
    --hm-vault-secondary-rgb: 216, 188, 120;
}

body[data-hm-vault="atrium"] {
    --hm-vault-accent-rgb: 166, 111, 239;
    --hm-vault-secondary-rgb: 112, 170, 157;
}

body[data-hm-vault="ledger"] {
    --hm-vault-accent-rgb: 188, 126, 174;
    --hm-vault-secondary-rgb: 125, 143, 205;
}

body[data-hm-vault="crystal"] {
    --hm-vault-accent-rgb: 132, 113, 231;
    --hm-vault-secondary-rgb: 102, 166, 177;
}

body[data-hm-vault="signals"] {
    --hm-vault-accent-rgb: 111, 158, 191;
    --hm-vault-secondary-rgb: 156, 107, 203;
}

body[data-hm-vault="treasury"] {
    --hm-vault-accent-rgb: 192, 157, 91;
    --hm-vault-secondary-rgb: 102, 163, 146;
}

body[data-hm-vault="guardian"] {
    --hm-vault-accent-rgb: 119, 139, 207;
    --hm-vault-secondary-rgb: 157, 104, 190;
}

body[data-hm-vault="petition"] {
    --hm-vault-accent-rgb: 187, 117, 177;
    --hm-vault-secondary-rgb: 124, 153, 190;
}

body[data-hm-vault="threshold"] {
    --hm-vault-accent-rgb: 137, 105, 199;
    --hm-vault-secondary-rgb: 104, 146, 165;
}

body[data-hm-vault="invitation"] {
    --hm-vault-accent-rgb: 105, 165, 149;
    --hm-vault-secondary-rgb: 166, 115, 201;
}

/* A quiet realm-specific atmosphere sits behind the page structure. */
.hm-vault-atmosphere {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 44% 34% at 82% 13%,
            rgba(var(--hm-vault-accent-rgb), .095),
            transparent 72%
        ),
        radial-gradient(
            ellipse 34% 30% at 12% 58%,
            rgba(var(--hm-vault-secondary-rgb), .052),
            transparent 74%
        ),
        linear-gradient(
            120deg,
            transparent 28%,
            rgba(var(--hm-vault-gold-rgb), .018) 49%,
            transparent 68%
        );
    opacity: .82;
}

body.hm-vault-surface > main,
body.hm-vault-surface > .site-footer {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------
   Passage choreography: ~190 ms departure, ~350 ms arrival.
   Individual translate/scale properties avoid disturbing card hover
   transforms already owned by the existing page styles.
   ------------------------------------------------------------------ */

body.hm-vault-surface > main,
body.hm-vault-surface > .site-footer {
    opacity: 1;
    filter: none;
    translate: 0 0;
    scale: 1;
    transition:
        opacity 350ms ease,
        filter 350ms ease,
        translate 350ms cubic-bezier(.2, .72, .2, 1),
        scale 350ms cubic-bezier(.2, .72, .2, 1);
}

body.hm-vault-entering > main {
    opacity: 0;
    filter: blur(5px);
    translate: 0 8px;
    scale: .997;
}

body.hm-vault-entering > .site-footer {
    opacity: 0;
}

body.hm-vault-leaving > main,
body.hm-vault-leaving > .site-footer {
    opacity: 0;
    filter: blur(3px);
    translate: 0 -4px;
    scale: .999;
    transition-duration: 190ms;
}

.hm-vault-crossing {
    position: fixed;
    z-index: 220;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: rgba(6, 5, 9, .06);
}

.hm-vault-crossing::before,
.hm-vault-crossing::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hm-vault-crossing::before {
    inset: -18% -40%;
    background: linear-gradient(
        112deg,
        transparent 31%,
        rgba(var(--hm-vault-secondary-rgb), .02) 40%,
        rgba(var(--hm-vault-accent-rgb), .12) 48%,
        rgba(var(--hm-vault-gold-rgb), .105) 52%,
        rgba(var(--hm-vault-accent-rgb), .07) 57%,
        transparent 68%
    );
    filter: blur(22px);
    translate: -38% 0;
    transform: skewX(-8deg);
}

.hm-vault-crossing::after {
    inset: -12%;
    background:
        radial-gradient(
            ellipse 42% 25% at 69% 28%,
            rgba(var(--hm-vault-accent-rgb), .115),
            transparent 72%
        ),
        radial-gradient(
            ellipse 32% 24% at 31% 67%,
            rgba(var(--hm-vault-secondary-rgb), .065),
            transparent 75%
        );
    filter: blur(28px);
    scale: .97;
}

body.hm-vault-entering .hm-vault-crossing {
    animation: hmVaultCrossingVeil 690ms ease-out both;
}

body.hm-vault-entering .hm-vault-crossing::before {
    animation: hmVaultPrimumSweep 720ms cubic-bezier(.18, .72, .22, 1) both;
}

body.hm-vault-entering .hm-vault-crossing::after {
    animation: hmVaultAuroraSettle 700ms ease-out both;
}

body.hm-vault-leaving .hm-vault-crossing {
    animation: hmVaultDepartureVeil 190ms ease-out both;
}

body.hm-vault-leaving .hm-vault-crossing::before {
    animation: hmVaultDepartureSweep 210ms ease-out both;
}

/* Major panels and cards wake in a short, bounded stagger. */
.hm-vault-reveal {
    opacity: 0;
    translate: 0 7px;
    transition:
        opacity 340ms ease var(--hm-vault-reveal-delay, 0ms),
        translate 390ms cubic-bezier(.18, .72, .22, 1)
            var(--hm-vault-reveal-delay, 0ms);
}

body.hm-vault-ready .hm-vault-reveal {
    opacity: 1;
    translate: 0 0;
}

/* ------------------------------------------------------------------
   Living card aura. A real child layer is used so page-specific
   ::before/::after engravings remain completely intact.
   ------------------------------------------------------------------ */

.hm-vault-aura-host {
    --hm-local-accent-rgb: var(--hm-vault-accent-rgb);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.curated-wares-page .wares-card.hm-vault-aura-host {
    --hm-local-accent-rgb: var(--ware-accent-rgb);
}

.hm-vault-aura-host > *:not(.hm-vault-aura) {
    position: relative;
    z-index: 2;
}

.curated-wares-page .wares-card.hm-vault-aura-host > .wares-card__engraving,
.customer-dashboard-page .hb-customer-chamber.hm-vault-aura-host
    > .customer-chamber-motif {
    z-index: 0;
}

.hm-vault-aura {
    position: absolute;
    z-index: 1;
    inset: -28%;
    overflow: hidden;
    pointer-events: none;
    opacity: .34;
    filter: blur(15px) saturate(1.02);
    transform-origin: center;
    transition:
        opacity 320ms ease,
        filter 360ms ease,
        scale 440ms cubic-bezier(.2, .72, .2, 1);
}

/* Wins over older page rules that position every direct card child. */
body.hm-vault-surface .hm-vault-aura-host > span.hm-vault-aura {
    position: absolute;
    z-index: 1;
}

.hm-vault-aura::before,
.hm-vault-aura::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hm-vault-aura::before {
    width: 72%;
    height: 66%;
    top: 5%;
    right: -3%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--hm-local-accent-rgb), .25),
            rgba(var(--hm-local-accent-rgb), .085) 42%,
            transparent 72%
        );
    opacity: .45;
    transform: rotate(-8deg);
}

.hm-vault-aura::after {
    width: 58%;
    height: 54%;
    left: 2%;
    bottom: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--hm-vault-gold-rgb), .12),
            rgba(var(--hm-vault-secondary-rgb), .075) 43%,
            transparent 74%
        );
    opacity: .34;
    transform: rotate(11deg);
}

.hm-vault-aura-host.hm-vault-aura-visible .hm-vault-aura::before {
    animation: hmVaultAuraBreath
        var(--hm-aura-duration, 9400ms)
        ease-in-out
        var(--hm-aura-delay, 0ms)
        infinite;
}

.hm-vault-aura-host.hm-vault-aura-visible .hm-vault-aura::after {
    animation: hmVaultAuraDrift
        var(--hm-aura-drift-duration, 11000ms)
        ease-in-out
        var(--hm-aura-delay, 0ms)
        infinite;
}

.hm-vault-aura-host:is(:hover, :focus-within) .hm-vault-aura {
    opacity: .68;
    filter: blur(17px) saturate(1.08);
    scale: 1.025;
}

.hm-vault-aura-host:is(:hover, :focus-within) .hm-vault-aura::before {
    opacity: .72;
}

/* Product imagery and sigils receive a restrained reflected halo. */
.curated-wares-page .wares-card__media,
.ware-record-page .ware-record-image,
.customer-realm-page .personal-crystal-vault-product__image,
.customer-realm-page .personal-crystal-vault-reliquary__sigil {
    box-shadow:
        inset 0 0 34px rgba(var(--hm-vault-accent-rgb), .035),
        0 0 25px rgba(var(--hm-vault-accent-rgb), .035);
    transition: box-shadow 360ms ease, border-color 300ms ease;
}

.curated-wares-page .wares-card:is(:hover, :focus-within) .wares-card__media,
.ware-record-page .ware-record-image:is(:hover, :focus-within),
.customer-realm-page .personal-crystal-vault-product__image:is(:hover, :focus-within),
.customer-realm-page .personal-crystal-vault-reliquary:is(:hover, :focus-within)
    .personal-crystal-vault-reliquary__sigil {
    box-shadow:
        inset 0 0 42px rgba(var(--hm-vault-accent-rgb), .075),
        0 0 31px rgba(var(--hm-vault-accent-rgb), .09),
        0 0 13px rgba(var(--hm-vault-gold-rgb), .035);
}

/* Active destinations stay illuminated; arrival gives one gold pulse. */
body.hm-vault-surface .site-nav :is(
    .site-nav__link.is-active,
    .site-nav__utility.is-active,
    [aria-current="page"]
) {
    border-color: rgba(var(--hm-vault-gold-rgb), .30);
    box-shadow:
        inset 0 0 0 1px rgba(var(--hm-vault-accent-rgb), .06),
        0 0 18px rgba(var(--hm-vault-accent-rgb), .065);
    text-shadow: 0 0 12px rgba(var(--hm-vault-gold-rgb), .09);
}

body.hm-vault-ready .site-nav :is(
    .site-nav__link.is-active,
    .site-nav__utility.is-active,
    [aria-current="page"]
) {
    animation: hmVaultMarkerArrival 920ms ease-out 1 both;
}

.hm-vault-selected {
    animation: hmVaultMarkerDeparture 190ms ease-out 1 both !important;
}

@keyframes hmVaultCrossingVeil {
    0% { opacity: .08; }
    28% { opacity: .62; }
    100% { opacity: 0; }
}

@keyframes hmVaultPrimumSweep {
    0% { translate: -38% 0; opacity: 0; }
    24% { opacity: .86; }
    100% { translate: 38% 0; opacity: 0; }
}

@keyframes hmVaultAuroraSettle {
    0% { opacity: .72; scale: .96; }
    100% { opacity: 0; scale: 1.02; }
}

@keyframes hmVaultDepartureVeil {
    0% { opacity: 0; }
    100% { opacity: .48; }
}

@keyframes hmVaultDepartureSweep {
    0% { translate: -28% 0; opacity: 0; }
    100% { translate: 2% 0; opacity: .72; }
}

@keyframes hmVaultAuraBreath {
    0%, 100% { opacity: .30; transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); }
    37% { opacity: .52; transform: translate3d(-2%, 3%, 0) rotate(-4deg) scale(1.035); }
    69% { opacity: .38; transform: translate3d(2%, -1%, 0) rotate(-11deg) scale(.99); }
}

@keyframes hmVaultAuraDrift {
    0%, 100% { opacity: .24; transform: translate3d(0, 1%, 0) rotate(11deg) scale(.97); }
    46% { opacity: .43; transform: translate3d(4%, -3%, 0) rotate(7deg) scale(1.04); }
    78% { opacity: .31; transform: translate3d(-2%, 2%, 0) rotate(13deg) scale(1); }
}

@keyframes hmVaultMarkerArrival {
    0% {
        box-shadow:
            inset 0 0 0 1px rgba(var(--hm-vault-gold-rgb), .05),
            0 0 0 rgba(var(--hm-vault-gold-rgb), 0);
    }
    42% {
        box-shadow:
            inset 0 0 0 1px rgba(var(--hm-vault-gold-rgb), .24),
            0 0 24px rgba(var(--hm-vault-gold-rgb), .18),
            0 0 38px rgba(var(--hm-vault-accent-rgb), .09);
    }
    100% {
        box-shadow:
            inset 0 0 0 1px rgba(var(--hm-vault-accent-rgb), .06),
            0 0 18px rgba(var(--hm-vault-accent-rgb), .065);
    }
}

@keyframes hmVaultMarkerDeparture {
    0% { filter: brightness(1); }
    60% {
        filter: brightness(1.16);
        box-shadow: 0 0 26px rgba(var(--hm-vault-gold-rgb), .20);
    }
    100% { filter: brightness(1.04); }
}

@media (max-width: 700px) {
    .hm-vault-atmosphere {
        opacity: .64;
    }

    .hm-vault-aura {
        inset: -20%;
        filter: blur(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hm-vault-surface > main,
    body.hm-vault-surface > .site-footer,
    .hm-vault-reveal,
    .hm-vault-aura,
    .hm-vault-aura::before,
    .hm-vault-aura::after,
    body.hm-vault-surface .site-nav :is(
        .site-nav__link.is-active,
        .site-nav__utility.is-active,
        [aria-current="page"]
    ),
    .hm-vault-selected {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
    }

    body.hm-vault-entering > main,
    body.hm-vault-entering > .site-footer,
    body.hm-vault-leaving > main,
    body.hm-vault-leaving > .site-footer,
    .hm-vault-reveal {
        opacity: 1 !important;
    }

    .hm-vault-crossing {
        display: none !important;
    }

    .hm-vault-aura {
        opacity: .18;
        filter: blur(14px);
    }

    .hm-vault-aura::before,
    .hm-vault-aura::after {
        opacity: .25;
    }
}