/* ═══════════════════════════════════════════════════════════════
   Selfa Wordmark v4 — SVG brain visible + wordmark center pulse
   
   اصول:
   - SVG مغز visible — نود‌هاش از style.css با neuronFlash می‌درخشن
   - wordmark "Selfa" در مرکز روی هسته
   - فقط wordmark با lub-dub می‌تپه (نه کل کادر)
   - !important جهت override قوانین style.css و selfa-logo.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ۱. wordmark stand-alone (متن جداگانه)
   ═══════════════════════════════════════════════════════════════ */

.selfa-wordmark {
    display: inline-block;
    background-image: url('/selfa-wordmark-transparent.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
}

.logo-text {
    align-items: flex-start;
}

.logo-text .selfa-wordmark {
    width: 95px;
    height: 32px;
    margin-bottom: 2px;
}

@media (max-width: 600px) {
    .logo-text .selfa-wordmark {
        width: 80px;
        height: 27px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ۲. Header: مغز کوچک با wordmark در مرکز (مثل بقیه صفحات)
   ═══════════════════════════════════════════════════════════════ */

/* اطمینان از اینکه svg در header کاملاً visible باشه (override selfa-logo.css) */
.header .logo .logo-mark > svg.logo-brain {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   ۳. مغز + wordmark در مرکز (همه جا غیر از header)
   ═══════════════════════════════════════════════════════════════ */

.brain-with-wordmark {
    position: relative !important;
    display: inline-block !important;  /* override display:flex از .login-logo */
    animation: none !important;  /* خاموش کردن loginPulse از .login-logo */
}

/* override کامل برای .login-logo که display:flex و animation داره */
.login-logo.brain-with-wordmark {
    display: inline-block !important;
    justify-content: initial !important;
    animation: none !important;
}

/* SVG مغز visible و پر — نود‌ها از style.css می‌درخشن */
.brain-with-wordmark > svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    z-index: 1;
    /* مهم: width/height خود svg تگ از HTML ممکنه ۱۲۰px باشه — override می‌کنیم */
}

/* override خاص برای login — slot-selector.css با selector قوی‌تر 
   .login-modal-content .login-logo svg رو 60px نگه می‌داره */
.login-modal-content .login-logo.brain-with-wordmark > svg,
.login-modal-content .login-logo.brain-with-wordmark svg {
    width: 100% !important;
    height: 100% !important;
}

/* override برای slot-selector — slot-selector.css 
   .slot-selector-logo svg رو 70px نگه می‌داره */
.slot-selector-logo.brain-with-wordmark > svg,
.slot-selector-logo.brain-with-wordmark svg,
body .slot-selector-logo.brain-with-wordmark svg {
    width: 100% !important;
    height: 100% !important;
}

/* wordmark در مرکز روی هسته */
.brain-with-wordmark > .selfa-wordmark {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 45% !important;
    height: 15% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none;
    z-index: 3;
    animation: wordmark-heartbeat 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(244, 216, 147, 0.4));
    /* جلوگیری از rules قبلی که opacity/visibility رو خراب می‌کردن */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ─── تپش lub-dub فقط روی wordmark ─────────────────────── */
@keyframes wordmark-heartbeat {
    0% {
        opacity: 0.75 !important;
        filter: drop-shadow(0 0 3px rgba(244, 216, 147, 0.3));
    }
    /* lub */
    8% {
        opacity: 1 !important;
        filter: drop-shadow(0 0 10px rgba(244, 216, 147, 0.85))
                drop-shadow(0 0 18px rgba(201, 169, 97, 0.5));
    }
    15% {
        opacity: 0.85 !important;
        filter: drop-shadow(0 0 5px rgba(244, 216, 147, 0.45));
    }
    /* dub */
    22% {
        opacity: 0.95 !important;
        filter: drop-shadow(0 0 8px rgba(244, 216, 147, 0.75))
                drop-shadow(0 0 14px rgba(201, 169, 97, 0.4));
    }
    35% {
        opacity: 0.75 !important;
        filter: drop-shadow(0 0 3px rgba(244, 216, 147, 0.3));
    }
    100% {
        opacity: 0.75 !important;
        filter: drop-shadow(0 0 3px rgba(244, 216, 147, 0.3));
    }
}

/* ═══════════════════════════════════════════════════════════════
   ۴. اندازه‌ی container برای هر context (با !important)
   همه اندازه‌ها ۶۰٪ از قبلی شدن — برای جلوگیری از overflow کادرها
   ═══════════════════════════════════════════════════════════════ */

.lang-mark.brain-with-wordmark {
    width: 168px !important;
    height: 168px !important;
}

.gender-mark.brain-with-wordmark {
    width: 168px !important;
    height: 168px !important;
}

.genesis-mark.brain-with-wordmark {
    width: 192px !important;
    height: 192px !important;
}

.genesis-loading-brain.brain-with-wordmark {
    width: 168px !important;
    height: 168px !important;
    margin-bottom: var(--s5, 32px);
}

.login-logo.brain-with-wordmark {
    width: 120px !important;
    height: 120px !important;
}

.slot-selector-logo.brain-with-wordmark {
    width: 144px !important;
    height: 144px !important;
}

/* Header — مغز کوچک با wordmark وسطش */
.logo-mark.brain-with-wordmark {
    width: 54px !important;
    height: 54px !important;
    flex-shrink: 0;
}

/* اندازه‌ی wordmark در هر context */
.lang-mark.brain-with-wordmark > .selfa-wordmark,
.gender-mark.brain-with-wordmark > .selfa-wordmark,
.genesis-loading-brain.brain-with-wordmark > .selfa-wordmark {
    width: 50% !important;
    height: 16% !important;
}

.genesis-mark.brain-with-wordmark > .selfa-wordmark {
    width: 50% !important;
    height: 17% !important;
}

.login-logo.brain-with-wordmark > .selfa-wordmark {
    width: 52% !important;
    height: 18% !important;
}

.slot-selector-logo.brain-with-wordmark > .selfa-wordmark {
    width: 48% !important;
    height: 16% !important;
}

.logo-mark.brain-with-wordmark > .selfa-wordmark {
    width: 60% !important;
    height: 20% !important;
}

/* ═══════════════════════════════════════════════════════════════
   ۵. Responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .lang-mark.brain-with-wordmark,
    .gender-mark.brain-with-wordmark,
    .genesis-loading-brain.brain-with-wordmark {
        width: 132px !important;
        height: 132px !important;
    }
    .genesis-mark.brain-with-wordmark {
        width: 150px !important;
        height: 150px !important;
    }
    .login-logo.brain-with-wordmark {
        width: 96px !important;
        height: 96px !important;
    }
    .slot-selector-logo.brain-with-wordmark {
        width: 114px !important;
        height: 114px !important;
    }
    .logo-mark.brain-with-wordmark {
        width: 42px !important;
        height: 42px !important;
    }
}

@media (max-width: 380px) {
    .lang-mark.brain-with-wordmark,
    .gender-mark.brain-with-wordmark,
    .genesis-loading-brain.brain-with-wordmark {
        width: 108px !important;
        height: 108px !important;
    }
    .genesis-mark.brain-with-wordmark {
        width: 126px !important;
        height: 126px !important;
    }
    .login-logo.brain-with-wordmark {
        width: 84px !important;
        height: 84px !important;
    }
}