.blob {
    position: fixed;
    width: 900px;
    height: 900px;
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.blob-1 {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, transparent 70%);
    animation: move1 4s infinite alternate ease-in-out;
}

.blob-2 {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    animation: move2 5s infinite alternate ease-in-out;
}

.blob-3 {
    background: radial-gradient(circle, rgba(255, 225, 121, 0.2) 0%, transparent 70%);
    animation: move3 6s infinite alternate ease-in-out;
}

@keyframes move1 {
    0% {
        transform: translate3d(-15%, -25%, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(25%, 15%, 0) rotate(90deg) scale(1.2);
    }

    100% {
        transform: translate3d(-10%, 35%, 0) rotate(180deg) scale(0.9);
    }
}

@keyframes move2 {
    0% {
        transform: translate3d(25%, 35%, 0) rotate(0deg) scale(0.8);
    }

    50% {
        transform: translate3d(-20%, -15%, 0) rotate(-120deg) scale(1.3);
    }

    100% {
        transform: translate3d(15%, -30%, 0) rotate(-240deg) scale(1);
    }
}

@keyframes move3 {
    0% {
        transform: translate3d(20%, -20%, 0) rotate(0deg) scale(1.1);
    }

    50% {
        transform: translate3d(35%, 25%, 0) rotate(150deg) scale(0.8);
    }

    100% {
        transform: translate3d(-25%, 20%, 0) rotate(300deg) scale(1.3);
    }
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.reveal-text {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation: cinematicReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

@keyframes cinematicReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mi animación para revelar mis imágenes */
.reveal-image {
    opacity: 0;
    filter: grayscale(100%);
    transform: scale(0.95) translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity, filter;
    position: relative;
}

.reveal-image.is-revealed {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1) translateY(0);
}

/* Mi efecto de brillo futurista para mis imágenes */
.reveal-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(168, 85, 247, 0.4),
            transparent);
    transform: skewX(-20deg);
    z-index: 10;
    pointer-events: none;
}

.is-revealed .reveal-image-container::after {
    animation: shine 1.2s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes shine {
    to {
        left: 150%;
    }
}

/* Mi animación elástica para mis tarjetas de stack */
.reveal-card {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

.reveal-card.is-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* === Mi línea de tiempo (Sección de Experiencia) === */
.timeline-container {
    position: relative;
    padding-left: 2rem;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #27272a 10%, #27272a 90%, transparent 100%);
}

/* Mis nodos principales de mi línea de tiempo */
.timeline-node {
    position: absolute;
    left: -5px;
    top: 2.5rem;
    width: 11px;
    height: 11px;
    background: #a855f7;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.4s ease;
}

.timeline-node::after {
    display: none;
}

/* Ajuste profesional para mis puntos sólidos limpios */
.timeline-node.timeline-node-pro {
    background: #3f3f46 !important;
    border: none !important;
    box-shadow: none !important;
    width: 9px !important;
    height: 9px !important;
    left: -4px !important;
    transition: all 0.4s ease !important;
}

.timeline-node.timeline-node-pro::after {
    display: none !important;
}

.reveal-card.group:hover .timeline-node.timeline-node-pro {
    background: #a855f7 !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.35) !important;
}

/* Mis viñetas internas de roles en cada tarjeta */
.timeline-bullet-pro {
    position: absolute;
    left: -33px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    z-index: 5;
    transition: all 0.3s ease;
}

.timeline-bullet-pro.gray {
    background: #3f3f46;
}

.reveal-card.group:hover .timeline-bullet-pro {
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.3);
}

.reveal-card.group:hover .timeline-bullet-pro.gray {
    background: #71717a;
}

@keyframes pulse-node {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Mi animación para mi etiqueta flotante en el Hero */
.badge-astral {
    animation: float-astral 4s ease-in-out infinite, glow-astral 3s ease-in-out infinite alternate;
    will-change: transform, box-shadow;
}

@keyframes float-astral {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes glow-astral {
    from {
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.1), inset 0 0 5px rgba(168, 85, 247, 0.05);
        border-color: rgba(168, 85, 247, 0.2);
    }
    to {
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.4), inset 0 0 10px rgba(168, 85, 247, 0.1);
        border-color: rgba(168, 85, 247, 0.5);
    }
}

/* Sección de contacto: Entrada escalonada de mis tarjetas de servicio */
.service-card {
    opacity: 0;
    transform: translateX(-20px);
    animation: serviceSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.service-card:nth-child(3) { animation-delay: 0.1s; }
.service-card:nth-child(4) { animation-delay: 0.2s; }
.service-card:nth-child(5) { animation-delay: 0.3s; }
.service-card:nth-child(6) { animation-delay: 0.4s; }
.service-card:nth-child(7) { animation-delay: 0.5s; }

@keyframes serviceSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mi tarjeta de contacto estilo glass: Borde sutil animado */
#contact .reveal-card.is-revealed {
    animation: contactGlow 4s ease-in-out infinite alternate;
}

@keyframes contactGlow {
    0% {
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
    }
    100% {
        box-shadow: 0 8px 40px 0 rgba(168, 85, 247, 0.12), 0 0 0 1px rgba(168, 85, 247, 0.08);
        border-color: rgba(168, 85, 247, 0.15);
    }
}

/* Mis transiciones de formulario y animación de éxito */
.contact-form-fade {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-form-hidden {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    pointer-events: none;
}

/* Mi animación de carga para el botón de envío */
.spinner-icon {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mi animación de dibujado para el checkmark SVG */
.success-checkmark-svg {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
}
.success-checkmark-svg circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke: rgba(168, 85, 247, 0.25);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-checkmark-svg path {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3.5;
    stroke: #a855f7;
    stroke-linecap: round;
    fill: none;
    animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* Centrado y preservación de altura de mi tarjeta de éxito */
#contact-success {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 540px; /* Coincide con la altura promedio del formulario */
}
#contact-success.hidden {
    display: none !important;
}

/* Optimizo el rendimiento de mis animaciones para móviles */
@media (max-width: 768px) {
    .blob {
        width: 600px;
        height: 600px;
        opacity: 0.8;
    }
}

/* Respeto las preferencias de reducción de movimiento del usuario */
@media (prefers-reduced-motion: reduce) {
    .reveal-text,
    .reveal-card,
    .reveal-image,
    .service-card,
    .badge-astral {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}