/* 
   ARMORY X - Optimized Title Animation System
   High-performance, modern animations with reduced CPU load
*/

/* ===== MODERN PERFORMANCE-OPTIMIZED ANIMATIONS ===== */

/* Modern Background Pulse - GPU Accelerated */
@keyframes modernBackgroundPulse {
    0%, 100% { 
        opacity: 0.08; 
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    }
    50% { 
        opacity: 0.15; 
        transform: translate3d(-50%, -50%, 0) scale3d(1.02, 1.02, 1);
    }
}

/* Smooth Title Entrance Animation */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale3d(0.95, 0.95, 1);
        filter: blur(10px);
    }
    50% {
        opacity: 0.7;
        transform: translate3d(0, 15px, 0) scale3d(0.98, 0.98, 1);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        filter: blur(0px);
    }
}

/* Website-Matching Gradient Animation */
@keyframes modernGradient {
    0% { 
        background-position: 0% 50%;
        filter: brightness(1) saturate(1.2);
    }
    25% { 
        background-position: 25% 25%;
        filter: brightness(1.1) saturate(1.3);
    }
    50% { 
        background-position: 100% 50%;
        filter: brightness(1.2) saturate(1.4);
    }
    75% { 
        background-position: 75% 75%;
        filter: brightness(1.1) saturate(1.3);
    }
    100% { 
        background-position: 0% 50%;
        filter: brightness(1) saturate(1.2);
    }
}

/* Letter Reveal Animation - 3D Effect */
@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0) rotateX(90deg);
    }
    50% {
        opacity: 0.8;
        transform: translate3d(0, 10px, 0) rotateX(45deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0deg);
    }
}

/* Hover Glow Effect */
@keyframes hoverGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.6));
    }
}

/* ===== OPTIMIZED TITLE STYLES ===== */

/* Enhanced Title Container with 3D Perspective */
.title-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Optimized Background Text - Website Colors */
.title-background-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 8rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.06));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    animation: modernBackgroundPulse 8s ease-in-out infinite;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* Modern Main Title */
.title-main {
    z-index: 1;
    position: relative;
    transform-style: preserve-3d;
}

/* High-Performance Letter Styling - Non-Interactive */
.title-letter {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 25%, #06b6d4 75%, #0891b2 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: modernGradient 6s ease-in-out infinite;
    position: relative;
    transform-origin: center bottom;
    will-change: transform;
    backface-visibility: hidden;
    opacity: 0;
    animation-fill-mode: both;
    /* Remove all interactivity */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Smooth Cascading Entrance - Synced Colors */
.title-letter:nth-child(1) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.1s forwards; 
}
.title-letter:nth-child(2) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.2s forwards; 
}
.title-letter:nth-child(3) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.3s forwards; 
}
.title-letter:nth-child(4) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.4s forwards; 
}
.title-letter:nth-child(5) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.5s forwards; 
}
.title-letter:nth-child(6) { 
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.6s forwards; 
}
.title-letter:nth-child(8) { /* X */
    animation: modernGradient 6s ease-in-out infinite, letterReveal 1s ease-out 0.8s forwards; 
}

/* Non-Interactive - All interaction states removed */

.title-space {
    width: 0.5em;
}

/* Modern Title Brand Container */
.title-brand {
    display: inline-flex;
    align-items: center;
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    position: relative;
    animation: titleEntrance 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform-style: preserve-3d;
    will-change: opacity, transform;
}

/* Responsive Design Optimizations */
@media (max-width: 1024px) {
    .title-background-text {
        font-size: 6rem;
    }
    
    .title-brand {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .title-background-text {
        font-size: 4rem;
    }
    
    .title-brand {
        font-size: 2.8rem;
    }
    
    /* Reduce animations on mobile for better performance */
    .title-letter {
        animation-duration: 12s; /* Slower on mobile */
    }
}

@media (max-width: 480px) {
    .title-background-text {
        font-size: 3rem;
    }
    
    .title-brand {
        font-size: 2.2rem;
    }
    
    /* Further performance optimizations for small screens */
    .title-letter {
        animation: none;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .title-background-text {
        animation: none;
        opacity: 0.1;
    }
}

/* Accessibility - Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .title-letter,
    .title-background-text,
    .title-brand {
        animation: none !important;
        transition: none !important;
    }
    
    .title-letter {
        opacity: 1;
        transform: none;
    }
    
    .title-brand {
        opacity: 1;
        transform: none;
    }
    
    .title-background-text {
        opacity: 0.1;
        transform: translate(-50%, -50%);
    }
}

/* Performance Optimization Rules */
.title-container * {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* GPU Layer Creation for Better Performance */
.title-letter,
.title-background-text,
.title-brand {
    transform: translateZ(0); /* Force GPU layer */
    will-change: transform, opacity;
}

/* Modern Loading State */
.title-loading .title-letter {
    animation-play-state: paused;
    opacity: 0.3;
}

.title-loaded .title-letter {
    animation-play-state: running;
}

/* Completely Non-Interactive - All states removed */