/* =============================================================================
   animations.css — shared entrance & micro-interaction layer.

   Principles:
     • Only `transform` / `opacity` are animated (GPU-friendly, no layout thrash).
     • Entrances are gated behind `html.js` so content is fully visible if
       JavaScript is disabled (no hidden content).
     • Everything is disabled under `prefers-reduced-motion: reduce`.
   Loaded on both the storefront and the admin panel.
   ========================================================================== */

/* ---- Soft page transition ------------------------------------------------ */
/* Cross-document view transitions (Chrome/Edge); harmless elsewhere. */
@view-transition { navigation: auto; }
/* Subtle fade-in fallback for browsers without view transitions. */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .35s ease both; }

/* ---- Scroll reveal ------------------------------------------------------- */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ---- Hero entrance (home) ------------------------------------------------ */
html.js .hero-copy > * { opacity: 0; animation: heroUp .7s cubic-bezier(.4, 0, .2, 1) forwards; }
html.js .hero-copy > *:nth-child(1) { animation-delay: .05s; }
html.js .hero-copy > *:nth-child(2) { animation-delay: .16s; }
html.js .hero-copy > *:nth-child(3) { animation-delay: .27s; }
html.js .hero-copy > *:nth-child(4) { animation-delay: .38s; }
html.js .hero-copy > *:nth-child(5) { animation-delay: .49s; }
html.js .hero-art { opacity: 0; animation: heroFade 1s ease .25s forwards; }
@keyframes heroUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: scale(.96); }       to { opacity: 1; transform: none; } }

/* Gentle continuous float on the layered hero cards / badge. */
html.js .hero-card-main   { animation: floatY 6s ease-in-out 1s   infinite; }
html.js .hero-card-mini   { animation: floatY 5s ease-in-out 1.3s infinite; }
html.js .hero-badge-float { animation: floatY 7s ease-in-out 1.6s infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ---- Micro-interactions -------------------------------------------------- */
/* Button hover lift (refines the existing press animation). */
.btn-primary, .btn-outline { transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn-primary:hover, .btn-outline:hover { transform: translateY(-2px); }

/* Cart badge "bump" when the count changes (class toggled by JS). */
.cart-badge.bump { animation: badgeBump .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes badgeBump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* Colour / size swatch selection pop. */
.color-opt input:checked + .swatch.lg,
.size-opt input:checked + span { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* Quantity stepper number pop (class toggled by JS). */
.qty-stepper input.pulse { animation: pop .25s ease; }

/* ---- Product gallery crossfade ------------------------------------------- */
.gallery-main img { transition: opacity .3s ease, transform .5s cubic-bezier(.4, 0, .2, 1); }
.gallery-main img.swapping { opacity: 0; }

/* ---- Fly-to-cart clone --------------------------------------------------- */
.fly-img {
    position: fixed; z-index: 3000; border-radius: 12px; object-fit: cover; pointer-events: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    transition: transform .8s cubic-bezier(.5, -0.2, .3, 1), opacity .8s ease;
    will-change: transform, opacity;
}

/* ---- Skeleton loaders (shop filters) ------------------------------------- */
.skeleton-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sk { position: relative; overflow: hidden; background: var(--surface-2); }
.sk::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: shimmer 1.3s infinite;
}
.sk-media { aspect-ratio: 4 / 5; }
.sk-line { height: 12px; border-radius: 6px; margin: 12px 16px; }
.sk-line.short { width: 40%; }
.sk-line.long  { width: 75%; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Admin entrance ------------------------------------------------------ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.js .admin-body .kpi-card,
html.js .admin-body .panel,
html.js .admin-body .filters-bar,
html.js .admin-body .stat-headline { animation: fadeUp .5s cubic-bezier(.4, 0, .2, 1) both; }
html.js .admin-body .kpi-grid .kpi-card:nth-child(2) { animation-delay: .05s; }
html.js .admin-body .kpi-grid .kpi-card:nth-child(3) { animation-delay: .10s; }
html.js .admin-body .kpi-grid .kpi-card:nth-child(4) { animation-delay: .15s; }
html.js .admin-body .kpi-grid .kpi-card:nth-child(5) { animation-delay: .20s; }
html.js .admin-body .kpi-grid .kpi-card:nth-child(6) { animation-delay: .25s; }

/* ---- Respect reduced-motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
    html.js .hero-copy > *, html.js .hero-art { opacity: 1 !important; animation: none !important; }
    .fly-img { display: none !important; }
}