.scramble-char {
    display: inline-block;
    transition: all 0.1s ease-out;
    position: relative;
    cursor: pointer;
    user-select: none;
    will-change: transform, opacity, color, text-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.scramble-char.space {
    width: 0.5em;
}

.scramble-char.revealed {
    color: #FFFFFF;
}

.scramble-char.floating {
    filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.6));
    animation: simpleFloat 4s ease-in-out infinite;
    will-change: transform, filter;
}

.scramble-char.floating:nth-child(odd) {
    animation-delay: -0.5s;
}

.scramble-char.floating:nth-child(even) {
    animation-delay: -1.5s;
}

.scramble-char.floating:nth-child(3n) {
    animation-delay: -2s;
}

.scramble-char.floating:nth-child(4n) {
    animation-delay: -0.8s;
}

.scramble-char.floating:nth-child(5n) {
    animation-delay: -2.5s;
}

.scramble-char.breathing {
    animation: breathingGlow 3s ease-in-out infinite;
}

.scramble-char.breathing:nth-child(odd) {
    animation-delay: -1s;
}

.scramble-char.shimmer {
    animation: shimmerEffect 5s ease-in-out infinite;
}

.sparkle, .magic-particle, .explosion-fragment, .completion-sparkle, .scramble-spark, .celebration-particle, .floating-particle {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    will-change: transform, opacity;
    transform: translateZ(0);
}

@keyframes simpleFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1) translateZ(0);
        text-shadow: 0 0 15px rgba(88, 101, 242, 0.7);
        color: #FFFFFF;
    }
    50% {
        transform: translateY(-10px) translateX(5px) rotate(2deg) scale(1.05) translateZ(0);
        text-shadow: 0 0 25px rgba(88, 101, 242, 1), 0 0 40px rgba(255, 255, 255, 0.5);
        color: #e6f0ff;
    }
}

@keyframes sparkleEffect {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg) translateZ(0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(45deg) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--end-x)), 
            calc(-50% + var(--end-y))
        ) scale(0) rotate(180deg) translateZ(0);
    }
}

@keyframes magicParticle {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateZ(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5) rotate(180deg) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg) translateZ(0);
    }
}

@keyframes explosionFragment {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--end-x)), 
            calc(-50% + var(--end-y))
        ) scale(0) translateZ(0);
    }
}

@keyframes completionSparkle {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg) translateZ(0);
        opacity: 1;
    }
    50% {
        transform: translate(calc(-50% + var(--end-x, 0px) * 0.5), calc(-50% + var(--end-y, 0px) * 0.5)) scale(1) rotate(180deg) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, 0px))) scale(0) rotate(360deg) translateZ(0);
        opacity: 0;
    }
}

@keyframes finalGlowPulse {
    0% {
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    }
    25% {
        filter: drop-shadow(0 5px 25px rgba(88, 101, 242, 0.5)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 5px 35px rgba(88, 101, 242, 0.7)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.5));
        transform: scale(1.02) translateZ(0);
    }
    75% {
        filter: drop-shadow(0 5px 25px rgba(88, 101, 242, 0.5)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.3));
    }
    100% {
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
        transform: scale(1) translateZ(0);
    }
}

@keyframes scrambleSpark {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--end-x)), 
            calc(-50% + var(--end-y))
        ) scale(0.3) translateZ(0);
    }
}

@keyframes celebrationBounce {
    0%, 100% {
        transform: scale(1) translateY(0) translateZ(0);
    }
    25% {
        transform: scale(1.1) translateY(-10px) translateZ(0);
    }
    50% { 
        transform: scale(1.05) translateY(-5px) translateZ(0);
    }
    75% {
        transform: scale(1.15) translateY(-15px) translateZ(0);
    }
}

@keyframes celebrationBurst {
    0% {
        transform: translate(-50%, -50%) scale(0) translateZ(0);
        opacity: 1;
    }
    20% {
        transform: translate(calc(-50% + var(--end-x, 0px) * 0.3), calc(-50% + var(--end-y, 0px) * 0.3)) scale(1) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, 0px))) scale(0) translateZ(0);
        opacity: 0;
    }
}

