/* =========================================================
   STOREFRONT — Animations & Micro-interactions
   ========================================================= */

/* Fade + Slide Up (for scroll reveals) */
@keyframes sf-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sf-scale-in {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

.sf-animate { opacity: 0; }
.sf-animate--visible { animation: sf-fade-up .6s ease forwards; }
.sf-animate--fade { animation: sf-fade-in .4s ease forwards; }
.sf-animate--scale { animation: sf-scale-in .3s ease forwards; }

/* Stagger delays */
.sf-stagger > *:nth-child(1) { animation-delay: .05s; }
.sf-stagger > *:nth-child(2) { animation-delay: .1s; }
.sf-stagger > *:nth-child(3) { animation-delay: .15s; }
.sf-stagger > *:nth-child(4) { animation-delay: .2s; }
.sf-stagger > *:nth-child(5) { animation-delay: .25s; }
.sf-stagger > *:nth-child(6) { animation-delay: .3s; }
.sf-stagger > *:nth-child(7) { animation-delay: .35s; }
.sf-stagger > *:nth-child(8) { animation-delay: .4s; }

/* Skeleton loading */
@keyframes sf-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.sf-skeleton {
    background: linear-gradient(90deg, var(--wl-border) 25%, var(--wl-bg) 50%, var(--wl-border) 75%);
    background-size: 200% 100%;
    animation: sf-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}
.sf-skeleton--text { height: 14px; width: 80%; margin-bottom: 8px; }
.sf-skeleton--title { height: 20px; width: 60%; margin-bottom: 12px; }
.sf-skeleton--price { height: 18px; width: 40%; }
.sf-skeleton--img { aspect-ratio: 3/4; width: 100%; border-radius: 12px; }
.sf-skeleton--card { padding: 16px; }
.sf-skeleton--hero { height: 60vh; border-radius: 0; }

/* Toast notification */
.sf-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sf-toast {
    background: var(--wl-text);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    pointer-events: auto;
    animation: sf-toast-in .3s ease, sf-toast-out .3s ease 2.7s forwards;
}
.sf-toast a { color: var(--wl-accent); font-weight: 600; text-decoration: underline; white-space: nowrap; }
@keyframes sf-toast-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sf-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(.95); }
}

/* Hero parallax effect */
.sf-hero { overflow: hidden; }
.sf-hero__media { transform: scale(1.1); transition: transform 10s ease; }
.sf-hero:hover .sf-hero__media { transform: scale(1); }

/* Button click feedback */
.sf-btn:active { transform: scale(.97); }

/* Image zoom on hover */
.sf-card__img { overflow: hidden; }
.sf-card__img img { transition: transform .4s ease; }
.sf-card:hover .sf-card__img img { transform: scale(1.08); }

/* Cart badge bounce */
@keyframes sf-badge-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.sf-badge-bounce { animation: sf-badge-bounce .3s ease; }