/* Declaración de tu fuente local .woff2 */
@font-face {
    font-family: 'CrayonCustom';
    src: url('JMH\ Typewriter.ttf') format('ttf'); /* Reemplaza 'tu-fuente.woff2' por el nombre real de tu archivo */
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-circus: #222;
    --color-circus-yellow: #ffffff;
    --font-crayon: 'CrayonCustom', cursive;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-crayon);
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(66, 66, 66, 0.5) inset;
}

/* Contenedor fijo que cubre toda la pantalla de fondo */
.fondo-textura {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -10;
    pointer-events: none; /* Evita que el fondo interfiera con los clics en la web */
}

.dev-credit {
    opacity: 0.6 !important;
}

.mandibula-superior {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 81;
    pointer-events: none;
    animation: abrirArriba 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
        .mandibula-inferior {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 80;
            pointer-events: none;
            animation: abrirAbajo 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* 3. Contenedor con la proporción exacta del original (124vh) */
        .contenedor-proporcion {
            position: relative;
            margin: 0 auto;
            width: min(100vw, 124vh); /* <- Esto era lo que faltaba */
        }

        .img-mandibula {
            display: block;
            width: 100%;
            user-select: none;
            
            /* Máscara para difuminar los bordes exteriores hacia transparente */
            -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 45%, transparent 70%);
            mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 45%, transparent 90%);
        }


        /* 4. Dientes Interactivos con los porcentajes milimétricos originales */
        .diente-link {
            position: absolute;
            pointer-events: auto;
        }
        /* Aplicamos la animación a las imágenes dentro de .diente-link */
.diente-link img {
    /* Nombre de la animación, duración, tipo de suavizado (ease-in-out) y repetición infinita */
    animation: palpitar 1.8s ease-in-out infinite;
    
    /* Aseguramos que la transición de hover no interfiera con la animación */
    transition: transform 0.3s ease;
    will-change: transform; /* Optimización para el navegador */
}

/* Detenemos la animación al pasar el ratón (para no marear al usuario y priorizar el hover) */
.diente-link:hover img {
    animation-play-state: paused;
    transform: scale(1.1) rotate(-3deg); /* Mantenemos el efecto de tu hover original */
}
        
        .flechas-movil-container {
            display: none; /* Oculto por defecto en computadoras */
        }
        @media (max-width: 768px) {
            .flechas-movil-container {
                display: contents; /* Se activa únicamente en pantallas menores a 768px */
            }
        }

        @keyframes palpitar {
    0% {
        transform: scale(1); /* Tamaño normal */
        filter: brightness(1);
    }
    50% {
        transform: scale(1.15); /* Ligeramente más grande (expansión) */
        filter: brightness(1.1); /* Un pequeño brillo extra para el efecto */
    }
    100% {
        transform: scale(1); /* Vuelve al tamaño normal (contracción) */
        filter: brightness(1);
    }
}

        /* Animaciones de apertura */
        @keyframes abrirArriba {
            0% { transform: translateY(25vh); }
            100% { transform: translateY(0); }
        }
        @keyframes abrirAbajo {
            0% { transform: translateY(-25vh); }
            100% { transform: translateY(0); }
        }
/* Color rojo de fondo (Puedes cambiar el hex por tu rojo exacto) */
.fondo-color-rojo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(2,2,2, 0.95); 
}

/* Configuraciones generales para que los SVG ocupen toda la pantalla */
.fondo-textura svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* Opacidades y modos de mezcla extraídos del código original */
.grano-fino { 
    opacity: 0.9; 
    mix-blend-mode: overlay; 
}
.grano-sal { 
    opacity: 0.6; 
    mix-blend-mode: overlay; 
}
.grano-medio { 
    opacity: 0.8; 
    mix-blend-mode: multiply; 
}
.grano-grueso { 
    opacity: 0.6; 
    mix-blend-mode: multiply; 
}

/* Contenedor de la boca superior */
.mouth-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 81;
    pointer-events: none;
    user-select: none;
    display: flex;
    justify-content: center;
}

.mouth-top-inner {
    position: relative;
    width: min(100vw, 124vh);
    display: flex;
    justify-content: center;
}

.mouth-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dientes interactivos */
.tooth {
    position: absolute;
    pointer-events: auto;
}

.tooth img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;
}

.tooth-left {
    left: 35.465%;
    top: 15.077%;
    width: 15.762%;
}
.tooth-left img:hover {
    transform: rotate(-3deg) scale(1.1);
}
.tooth-left img:active {
    transform: rotate(-6deg) scale(1.25);
}

.tooth-right {
    left: 51.264%;
    top: 16.615%;
    width: 15.688%;
}
.tooth-right img:hover {
    transform: rotate(3deg) scale(1.1);
}
.tooth-right img:active {
    transform: rotate(6deg) scale(1.25);
}

/* Contenedor de la boca inferior */
.mouth-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 80;
    pointer-events: none;
    user-select: none;
    display: flex;
    justify-content: center;
}

.mouth-bottom-inner {
    position: relative;
    width: min(100vw, 124vh);
}

/* Sección Central / Contenido */
main {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.titulo {
    font-size: clamp(3.5rem, 12vw, 5.4rem);
}

h1 {
    font-size: 35px;
    color: var(--color-circus-yellow);
    transform: rotate(-1deg);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Botones de reproducción centrales */
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.controls button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-circus-yellow);
    transition: transform 0.1s ease;
}

.controls button:active {
    transform: scale(0.9);
}

.controls svg {
    width: 40px;
    height: 40px;
    fill: rgba(255, 217, 0, 0.35);
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.controls .play-icon {
    width: 48px;
    height: 48px;
}

/* Créditos móviles */
.dev-credit {
    position: absolute;
    bottom: 25vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #111;
    font-family: sans-serif;
    display: none;
}

@media (max-width: 768px) {
    .dev-credit {
        display: block;
    }
}