/* =============================================================
   SHUVINO — Signature FX / Animations (additive layer)
   ============================================================= */

/* ---------- Scroll progress bar ---------- */
.sh-scrollbar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 1200;
    background: linear-gradient(90deg, var(--sh-blue), var(--sh-teal) 50%, var(--sh-orange));
    box-shadow: 0 0 10px rgba(15,167,160,.5); transition: width .1s linear;
}

/* ---------- Animated gradient text ---------- */
.sh-grad-text {
    background: linear-gradient(100deg, #FFCB8E, #FFE7C4 30%, #FFCB8E 60%, #FFB86B);
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: sh-shine-text 5s linear infinite;
}
@keyframes sh-shine-text { to { background-position: 220% center; } }

/* on-light variant */
.sh-grad-text--brand {
    background-image: linear-gradient(100deg, var(--sh-blue), var(--sh-teal) 45%, var(--sh-orange) 80%, var(--sh-blue));
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: sh-shine-text 6s linear infinite;
}

/* ---------- Floating hero orbs ---------- */
.sh-hero__main::before { animation: sh-orb1 11s ease-in-out infinite; }
.sh-hero__main::after  { animation: sh-orb2 13s ease-in-out infinite; }
@keyframes sh-orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-26px,34px) scale(1.12);} }
@keyframes sh-orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-28px) scale(1.15);} }

/* subtle animated grid sheen over hero */
.sh-hero__main .sh-hero__spark {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent),
        radial-gradient(2px 2px at 68% 22%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.6px 1.6px at 42% 72%, rgba(255,255,255,.8), transparent),
        radial-gradient(1.6px 1.6px at 82% 62%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.4px 1.4px at 12% 82%, rgba(255,255,255,.7), transparent);
    animation: sh-twinkle 4s ease-in-out infinite alternate;
}
@keyframes sh-twinkle { from { opacity: .25; } to { opacity: .7; } }

/* Cursor spotlight on hero (JS sets --mx/--my) */
.sh-hero__main .sh-hero__glow {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 60%);
    transition: opacity .4s var(--sh-ease);
}
.sh-hero__main:hover .sh-hero__glow { opacity: 1; }

/* ---------- 3D Tilt cards + glare ---------- */
.sh-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .18s var(--sh-ease), box-shadow var(--sh-mid) var(--sh-ease); }
.sh-tilt.is-tilting { transition: box-shadow var(--sh-mid) var(--sh-ease); }
.sh-tilt .sh-card__body, .sh-tilt .sh-card__media { transform: translateZ(0); }
.sh-card__glare {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
    background: radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.35), transparent 60%);
    transition: opacity .25s var(--sh-ease);
}
.sh-tilt.is-tilting .sh-card__glare { opacity: 1; }

/* ---------- Magnetic buttons ---------- */
[data-magnetic] { will-change: transform; transition: transform .25s var(--sh-ease); }

/* ---------- Click ripple ---------- */
.sh-ripple-host { position: relative; overflow: hidden; }
.sh-ripple {
    position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0);
    background: rgba(255,255,255,.5); pointer-events: none; animation: sh-ripple .6s var(--sh-ease) forwards;
}
@keyframes sh-ripple { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ---------- Staggered reveal ---------- */
.sh-reveal { transition-delay: calc(var(--sh-i, 0) * 70ms); }

/* fade + zoom variant */
.sh-reveal--zoom { transform: translateY(26px) scale(.96); }
.sh-reveal--zoom.is-in { transform: none; }

/* ---------- Price drop pulse (group cards) ---------- */
.sh-card__price .now { position: relative; }
.sh-drop-flag {
    position: absolute; top: -10px; right: -6px; transform: translateX(100%);
    font-size: .58rem; font-weight: 800; color: #fff; background: var(--sh-danger);
    padding: 2px 6px; border-radius: 999px; white-space: nowrap; opacity: 0;
    animation: sh-dropflag 3.4s var(--sh-ease) infinite;
}
@keyframes sh-dropflag { 0%,70%{opacity:0;transform:translateX(100%) translateY(4px);} 78%,92%{opacity:1;transform:translateX(100%) translateY(0);} 100%{opacity:0;} }

/* progress bar shine */
.sh-progress { position: relative; }
.sh-progress > span::after {
    content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    animation: sh-progshine 2.4s var(--sh-ease) infinite;
}
@keyframes sh-progshine { 0%{transform:translateX(-40px);} 100%{transform:translateX(260px);} }

/* ---------- Infinite marquee ---------- */
.sh-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sh-marquee__track { display: flex; gap: 14px; width: max-content; animation: sh-marquee 34s linear infinite; }
.sh-marquee:hover .sh-marquee__track { animation-play-state: paused; }
@keyframes sh-marquee { to { transform: translateX(-50%); } }
.sh-marquee__item {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--sh-r-pill);
    background: #fff; border: 1px solid var(--sh-line); box-shadow: var(--sh-shadow-xs); white-space: nowrap;
    font-weight: 700; color: var(--sh-ink); font-size: .9rem;
}
.sh-marquee__item i { font-size: 1.2rem; }
.sh-marquee__item .c1 { color: var(--sh-blue); } .sh-marquee__item .c2 { color: var(--sh-orange); } .sh-marquee__item .c3 { color: var(--sh-teal); }

/* ---------- Live social proof ticker ---------- */
.sh-liveproof {
    position: fixed; left: 20px; bottom: 20px; z-index: 750; display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--sh-line); border-left: 4px solid var(--sh-teal);
    border-radius: 14px; padding: 11px 16px 11px 12px; box-shadow: var(--sh-shadow-lg); max-width: 320px;
    transform: translateY(140%); opacity: 0; transition: transform .5s var(--sh-ease), opacity .4s var(--sh-ease);
}
.sh-liveproof.is-show { transform: none; opacity: 1; }
.sh-liveproof__av { position: relative; flex: none; }
.sh-liveproof__av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.sh-liveproof__dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--sh-success); border: 2px solid #fff; }
.sh-liveproof__dot::after { content:""; position:absolute; inset:0; border-radius:50%; background: var(--sh-success); animation: sh-pulse 1.4s infinite; }
.sh-liveproof__t { font-size: .84rem; line-height: 1.35; color: var(--sh-ink); }
.sh-liveproof__t b { color: var(--sh-blue); }
.sh-liveproof__t small { display: block; color: var(--sh-muted); font-size: .72rem; margin-top: 2px; }
@media (max-width: 768px){ .sh-liveproof{ bottom: 78px; left: 12px; right: 12px; max-width: none; } }

/* ---------- Confetti canvas ---------- */
.sh-confetti { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sh-grad-text, .sh-grad-text--brand, .sh-hero__main::before, .sh-hero__main::after,
    .sh-hero__spark, .sh-drop-flag, .sh-progress > span::after, .sh-marquee__track { animation: none !important; }
    .sh-tilt { transform: none !important; }
}