/* Mocasus v2 motion layer — global, responsive, reduced-motion safe */
html, body, .topbar, .card, .panel, .sheet, .cart-sheet, .modal, .input, .select, .textarea, .footer {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Page transitions */
.page-enter { animation: moca-page-enter .42s cubic-bezier(.16,1,.3,1) both; }
.page-exit { animation: moca-page-exit .18s ease both !important; pointer-events: none; }
@keyframes moca-page-enter { from { opacity: 0; transform: translate3d(0,22px,0) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes moca-page-exit { to { opacity: 0; transform: translate3d(0,-12px,0) scale(.995); } }

/* IntersectionObserver reveal */
.reveal { opacity: 0; transform: translate3d(0,24px,0); animation: none; will-change: opacity, transform; }
.reveal.is-visible { animation: moca-reveal .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes moca-reveal { to { opacity: 1; transform: none; } }
.reveal-d1,.reveal.is-visible.reveal-d1 { animation-delay:.04s }.reveal-d2,.reveal.is-visible.reveal-d2 { animation-delay:.08s }
.reveal-d3,.reveal.is-visible.reveal-d3 { animation-delay:.12s }.reveal-d4,.reveal.is-visible.reveal-d4 { animation-delay:.16s }
.reveal-d5,.reveal.is-visible.reveal-d5 { animation-delay:.20s }.reveal-d6,.reveal.is-visible.reveal-d6 { animation-delay:.24s }
.reveal-d7,.reveal.is-visible.reveal-d7 { animation-delay:.28s }.reveal-d8,.reveal.is-visible.reveal-d8 { animation-delay:.32s }
.reveal-d9,.reveal.is-visible.reveal-d9 { animation-delay:.36s }.reveal-d10,.reveal.is-visible.reveal-d10 { animation-delay:.40s }
.reveal-d11,.reveal.is-visible.reveal-d11 { animation-delay:.44s }.reveal-d12,.reveal.is-visible.reveal-d12 { animation-delay:.48s }
.reveal-d13,.reveal.is-visible.reveal-d13 { animation-delay:.52s }.reveal-d14,.reveal.is-visible.reveal-d14 { animation-delay:.56s }
.reveal-d15,.reveal.is-visible.reveal-d15 { animation-delay:.60s }.reveal-d16,.reveal.is-visible.reveal-d16 { animation-delay:.64s }

/* Mascot */
.hero-inner { position: relative; }
.mascot-float { animation: moca-float 3.2s ease-in-out infinite; transform: translate3d(var(--look-x,0),var(--look-y,0),0); cursor: pointer; }
.mascot-bounce { animation: moca-bounce .72s cubic-bezier(.16,1,.3,1) both !important; }
.mascot-wave { animation: moca-wave .9s ease both !important; }
.mascot-wiggle { animation: moca-wiggle .7s ease both !important; }
.mascot-pop { animation: mascot-pop .5s cubic-bezier(.34,1.56,.64,1) both !important; }
@keyframes moca-float { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -10px; rotate: 1deg; } }
@keyframes mascot-pop { 0%{transform:scale(.3) rotate(-18deg);opacity:0} 60%{transform:scale(1.12) rotate(6deg);opacity:1} to{transform:scale(1) rotate(0)}}
@keyframes moca-bounce { 0%,100% { transform: scale(1); } 35% { transform: translateY(-16px) scale(1.08); } 68% { transform: translateY(2px) scale(.97); } }
@keyframes moca-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.04); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-6deg); } }
@keyframes moca-wiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }

/* Mascot speech bubble */
.mascot-speech { position:absolute; top:3%; left:calc(50% + 72px); z-index:5; max-width:190px; padding:9px 12px; border:2px solid #000; border-radius:12px 12px 12px 2px; background:var(--yellow); color:#111; box-shadow:var(--shadow); font-weight:800; font-size:12px; opacity:0; transform:translate3d(-8px,8px,0) scale(.85); pointer-events:none; }
.mascot-speech.show { animation:moca-speech 2.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes moca-speech { 0%{opacity:0;transform:translate3d(-8px,8px,0) scale(.85)} 12%,78%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-5px) scale(.95)} }

/* Ripple */
.btn-ripple { position:relative; overflow:hidden; isolation:isolate; }
.ripple { position:absolute; z-index:-1; border-radius:50%; background:rgba(255,255,255,.42); pointer-events:none; transform:scale(0); animation:moca-ripple .62s ease-out forwards; }
.btn-secondary .ripple,.icon-btn .ripple { background:hsl(var(--primary)/.18); }
@keyframes moca-ripple { to { transform:scale(1); opacity:0; } }

/* Hover lift */
.hover-lift { transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease; }
@media (hover:hover) { .hover-lift:hover { transform:translate3d(0,-6px,0); box-shadow:var(--shadow-lg); } }

