body {
    background-color: #121212;
    color: white;
}

/* Clases para el efecto Reveal (Scroll Animation) */
.reveal-element {
    opacity: 0;
    transform: translateY(3rem);
    /* translate-y-12 equiv */
    transition: all 1s ease-out;
}

.reveal-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Utilidades para retrasos en animaciones */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

/* Ocultar scrollbar en navegadores Webkit si se desea */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #121212;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Text Shine Animation via Pseudo-element Overlay */
@keyframes shine-move {
    0% {
        background-position: 200% center;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        background-position: -200% center;
        opacity: 0;
    }
}

.text-shine-once {
    position: relative;
    display: inline-block;
    /* Fixes alignment of absolute child */
    /* Base text color is inherited/set by utility classes (text-neutral-500) */
}

.text-shine-once::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 120%;
    z-index: 10;

    /* Using a gradient that goes from transparent to white to transparent */
    background: linear-gradient(to right,
            transparent 20%,
            rgba(255, 255, 255, 0.8) 50%,
            transparent 80%);
    background-size: 200% auto;

    background-clip: text;
    -webkit-background-clip: text;

    /* Make the text filled with the background (gradient) */
    -webkit-text-fill-color: transparent;
    color: transparent;

    pointer-events: none;
    animation: shine-move 3s ease-out forwards;
}