@keyframes breathingGlow {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        color: #FFFFFF;
    }
    25% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 
                     0 0 35px rgba(88, 101, 242, 0.6);
        color: #e6f0ff;
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 1),
                     0 0 60px rgba(88, 101, 242, 1),
                     0 0 90px rgba(88, 101, 242, 0.7);
        color: #d0e6ff;
    }
    75% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 35px rgba(88, 101, 242, 0.6);
        color: #e6f0ff;
    }
    100% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        color: #FFFFFF;
    }
}

@keyframes shimmerEffect {
    0% { 
        filter: hue-rotate(0deg) brightness(1) contrast(1);
        color: #ffffff; 
    }
    25% { 
        filter: hue-rotate(90deg) brightness(1.2) contrast(1.1);
        color: #e0f0ff; 
    }
    50% { 
        filter: hue-rotate(180deg) brightness(1.4) contrast(1.2);
        color: #c0e0ff; 
    }
    75% { 
        filter: hue-rotate(270deg) brightness(1.2) contrast(1.1);
        color: #e0f0ff; 
    }
    100% { 
        filter: hue-rotate(360deg) brightness(1) contrast(1);
        color: #ffffff; 
    }
}

@keyframes floatingParticle {
    0% {
        transform: translateY(0) translateX(0) scale(0) translateZ(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-10px) translateX(var(--end-x, 0px)) scale(1) translateZ(0);
        opacity: 0.7;
    }
    90% {
        transform: translateY(var(--end-y, -100px)) translateX(calc(var(--end-x, 0px) * 2)) scale(1) translateZ(0);
        opacity: 0.7;
    }
    100% {
        transform: translateY(calc(var(--end-y, -100px) - 20px)) translateX(calc(var(--end-x, 0px) * 2)) scale(0) translateZ(0);
        opacity: 0;
    }
}


.scramble-text {
    position: relative;
    display: inline-block !important;
    overflow: visible;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: filter, transform;
    transform: translateZ(0);
}

.scramble-text.initialized {
    opacity: 1 !important;
    visibility: visible !important;
}

.scramble-text .char {
    display: inline-block !important;
    position: relative;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, color, opacity, text-shadow;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: bottom center;
    font-weight: 800;
    transform: translateZ(0);
}

.scramble-text .char.space {
    color: transparent !important;
    opacity: 1 !important;
    min-width: 0.3em;
}

