.cyberreflex-brand {
    --brand-logo-width: 42px;
    --brand-logo-color: var(--dashboard-text, var(--text, #f2f2ef));
    --brand-diamond-color: var(--dashboard-accent, var(--accent, #31d6a2));
    --brand-diamond-height: 7px;
    --brand-look-offset: 4px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.cyberreflex-logo-mark {
    position: relative;
    display: inline-block;
    width: var(--brand-logo-width);
    height: calc(var(--brand-logo-width) / 1.6167);
    flex: 0 0 auto;
    color: inherit;
}

.cyberreflex-logo-frame,
.cyberreflex-logo-diamond {
    position: absolute;
    display: block;
    background-color: var(--brand-logo-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cyberreflex-logo-frame {
    inset: 0;
    -webkit-mask-image: url("assets/brand/cyberreflex-frame-v2.png");
    mask-image: url("assets/brand/cyberreflex-frame-v2.png");
}

.cyberreflex-logo-look {
    position: absolute;
    inset: 0;
    animation: cyberreflex-brand-look 1.8s ease-in-out infinite alternate;
}

.cyberreflex-logo-diamond {
    top: 50%;
    left: 50%;
    width: calc(var(--brand-diamond-height) * 0.8354);
    height: var(--brand-diamond-height);
    background-color: var(--brand-diamond-color);
    -webkit-mask-image: url("assets/brand/cyberreflex-diamond.svg");
    mask-image: url("assets/brand/cyberreflex-diamond.svg");
    transform: translate(-50%, -50%);
}

@keyframes cyberreflex-brand-look {
    from { transform: translateX(calc(-1 * var(--brand-look-offset))); }
    to { transform: translateX(var(--brand-look-offset)); }
}

@media (prefers-reduced-motion: reduce) {
    .cyberreflex-logo-look {
        animation: none;
        transform: translateX(0);
    }
}