/* QRP animated logo — shared across app */
.qrp-logo {
    --qrp-logo-size: 80px;
    position: relative;
    width: calc(var(--qrp-logo-size) * 1.227);
    height: calc(var(--qrp-logo-size) * 1.227);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.2));
}

.qrp-logo--sm {
    --qrp-logo-size: 44px;
    filter: drop-shadow(0 3px 8px rgba(37, 99, 235, 0.16));
}

.qrp-logo--md {
    --qrp-logo-size: 80px;
}

.qrp-logo--lg {
    --qrp-logo-size: 88px;
}

.qrp-logo__img {
    position: relative;
    z-index: 3;
    width: var(--qrp-logo-size);
    height: var(--qrp-logo-size);
    object-fit: cover;
    border-radius: 50%;
    background: transparent;
    animation: qrpLogoFloat 3.6s ease-in-out infinite;
    mix-blend-mode: multiply;
    will-change: transform;
}

.qrp-logo__ring {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    z-index: 1;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(56, 189, 248, 0.5) 55deg,
        rgba(37, 99, 235, 0.35) 110deg,
        transparent 160deg,
        transparent 360deg
    );
    animation: qrpLogoShine 4.5s linear infinite;
    mask: radial-gradient(circle, transparent 62%, #000 63%, #000 100%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 100%);
    opacity: 0.85;
    pointer-events: none;
}

.qrp-logo__ripple {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.55);
    z-index: 0;
    animation: qrpLogoRipple 2.6s ease-out infinite;
    pointer-events: none;
}

.qrp-logo__ripple--2 {
    animation-delay: 1.3s;
}

.qrp-logo__drop {
    position: absolute;
    bottom: 6px;
    left: 52%;
    width: 7px;
    height: 9px;
    margin-left: -3px;
    z-index: 4;
    background: linear-gradient(180deg, #38bdf8 0%, #1d4ed8 100%);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    box-shadow: 0 2px 4px rgba(29, 78, 216, 0.35);
    animation: qrpLogoDrop 2.4s ease-in infinite;
    opacity: 0;
    pointer-events: none;
}

.qrp-logo--sm .qrp-logo__drop {
    width: 5px;
    height: 7px;
    bottom: 4px;
}

/* Host containers */
.preloader-logo .qrp-logo,
.logo-icon .qrp-logo,
.pwa-icon .qrp-logo,
.welcome-brand .qrp-logo,
.header-brand .qrp-logo {
    margin-bottom: 0;
}

/* Portal / compact headers — never expand to full PNG size */
.portal-header .header-brand .qrp-logo,
.portal-header .header-brand .qrp-logo__img {
    flex-shrink: 0;
}

.preloader-logo,
.logo-icon:has(.qrp-logo),
.pwa-icon:has(.qrp-logo) {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    animation: none !important;
    overflow: visible;
}

.pwa-icon:has(.qrp-logo) {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes qrpLogoFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.03);
    }
}

@keyframes qrpLogoShine {
    to {
        transform: rotate(360deg);
    }
}

@keyframes qrpLogoRipple {
    0% {
        transform: scale(0.88);
        opacity: 0.65;
    }
    100% {
        transform: scale(1.42);
        opacity: 0;
    }
}

@keyframes qrpLogoDrop {
    0%,
    18% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    28% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    72% {
        opacity: 0.55;
        transform: translateY(16px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(26px) scale(0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qrp-logo__img,
    .qrp-logo__ring,
    .qrp-logo__ripple,
    .qrp-logo__drop {
        animation: none;
    }

    .qrp-logo__drop {
        display: none;
    }
}