/* Toast */
.toast { position:relative; overflow:hidden; min-width:260px; animation:moca-toast-in .36s cubic-bezier(.16,1,.3,1) both; }
.toast-icon { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:2px solid #000; border-radius:50%; background:var(--yellow); color:#111; animation:moca-icon-pop .5s cubic-bezier(.16,1,.3,1) both; }
.toast.err .toast-icon { background:#ff7a7a; }
.toast-progress { position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--pink); transform-origin:left; animation:moca-toast-progress 2.8s linear both; }
.toast-out { animation:moca-toast-out .32s ease both !important; }
@keyframes moca-toast-in { from{opacity:0;transform:translate3d(45px,0,0) rotate(1deg)} }
@keyframes moca-toast-out { to{opacity:0;transform:translate3d(55px,-5px,0) scale(.95)} }
@keyframes moca-icon-pop { 0%{transform:scale(0) rotate(-90deg)} 70%{transform:scale(1.15)} 100%{transform:none} }
@keyframes moca-toast-progress { to{transform:scaleX(0)} }

/* Badge */
.badge-pop { animation:moca-badge-pop .48s cubic-bezier(.16,1,.3,1) both; }
@keyframes moca-badge-pop { 0%{transform:scale(.5)} 60%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* Cart */
.cart-sheet.open { animation:moca-cart-in .38s cubic-bezier(.16,1,.3,1) both; }
.cart-sheet.open .cart-item { animation:moca-cart-item .42s cubic-bezier(.16,1,.3,1) both; }
.cart-sheet.open .cart-item:nth-child(2){animation-delay:.06s}.cart-sheet.open .cart-item:nth-child(3){animation-delay:.12s}.cart-sheet.open .cart-item:nth-child(4){animation-delay:.18s}
@keyframes moca-cart-in { from{transform:translate3d(105%,0,0)} }
@keyframes moca-cart-item { from{opacity:0;transform:translate3d(24px,0,0)} }

/* Modal */
.modal-root.open .modal { animation:moca-modal .34s cubic-bezier(.16,1,.3,1) both; transform-origin:center; }
@keyframes moca-modal { from{opacity:0;transform:translateY(18px) scale(.9) rotate(.6deg)} to{opacity:1;transform:none} }

/* Countdown */
.countdown.urgent { animation:moca-urgent .72s ease-in-out infinite alternate; }
@keyframes moca-urgent { to{box-shadow:var(--shadow),0 0 0 6px hsl(var(--primary)/.22);transform:scale(1.025)} }

/* Sparkle / twinkle */
.sparkle { position:absolute; pointer-events:none; animation:moca-twinkle 1.5s ease-in-out infinite; }
@keyframes moca-twinkle { 0%,100%{opacity:.25;transform:scale(.65) rotate(0)} 50%{opacity:1;transform:scale(1.15) rotate(90deg)} }
.typing-cursor::after { content:'|'; animation:moca-blink .75s step-end infinite; }
@keyframes moca-blink { 50%{opacity:0} }

/* === Mocasus v2 Premium Animations — from original === */
.animate-pop { animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.animate-bounce { animation:bounce 1s ease infinite; }
.animate-ping { animation:ping 1s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse { animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-spin { animation:spin 1s linear infinite; }
.animate-spin-slow { animation:spin-slow 4s linear infinite; }
.animate-gradient { animation:gradient-shift 6s ease infinite; background-size: 400% 400%; }
.animate-glitch { animation:glitch .6s ease both; }
.animate-shake { animation:tilt-shake .7s ease both; }
.animate-pulse-glow { animation:pulse-glow 2s ease-in-out infinite; }
.animate-float { animation:float 3.2s ease-in-out infinite; }
.animate-sticker { animation:sticker-peel 1.2s cubic-bezier(.16,1,.3,1) both; }

@keyframes pop {
  0%{transform:scale(.8);opacity:0}
  50%{transform:scale(1.05)}
  to{transform:scale(1);opacity:1}
}
@keyframes bounce {
  0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}
  50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}
}
@keyframes ping { 75%,to{transform:scale(2);opacity:0} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes spin-slow { to{transform:rotate(360deg)} }
@keyframes gradient-shift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  to{background-position:0% 50%}
}
@keyframes glitch {
  0%,to{transform:translate(0);filter:none}
  10%{transform:translate(-2px,1px);filter:hue-rotate(90deg)}
  20%{transform:translate(2px,-1px);filter:hue-rotate(-90deg)}
  30%{transform:translate(0);filter:none}
}
@keyframes tilt-shake {
  0%,to{transform:rotate(0)}
  15%{transform:rotate(-4deg)}
  30%{transform:rotate(3deg)}
  45%{transform:rotate(-2deg)}
  60%{transform:rotate(1deg)}
  75%{transform:rotate(-.5deg)}
}
@keyframes pulse-glow {
  0%,to{box-shadow:0 0 0 0 hsl(var(--primary)/.4)}
  50%{box-shadow:0 0 0 8px hsl(var(--primary)/0)}
}
@keyframes sticker-peel {
  0%{transform:perspective(800px) rotateX(-45deg) scale(.5);opacity:0}
  60%{transform:perspective(800px) rotateX(0) scale(1.05)}
  to{transform:perspective(800px) rotateX(0) scale(1);opacity:1}
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Click spark effect */
.click-spark { position:absolute; pointer-events:none; z-index:999; }
.spark-particle { position:absolute; width:6px; height:6px; border-radius:50%; animation:spark-fly .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes spark-fly {
  0%{opacity:1;transform:translate(0,0) scale(1)}
  to{opacity:0;transform:translate(var(--spark-x,30px),var(--spark-y,-30px)) scale(0)}
}

/* Crown / VIP effects */
.vip-crown { animation:vip-crown-bob 2s ease-in-out infinite; }
.vip-crown-glow { animation:vip-crown-glow 2s ease-in-out infinite; }
@keyframes vip-crown-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes vip-crown-glow { 0%,100%{filter:drop-shadow(0 0 4px hsl(var(--yellow)/.6))} 50%{filter:drop-shadow(0 0 12px hsl(var(--yellow)/.8))} }

/* Wave bar / audio visualizer */
.wave-bar { display:flex; align-items:center; gap:3px; height:40px; }
.wave-bar span { width:4px; background:var(--pink); border-radius:2px; animation:wave-bar 1.2s ease-in-out infinite; }
.wave-bar span:nth-child(2){animation-delay:.15s;height:24px}.wave-bar span:nth-child(3){animation-delay:.3s;height:14px}.wave-bar span:nth-child(4){animation-delay:.45s;height:28px}.wave-bar span:nth-child(5){animation-delay:.6s;height:18px}
@keyframes wave-bar { 0%,to{height:12px} 50%{height:40px} }

/* Neo-brutal scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:hsl(var(--card)); }
::-webkit-scrollbar-thumb { background:hsl(var(--border)); border-radius:4px; border:2px solid hsl(var(--card)); }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* Selection */
::selection { background:hsl(var(--primary)/.3); color:inherit; }

/* === Missing from original — now added === */
/* accordion */
.animate-accordion-down { animation:accordion-down .2s ease-out both; }
.animate-accordion-up { animation:accordion-up .2s ease-out both; }
@keyframes accordion-down { from{height:0} to{height:var(--radix-accordion-content-height,360px)} }
@keyframes accordion-up { from{height:var(--radix-accordion-content-height,360px)} to{height:0} }

/* fade */
.animate-fade-in-up { animation:fade-in-up .46s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-out { animation:fade-out .22s ease both; }
@keyframes fade-in-up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fade-out { to{opacity:0} }

/* slide-in-right */
.animate-slide-in-right { animation:slide-in-right .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes slide-in-right { from{transform:translateX(100%)} to{transform:none} }

/* scale-in */
.animate-scale-in { animation:scale-in .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes scale-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

/* marquee */
.animate-marquee { animation:marquee 20s linear infinite; }
@keyframes marquee { to{transform:translateX(-50%)} }

/* rubber-band */
.animate-rubber-band { animation:rubber-band .6s ease both; }
@keyframes rubber-band {
  0%{transform:scaleX(1)}
  25%{transform:scaleX(1.15) scaleY(.85)}
  40%{transform:scaleX(.85) scaleY(1.15)}
  55%{transform:scaleX(1.08) scaleY(.92)}
  70%{transform:scaleX(.95) scaleY(1.05)}
  to{transform:scaleX(1) scaleY(1)}
}

/* bounce-brutal */
.animate-bounce-brutal { animation:bounce-brutal .75s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bounce-brutal {
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-30px) scale(1.08) rotate(-2deg)}
  50%{transform:translateY(6px) scale(.96) rotate(1deg)}
  70%{transform:translateY(-8px) scale(1.02)}
  to{transform:translateY(0) scale(1)}
}

/* enter/exit — generic */
.animate-enter { animation:enter .2s ease both; }
.animate-exit { animation:exit .15s ease both; }
@keyframes enter { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes exit { to{opacity:0;transform:scale(.9)} }

/* scan */
.animate-scan { animation:scan 2s linear infinite; }
@keyframes scan { 0%,to{transform:translateY(-100%)} 50%{transform:translateY(100%)} }

/* reveal-up — original utility class */
.animate-reveal-up { animation:reveal-up .54s cubic-bezier(.16,1,.3,1) both; }
@keyframes reveal-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* wiggle */
.animate-wiggle { animation:wiggle .6s ease both; }
@keyframes wiggle { 0%,to{transform:rotate(0)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 80%{transform:rotate(5deg)} }

@media (max-width:640px) {
  .mascot-speech { left:calc(50% + 42px); top:0; max-width:145px; font-size:11px; }
  .toast { min-width:0; width:100%; }
  .reveal.is-visible { animation-duration:.5s; }
}
@media (prefers-reduced-motion:reduce) {
  .reveal,.reveal.is-visible { opacity:1!important; transform:none!important; animation:none!important; }
  .page-enter,.page-exit,.mascot-float,.pulse-soft,.wiggle-soft,.countdown.urgent { animation:none!important; }
  .ripple,.toast-progress { display:none!important; }
}