* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(-45deg, #1e1e1e, #2a2a2a, #333333, #212121);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #ffffff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    perspective: 1000px;
    position: relative;
    z-index: 1;
}

.text-container {
    position: relative;
    overflow: visible;
    transform-style: preserve-3d;
    z-index: 2;
}

.animated-text {
    font-size: 6.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
    text-shadow: 0 0 15px rgba(0, 225, 255, 0.9), 0 0 30px rgba(0, 225, 255, 0.5);
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) translateZ(0px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: letterWave 2s infinite;
    animation-play-state: paused;
    color: #00e1ff;
    text-shadow: 0 0 15px rgba(0, 225, 255, 0.9), 0 0 30px rgba(0, 225, 255, 0.7);
}

.letter.animated {
    opacity: 1;
    transform: translateY(0) translateZ(0px);
    animation-play-state: running;
}

@keyframes letterWave {
    0%, 100% {
        transform: translateY(0) translateZ(0px);
    }
    50% {
        transform: translateY(-15px) translateZ(30px);
    }
}

/* Make letters have different animation delays to create a wave effect */
.letter:nth-child(1) { animation-delay: 0.0s; }
.letter:nth-child(2) { animation-delay: 0.1s; }
.letter:nth-child(3) { animation-delay: 0.2s; }
.letter:nth-child(4) { animation-delay: 0.3s; }
.letter:nth-child(5) { animation-delay: 0.4s; }
.letter:nth-child(6) { animation-delay: 0.5s; }
.letter:nth-child(7) { animation-delay: 0.6s; }
.letter:nth-child(8) { animation-delay: 0.7s; }
.letter:nth-child(9) { animation-delay: 0.8s; }
.letter:nth-child(10) { animation-delay: 0.9s; }

/* Efek hover untuk huruf */
.letter:hover {
    color: #ffffff;
    transform: scale(1.3) translateZ(50px) rotateY(15deg);
    transition: all 0.3s ease;
    z-index: 10;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(0, 225, 255, 0.7);
}

/* Animasi float tidak lagi diperlukan karena kita memiliki letterWave */
@keyframes float {
    0% {
        transform: translateY(0px) rotateX(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(5deg);
    }
    100% {
        transform: translateY(0px) rotateX(0deg);
    }
}

.text-container {
    animation: float 6s ease-in-out infinite;
}

/* Efek glow yang lebih kuat */
@keyframes glow {
    0% {
        text-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
        filter: brightness(1);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 225, 255, 1), 0 0 40px rgba(0, 225, 255, 0.7), 0 0 60px rgba(0, 225, 255, 0.5);
        filter: brightness(1.5);
    }
    100% {
        text-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
        filter: brightness(1);
    }
}

.animated-text {
    animation: glow 3s ease-in-out infinite;
}

/* Tambahkan efek noise overlay */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,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');
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* Styling for particle container */
.particle-container {
    position: absolute !important;
    z-index: 1 !important;
}