/* Shared motion layer. Elements remain fully visible when JavaScript is unavailable. */
:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hero-shift: 0px;
}

.page-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 2000;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #2f80ed, #ffd43b, #ff4d6d);
    box-shadow: 0 0 12px rgba(47, 128, 237, 0.7);
}

.motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.985);
    transition:
        opacity 700ms var(--motion-ease),
        transform 700ms var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready .motion-reveal[data-motion="left"] {
    transform: translate3d(-42px, 0, 0);
}

.motion-ready .motion-reveal[data-motion="right"] {
    transform: translate3d(42px, 0, 0);
}

.motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

.motion-ready .hero-badge,
.motion-ready .login-badge {
    animation: badge-float 3s ease-in-out infinite;
}

.motion-ready .pulse-ring,
.motion-ready .status-dot {
    animation: signal-pulse 1.8s ease-out infinite;
}

.motion-ready .product-img,
.motion-ready .nav-logo {
    transition: transform 400ms var(--motion-ease), filter 400ms ease;
}

.motion-ready .hero {
    background-position: center calc(50% + var(--hero-shift));
}

.motion-ready .store-card:hover .product-img,
.motion-ready .logo-container:hover .nav-logo {
    transform: translateY(-6px) rotate(-2deg) scale(1.05);
    filter: drop-shadow(0 10px 12px rgba(22, 50, 92, 0.22));
}

.ripple-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.motion-ripple {
    position: absolute;
    z-index: 0;
    width: 12px;
    height: 12px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-out 650ms ease-out forwards;
}

.login-card.motion-success {
    animation: success-pop 600ms var(--motion-ease);
}

@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes signal-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.55); }
    70%, 100% { box-shadow: 0 0 0 12px rgba(47, 128, 237, 0); }
}

@keyframes ripple-out {
    to { opacity: 0; transform: translate(-50%, -50%) scale(24); }
}

@keyframes success-pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.018); box-shadow: 0 20px 55px rgba(47, 128, 237, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }

    .page-progress,
    .motion-ready .motion-reveal,
    .motion-ready .hero-badge,
    .motion-ready .login-badge,
    .motion-ready .pulse-ring,
    .motion-ready .status-dot,
    .motion-ready .product-img,
    .motion-ready .nav-logo,
    .motion-ripple,
    .login-card.motion-success {
        animation: none !important;
        transition: none !important;
    }

    .motion-ready .motion-reveal {
        opacity: 1;
        transform: none;
    }
}