.text-gradient-custom{
    background-image: linear-gradient(to bottom,  #F63E02 0%, #E6AF2E 100%);
    -webkit-background-clip: text; /* To compatibility with WebKit (Chrome, Safari) */
    background-clip: text;
    color: transparent;
}

/* fonts */
@font-face {
    font-family: 'Roustel';
    src: url(../fonts/Roustel.ttf);
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Hanson-Bold';
    src: url(../fonts/Hanson-Bold.ttf);
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: "Design System";
    src: url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.eot");
    src: url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/8f3caf92047d515ae7230350d0e5f104.svg#Design System C W01 900R")format("svg");
}

/* Animación de pulsación para la llama */
@keyframes flamePulse {
    0% { transform: scale(0.98); opacity: 0.9; }
    50% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(0.98); opacity: 0.9; }
}

/* Animación de movimiento sutil (parpadeo) */
@keyframes flameWobble {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-1px) translateX(1px); }
    50% { transform: translateY(0px) translateX(-1px); }
    75% { transform: translateY(1px) translateX(1px); }
}


/* Aplicar animaciones a todas las partes del fuego */
.flame-loader-svg .flame-part {
    transform-origin: center bottom; /* Las llamas pulsan/se mueven desde su base */
    transition: fill 0.4s ease-in-out; /* Transición suave para el color de relleno */
    animation: flamePulse 1.5s ease-in-out infinite alternate,
               flameWobble 2s linear infinite; /* Combina dos animaciones */
}

/* Ajustes individuales para un efecto más orgánico */
#main-flame {
    animation-delay: 0s, 0.5s; /* Retraso para wobble */
    transform-origin: 50% 80%; /* Ajusta el origen de la transformación si la base no es el centro-fondo */
}

#inner-flame {
    animation: flamePulse 1s ease-in-out infinite alternate,
               flameWobble 1.8s linear infinite reverse; /* Pulsa más rápido, wobble inverso */
    animation-delay: 0.1s, 0s;
}

#flame-spark-1 {
    animation: flamePulse 0.8s ease-in-out infinite alternate,
    flameWobble 1.5s linear infinite;
    animation-delay: 0.2s, 0.3s;
}

#flame-spark-2 {
    animation: flamePulse 1.2s ease-in-out infinite alternate,
    flameWobble 1.7s linear infinite reverse;
    animation-delay: 0.3s, 0.1s;
}

/* Continúa con flame-spark-3, flame-spark-4 y otras partes si quieres */
/* También puedes ajustar la opacidad inicial de las partes de sombra */
.flame-loader-svg #flame-shadows path {
    animation: flamePulse 1.8s ease-in-out infinite alternate;
    opacity: 0.2; /* Asegura una opacidad base más baja para la sombra */
}

/* Ajusta el color inicial de los path para que coincida con el #333 del JS si quieres */
/* O simplemente deja que el JS los cambie al iniciar */

                .neon-text{
                    -webkit-text-stroke: 1px red;
                }

                .neon-text{
                    -webkit-text-stroke: 1px white;
                    color: transparent;
                }
                .neon-text-white {
                    -webkit-text-stroke: 1px red;
                    color: white; /* Color principal del texto */
                    text-shadow:
                        0 0 7px red,    /* Sombra blanca interior */
                        0 0 10px red,
                        0 0 21px red,
                        0 0 20px red,   /* Sombra verde/azul exterior (ajusta el color a tu gusto) */
                        0 0 42px red,
                        0 0 52px red,
                        0 0 50px red,
                        0 0 75px red;
                }
        
                .neon-text-orange {
                    color: white; /* Color principal del texto (naranja brillante) */
                    text-shadow:
                        0 0 7px #f77f00,    /* Sombra naranja interior */
                        0 0 10px #f77f00,
                        0 0 21px #f77f00,
                        0 0 42px #ff0000,   /* Sombra roja exterior (para un efecto de degradado de neón) */
                        0 0 82px #ff0000,
                        0 0 92px #ff0000,
                        0 0 102px #ff0000,
                        0 0 151px #ff0000;

}

@property --rotate {
        syntax: "<angle>";
        initial-value: 132deg;
        inherits: false;
        }

        :root {
        --card-height: 65vh;
        --card-width: calc(var(--card-height) / 0.5);
        }

        .card {
        background: #000;
        width: 95%;
        padding: 1px;
        position: relative;
        border-radius: 2px;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        color: red;
        cursor: pointer;
        }

        .card:hover {
        color: red;
        transition: color 1s;
        }

       
        .card::before {
        content: "";
        width: 104%;
        height: 102%;
        border-radius: 8px;
        background-image: linear-gradient(
            var(--rotate)
            , orange, red 43%, orange);
            position: absolute;
            z-index: -1;
            top: -1%;
            left: -2%;
            animation: spin 2.5s linear infinite;
        }

        .card::after {
        position: absolute;
        content: "";
        top: calc(var(--card-height) / 6);
        left: 0;
        right: 0;
        z-index: -1;
        height: 50%;
        width: 80%;
        margin: 0 auto;
        transform: scale(0.8);
        filter: blur(calc(var(--card-height) / 1));
        background-image: linear-gradient(
            var(--rotate)
            , red, red 43%, white);
            opacity: 1;
        transition: opacity .5s;
        animation: spin 2.5s linear infinite;
        }

        @keyframes spin {
        0% {
            --rotate: 0deg;
        }
        100% {
            --rotate: 360deg;
        }
        }