.scramble-text .char.revealed {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.scramble-text .char.floating {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.scramble-text .char.breathing {
    animation: breathing 6s ease-in-out infinite;
}

.scramble-text .char.shimmer {
    animation: shimmer 4s ease-in-out infinite;
}


@keyframes charFloat1 {
    0% {
        transform: translateY(0) scale(1) rotate(0deg) translateZ(0);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    20% {
        transform: translateY(-4px) scale(1.03) rotate(1deg) translateZ(0);
        text-shadow: 0 0 12px rgba(88, 101, 242, 0.5),
          0 0 20px rgba(88, 101, 242, 0.2);
    }
    40% {
        transform: translateY(-2px) scale(1.01) rotate(-0.5deg) translateZ(0);
        text-shadow: 0 0 8px rgba(88, 101, 242, 0.3),
          0 0 15px rgba(88, 101, 242, 0.1);
    }
    60% {
        transform: translateY(-5px) scale(1.04) rotate(0deg) translateZ(0);
        text-shadow: 0 0 15px rgba(88, 101, 242, 0.6),
          0 0 30px rgba(88, 101, 242, 0.3);
    }
    80% {
        transform: translateY(-1px) scale(1) rotate(0.5deg) translateZ(0);
        text-shadow: 0 0 10px rgba(87, 242, 135, 0.4),
          0 0 20px rgba(87, 242, 135, 0.1);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg) translateZ(0);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
}

@keyframes charFloat2 {
    0% {
        transform: translateY(0) scale(1) rotate(0deg) translateZ(0);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    25% {
        transform: translateY(-3px) scale(1.02) rotate(-1deg) translateZ(0);
        text-shadow: 0 0 12px rgba(255, 102, 196, 0.5),
          0 0 20px rgba(255, 102, 196, 0.2);
    }
    50% {
        transform: translateY(-5px) scale(1.03) rotate(0.5deg) translateZ(0);
        text-shadow: 0 0 15px rgba(254, 231, 92, 0.6),
          0 0 30px rgba(254, 231, 92, 0.3);
    }
    75% {
        transform: translateY(-2px) scale(1.01) rotate(-0.5deg) translateZ(0);
        text-shadow: 0 0 10px rgba(87, 242, 135, 0.5),
          0 0 20px rgba(87, 242, 135, 0.2);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg) translateZ(0);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
}

@keyframes breathing {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes shimmer {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.6),
                     0 0 25px rgba(88, 101, 242, 0.3);
    }
}


.scramble-text .char.floating:nth-child(5n) {
    animation: charFloat1 5s ease-in-out infinite;
}

.scramble-text .char.floating:nth-child(5n + 1) {
    animation: charFloat2 5.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.scramble-text .char.floating:nth-child(5n + 2) {
    animation: charFloat1 6s ease-in-out infinite;
    animation-delay: 0.4s;
}

.scramble-text .char.floating:nth-child(5n + 3) {
    animation: charFloat2 5.8s ease-in-out infinite;
    animation-delay: 0.6s;
}

.scramble-text .char.floating:nth-child(5n + 4) {
    animation: charFloat1 6.2s ease-in-out infinite;
    animation-delay: 0.8s;
}


.hero-title.scramble-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.2;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    perspective: 1000px;
    font-family: 'ABCGintoPlus', 'Inter', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.hero-title.scramble-text .scramble-char {
    background: linear-gradient(135deg, #ffffff 0%, #e6f0ff 50%, #5865F2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

.hero-title.scramble-text .scramble-char.revealed {
    background: linear-gradient(135deg, #ffffff 0%, #e6f0ff 50%, #5865F2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

.hero-title.wave-active .scramble-char.wave-char {
    animation: characterWave 2s ease-in-out infinite;
}

.hero-title.wave-active .scramble-char.wave-char:nth-child(1) { animation-delay: 0s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(2) { animation-delay: 0.1s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(3) { animation-delay: 0.2s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(4) { animation-delay: 0.3s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(5) { animation-delay: 0.4s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(6) { animation-delay: 0.5s; }
.hero-title.wave-active .scramble-char.wave-char:nth-child(7) { animation-delay: 0.6s; }

@keyframes characterWave {
    0% {
        transform: translateY(0px) scale(1) rotateZ(0deg) translateZ(0);
        filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.6)) brightness(1);
    }
    20% {
        transform: translateY(-10px) scale(1.05) rotateZ(1deg) translateZ(0);
        filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.75)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) brightness(1.1);
    }
    40% {
        transform: translateY(-20px) scale(1.1) rotateZ(2deg) translateZ(0);
        filter: drop-shadow(0 0 30px rgba(88, 101, 242, 0.9)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.5)) brightness(1.2);
    }
    50% {
        transform: translateY(-25px) scale(1.15) rotateZ(0deg) translateZ(0);
        filter: drop-shadow(0 0 40px rgba(88, 101, 242, 1)) drop-shadow(0 0 70px rgba(255, 255, 255, 0.7)) brightness(1.4);
    }
    60% {
        transform: translateY(-20px) scale(1.1) rotateZ(-2deg) translateZ(0);
        filter: drop-shadow(0 0 30px rgba(88, 101, 242, 0.9)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.5)) brightness(1.2);
    }
    80% {
        transform: translateY(-10px) scale(1.05) rotateZ(-1deg) translateZ(0);
        filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.75)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) brightness(1.1);
    }
    100% {
        transform: translateY(0px) scale(1) rotateZ(0deg) translateZ(0);
        filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.6)) brightness(1);
    }
}

@keyframes titleSparkle {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: scale(1.5) rotate(90deg);
    }
    80% {
        opacity: 1;
        transform: scale(1) rotate(270deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
}

@keyframes titleMegaPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 5px 15px rgba(88, 101, 242, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 10px 30px rgba(88, 101, 242, 0.8)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.6));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 5px 15px rgba(88, 101, 242, 0.3));
    }
}

