/* =========================================
   LOONEE MASCOT — All logo/mascot placements.
   Two variants:
     loonee-mascot-excited.png → hero, success state
     loonee-mascot-waving.png  → nav, footer, synergy, waitlist
   ========================================= */

/* ── Shared logo wrapper ─────────────────────────────────────────── */

.logo {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    text-decoration: none;
}

.logo-mascot {
    height: 52px;
    width: auto;
    flex-shrink: 0;
    margin-right: -10px; /* slides mascot under the wordmark "l" */
    position: relative;
    z-index: 0;
    animation: logoFloat 3.5s ease-in-out infinite;
    pointer-events: none;
    display: block;
}

.logo-wordmark {
    position: relative;
    z-index: 1; /* text appears in front of mascot */
}

.logo-dot {
    color: var(--clr-primary);
}

/* ── Footer: smaller mascot ──────────────────────────────────────── */

.footer-brand .logo-mascot {
    height: 38px;
    margin-right: -8px;
}

/* ── Legal pages: same as main nav ──────────────────────────────── */

.legal-nav .logo-mascot {
    height: 44px;
}

/* ── Hero mascot — ambient character ─────────────────────────────── */

.hero-mascot {
    position: absolute;
    bottom: -30px;
    right: -10px;
    height: clamp(90px, 12vw, 140px);
    width: auto;
    z-index: 0;
    opacity: 0.92;
    animation: logoFloat 4s ease-in-out infinite 0.6s;
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero-mascot {
        display: none;
    }
}

/* ── Synergy mascot — beside Legendary chip ──────────────────────── */

.synergy-mascot {
    height: clamp(60px, 8vw, 96px);
    width: auto;
    align-self: center;
    flex-shrink: 0;
    animation: logoFloat 3.8s ease-in-out infinite 0.3s;
    pointer-events: none;
    margin-left: 0.25rem;
    scroll-snap-align: center;
}

/* ── Waitlist mascot — peeking from card corner ──────────────────── */

.waitlist-mascot {
    position: absolute;
    top: -55px;
    right: -20px;
    height: clamp(70px, 9vw, 110px);
    width: auto;
    animation: logoFloat 3.8s ease-in-out infinite 0.8s;
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 600px) {
    .waitlist-mascot {
        display: none;
    }
}

/* ── Success mascot — bounce-in on form submit ────────────────────── */

.success-mascot {
    height: 88px;
    width: auto;
    display: block;
    margin: 0 auto 0.75rem;
    animation: successBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}