/* ==========================================================================
   JAY ELECTRONIX  -  enhancements.css
   Animation layer only: keyframes + scroll-reveal + entrance choreography.
   Kept separate from layout (main.css) per the project's fix-block rules.
   ========================================================================== */

/* ----------  KEYFRAMES  ---------- */
@keyframes jelx-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes jelx-fade{from{opacity:0}to{opacity:1}}
@keyframes jelx-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes jelx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes jelx-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes jelx-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ----------  SCROLL REVEAL  ---------- */
.jelx-js .jelx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease,cubic-bezier(.16,1,.3,1)),transform .7s var(--ease,cubic-bezier(.16,1,.3,1))}
.jelx-js .jelx-reveal.is-in{opacity:1;transform:translateY(0)}

/* Stagger children when the parent enters. */
.jelx-js .jelx-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),transform .6s var(--ease,cubic-bezier(.16,1,.3,1))}
.jelx-js .jelx-stagger.is-in>*{opacity:1;transform:translateY(0)}
.jelx-stagger.is-in>*:nth-child(1){transition-delay:.04s}
.jelx-stagger.is-in>*:nth-child(2){transition-delay:.10s}
.jelx-stagger.is-in>*:nth-child(3){transition-delay:.16s}
.jelx-stagger.is-in>*:nth-child(4){transition-delay:.22s}
.jelx-stagger.is-in>*:nth-child(5){transition-delay:.28s}
.jelx-stagger.is-in>*:nth-child(6){transition-delay:.34s}
.jelx-stagger.is-in>*:nth-child(7){transition-delay:.40s}
.jelx-stagger.is-in>*:nth-child(8){transition-delay:.46s}

/* Hero choreography on first paint. */
.jelx-hero__eyebrow{animation:jelx-fade-up .7s var(--ease,ease) both}
.jelx-hero__title{animation:jelx-fade-up .7s var(--ease,ease) .08s both}
.jelx-hero__sub{animation:jelx-fade-up .7s var(--ease,ease) .16s both}
.jelx-hero__cta{animation:jelx-fade-up .7s var(--ease,ease) .24s both}
.jelx-hero__stats{animation:jelx-fade-up .7s var(--ease,ease) .32s both}
.jelx-hero__media{animation:jelx-scale-in .9s var(--ease,ease) .2s both}
.jelx-hero__card--1{animation:jelx-float 5s ease-in-out 1s infinite}
.jelx-hero__card--2{animation:jelx-float 6s ease-in-out 1.4s infinite}

/* Cart pill pop when count changes (toggled by JS). */
.jelx-pill.is-bump{animation:jelx-pop .4s var(--ease,ease)}

/* Toast */
.jelx-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:3000;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--ink-inv);padding:13px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);font-weight:600;font-size:.9rem;transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1));max-width:90vw}
.jelx-toast.is-visible{transform:translate(-50%,0)}
.jelx-toast .jelx-icon{color:var(--accent)}
@media (max-width:768px){.jelx-toast{bottom:auto;top:18px;transform:translate(-50%,-140%)}.jelx-toast.is-visible{transform:translate(-50%,0)}}

/* Skeleton shimmer for async areas. */
.jelx-skel{position:relative;overflow:hidden;background:var(--bg-mute);border-radius:10px}
.jelx-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:jelx-shimmer 1.3s infinite}
@keyframes jelx-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
	.jelx-reveal,.jelx-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
	.jelx-hero__eyebrow,.jelx-hero__title,.jelx-hero__sub,.jelx-hero__cta,.jelx-hero__stats,.jelx-hero__media,.jelx-hero__card--1,.jelx-hero__card--2,.jelx-brands__track{animation:none!important}
}