/* === assets/css/pages/home-page.css === */

.main-page-logo {
    display: block; /* Makes the image a block element */
    margin: var(--spacing-xxl) auto var(--spacing-l) auto; /* Centers horizontally, adds space above and below */
    max-width: 300px; /* Adjust this value to control the logo's size */
    width: 100%; /* Ensures it scales down on smaller screens */
    height: auto; /* Maintains aspect ratio */
    filter: drop-shadow(0 0 15px var(--color-accent-glow)) drop-shadow(0 0 25px var(--color-highlight-cyber)); /* Adds a glowing effect */
    animation: pulseMainLogoGlow 2s infinite alternate; /* Optional: adds a pulse animation */
}

@keyframes pulseMainLogoGlow {
    0% { filter: drop-shadow(0 0 10px var(--color-accent-glow)) drop-shadow(0 0 15px var(--color-highlight-cyber)); }
    100% { filter: drop-shadow(0 0 20px var(--color-accent-glow)) drop-shadow(0 0 30px var(--color-highlight-cyber)); }
}