/* Shared UX animation layer for generated storefront pages */
:root {
    --ux-reveal-distance: 22px;
    --ux-reveal-scale: 0.985;
    --ux-reveal-duration: 550ms;
    --ux-hover-lift-distance: -4px;
    --ux-hover-shadow: 0 12px 28px rgba(17, 18, 34, 0.12);
    --ux-fade-duration: 450ms;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(var(--ux-reveal-distance)) scale(var(--ux-reveal-scale));
    transition: opacity var(--ux-reveal-duration) ease, transform var(--ux-reveal-duration) ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ux-hover-lift {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.ux-hover-lift:hover {
    transform: translateY(var(--ux-hover-lift-distance));
    box-shadow: var(--ux-hover-shadow);
}

.ux-fade-in {
    animation: uxFadeIn var(--ux-fade-duration) ease both;
}

@keyframes uxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Global readability and navigation consistency */
body {
    line-height: 1.6;
}

main h1 {
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem) !important;
}

main h2 {
    font-size: clamp(1.45rem, 1.1rem + 0.8vw, 2rem) !important;
}

main h3 {
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem) !important;
}

main p,
main li,
main label,
main input,
main textarea,
main select,
main button {
    font-size: 1rem;
    line-height: 1.65;
}

#navLinks a,
#navLinks .nav-link-button {
    position: relative;
    display: block;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.24s ease, transform 0.24s ease;
}

#navLinks li {
    display: flex;
    align-items: center;
}

#navLinks .logout-nav-form {
    margin: 0;
    display: flex;
    align-items: center;
}

#navLinks .logout-nav-form .nav-link-button {
    text-align: left;
    width: 100%;
}

@media (min-width: 1024px) {
    #navLinks .logout-nav-form .nav-link-button {
        width: auto;
    }
}

#navLinks a::after,
#navLinks .nav-link-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15rem;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: #717FE0;
    transition: transform 0.24s ease;
}

#navLinks a:hover,
#navLinks a:focus-visible,
#navLinks .nav-link-button:hover,
#navLinks .nav-link-button:focus-visible {
    color: #717FE0 !important;
    transform: translateY(-1px);
}

#navLinks a:hover::after,
#navLinks a:focus-visible::after,
#navLinks .nav-link-button:hover::after,
#navLinks .nav-link-button:focus-visible::after {
    transform: scaleX(1);
}