:root {
    --color-piel: #ffccaa;
    --color-piel-dark: #f0a080;
    --color-borde: #2c3e50;
    --color-burbuja: #2c3e50;
    --glow: rgba(255, 255, 255, 0.2);
}

/* --- CONTENEDOR PRINCIPAL --- */
.contenedor-mascota {
    position: fixed; 
    bottom: 0 !important; 
    left: 50%;
    transform: translateX(-50%);
    width: 120px; 
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 10001; 
    filter: drop-shadow(0 0 10px var(--glow));
    opacity: 0; 
    transition: opacity 0.6s ease, left 1s ease-in-out, transform 0.3s ease;
    touch-action: none; /* Permite arrastrar en móviles */
    pointer-events: auto !important; 
    cursor: grab;
    will-change: left, top, transform;
}

/* para poder ver el contenedor interactivo de la mascota*/
/*
.contenedor-mascota {
    outline: 2px solid red;
}
*/

/* --- BURBUJA DE TEXTO --- */
.burbuja {
    position: absolute;
    bottom: 115px; 
    left: 50%;
    transform: translateX(-50%) scale(0.6) translateY(20px);
    width: 190px;
    background: var(--color-burbuja);
    border: 3px solid var(--color-borde);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    z-index: 10;
    opacity: 0;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 14px;
    text-align: center;
    color: white;
    pointer-events: none; 
    max-width: 90vw; /* Evita que se salga de la pantalla */
    word-wrap: break-word;
}

.burbuja-visible { 
    opacity: 1; 
    transform: translateX(-50%) scale(1) translateY(0); 
}

/* IA: Efecto de vibración en la burbuja si el personaje está enojado */
.cara-enojado ~ .burbuja-visible {
    animation: shiver 0.2s infinite;
}

/* Permitir interacción solo con el contenido interno */
.burbuja.burbuja-visible div,
.burbuja.burbuja-visible a,
.burbuja.burbuja-visible button,
.burbuja.burbuja-visible input {
    pointer-events: auto !important;
}

