/*
 * Homepage hero motion (2026-09-28). Motion only: no layout, size or colour changes.
 * Everything animates transform-type properties or opacity, and is switched off for
 * prefers-reduced-motion (the page's existing `.ig-bazaar *` rule plus the block below).
 */
.ig-bazaar .ig-hero { position: relative; overflow: hidden; }

/* 1. Copy arrives in a short stagger */
.ig-bazaar .bazaar-hero-copy > * { animation: sb-rise .9s cubic-bezier(.22, 1, .36, 1) both; }
.ig-bazaar .bazaar-hero-copy > :nth-child(2) { animation-delay: .08s; }
.ig-bazaar .bazaar-hero-copy > :nth-child(3) { animation-delay: .16s; }
@keyframes sb-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* 2. Badge: a slow light sweep */
.ig-bazaar .ig-hero-badge { position: relative; overflow: hidden; }
.ig-bazaar .ig-hero-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-120%); animation: sb-sweep 4.8s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}
@keyframes sb-sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* 3. Background grid drifts very slowly */
.ig-bazaar .ig-hero::before { animation: sb-grid 38s linear infinite; }
@keyframes sb-grid { to { background-position: 38px 38px, 38px 38px; } }

/* 4. The art moves with the pointer (JS sets --sb-px/--sb-py), then eases back */
.ig-bazaar .bazaar-art { translate: calc(var(--sb-px, 0) * 10px) calc(var(--sb-py, 0) * 8px); transition: translate .6s cubic-bezier(.22, 1, .36, 1); }

/* 5. Ticket floats and sways around its original tilt */
.ig-bazaar .bazaar-ticket { animation: bazaar-arrive .7s ease-out both, sb-float 7s ease-in-out .7s infinite; will-change: translate, rotate; }
@keyframes sb-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -10px; rotate: -2deg; }
}
.ig-bazaar .bazaar-ticket em { background: linear-gradient(90deg, #8B5CF6, #C084FC, #F0ABFC, #8B5CF6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: sb-shine 6s ease-in-out infinite; }
@keyframes sb-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 6. Orbit: rings breathe and a light travels round the circle */
.ig-bazaar .bazaar-orbit { animation: sb-breathe 6s ease-in-out infinite; }
@keyframes sb-breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.06; opacity: .8; } }
.ig-bazaar .bazaar-orbit::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #E9D5FF; box-shadow: 0 0 12px 3px rgba(192, 132, 252, .8);
  transform-origin: 4px calc(50% + var(--sb-orbit-r, 131px)); animation: sb-orbit 9s linear infinite;
}
.ig-bazaar .bazaar-orbit { --sb-orbit-r: 127.5px; }
@keyframes sb-orbit { to { transform: rotate(360deg); } }

/* 7. Sparkles twinkle (the big one + two small ones added by hero-motion.js) */
.ig-bazaar .bazaar-spark { animation: sb-twinkle 3.2s ease-in-out infinite; text-shadow: 0 0 18px rgba(233, 213, 255, .55); }
.ig-bazaar .sb-spark-mini { position: absolute; color: #F0ABFC; pointer-events: none; animation: sb-twinkle 2.6s ease-in-out infinite; }
.ig-bazaar .sb-spark-mini.a { top: 8%; right: 10%; font-size: 22px; animation-delay: .8s; }
.ig-bazaar .sb-spark-mini.b { bottom: 18%; right: 2%; font-size: 14px; animation-delay: 1.6s; color: #C4B5FD; }
@keyframes sb-twinkle {
  0%, 100% { scale: 1; rotate: -10deg; opacity: 1; }
  45% { scale: .72; rotate: 12deg; opacity: .55; }
  60% { scale: 1.12; rotate: 0deg; opacity: 1; }
}

@media (max-width: 900px) { .ig-bazaar .bazaar-orbit { --sb-orbit-r: 90px; } }
@media (prefers-reduced-motion: reduce) {
  .ig-bazaar .bazaar-art { translate: none; transition: none; }
  .ig-bazaar .bazaar-orbit::after, .ig-bazaar .ig-hero-badge::after { display: none; }
}