/* ==========================================================================
   PRELOADER & BRAND GATEWAY STYLES
   ========================================================================== */

#app-root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    flex: 1;
}

#app-preloader {
    position: fixed; inset: 0; background: #0f172a; color: #ffffff; z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; transition: opacity 0.3s ease;
}
.loader-spinner {
    width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #38bdf8; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px;
}
.loader-bar-bg { width: 240px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.loader-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: width 0.15s ease; }
.loader-text { font-size: 13px; color: #94a3b8; max-width: 280px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes spin { to { transform: rotate(360deg); } }

/* BRAND GATEWAY STYLES */
#vocab-brand-gateway {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311042 100%);
    z-index: 9999999; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transform: translateZ(0);
}
.brand-gate-card {
    width: 320px; max-width: 90vw; box-sizing: border-box;
    text-align: center; cursor: pointer; padding: 20px 10px;
    display: flex; flex-direction: column; align-items: center;
    outline: none; border: none; -webkit-tap-highlight-color: transparent;
    will-change: transform; transform: translateZ(0);
}
.brand-logo-text {
    font-size: 42px; font-weight: 900; line-height: 1.1; margin: 0;
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -1px; text-shadow: 0 10px 30px rgba(129, 140, 248, 0.3);
    white-space: nowrap;
    will-change: transform; transform: translateZ(0);
}
.brand-tagline {
    color: rgba(226, 232, 240, 0.85); font-size: 13px; font-weight: 500; margin-top: 8px;
    height: 20px; line-height: 20px; width: 100%; box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform; transform: translateZ(0);
}
.brand-progress-bar {
    width: 140px; height: 3px; background: rgba(255,255,255,0.12);
    border-radius: 10px; margin-top: 28px; overflow: hidden; position: relative;
}
.brand-progress-fill {
    width: 0%; height: 100%; background: linear-gradient(90deg, #38bdf8, #c084fc);
    animation: gateProgress 3s linear forwards;
}
@keyframes gateProgress { from { width: 0%; } to { width: 100%; } }

.minimal-text-notice {
    position: fixed; bottom: 42px; left: 50%;
    transform: translateX(-50%) translateY(8px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11.5px; font-weight: 500; text-align: center;
    letter-spacing: 0.2px; opacity: 0;
    transition: all 0.35s ease; z-index: 10000000;
    pointer-events: none; white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.minimal-text-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }