/* ============================================================
   NEXUS — Animations Layer (Light Tech)
   Reveals • floats • pulses • soft motion
   ============================================================ */

/* ---------- Scroll reveal ---------- */
[data-anim]{
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
}
[data-anim].animated{opacity:1;transform:translateY(0)}

[data-anim="fade-up"]{transform:translateY(28px)}
[data-anim="fade-up"].animated{transform:translateY(0)}

[data-anim="zoom-in"]{transform:scale(.96);opacity:0}
[data-anim="zoom-in"].animated{transform:scale(1);opacity:1}

[data-anim="slide-left"]{transform:translateX(-28px);opacity:0}
[data-anim="slide-left"].animated{transform:translateX(0);opacity:1}

[data-anim="slide-right"]{transform:translateX(28px);opacity:0}
[data-anim="slide-right"].animated{transform:translateX(0);opacity:1}

[data-anim="flip"]{
    transform:perspective(900px) rotateX(-14deg) translateY(24px);
    opacity:0;
}
[data-anim="flip"].animated{
    transform:perspective(900px) rotateX(0) translateY(0);
    opacity:1;
}

[data-anim]{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- Tilt ---------- */
.tilt-card{
    transform-style:preserve-3d;
    will-change:transform;
}

/* ---------- Section headers ---------- */
.section-header[data-anim] .section-chip,
.section-header[data-anim] .section-title,
.section-header[data-anim] .section-subtitle{
    opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.section-header.animated .section-chip{opacity:1;transform:translateY(0);transition-delay:.05s}
.section-header.animated .section-title{opacity:1;transform:translateY(0);transition-delay:.12s}
.section-header.animated .section-subtitle{opacity:1;transform:translateY(0);transition-delay:.2s}

/* ---------- Hero word stagger ---------- */
.hero-slide-title .word{
    display:inline-block;
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.hero-slide.active .hero-slide-title .word{
    opacity:1;
    transform:translateY(0);
}

/* ---------- Hero reveal sequence ---------- */
.hero-slide.active .hero-chip{animation:heroFade .7s .05s both cubic-bezier(.22,1,.36,1)}
.hero-slide.active .hero-slide-sub{animation:heroFade .7s .35s both cubic-bezier(.22,1,.36,1)}
.hero-slide.active .hero-slide-desc{animation:heroFade .7s .5s both cubic-bezier(.22,1,.36,1)}
.hero-slide.active .hero-slide-actions{animation:heroFade .7s .65s both cubic-bezier(.22,1,.36,1)}
.hero-slide.active .hero-slide-art{animation:heroArt .8s .2s both cubic-bezier(.22,1,.36,1)}

@keyframes heroFade{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes heroArt{
    from{opacity:0;transform:scale(.95) translateY(16px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}

/* ---------- Card hover lift ---------- */
@keyframes cardFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
}
.product-card:nth-child(3n) .product-image{animation:cardFloat 5s ease-in-out infinite}
.product-card:nth-child(3n+1) .product-image{animation:cardFloat 6s ease-in-out infinite .4s}
.product-card:nth-child(3n+2) .product-image{animation:cardFloat 5.5s ease-in-out infinite .8s}

/* ---------- Badge pulse ---------- */
.product-badge.new{animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.05)}
}

/* ---------- Node drift ---------- */
@keyframes nodeDrift{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(40px,-30px) scale(1.1)}
    66%{transform:translate(-30px,40px) scale(.94)}
}

/* ---------- Pulse ---------- */
@keyframes pulse{
    0%,100%{transform:scale(1);opacity:.6}
    70%{transform:scale(1.5);opacity:0}
    100%{transform:scale(1.5);opacity:0}
}

/* ---------- Badge float ---------- */
@keyframes floatBadge{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

/* ---------- Ticker ---------- */
@keyframes tickerScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* ---------- Glow pulse ---------- */
@keyframes glowPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5),0 8px 24px rgba(37,211,102,.2)}
    50%{box-shadow:0 0 0 12px rgba(37,211,102,0),0 8px 24px rgba(37,211,102,.2)}
}

/* ---------- Data stream ---------- */
@keyframes dataStream{
    0%{background-position:0 0}
    100%{background-position:300% 0}
}

/* ---------- Fade in ---------- */
@keyframes fadeIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}

/* ---------- Alert slide ---------- */
@keyframes alertSlide{
    from{transform:translateX(100%);opacity:0}
    to{transform:translateX(0);opacity:1}
}

/* ---------- Ripple ---------- */
@keyframes ripple{
    to{transform:scale(4);opacity:0}
}

/* ---------- Shimmer ---------- */
.img-shimmer{
    background:linear-gradient(
        90deg,
        rgba(241,245,249,.6) 0%,
        rgba(255,255,255,.9) 50%,
        rgba(241,245,249,.6) 100%
    );
    background-size:200% 100%;
    animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

/* ---------- Carousel replay ---------- */
.hero-slide.replay .hero-chip,
.hero-slide.replay .hero-slide-sub,
.hero-slide.replay .hero-slide-desc,
.hero-slide.replay .hero-slide-actions,
.hero-slide.replay .hero-slide-art{
    animation:none;
}
.hero-slide.replay.active .hero-chip{animation:heroFade .7s .05s both cubic-bezier(.22,1,.36,1)}
.hero-slide.replay.active .hero-slide-sub{animation:heroFade .7s .35s both cubic-bezier(.22,1,.36,1)}
.hero-slide.replay.active .hero-slide-desc{animation:heroFade .7s .5s both cubic-bezier(.22,1,.36,1)}
.hero-slide.replay.active .hero-slide-actions{animation:heroFade .7s .65s both cubic-bezier(.22,1,.36,1)}
.hero-slide.replay.active .hero-slide-art{animation:heroArt .8s .2s both cubic-bezier(.22,1,.36,1)}

/* ---------- Reduce motion (a11y) ---------- */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
    }
}