/* ============================================================
   Welcome Mascot - State-Specific Style Overrides
   Guest, Returning, Logged-In visual differences
   ============================================================ */

/* ─── Guest Mode (Default / First-time visitor) ─── */
/* Full expressive layout - uses base styles as-is */
.mascot-container[data-user-state="guest"] {
    /* Expressive: full animations, full octagon */
}

.mascot-container[data-user-state="guest"] .mascot-center {
    /* Lively idle animation */
    animation: mascot-float 4s ease-in-out infinite;
}

.mascot-container[data-user-state="guest"] .speech-bubble {
    /* Slightly larger for onboarding messages */
    max-width: 350px;
    font-size: 15px;
}

/* ─── Returning Visitor Mode ─── */
/* Calmer animations, de-emphasized layout, "welcome back" tone */
.mascot-container[data-user-state="returning"] {
    /* Subtly reduced overall presence */
}

.mascot-container[data-user-state="returning"] .mascot-center {
    /* Calmer idle - breathing only, no floating */
    animation: mascot-breathe 4s ease-in-out infinite;
}

@keyframes mascot-breathe-returning {
    0%, 100% { transform: translate(-50%, -50%) scaleY(1); }
    50% { transform: translate(-50%, -50%) scaleY(1.01); }
}

.mascot-container[data-user-state="returning"] .octagon-button {
    /* Slightly more muted entrance */
    animation-duration: 0.3s;
}

.mascot-container[data-user-state="returning"] .speech-bubble {
    max-width: 300px;
}

/* ─── Logged-In Mode ─── */
/* Minimal mascot, personalized, assistant role */
.mascot-container[data-user-state="logged_in"] {
    /* Compact layout */
}

.mascot-container[data-user-state="logged_in"] .mascot-center {
    /* Very subtle idle - almost still */
    animation: none;
}

.mascot-container[data-user-state="logged_in"] .speech-bubble {
    max-width: 280px;
    font-size: 14px;
}

/* Logged-in users see shortcuts prominently */
.mascot-container[data-user-state="logged_in"] .octagon-button.shortcut {
    border-color: #50c878;
    background: #f0fff5;
}

.mascot-container[data-user-state="logged_in"] .octagon-button.shortcut:hover {
    background: #50c878;
    color: white;
}

/* ─── Logged-In Landing Page Extras ─── */
.mascot-logged-in-panel {
    display: none;
}

.mascot-container[data-user-state="logged_in"] .mascot-logged-in-panel {
    display: block;
    margin-top: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    text-align: center;
    font-family: var(--mascot-font, 'Poppins', sans-serif);
}

.mascot-logged-in-panel .continue-link {
    display: inline-block;
    padding: 10px 24px;
    background: var(--mascot-primary, #4a90d9);
    color: white;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-top: 10px;
    transition: all 0.2s ease;
}

.mascot-logged-in-panel .continue-link:hover {
    background: #3a7bc8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3);
}

/* ─── Corner Mascot State Variants ─── */
/* Guest: corner not visible (they stay on homepage) */
.mascot-corner-launcher[data-user-state="guest"] {
    display: none;
}

/* Returning: standard corner */
.mascot-corner-launcher[data-user-state="returning"] .launcher-icon {
    background: #ffffff;
}

/* Logged-in: slightly highlighted corner */
.mascot-corner-launcher[data-user-state="logged_in"] .launcher-icon {
    background: #f0f7ff;
    border: 2px solid rgba(74, 144, 217, 0.2);
}

/* ─── Modal State Variants ─── */
.mascot-modal[data-user-state="guest"] .modal-greeting h3::after {
    content: ' 👋';
}

.mascot-modal[data-user-state="returning"] .modal-greeting h3::after {
    content: ' 🎉';
}

.mascot-modal[data-user-state="logged_in"] .modal-nav-grid {
    /* Personalized shortcuts first for logged-in */
}

.mascot-modal[data-user-state="logged_in"] .continue-section {
    display: block;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f0f7ff;
    border-radius: 10px;
    border-left: 3px solid var(--mascot-primary, #4a90d9);
}

.mascot-modal[data-user-state="guest"] .continue-section,
.mascot-modal[data-user-state="returning"] .continue-section {
    display: none;
}

/* ─── Transition Between States ─── */
.mascot-container.state-transitioning {
    transition: all 0.5s ease;
}

.mascot-container.state-transitioning .mascot-center {
    animation: mascot-state-change 0.6s ease;
}

@keyframes mascot-state-change {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}