/* ===== Brand logo & floating marks ===== */
.logo-slot {
    text-align: center;
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0.35rem 0 0.65rem;
}
.brand-logo {
    display: block;
    width: clamp(130px, 36vw, 280px);
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 0 20px rgba(94, 184, 255, 0.14));
}
.logo-slot-hero {
    padding-top: 0.5rem;
    padding-bottom: 0.85rem;
}
.logo-slot-hero .brand-logo {
    width: clamp(176px, 52vw, 390px);
}
.logo-slot-compact .brand-logo {
    width: clamp(110px, 32vw, 230px);
}
.logo-slot-tv .brand-logo {
    width: clamp(180px, 22vw, 360px);
}
.logo-placeholder {
    display: inline-block;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.35rem 1rem;
    border: 1px dashed rgba(94, 184, 255, 0.25);
    border-radius: var(--radius-sm);
}
.join-page .brand-float-logo {
    filter: drop-shadow(0 0 16px rgba(94, 184, 255, 0.22)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}
.brand-float-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.brand-float-layer.is-paused .brand-float-logo {
    animation-play-state: paused;
    opacity: 0 !important;
}
.brand-float-logo {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    display: block;
    width: auto;
    height: auto;
    max-width: clamp(90px, 13vw, 170px);
    object-fit: contain;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--bf-scale, 0.85));
    will-change: transform, opacity;
    filter: drop-shadow(0 0 12px rgba(94, 184, 255, 0.16));
}
.brand-float-run {
    animation: brandFloatDrift linear forwards;
}
@keyframes brandFloatDrift {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--bf-rot-start, 0deg)) scale(var(--bf-scale, 0.85));
    }
    8% {
        opacity: var(--brand-float-opacity, 0.18);
    }
    92% {
        opacity: var(--brand-float-opacity, 0.18);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--bf-dx, 0), var(--bf-dy, -120px), 0) rotate(var(--bf-rot-end, 0deg)) scale(calc(var(--bf-scale, 0.85) * 0.94));
    }
}
@media (max-width: 640px) {
    .logo-slot-hero .brand-logo {
        width: clamp(176px, 52vw, 242px);
    }
    .logo-slot-compact .brand-logo {
        width: clamp(110px, 34vw, 160px);
    }
    .brand-float-logo {
        max-width: clamp(70px, 22vw, 120px);
    }
    .join-page .brand-float-logo {
        max-width: clamp(72px, 24vw, 118px);
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .logo-slot-hero .brand-logo {
        width: clamp(220px, 30vw, 310px);
    }
    .logo-slot-compact .brand-logo {
        width: clamp(140px, 22vw, 210px);
    }
}
@media (min-width: 1025px) {
    .logo-slot-hero .brand-logo {
        width: clamp(264px, 26vw, 390px);
    }
    .logo-slot-compact .brand-logo {
        width: clamp(160px, 16vw, 230px);
    }
}
@media (min-width: 2560px) {
    .logo-slot-tv .brand-logo {
        width: clamp(280px, 14vw, 420px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .brand-float-run {
        animation: none !important;
    }
    .brand-float-logo {
        display: none !important;
    }
}