/* Compact inventaryo cube for sign-in / sign-out session overlays.
   Same lockup as the login hero: blue top, blue/i front, green/check right. */

.ims-session-cube {
    --cube-size: 5rem;
    --cube-half: calc(var(--cube-size) / 2);
    --cube-radius: calc(var(--cube-size) * 0.11);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.25rem;
    height: 8.25rem;
    perspective: 900px;
    perspective-origin: 50% 50%;
}

.ims-session-cube__glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 40%, rgb(65 161 225 / 0.38) 0%, transparent 58%),
        radial-gradient(circle at 58% 66%, rgb(90 143 60 / 0.18) 0%, transparent 52%);
    filter: blur(18px);
    animation: ims-session-cube-glow 5s ease-in-out infinite;
    pointer-events: none;
}

.ims-session-cube__rig {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: ims-session-cube-float 4.6s ease-in-out infinite;
}

.ims-session-cube__spin {
    transform-style: preserve-3d;
    animation: ims-session-cube-rotate 10.5s linear infinite;
    will-change: transform;
}

.ims-session-cube__body {
    position: relative;
    width: var(--cube-size);
    height: var(--cube-size);
    transform-style: preserve-3d;
}

.ims-session-cube__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 2px solid #fff;
    border-radius: var(--cube-radius);
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.16),
        0 0 0 1px rgb(255 255 255 / 0.28);
    overflow: hidden;
}

.ims-session-cube__face--top {
    transform: rotateX(90deg) translateZ(var(--cube-half));
    background: linear-gradient(145deg, #52b0f2 0%, #41a1e1 48%, #3b94d9 100%);
    box-shadow: inset 0 0 16px rgb(255 255 255 / 0.14);
}

.ims-session-cube__face--front {
    transform: rotateY(0deg) translateZ(var(--cube-half));
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--cube-size) * 0.03);
    background: linear-gradient(168deg, #3388dc 0%, #2560a5 54%, #1e4f8f 100%);
}

