/**
 * Responsive & Animation Stylesheet (fmsph3_063321.css)
 *
 * Contains media queries for fine-tuning the design on different devices
 * and custom @keyframes animations for unique visual effects.
 *
 * Sitename: fmsph
 * Seed: 063321
 */

/* 1. Media Queries for Responsiveness
-------------------------------------------------- */

/* For smaller tablets and large phones */
@media (max-width: 768px) {
    .fmsph-hero-title {
        font-size: 2.8rem; /* Further reduce hero title on mobile */
    }
    .fmsph-section-title {
        font-size: 2rem; /* Reduce all section titles */
    }
    .fmsph-footer-title {
        font-size: 1.5rem;
    }
    .fmsph-footer {
        text-align: center;
    }
    .fmsph-footer-list {
        margin-bottom: 2rem;
    }
    .fmsph-navbar-actions {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
    }
    .fmsph-navbar-actions .fmsph-btn {
        flex-grow: 1;
    }
}

/* For small mobile phones */
@media (max-width: 576px) {
    .fmsph-hero-title {
        font-size: 2.2rem;
    }
    .fmsph-hero-subtitle {
        font-size: 1.1rem;
    }
    .fmsph-age-modal-actions {
        flex-direction: column;
    }
    .fmsph-game-page-header .fmsph-section-title {
        font-size: 1.8rem;
    }
}


/* 2. Custom CSS Keyframe Animations
-------------------------------------------------- */

/* A simple fade-in and slide-up animation */
@keyframes fmsph-fade-in-up-063321 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A pulsing glow effect for buttons or icons */
@keyframes fmsph-pulse-glow-063321 {
    0% {
        box-shadow: 0 0 5px rgba(109, 93, 211, 0.2), 0 0 10px rgba(109, 93, 211, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(109, 93, 211, 0.5), 0 0 25px rgba(109, 93, 211, 0.5);
    }
    100% {
        box-shadow: 0 0 5px rgba(109, 93, 211, 0.2), 0 0 10px rgba(109, 93, 211, 0.2);
    }
}

/* A gentle floating animation */
@keyframes fmsph-subtle-float-063321 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* A subtle flicker for neon text */
@keyframes fmsph-neon-flicker-063321 {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px var(--fmsph-color-accent-neon),
            0 0 10px var(--fmsph-color-accent-neon),
            0 0 20px var(--fmsph-color-primary),
            0 0 40px var(--fmsph-color-primary);
        color: var(--fmsph-color-accent-neon);
    }
    20%, 24%, 55% {
        text-shadow: none;
        color: #aaa;
    }
}


/* 3. Animation Utility Classes
-------------------------------------------------- */

/* Example of how to apply the animations */
.fmsph-animate-float {
    animation: fmsph-subtle-float-063321 4s ease-in-out infinite;
}

.fmsph-animate-glow {
    animation: fmsph-pulse-glow-063321 3s infinite;
}

.fmsph-hero-tagline {
    /* Applying the neon flicker to the hero tagline */
    animation: fmsph-neon-flicker-063321 5s infinite alternate;
}