/* Shared PX brand cube — website, admin, user dashboard */

.psx-brand-cluster {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.35vw, 5px);
}

.psx-cube-scene {
    --psx-cube-size: clamp(26px, 3vw, 34px);
    --psx-cube-depth: calc(var(--psx-cube-size) * 0.38);
    width: var(--psx-cube-size);
    height: var(--psx-cube-size);
    perspective: 380px;
    perspective-origin: 50% 50%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin-left: -2px;
}

.psx-cube-scene::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 65%;
    height: 5px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.18) 0%, rgba(220, 38, 38, 0.06) 45%, transparent 72%);
    filter: blur(2px);
    pointer-events: none;
    animation: psx-cube-shadow 6s ease-in-out infinite;
}

.psx-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: psx-cube-tumble 9s linear infinite;
}

.psx-cube__face {
    position: absolute;
    inset: 0;
    background: url('../../images/paystubx_animation.png?v=2') center / contain no-repeat;
    backface-visibility: hidden;
    border-radius: 3px;
}

/* Logged-in shell: white PX mark (blends on theme rails); marketing keeps red mark */
.psx-cube-scene--shell .psx-cube__face {
    background-image: url('../../images/paystubx_user_admin_logo.png?v=1');
}

.psx-cube-scene--shell::after {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 72%);
}

.psx-cube__face--front  { transform: rotateY(0deg) translateZ(var(--psx-cube-depth)); }
.psx-cube__face--back   { transform: rotateY(180deg) translateZ(var(--psx-cube-depth)); }
.psx-cube__face--right  { transform: rotateY(90deg) translateZ(var(--psx-cube-depth)); filter: brightness(0.9); }
.psx-cube__face--left   { transform: rotateY(-90deg) translateZ(var(--psx-cube-depth)); filter: brightness(0.86); }
.psx-cube__face--top    { transform: rotateX(90deg) translateZ(var(--psx-cube-depth)); filter: brightness(1.05); }
.psx-cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--psx-cube-depth)); filter: brightness(0.8); }

@keyframes psx-cube-tumble {
    0%   { transform: rotateX(-8deg) rotateY(0deg); }
    25%  { transform: rotateX(4deg) rotateY(90deg); }
    50%  { transform: rotateX(-6deg) rotateY(180deg); }
    75%  { transform: rotateX(5deg) rotateY(270deg); }
    100% { transform: rotateX(-8deg) rotateY(360deg); }
}

@keyframes psx-cube-shadow {
    0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.9); }
    50%      { opacity: 0.7; transform: translateX(-50%) scale(1); }
}

.psx-brand-cluster:hover .psx-cube,
.site-header__brand:hover .psx-cube,
.psx-dash-topbar__brand-cluster:hover .psx-cube {
    animation-duration: 5.5s;
}

@media (max-width: 767.98px) {
    .psx-cube-scene {
        --psx-cube-size: clamp(22px, 6vw, 28px);
        margin-left: -1px;
    }
}

.psx-dash-topbar__brand-cluster {
    flex-shrink: 0;
    margin-right: 4px;
}

.psx-dash-topbar__brand-cluster .psx-dash-topbar__brand {
    margin-right: 0;
}

/* Admin header cluster */
.header .psx-brand-cluster .logo {
    margin-right: 0;
}

.header .psx-brand-cluster .toggle-sidebar-btn {
    margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .psx-cube {
        animation: none;
        transform: rotateX(-6deg) rotateY(-18deg);
    }

    .psx-cube-scene::after {
        animation: none;
        opacity: 0.35;
    }
}