/**
 * FSP Utility Styles
 * Animations, accessibility, and responsive utilities
 *
 * @package Free_Style_Products
 */

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
.headwear-landing-page :focus-visible {
    outline: 2px solid var(--hw-primary);
    outline-offset: 2px;
}

.headwear-landing-page button:focus-visible,
.headwear-landing-page a:focus-visible,
.headwear-landing-page input:focus-visible,
.headwear-landing-page textarea:focus-visible {
    outline: 2px solid var(--hw-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive Section Padding
   ========================================================================== */

@media (max-width: 767.98px) {
    .headwear-landing section {
        padding: var(--hw-section-padding-mobile) 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 2rem;
    }
}