.burbuja a { color: #e67e22; text-decoration: none; font-weight: bold; border-bottom: 1px dashed #e67e22; transition: color 0.3s; }
.burbuja a:hover { color: #d35400; border-bottom: 1px solid #d35400; }
.burbuja strong { color: #ff5544; display: block; margin-top: 5px; }

.burbuja::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    border-width: 10px 10px 0 10px; border-style: solid;
    border-color: var(--color-borde) transparent transparent transparent;
}

/* --- ESCENA Y PERSONAJE --- */
.escena {
    position: relative;
    width: 110px; height: 100px;
    transition: transform 0.2s ease-out;
    pointer-events: none; 
}

.personaje {
    position: absolute; 
    bottom: -110px;
    left: 50%; 
    transform: translateX(-50%);
    width: 110px; 
    height: 100px;
    background: linear-gradient(145deg, var(--color-piel), var(--color-piel-dark));
    border: 4px solid var(--color-borde);
    border-radius: 50px 50px 35px 35px;
    transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2; 
    pointer-events: auto; 
    cursor: grab;
    touch-action: none; /* Permite arrastrar en móviles */
}

.personaje:active { cursor: grabbing; }

.asomado .personaje { bottom: -70px; }
.asomado .ojos { margin-top: 10px; }
.asomado .mano.izq { left: -12px; bottom: -5px; } 
.asomado .mano.der { right: -12px; bottom: -5px; }
.activo .personaje, .arrastrando .personaje { bottom: 0px; }

/* --- OJOS Y PUPILAS --- */
.ojos { display: flex; gap: 15px; justify-content: center; margin-top: 22px; position: relative; pointer-events: none; transition: margin-top 0.4s ease; }
.ojo { width: 30px; height: 30px; background: white; border-radius: 50%; position: relative; border: 3px solid var(--color-borde); overflow: hidden; transition: all 0.2s ease; }
.pupila { width: 14px; height: 14px; background: #1e293b; border-radius: 50%; position: absolute; top: 25%; left: 25%; transition: transform 0.1s ease-out; }
.mirada-frente .pupila { transform: translate(0, 0) !important; top: 25%; left: 25%; }
.parpadeo .ojo { height: 2px !important; margin-top: 14px; }

/* --- EXPRESIONES --- */
.cara-feliz .ojo { height: 25px; }
.cara-sorprendido .ojo { transform: scale(1.2); }
.cara-cool .ojo { background: #333; height: 18px; border-radius: 0 0 15px 15px; }
.cara-guinho .ojo:last-child { height: 4px; margin-top: 15px; border-radius: 10px; }
.cara-loco .ojo:first-child { transform: scale(0.6); } 
.cara-loco .ojo:last-child { transform: scale(1.4); }
.cara-enamorado .ojo { background: #ff8fa3; animation: heartbeat 1s infinite; }
.cara-espiral .ojo { background: repeating-conic-gradient(from 0deg, white 0deg 30deg, var(--color-borde) 30deg 60deg); animation: dizzy 0.5s infinite linear; }
.cara-enojado .ojo { transform: translateY(5px) rotateX(45deg); border-top: 8px solid #2c3e50; }
.cara-pensativo .ojo { transform: translateY(-2px); }
.cara-triste .ojo { height: 15px; border-radius: 15px 15px 5px 5px; }
.cara-estrellas .ojo { background: #f1c40f; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cara-mareado .pupila { animation: ojos-locos 0.5s infinite linear; top: 0; left: 0; }
.cara-X .ojo::after { content: 'X'; font-weight: bold; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 100%; color: var(--color-borde); background: white; position: absolute; top:0; left:0; width:100%; }
.cara-nervioso .ojo { animation: jitter 0.1s infinite; }
.cara-brillo .ojo { box-shadow: inset 0 0 10px #3498db; }
.cara-lloro .ojo { border-bottom: 5px solid #3498db; }

/* --- NUEVAS CARAS --- */
.cara-dormido .ojo { height: 4px; margin-top: 15px; background: var(--color-borde); }
.cara-pirata .ojo:first-child { background: #222; border-radius: 5px; clip-path: none; }
.cara-pirata .ojo:first-child::before { content: ''; position: absolute; top: 50%; width: 100%; height: 4px; background: black; transform: rotate(-20deg); }
.cara-robot .ojo { border-radius: 4px; background: #00ff00; box-shadow: 0 0 10px #00ff00; }
.cara-robot .pupila { background: #003300; }
.cara-dinero .ojo::after { content: '$'; color: #2ecc71; font-weight: bold; font-size: 22px; position: absolute; top: 0; left: 5px; }
.cara-fuego .ojo { background: #e67e22; animation: lift 0.2s infinite alternate; border-color: #ffcc00; margin-top: 25px; }

/* --- BOCA --- */
.boca { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 20px; height: 4px; background: var(--color-borde); border-radius: 10px; transition: 0.3s; opacity: 0; }
.hablando .boca, .saludo .boca, .mareado-critico .boca { opacity: 1; height: 15px; width: 30px; border-radius: 0 0 20px 20px; background: transparent; border: 4px solid var(--color-borde); border-top: 0; }
.boca-feliz { height: 8px; width: 24px; border-radius: 0 0 15px 15px; background: #ff4444; border: none; }
.boca-triste { height: 6px; width: 20px; border-radius: 15px 15px 0 0; background: #5555ff; transform: rotate(180deg); }
.boca-sorprendido { height: 12px; width: 12px; border-radius: 50%; background: #fff; border: 2px solid #2c3e50; }

/* --- MANOS --- */
.mano { position: absolute; bottom: -60px; width: 32px; height: 22px; background: var(--color-piel); border: 3px solid var(--color-borde); border-radius: 12px; z-index: 4; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.mano.izq { left: 5px; } .mano.der { right: 5px; }
.activo .mano { bottom: -15px; } 

/* --- GESTOS --- */
.gesto-saludo .mano.der { bottom: 110px; right: -10px; animation: wave 0.5s infinite alternate; }
.gesto-saludo-izq .mano.izq { bottom: 110px; left: -10px; animation: wave 0.5s infinite alternate; }
.gesto-dj .mano { animation: dj-twist 0.3s infinite alternate; }
.gesto-arriba .mano { bottom: 110px; }
.gesto-aplauso .mano { bottom: 90px; animation: clap 0.2s infinite alternate; }
.gesto-baile .escena { animation: rocking 0.5s infinite alternate; }
.gesto-paz .mano.izq { bottom: 100px; transform: rotate(-20deg); } .gesto-paz .mano.der { bottom: 100px; transform: rotate(20deg); }
.gesto-meditar .mano { bottom: 80px; left: 50%; transform: translateX(-50%); width: 80px; border-radius: 20px; }
.gesto-oculto .mano { bottom: -30px; }
.gesto-loco .mano { animation: crazy 0.2s infinite; }
.gesto-pesas .mano { bottom: 105px; animation: lift 0.6s infinite alternate; }
.gesto-pensador .mano.izq { bottom: 40px; left: 30px; transform: rotate(-45deg); }
.gesto-vuelo .mano { bottom: 80px; animation: flap 0.3s infinite alternate; }
.gesto-shiver .escena { animation: shiver 0.1s infinite; }
.gesto-float .escena { animation: float 2s infinite ease-in-out; }
.gesto-corazon .mano { bottom: 50px; background: #ff4d4d; border-radius: 50% 50% 0 0; }
.gesto-corazon .mano.izq { transform: rotate(-45deg) translateX(15px); }
.gesto-corazon .mano.der { transform: rotate(45deg) translateX(-15px); }
.gesto-avion .escena { animation: airplane 3s infinite linear; }
.gesto-zombie .mano { bottom: 60px; transform: rotateX(60deg); }

/* --- NUEVOS GESTOS IA --- */
.gesto-pulgar-up .mano.der { bottom: 110px; transform: rotate(-20deg); animation: thumbs 0.4s infinite alternate; }
.gesto-pulgar-down .mano.izq { bottom: 110px; transform: rotate(20deg); animation: thumbs-down 0.4s infinite alternate; }
.gesto-despedida .mano.izq, .gesto-despedida .mano.der { bottom: 100px; animation: wave 0.6s infinite alternate; }
.gesto-cara-tapada .mano.izq, .gesto-cara-tapada .mano.der { bottom: 70px; animation: hide-face 0.4s infinite alternate; }

/* --- ANIMACIONES --- */
@keyframes wave { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
@keyframes dj-twist { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-20px) scaleX(0.8); } }
@keyframes clap { from { transform: translateX(0); } to { transform: translateX(20px); } }
@keyframes rocking { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes crazy { 0% { bottom: 70px; left: 0; } 50% { bottom: 110px; left: 50px; } 100% { bottom: 60px; left: 20px; } }
@keyframes lift { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes flap { from { bottom: 60px; transform: scaleY(1); } to { bottom: 100px; transform: scaleY(0.5); } }
@keyframes shiver { 0% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } 100% { transform: translate(1px, -1px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes dizzy { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes jitter { 0% { transform: translate(0); } 50% { transform: translate(2px, -2px); } 100% { transform: translate(-2px, 2px); } }
@keyframes ojos-locos { 0% { transform: translate(2px, 2px); } 25% { transform: translate(14px, 2px); } 50% { transform: translate(14px, 14px); } 75% { transform: translate(2px, 14px); } 100% { transform: translate(2px, 2px); } }
@keyframes airplane { 0% { transform: translateX(-20px) rotate(5deg); } 50% { transform: translateX(20px) rotate(-5deg); } 100% { transform: translateX(-20px) rotate(5deg); } }
@keyframes thumbs { from { transform: rotate(-20deg) scaleY(1); } to { transform: rotate(20deg) scaleY(1.2); } }
@keyframes thumbs-down { from { transform: rotate(20deg) scaleY(1); } to { transform: rotate(-20deg) scaleY(0.8); } }
@keyframes hide-face { from { transform: translateY(0); } to { transform: translateY(-15px); } }

.enojado-caminando { animation: caminar-huida 2s infinite linear; }
@keyframes caminar-huida { 0%, 50%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(10deg) translateY(-5px); } 75% { transform: rotate(-10deg) translateY(-5px); } }

/* --- RESPONSIVE PARA MÓVILES --- */
/* --- RESPONSIVE PARA MÓVILES (Corregido para Arrastre Libre) --- */
@media (max-width: 1023px) { 
    .contenedor-mascota { 
        display: flex !important; 
        /* Usamos left y transform normales para que JS pueda sobreescribirlos */
        left: 20%;
        transform: translateX(-50%);
        bottom: 0px; /* Sin !important */
        zoom: 0.8;
        touch-action: none; 
    }

    .burbuja {
        width: 180px;
        font-size: 13px;
        bottom: 120%;
    }
}

/* Ajuste dinámico para que la burbuja no se salga de la pantalla en móviles */
@media (max-width: 1023px) {
    .burbuja {
        left: auto; 
        right: auto;
        transform: translateX(0); /* inicial, se ajusta más adelante */
    }

    /* Si la burbuja está cerca del borde izquierdo */
    .burbuja.borde-izq {
        left: 5vw; 
    }

    /* Si la burbuja está cerca del borde derecho */
    .burbuja.borde-der {
        left: auto;
        right: 5vw;
    }
        .burbuja-extendida {
        width: 90vw !important;
        max-width: 320px !important;
        left: clamp(5vw, 50%, calc(100% - 5vw - 320px)) !important;
        transform: translateX(0) !important; /* se gestiona con clamp */
        bottom: 130px !important;
    }
}

/* --- BURBUJA EXTENDIDA --- */
.burbuja-extendida {
    width: 320px !important;
    max-width: 90vw !important;
    padding: 15px !important;
    background: #fffbe6 !important;
    border: 3px solid #ff9900 !important;
    color: #333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.burbuja-extendida div, .burbuja-extendida strong { color: #333 !important; }
.burbuja-extendida button { box-shadow: 0 2px 4px rgba(0,0,0,0.2); text-transform: uppercase; letter-spacing: 0.5px; }
.burbuja-extendida div::-webkit-scrollbar { width: 6px; }
.burbuja-extendida div::-webkit-scrollbar-thumb { background-color: #ff9900; border-radius: 10px; }
.burbuja-extendida::after { border-color: #ff9900 transparent transparent transparent !important; }

/* MISC */
#inputNombre:focus { outline: 2px solid #e67e22; }

/* BURBUJA SEGURIDAD */
.burbuja { bottom: 120px; }

.burbuja {
    visibility: hidden;
}

.burbuja.burbuja-visible {
    visibility: visible;
}

/* --- NUEVA ANIMACIÓN DE EXPLOSIÓN DETALLADA --- */

/* 1. Animación principal: Inflado tembloroso, cortado y parpadeante */
@keyframes inchar_y_shiver {
    0% { transform: scale(1.1) rotate(0deg); filter: brightness(1); border-radius: 50%; }
    5% { transform: scale(1.2) rotate(3deg); border-radius: 45% 55% 50% 50%; } /* Comienza a deformarse */
    10% { transform: scale(1.15) rotate(-3deg); border-radius: 55% 45% 50% 50%; }
    15% { transform: scale(1.3) rotate(3deg); filter: brightness(1.1) sepia(0.2); }
    20% { transform: scale(1.25) rotate(-3deg); }
    25% { transform: scale(1.4) rotate(3deg); }
    30% { transform: scale(1.35) rotate(-3deg); }
    35% { transform: scale(1.5) rotate(3deg); filter: brightness(1.2) sepia(0.4) hue-rotate(-20deg); }
    40% { transform: scale(1.45) rotate(-3deg); }
    45% { transform: scale(1.6) rotate(3deg); }
    50% { transform: scale(1.55) rotate(-3deg); }
    55% { transform: scale(1.7) rotate(3deg); filter: brightness(1.3) sepia(0.6) hue-rotate(-40deg); }
    60% { transform: scale(1.65) rotate(-3deg); }
    65% { transform: scale(1.8) rotate(3deg); }
    70% { transform: scale(1.75) rotate(-3deg); }
    75% { transform: scale(1.9) rotate(3deg); filter: brightness(1.4) sepia(0.8) hue-rotate(-60deg); }
    80% { transform: scale(1.85) rotate(-3deg); }
    85% { transform: scale(2.0) rotate(3deg); }
    90% { transform: scale(1.95) rotate(-3deg); }
    95% { transform: scale(2.2) rotate(3deg); filter: brightness(1.6) sepia(1) hue-rotate(-80deg); opacity: 1; }
    98% { transform: scale(2.3) rotate(-3deg); opacity: 1; }
    100% { transform: scale(2.4); filter: brightness(2) white; opacity: 0; } /* Momento exacto de la explosión */
}

/* 2. Animación para que las "partes" (ojos, brazos) salten en direcciones aleatorias */
@keyframes saltar_partes {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0; }
    95% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0; } /* Ocultas hasta el final */
    96% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } /* Aparecen justo antes de explotar */
    100% {
        /* Se dispersan en el momento de la explosión final */
        transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(var(--ds)) rotate(calc(var(--dr) * 1deg));
        opacity: 0; /* Desaparecen al alejarse */
    }
}

/* Clase que activa la animación principal de inflado cortado */
.explotando {
    animation: inchar_y_shiver 4s forwards linear !important; /* Animación más larga (4s) */
    pointer-events: none; /* Bloquea cualquier interacción durante la explosión */
    position: relative; /* Necesario para que las partes salten desde él */
}

/* Pseudo-elementos para simular las partes que saltan (ojos, brazos, etc.) */
/* Estos elementos se activan SOLO cuando .explotando está presente */
.explotando::before,
.explotando::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: #333; /* Color base de los ojos/partes */
    border-radius: 50%; /* Por defecto circulares como ojos */
    opacity: 0;
    pointer-events: none;
    
    /* Aplicamos la animación saltar_partes a ambos */
    animation: saltar_partes 4s forwards linear !important; /* Misma duración que la principal */
}

/* Ojo izquierdo saltando */
.explotando::before {
    width: 15px; height: 15px; /* Tamaño de un ojo */
    background-color: #f1c40f; /* Color pupila/brillo */
    border: 3px solid #333; /* Contorno del ojo */
    
    /* Variables personalizadas para la dirección del salto (--dx, --dy, --dr, --ds) */
    --dx: -120; /* Salta a la izquierda */
    --dy: -150; /* Salta hacia arriba */
    --dr: -360; /* Rota mucho */
    --ds: 0.5;  /* Se encoge */
}

/* Ojo derecho saltando */
.explotando::after {
    width: 15px; height: 15px; /* Tamaño de un ojo */
    background-color: #f1c40f; /* Color pupila/brillo */
    border: 3px solid #333; /* Contorno del ojo */
    
    --dx: 120;  /* Salta a la derecha */
    --dy: -150; /* Salta hacia arriba */
    --dr: 360;  /* Rota mucho */
    --ds: 0.5;  /* Se encoge */
}

/* --- CLASES ADICIONALES PARA LAS EXTREMIDADES VOLANDO --- */
/* (Usamos más pseudo-elementos en un contenedor hijo si fuera necesario, 
   pero para mantenerlo simple y sin tocar el HTML, usaremos los mismos ::before y ::after de arriba
   y crearemos dos más usando un truco con ::before::before si el navegador lo soporta, 
   o simplemente nos quedamos con los ojos y agregamos dos más con una clase hijo si la tienes) */

/* Como no queremos tocar el HTML, vamos a añadir dos partes más usando pseudo-elementos
   en el elemento `.escena` MISMO, ya que `.explotando` se aplica a `.escena`.
   Esto nos da 4 partes saltando en total. */

.escena.explotando > *::before,
.escena.explotando > *::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px; /* Más grandes, como brazos/piernas */
    height: 10px;
    background-color: #ff9900; /* Color naranja tropicalito */
    border-radius: 5px; /* Forma alargada */
    opacity: 0;
    pointer-events: none;
    animation: saltar_partes 4s forwards linear !important;
}

/* Brazo izquierdo saltando */
.escena.explotando > *::before {
    --dx: -150; /* Salta lejos a la izquierda */
    --dy: 50;   /* Salta un poco hacia abajo */
    --dr: -180; /* Rota media vuelta */
    --ds: 0.7;  /* Se encoge un poco */
}

/* Brazo derecho saltando */
.escena.explotando > *::after {
    --dx: 150;  /* Salta lejos a la derecha */
    --dy: 50;   /* Salta un poco hacia abajo */
    --dr: 180;  /* Rota media vuelta */
    --ds: 0.7;  /* Se encoge un poco */
}

/* --- ANIMACIÓN DE EXPLOSIÓN PRO --- */

@keyframes humo_pro_anim {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -120%) scale(2.5);
        opacity: 0;
        /* Dispersión de las sub-nubes */
        box-shadow: 
            30px -20px 20px 5px rgba(200, 200, 200, 0),
            -30px -10px 25px 8px rgba(180, 180, 180, 0),
            10px 20px 15px 5px rgba(220, 220, 220, 0),
            -15px 30px 20px 10px rgba(160, 160, 160, 0),
            40px 10px 30px 2px rgba(230, 230, 230, 0);
    }
}

.mostrar-humo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: rgba(230, 230, 230, 0.9);
    border-radius: 50%;
    z-index: 10001;
    pointer-events: none;
    
    /* Creamos el volumen inicial con sombras densas */
    box-shadow: 
        25px -15px 15px 2px rgba(200, 200, 200, 0.8),
        -20px -5px 20px 5px rgba(180, 180, 180, 0.7),
        5px 15px 10px 2px rgba(220, 220, 220, 0.8),
        -10px 20px 15px 8px rgba(160, 160, 160, 0.6),
        30px 5px 25px 0px rgba(230, 230, 230, 0.9);
    
    animation: humo_pro_anim 2.2s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: blur(2px);
}

/* Capa extra de partículas de "polvo" */
.mostrar-humo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    z-index: 10002;
    /* Generamos muchos puntitos con sombras */
    box-shadow: 
        40px 40px white, -40px -40px white, 
        50px -20px white, -30px 50px white,
        10px -60px white, -10px 60px white;
    opacity: 0;
    animation: particulas_pro 1.5s forwards ease-out;
    animation-delay: 0.1s;
}

@keyframes particulas_pro {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(10); opacity: 0; }
}