.ims-session-cube__face--right {
    transform: rotateY(90deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #7ec055 0%, #72b344 50%, #5a8f3c 100%);
}

.ims-session-cube__face--left {
    transform: rotateY(-90deg) translateZ(var(--cube-half));
    background: linear-gradient(195deg, #84c85e 0%, #72b344 46%, #5a8f3c 100%);
    box-shadow: inset 0 0 14px rgb(255 255 255 / 0.1);
}

.ims-session-cube__face--back {
    transform: rotateY(180deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #1e4f8f 0%, #1e3a8a 100%);
}

.ims-session-cube__face--bottom {
    transform: rotateX(-90deg) translateZ(var(--cube-half));
    background: linear-gradient(165deg, #1e40af 0%, #172554 100%);
}

.ims-session-cube__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--cube-size) * 0.028);
}

.ims-session-cube__i-dot {
    width: calc(var(--cube-size) * 0.135);
    height: calc(var(--cube-size) * 0.135);
    border-radius: 50%;
    background: #fff;
}

.ims-session-cube__i-stem {
    width: calc(var(--cube-size) * 0.122);
    height: calc(var(--cube-size) * 0.56);
    border-radius: calc(var(--cube-size) * 0.061) calc(var(--cube-size) * 0.061) 0 0;
    background: #fff;
}

.ims-session-cube__check {
    width: calc(var(--cube-size) * 0.66);
    height: calc(var(--cube-size) * 0.66);
    color: #fff;
    filter: drop-shadow(0 1px 2px rgb(15 23 42 / 0.1));
}

/* Same lockup as the login hero: invent + aryo on faces without i / check. */
.ims-session-cube .auth-brand-cube__word {
    display: block;
    max-width: 92%;
    font-family: "Outfit", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: calc(var(--cube-size) * 0.118);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-align: center;
    text-transform: lowercase;
    word-break: break-word;
}

.ims-session-cube .auth-brand-cube__word-invent {
    color: rgb(255 255 255 / 0.98);
}

.ims-session-cube .auth-brand-cube__word-aryo {
    color: #bfdbfe;
}

.ims-session-cube__face--top .auth-brand-cube__word {
    font-size: calc(var(--cube-size) * 0.108);
    letter-spacing: -0.04em;
}

.ims-session-cube__face--top .auth-brand-cube__word-invent {
    color: #1c1917;
}

.ims-session-cube__face--top .auth-brand-cube__word-aryo {
    color: #2563eb;
}

.ims-session-cube__face--left .auth-brand-cube__word-invent {
    color: rgb(255 255 255 / 0.98);
}

.ims-session-cube__face--left .auth-brand-cube__word-aryo {
    color: #ecfccb;
}

.ims-session-cube__face--bottom .auth-brand-cube__word {
    font-size: calc(var(--cube-size) * 0.102);
    opacity: 0.92;
}

.ims-session-cube__shadow {
    position: absolute;
    top: calc(var(--cube-size) * 1.04);
    left: 50%;
    width: calc(var(--cube-size) * 0.86);
    height: calc(var(--cube-size) * 0.14);
    margin-left: calc(var(--cube-size) * -0.43);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(65 161 225 / 0.34) 0%, rgb(15 23 42 / 0.07) 55%, transparent 72%);
    filter: blur(3px);
    animation: ims-session-cube-shadow 4.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ims-session-cube-rotate {
    0% {
        transform: rotateX(-28deg) rotateY(-36deg);
    }
    25% {
        transform: rotateX(-28deg) rotateY(324deg);
    }
    50% {
        transform: rotateX(332deg) rotateY(324deg);
    }
    75% {
        transform: rotateX(332deg) rotateY(-36deg);
    }
    100% {
        transform: rotateX(-28deg) rotateY(-36deg);
    }
}

/* Live fill: letters stay clear until the wash reaches them. */
.ims-session-fill {
    --ims-fill-w: min(22.5rem, calc(100vw - 2.75rem));
    --ims-fill-ease: cubic-bezier(0.42, 0.02, 0.18, 1);
    --ims-fill-ms: 2.65s;
    width: var(--ims-fill-w);
    margin-top: 1.25rem;
}

.ims-session-fill__track {
    position: relative;
    height: 2.2rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(15 23 42 / 0.07);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.06);
}

.ims-session-fill__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #1e4f8f 0%, #2560a5 28%, #41a1e1 62%, #72b344 100%);
    animation: ims-session-fill-grow var(--ims-fill-ms) var(--ims-fill-ease) forwards;
}

.ims-session-fill__hint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ims-fill-w);
    padding: 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.ims-session-fill__hint--ghost {
    color: transparent;
}

.ims-session-fill__hint--live {
    right: auto;
    color: #fff;
    text-shadow: 0 1px 1px rgb(15 23 42 / 0.18);
}

.ims-session-fill__reveal {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    animation: ims-session-fill-grow var(--ims-fill-ms) var(--ims-fill-ease) forwards;
}

@keyframes ims-session-fill-grow {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes ims-session-cube-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -6px, 0);
    }
}

@keyframes ims-session-cube-glow {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.94);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes ims-session-cube-shadow {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.28;
        transform: scale(0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ims-session-cube__glow,
    .ims-session-cube__rig,
    .ims-session-cube__spin,
    .ims-session-cube__shadow,
    .ims-session-fill__bar,
    .ims-session-fill__reveal {
        animation: none !important;
    }

    .ims-session-cube__glow {
        opacity: 0.75;
        transform: none;
    }

    .ims-session-cube__spin {
        transform: rotateX(-28deg) rotateY(-36deg);
    }

    .ims-session-cube__shadow {
        opacity: 0.4;
        transform: none;
    }

    .ims-session-fill__bar,
    .ims-session-fill__reveal {
        width: 100%;
    }
}