@keyframes pulsar {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

body {
    background-color: #111; /* grafite da galeria (--bg) */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#coracion {
    width: 420px; /* Increased the width by 20px */
    height: auto;
    animation: pulsar 1s infinite;
    margin: auto; /* Center the element within its container */
}

/* Canvas do three.js por cima do coração em SVG */
canvas.particulas {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* Botão de pausar (assets/pausa.js): pausado, o coração para de pulsar */
html.pausa-pausado #coracion { animation-play-state: paused; }

/* Quem pediu "reduzir movimento" vê o coração parado, mesmo se o script não carregar */
@media (prefers-reduced-motion: reduce) {
    html:not(.pausa-pronto) #coracion { animation: none; }
}

/* Paleta da galeria: o coração anatômico em off-white pra aparecer sobre o grafite */
#coracion svg path {
    fill: #e8e4da;
}