.title-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
}


.hero-title .scramble-char.wave-char.floating {
    animation: characterWave 2s ease-in-out infinite, floatingEnhanced 4s ease-in-out infinite;
}

@keyframes floatingEnhanced {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    33% {
        filter: hue-rotate(120deg) brightness(1.2);
    }
    66% {
        filter: hue-rotate(240deg) brightness(1.1);
    }
}

.animate-float-title {
    animation: float-title 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    display: inline-block;
    will-change: transform, filter;
}

@keyframes float-title {
    0% {
        transform: translateY(0) rotate(0deg) translateZ(0);
        filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.6)) brightness(1);
    }
    25% {
        transform: translateY(-3px) rotate(1deg) translateZ(0);
        filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.75)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) brightness(1.15);
    }
    50% {
        transform: translateY(-5px) rotate(2deg) translateZ(0);
        filter: drop-shadow(0 0 30px rgba(88, 101, 242, 0.9)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.6)) brightness(1.3);
    }
    75% {
        transform: translateY(-3px) rotate(1deg) translateZ(0);
        filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.75)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) brightness(1.15);
    }
    100% {
        transform: translateY(0) rotate(0deg) translateZ(0);
        filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.6)) brightness(1);
    }
}

.hero-title.glow-active {
    animation: titleGlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: filter;
}

@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 5px 15px rgba(88, 101, 242, 0.4)) brightness(1);
    }
    25% {
        filter: drop-shadow(0 5px 25px rgba(88, 101, 242, 0.6)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.3)) brightness(1.1);
    }
    50% {
        filter: drop-shadow(0 5px 35px rgba(88, 101, 242, 0.8)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.5)) brightness(1.2);
    }
    75% {
        filter: drop-shadow(0 5px 25px rgba(88, 101, 242, 0.6)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.3)) brightness(1.1);
    }
    100% {
        filter: drop-shadow(0 5px 15px rgba(88, 101, 242, 0.4)) brightness(1);
    }
}


@media (max-width: 768px) {
    .scramble-text .char.floating {
        animation: none !important;
    }
    
    .scramble-text .char.revealed {
        animation: simple-reveal 0.5s ease-out;
    }

    .hero-title.wave-active .scramble-char.wave-char {
        animation: characterWaveMobile 1.5s ease-in-out infinite;
    }
    
    .hero-title.animate-float-title {
        animation: float-title-mobile 3s ease-in-out infinite;
    }
    
    @keyframes float-title-mobile {
        0% {
            transform: translateY(0) rotate(0deg);
            filter: drop-shadow(0 0 15px rgba(88, 101, 242, 0.5)) brightness(1);
        }
        25% {
            transform: translateY(-2px) rotate(0.5deg);
            filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.65)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3)) brightness(1.1);
        }
        50% {
            transform: translateY(-3px) rotate(1deg);
            filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.8)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.4)) brightness(1.2);
        }
        75% {
            transform: translateY(-2px) rotate(0.5deg);
            filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.65)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3)) brightness(1.1);
        }
        100% {
            transform: translateY(0) rotate(0deg);
            filter: drop-shadow(0 0 15px rgba(88, 101, 242, 0.5)) brightness(1);
        }
    }
}

@keyframes characterWaveMobile {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 0 15px rgba(88, 101, 242, 0.5)) brightness(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
        filter: drop-shadow(0 0 25px rgba(88, 101, 242, 0.8)) brightness(1.2);
    }
}

@keyframes simple-reveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (prefers-reduced-motion: reduce) {
    .scramble-text .char,
    .scramble-text .char.floating,
    .scramble-text .char.breathing,
    .scramble-text .char.shimmer,
    .hero-title.wave-active .scramble-char.wave-char,
    .animate-float-title,
    .hero-title.glow-active {
        animation: none !important;
    }
}