/* ============================================
   VOIDBORNE LEGACY - TITLE SCREEN STYLES
   Arcane Ink Productions
   ============================================ */

/* Title Screen */
.title-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.title-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center top, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at center bottom, rgba(109, 40, 217, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.title-logo {
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
}

.title-logo span {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.title-main {
    font-size: clamp(2.5rem, 8vw, 5rem);
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.5s forwards;
}

.title-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.7s forwards;
}

.title-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.9s forwards;
}

.title-menu .btn {
    min-width: 250px;
    padding: 1rem 2rem;
    font-size: 1rem;
}

.title-footer {
    position: absolute;
    bottom: 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Arcane Symbol */
.arcane-symbol {
    width: 80px;
    height: 80px;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeIn 1s ease 0.2s forwards, rotateSlow 20s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.arcane-symbol svg {
    width: 100%;
    height: 100%;
}

/* Game UI Preview */
.game-preview {
    display: none;
}

.game-preview.active {
    display: block;
}