/* MVTREND — MOTION (Diwali-free). Sab kuch body.mvfx ke andar; mobile par bhi chalta hai. */
html{overflow-x:hidden}body{overflow-x:clip}

/* ===== fx canvas, progress ===== */
.mv-prog{position:fixed;left:0;top:0;height:4px;width:0;z-index:120;background:linear-gradient(90deg,#7c4dff,#ff4d8d,#ff9f1c,#ffd24d);box-shadow:0 0 12px #ff4d8d}
.mv-prog::after{content:"";position:absolute;right:-6px;top:-5px;width:14px;height:14px;border-radius:50%;background:radial-gradient(#fff,#ffd24d 50%,transparent 70%);animation:mvGlow .5s infinite alternate}

/* ===== floating balloons ===== */

/* ===== party lights (header) ===== */

/* ===== bunting + mandala + badges (hero) ===== */

/* ===== ticker (sliding strip) ===== */
.mv-ticker{max-width:1240px;margin:-10px auto 20px;overflow:hidden;border-radius:14px;background:linear-gradient(90deg,#3b1d8f,#c2185b,#ff7a18);color:#fff;box-shadow:0 12px 30px #c2185b44;padding:11px 0;position:relative}
.mv-ticker .tr{display:flex;width:max-content;gap:40px;white-space:nowrap;font:800 13px 'DM Sans',sans-serif;letter-spacing:.06em;animation:mvMarq 36s linear infinite}
@media(max-width:650px){.mv-ticker{margin:-8px 12px 18px}}

/* ===== slide-in on scroll ===== */
.mv-rv{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.96);animation:none!important;will-change:transform,opacity}
.mv-rv.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0s)}
.mv-done{animation:none!important}

/* ===== effects: har element ka alag animation ===== */
body.mvfx .announcement{font-weight:700}
body.mvfx header{padding-bottom:6px}
body.mvfx .hero h1 em{background:linear-gradient(90deg,#fff3a6,#ffd24d,#ff9ac8,#ffd24d,#fff3a6);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mvShine 3.2s linear infinite;filter:drop-shadow(0 0 14px #ffb34788)}
body.mvfx .hero .eyebrow{animation:mvFlick 2.4s infinite}
body.mvfx .hero-chip{transform-origin:50% -30px;animation:mvSwing 2.8s ease-in-out infinite alternate}
body.mvfx .orbit{border:1.5px dashed #ffffffaa;animation:mvSpin 18s linear infinite}body.mvfx .o2{animation-direction:reverse;animation-duration:26s}
body.mvfx .hero-spark{color:#fff3a6;text-shadow:0 0 18px #ffd24d;animation:mvTw 1s ease-in-out infinite alternate}
body.mvfx .hero-link{animation:mvPulse 1.8s infinite}
body.mvfx #cats button{animation:mvPop .5s both}
body.mvfx #cats button.on{box-shadow:0 0 18px #ff4d8d66}
body.mvfx .search-wrap:focus-within{box-shadow:0 0 0 4px #7c4dff33,0 0 24px #ff4d8d44}
body.mvfx .cart-btn{position:relative;animation:mvPulse 2.2s infinite}
body.mvfx .cart-btn::before{content:"🛍️";display:inline-block;margin-right:5px;animation:mvFlick 1s infinite}
body.mvfx .cart-btn.mv-bump{animation:mvBump .5s}
body.mvfx #alertBtn{animation:mvRing 3.5s infinite;transform-origin:50% 10%}
body.mvfx .section-head h2::after{content:" ✦";-webkit-text-fill-color:#ff9f1c;display:inline-block;animation:mvSpin 4s linear infinite}
body.mvfx .section-head .eyebrow{animation:mvFlick 2.8s infinite}
body.mvfx .card{overflow:hidden;-webkit-tap-highlight-color:transparent}
body.mvfx .card::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(115deg,transparent,#fff7,transparent);transform:skewX(-20deg);pointer-events:none;z-index:3}
@media(hover:hover){body.mvfx .card:hover::after{animation:mvSweepCard .9s}body.mvfx .card:hover{box-shadow:0 0 0 2px #ff4d8d,0 20px 46px #7c4dff33;transform:translateY(-7px) rotate(-.6deg)}}
/* mobile/touch: hover nahi hota — isliye jo cards screen par hain unpar shine apne-aap chalti hai */
@media(hover:none){body.mvfx .card.mv-live::after{animation:mvSweepCard 4.8s ease-in-out infinite;animation-delay:var(--rd,0s)}body.mvfx .card:active{transform:scale(.97);transition:transform .12s}}
body.mvfx .tag{animation:mvPulse 1.6s infinite}
body.mvfx .tag::before{content:"🔥 "}
body.mvfx .buy-mini{position:relative;overflow:hidden}
body.mvfx .buy-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff7 50%,transparent 65%);transform:translateX(-120%);animation:mvSweep 3s infinite}
body.mvfx .pr em{animation:mvFlick 1.8s infinite}
body.mvfx .support-strip{position:relative;overflow:hidden}
body.mvfx .support-strip::after{content:"✦ ✧ ✦";position:absolute;right:14px;top:6px;font-size:18px;color:#ff4d8d;letter-spacing:8px;animation:mvTw .7s infinite alternate}
body.mvfx footer{position:relative;overflow:hidden}
body.mvfx .success-check{box-shadow:0 0 0 10px #16a36a33,0 0 40px #16a36a88}

/* ===== floating buttons ===== */
.mv-wa{position:fixed;right:14px;bottom:16px;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:25;box-shadow:0 10px 26px #25d36680;animation:mvWaIn .6s 1.2s both}
.mv-wa svg{width:30px;height:30px}
.mv-wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:mvPing 2s infinite}
.mv-top{position:fixed;right:20px;bottom:82px;width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(135deg,#7c4dff,#ff4d8d);color:#fff;font-size:20px;font-weight:800;z-index:25;box-shadow:0 8px 20px #7c4dff55;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .3s}
.mv-top.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:650px){.mv-wa{width:50px;height:50px;right:12px;bottom:14px}.mv-top{right:17px;bottom:74px}}

/* ===== ripple ===== */
.btn,.buy-mini,.hero-link,.cart-btn,.icon-btn,#cats button,.sh,.pp-wa-ask,.support-strip a{position:relative;overflow:hidden}
.mv-rip{position:absolute;border-radius:50%;background:#ffffff80;transform:scale(0);animation:mvRip .6s ease-out forwards;pointer-events:none}

/* ===== keyframes ===== */
@keyframes mvTw{from{opacity:.35}to{opacity:1}}
@keyframes mvLogoIn{to{opacity:1;transform:scale(1)}}
@keyframes mvUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mvShine{to{background-position:250% 0}}
@keyframes mvGlow{from{opacity:.55}to{opacity:1}}
@keyframes mvFlick{0%,100%{opacity:1}45%{opacity:.7}50%{opacity:1}75%{opacity:.82}}
@keyframes mvRise{0%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(28px,-60vh) rotate(3deg)}100%{transform:translate(-14px,-125vh) rotate(-3deg);opacity:0}}
@keyframes mvBulb{from{opacity:.35;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}
@keyframes mvSwing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes mvSpin{to{transform:rotate(360deg)}}
@keyframes mvPulse{0%,100%{box-shadow:0 0 14px #ff4d8d55}50%{box-shadow:0 0 30px #ff4d8d99,0 0 50px #7c4dff55}}
@keyframes mvMarq{to{transform:translateX(-33.3333%)}}
@keyframes mvSweep{to{transform:translateX(120%)}}
@keyframes mvSweepCard{0%{left:-80%}30%,100%{left:130%}}
@keyframes mvPop{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
@keyframes mvRing{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(14deg)}91%{transform:rotate(-12deg)}94%{transform:rotate(8deg)}97%{transform:rotate(-4deg)}}
@keyframes mvDrop{0%{transform:translate(-50%,-140%)}8%,88%{transform:translate(-50%,0)}100%{transform:translate(-50%,-160%)}}
@keyframes mvHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes mvBump{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes mvRip{to{transform:scale(1);opacity:0}}
@keyframes mvPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes mvWaIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* NOTE: prefers-reduced-motion jaan-bujhkar nahi mana gaya (kai phones me ye chupke se ON hota hai aur sab animation band kar deta hai).
   Agar chahein to config.js me RESPECT_REDUCED_MOTION:true kar dein — tab body.mv-calm lagta hai. */
body.mv-calm *{animation:none!important}


/* ===== LOGO: splash (calm) ===== */
.mv-splash{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at 50% 40%,#fff 0,#f6f0ff 55%,#ffe9f3 100%);display:grid;place-items:center;overflow:hidden;transition:opacity .9s,transform .9s}
.mv-splash.out{opacity:0;transform:scale(1.06);pointer-events:none}
.mv-splash canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mv-center{position:relative;text-align:center;z-index:2;padding:0 18px}
.mv-plate{position:relative;display:inline-grid;place-items:center;padding:clamp(14px,3vw,26px) clamp(18px,4vw,36px);border-radius:28px;background:#fff;box-shadow:0 20px 60px #7c4dff33,0 0 0 1px #efe7ff;opacity:0;transform:scale(.5) rotateY(90deg);animation:mvLogoIn 1.1s .15s cubic-bezier(.2,1.3,.3,1) forwards}
.mv-logoimg{display:block;width:clamp(200px,52vw,380px);height:auto}
.mv-ring{position:absolute;inset:-6px;border-radius:34px;box-shadow:0 0 0 2px #ff4d8d55,0 0 40px #c026d355;animation:mvTw 1.6s ease-in-out infinite alternate;pointer-events:none}
.mv-sub{margin-top:18px;font:800 clamp(20px,5vw,30px) Manrope,sans-serif;color:#3b1d8f;letter-spacing:.04em;opacity:0;animation:mvUp .8s .9s forwards}
.mv-sub small{display:block;font:600 12px 'DM Sans',sans-serif;letter-spacing:.3em;color:#a0509d;margin-top:6px}
.mv-bar{width:min(220px,50vw);height:4px;border-radius:4px;background:#e9dcff;margin:18px auto 0;overflow:hidden;opacity:0;animation:mvUp .6s 1s forwards}
.mv-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#7c4dff,#ff4d8d,#ff9f1c);animation:mvLoad 2.4s .3s ease-out forwards;transform:scaleX(0)}
.mv-skip{position:absolute;right:16px;top:16px;z-index:3;border:1px solid #7c4dff44;background:#ffffffcc;color:#5b21b6;border-radius:30px;padding:10px 18px;font-weight:700;font-size:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mv-splash.fest{background:radial-gradient(ellipse at 50% 45%,#4b1d9a 0,#1b1464 45%,#0a0630 100%)}
.mv-splash.fest .mv-sub{color:#fff;text-shadow:0 0 22px #ff4d8d}.mv-splash.fest .mv-sub small{color:#d9c6ff}
.mv-splash.fest .mv-plate{box-shadow:0 0 70px #ff4d8d99,0 0 0 2px #ffffff55}.mv-splash.fest .mv-bar{background:#ffffff33}
.mv-splash.fest .mv-skip{border-color:#ffffff55;background:#ffffff18;color:#fff}
/* ===== LOGO: header flip + spinning loader ===== */
.logo{position:relative}.logo img{display:block;height:46px;width:auto;transform-style:preserve-3d}
body.mvfx .logo img{animation:mvFlip 8s ease-in-out infinite}
#loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0;color:#7c4dff;font-weight:600}
#loading i{display:none}
#loading::before{content:"";width:58px;height:58px;background:url(/assets/logo-mark.png) center/contain no-repeat;animation:mvSpin 1.6s linear infinite;filter:drop-shadow(0 6px 10px #7c4dff44)}
.mv-spin-logo{width:42px;height:42px;animation:mvSpin 1.6s linear infinite}
@keyframes mvFlip{0%,86%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes mvLoad{to{transform:scaleX(1)}}