/* Estilos para el preloader animado */
#deleted {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    padding: 0 !important;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeOutPreloader 0.5s ease-out 4s forwards;
}

/* Contenedor SVG del preloader */
#openingLogo, #openingLogo2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Asegurar que los SVGs estén correctamente posicionados */
.openingLogo, .openingLogo2 {
    max-width: 90%;
    height: auto;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .openingLogo, .openingLogo2 {
        max-width: 95%;
    }
    
    /* Ajustar tamaño de texto en SVG para móviles */
    .animated-text {
        font-size: 36px !important;
    }
}

@media (max-width: 480px) {
    .openingLogo, .openingLogo2 {
        max-width: 98%;
    }
    
    .animated-text {
        font-size: 28px !important;
    }
}

/* Animación de trazo para el texto */
.animated-text {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    fill: none;
    opacity: 0;
}

/* Animación sincronizada con la línea diagonal */
.text-ROTO {
    animation: strokeReveal 0.6s ease-out 0.3s forwards, fillAnimation 0.3s ease-out 0.9s forwards;
}

.text-tatto {
    animation: strokeReveal 0.6s ease-out 0.8s forwards, fillAnimation 0.3s ease-out 1.4s forwards;
}

.text-studio {
    animation: strokeReveal 0.6s ease-out 1.3s forwards, fillAnimation 0.3s ease-out 1.9s forwards;
}

/* Animación para la línea diagonal que "escribe" */
.diagonal-line {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: diagonalWrite 2s ease-in-out forwards;
    transform-origin: top right;
}

/* Keyframes para la línea diagonal */
@keyframes diagonalWrite {
    0% {
        stroke-dashoffset: 1500;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Keyframes para revelar el texto */
@keyframes strokeReveal {
    0% {
        stroke-dashoffset: 300;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Keyframes para animación de relleno */
@keyframes fillAnimation {
    from {
        fill: none;
    }
    to {
        fill: rgb(36, 36, 28);
    }
}

/* Keyframes para desvanecer el preloader */
@keyframes fadeOutPreloader {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Ocultar el contenido principal mientras carga */
body.loading {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
}

/* Efecto de brillo en la línea */
.diagonal-line {
    filter: drop-shadow(0 0 3px rgba(36, 36, 28, 0.5));
}