/* =====================================================================
   Baby Bucket — MOTION SYSTEM
   Opacity/transform only. Rules under .motion run only when JavaScript enabled them
   (see the <head> bootstrap in inc/header.php), so content is never hidden without JS,
   and nothing runs for visitors who prefer reduced motion.
   ===================================================================== */
:root {
  --dur-fast: .18s; --dur: .32s; --dur-slow: .7s;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --koko: #4B2BB8; --koko-2: #7B5CF0;
}

/* ---------- page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .18s ease both; }
::view-transition-new(root) { animation: vtIn .32s var(--ease-out) both; }
.site-header { view-transition-name: site-header; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
.motion .site-main { animation: pageIn .45s var(--ease-out) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
.nav-progress { position: fixed; left: 0; top: 0; z-index: 300; height: 3px; width: 100%; background: linear-gradient(90deg, var(--pink), var(--blue)); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.nav-progress.is-going { opacity: 1; transform: scaleX(.8); transition: transform 2.5s cubic-bezier(.1, .7, .2, 1), opacity .2s; }

/* ---------- scroll reveal (plays once, then the element is released) ---------- */
.motion :is(.section-head, .offer, .koko, .contact-form, .pd-desc, .empty-hero, .prose, .ig-note, .offer-products, .social-card, .page-hero h1, .page-hero p, .page-checkout .card, .cart-lines, .summary):not(.rv-done),
.motion :is(.cats, .grid, .benefits, .ig-grid, .social-row, .fgrid, .foot-band-row, .about-grid, .contact-info, .offer-more, .koko-steps, .tt-videos, .chips-lg) > :not(.rv-done) {
  opacity: 0; transform: translate3d(0, 26px, 0);
}
.motion .cats > :not(.rv-done) { transform: translate3d(0, 22px, 0) scale(.94); }
.motion .koko:not(.rv-done) { transform: translate3d(0, 26px, 0) scale(.98); }
.motion :is(.section-head, .offer, .koko, .contact-form, .pd-desc, .empty-hero, .prose, .ig-note, .offer-products, .social-card, .page-hero h1, .page-hero p, .page-checkout .card, .cart-lines, .summary).in:not(.rv-done),
.motion :is(.cats, .grid, .benefits, .ig-grid, .social-row, .fgrid, .foot-band-row, .about-grid, .contact-info, .offer-more, .koko-steps, .tt-videos, .chips-lg) > .in:not(.rv-done) {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out) calc(var(--d, 0) * 70ms), transform var(--dur-slow) var(--ease-out) calc(var(--d, 0) * 70ms);
}

/* ---------- hero ---------- */
.hero h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.hero-title em { font-style: normal; color: var(--pink); position: relative; white-space: nowrap; z-index: 0; }
.hero-title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .18em; border-radius: 1em; background: linear-gradient(90deg, var(--pink-100), var(--blue-100)); z-index: -1; transform-origin: 0 50%; }
.hero-title .w { display: inline-block; }
.motion .hero-title .w { animation: wordIn .9s var(--ease-out) backwards; animation-delay: calc(var(--w) * 70ms + 120ms); }
.motion .hero-title em::after { animation: underline .9s var(--ease-out) .9s backwards; }
@keyframes wordIn { from { opacity: 0; transform: translateY(.6em) rotate(3deg); filter: blur(4px); } }
@keyframes underline { from { transform: scaleX(0); } }
.motion .hero-in { animation: riseIn .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }
.hero-art { will-change: transform; transition: transform .6s var(--ease-out); }
.hero .wrap { position: relative; z-index: 1; }
.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: transform .8s var(--ease-out); }
.hero-deco i { position: absolute; display: block; border-radius: 50%; opacity: .55; }
.hero-deco .d1 { width: 14px; height: 14px; background: var(--pink); left: 6%; top: 18%; }
.hero-deco .d2 { width: 22px; height: 22px; border: 4px solid var(--blue); left: 46%; top: 10%; }
.hero-deco .d3 { width: 18px; height: 18px; background: var(--blue); border-radius: 5px; left: 40%; bottom: 14%; rotate: 20deg; }
.hero-deco .d4 { width: 26px; height: 26px; background: var(--pink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; right: 4%; top: 12%; opacity: .45; }
.hero-deco .d5 { width: 10px; height: 10px; background: var(--blue); right: 44%; top: 46%; }
.hero-deco .d6 { width: 34px; height: 34px; border: 4px dashed var(--pink-100); right: 8%; bottom: 10%; opacity: .9; }
.motion .hero-deco i { animation: drift 12s ease-in-out infinite alternate; }
.motion .hero-deco .d2 { animation-duration: 15s; animation-delay: -4s; }
.motion .hero-deco .d3 { animation-duration: 10s; animation-delay: -2s; }
.motion .hero-deco .d4 { animation-name: driftSpin; animation-duration: 18s; }
.motion .hero-deco .d5 { animation-duration: 9s; }
.motion .hero-deco .d6 { animation-name: driftSpin; animation-duration: 22s; }
@keyframes drift { to { translate: 14px -18px; } }
@keyframes driftSpin { to { translate: -10px 14px; rotate: 160deg; } }
.motion .hero-tile.t1 { animation: artIn 1s var(--ease-out) .35s backwards, bob 7s ease-in-out 1.4s infinite; }
.motion .hero-tile.t2 { animation: artIn 1s var(--ease-out) .55s backwards, bob 8s ease-in-out 1.8s infinite reverse; }
.motion .hero-tile.t3 { animation: artIn 1s var(--ease-out) .7s backwards, bob 6.5s ease-in-out 2s infinite; }
.motion .hero-art .blob { animation: artIn 1.2s var(--ease-out) .3s backwards, blobDrift 14s ease-in-out 1.5s infinite alternate; }
.motion .hero-illo { animation: artIn 1s var(--ease-out) .35s backwards; }
.motion .hero-illo .il { animation: bob 6s ease-in-out infinite; }
.motion .hero-illo .il-2 { animation-duration: 7s; animation-delay: -2s; }
.motion .hero-illo .il-3 { animation-duration: 8s; animation-delay: -1s; }
.motion .hero-illo .il-4 { animation-duration: 5.5s; animation-delay: -3s; }
@keyframes artIn { from { opacity: 0; scale: .86; } }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes blobDrift { to { translate: 12px -10px; scale: 1.06; } }
/* continuous animations pause while their section is off-screen (set by site.js) */
.is-paused, .is-paused * { animation-play-state: paused !important; }
.btn-offers { color: var(--pink-600); }
.btn-offers:hover { background: var(--pink-50); color: var(--pink-700); border-color: transparent; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; transition: background var(--dur) var(--ease-out), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn .si { transition: transform var(--dur) var(--ease-out); }
.btn:hover .si:last-child:not(:first-child) { transform: translateX(4px); }
.btn-primary::before, .btn-koko::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out); pointer-events: none; }
.btn-primary:hover::before, .btn-koko:hover::before { transform: translateX(120%); }
.btn-koko { background: linear-gradient(120deg, var(--koko), var(--koko-2)); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(75,43,184,.28); }
.btn-koko:hover { color: #fff; box-shadow: 0 12px 28px rgba(75,43,184,.36); }
.icon-btn { transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-out); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.92); }
.btn.is-loading::after { animation: spin .7s linear infinite; }

/* ---------- header & navigation ---------- */
.head-row { transition: min-height var(--dur) var(--ease-out); }
.brand-logo img { transition: transform var(--dur) var(--ease-out); transform-origin: left center; }
.site-header.is-scrolled .head-row { min-height: 64px; }
.site-header.is-scrolled .brand-logo img { transform: scale(.88); }
.brand:hover .brand-logo img { transform: scale(1.03) rotate(-1deg); }
.site-header.is-scrolled .brand:hover .brand-logo img { transform: scale(.9) rotate(-1deg); }
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link .si { transition: transform var(--dur) var(--ease-out); }
.drop-panel { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur); }
.nav-drop:is(:hover, .is-open, :focus-within) .drop-cats a { animation: dropItem .4s var(--ease-out) backwards; animation-delay: calc(var(--k, 0) * 28ms + 60ms); }
.drop-cats a { transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.drop-cats a:hover { transform: translateX(3px); }
.drop-empty { margin: 10px 4px 2px; }
@keyframes dropItem { from { opacity: 0; transform: translateY(6px); } }
.search-bar.is-open { animation: slideDown var(--dur) var(--ease-out); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } }
.cart-btn.is-bumped .si { animation: cartWiggle .6s var(--ease-spring); }
@keyframes cartWiggle { 25% { transform: rotate(-12deg) scale(1.15); } 50% { transform: rotate(10deg) scale(1.1); } 75% { transform: rotate(-4deg); } }
.cart-count.bump { animation: bump .5s var(--ease-spring); }
.drawer.is-open .drawer-nav > * { animation: drawerItem .45s var(--ease-out) backwards; }
.drawer.is-open .drawer-nav > :nth-child(1) { animation-delay: .05s; }
.drawer.is-open .drawer-nav > :nth-child(2) { animation-delay: .08s; }
.drawer.is-open .drawer-nav > :nth-child(3) { animation-delay: .11s; }
.drawer.is-open .drawer-nav > :nth-child(4) { animation-delay: .14s; }
.drawer.is-open .drawer-nav > :nth-child(5) { animation-delay: .17s; }
.drawer.is-open .drawer-nav > :nth-child(6) { animation-delay: .2s; }
.drawer.is-open .drawer-nav > :nth-child(7) { animation-delay: .23s; }
.drawer.is-open .drawer-nav > :nth-child(8) { animation-delay: .26s; }
.drawer.is-open .drawer-nav > :nth-child(n+9) { animation-delay: .29s; }
@keyframes drawerItem { from { opacity: 0; transform: translateX(-16px); } }
.drawer-nav a, .drawer-nav summary { transition: background var(--dur-fast), color var(--dur-fast), padding var(--dur) var(--ease-out); }
.drawer-nav a:hover { padding-left: 14px; }
.drawer-nav details[open] div a { animation: drawerItem .35s var(--ease-out) backwards; }

/* ---------- product cards ---------- */
.pcard { transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), border-color .35s; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(32,36,56,.12); }
.pcard-media img { transition: transform .6s var(--ease-out); }
.pcard:hover .pcard-media img { transform: scale(1.07); }
.pcard:focus-within { box-shadow: 0 0 0 3px var(--blue-100), var(--sh-2); }
.tag { transition: transform var(--dur) var(--ease-spring); }
.pcard:hover .tag-sale { transform: rotate(-4deg) scale(1.08); }
.motion .pcard.in .tag { animation: badgePop .6s var(--ease-spring) backwards; animation-delay: calc(var(--d, 0) * 70ms + .35s); }
@keyframes badgePop { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }
.tag-sale { position: relative; overflow: hidden; }
.tag-sale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); }
.pcard:hover .tag-sale::after { transition: transform .8s var(--ease-out); transform: translateX(120%); }
.btn-add { transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-spring), box-shadow var(--dur); }
.btn-add:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(239,47,145,.25); }
.btn-add:active { transform: scale(.94); }
.btn-add.is-added, .btn.is-added { background: var(--green); border-color: var(--green); color: #fff; animation: addedPop .45s var(--ease-spring); }
@keyframes addedPop { 40% { transform: scale(1.08); } }
.is-error-shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.fly-dot { position: fixed; left: 0; top: 0; z-index: 250; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(239,47,145,.2); pointer-events: none; transition: transform .7s cubic-bezier(.5, -.3, .3, 1), opacity .7s ease; }
@media (hover: none) { .pcard:hover { transform: none; } .pcard:active { transform: scale(.985); } .cat:active { transform: scale(.97); } }

/* ---------- categories ---------- */
.cat { position: relative; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; }
.cat::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--pink); opacity: 0; transform: scale(.97); transition: opacity var(--dur), transform var(--dur) var(--ease-out); pointer-events: none; }
.cat-blue::after { border-color: var(--blue); }
.cat:hover::after, .cat:focus-visible::after { opacity: 1; transform: none; }
.cat:hover { transform: translateY(-6px); }
.cat-img img { transition: transform .6s var(--ease-out); }
.cat:hover .cat-img img { transform: scale(1.1) rotate(-2deg); }
.cat-img b { transition: transform .5s var(--ease-spring); }
.cat:hover .cat-img b { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
.cat-count { display: inline-flex; align-items: center; gap: 4px; }
.cat-count .si { width: 14px; height: 14px; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.cat:hover .cat-count .si { opacity: 1; transform: none; }

/* ---------- offers & countdown ---------- */
.offer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-110%); }
.motion .offer.in::after { animation: shine 1.6s var(--ease-out) .5s 1 both; }
@keyframes shine { to { transform: translateX(110%); } }
.offer-body, .offer-timer { position: relative; z-index: 1; }
.on-screen .offer-kicker .si { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(90deg) scale(1.25); } }
.motion .offer.on-screen .offer-deco i:nth-child(1) { animation: blobDrift 16s ease-in-out infinite alternate; }
.countdown div { overflow: hidden; }
.countdown b.tick { animation: digit .45s var(--ease-out); }
@keyframes digit { from { opacity: .2; transform: translateY(-55%); } }
.countdown.ended { animation: riseIn .4s var(--ease-out); }
.offer-copy { transition: transform var(--dur) var(--ease-spring), background var(--dur); }
.offer-copy:hover { transform: scale(1.12) rotate(-6deg); background: var(--pink-100); }
[data-offer].is-ending { opacity: 0; transform: scale(.97) translateY(8px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ---------- Koko ---------- */
.koko { position: relative; overflow: hidden; }
.koko::before { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(123,92,240,.16), transparent 70%); pointer-events: none; }
.koko-mark { position: relative; transition: transform .5s var(--ease-out); }
.koko:hover .koko-mark { transform: rotate(-2deg) scale(1.03); }
.koko-mark span { background: linear-gradient(120deg, var(--koko), var(--koko-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.koko-orbit { position: absolute; inset: -10px; border-radius: 26px; border: 2px dashed rgba(123,92,240,.35); pointer-events: none; }
.motion .koko.on-screen .koko-orbit { animation: orbitPulse 4s ease-in-out infinite; }
@keyframes orbitPulse { 50% { transform: scale(1.04); opacity: .55; } }
.koko-steps li { transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); }
.koko-steps li:hover { transform: translateY(-3px); border-color: #D9D0FB; box-shadow: var(--sh-2); }
.koko .kicker { color: var(--koko); }
.koko-off .kicker { color: var(--muted); }

/* ---------- benefits, social, footer ---------- */
.benefit { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.benefit-ic { transition: transform .45s var(--ease-spring); }
.benefit:hover .benefit-ic { transform: rotate(-8deg) scale(1.1); }
.ig-tile { transition: transform .4s var(--ease-out), box-shadow .4s; }
.ig-tile:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--sh-3); }
.ig-tile:nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }
.social-panel { transition: transform .35s var(--ease-out), box-shadow .35s; }
.social-panel:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.social-ic { transition: transform .5s var(--ease-spring); }
.social-panel:hover .social-ic, .social-card:hover .social-ic { transform: rotate(-10deg) scale(1.08); }
.social a { transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-spring); }
.social a:hover { transform: translateY(-3px) rotate(-8deg) scale(1.08); }
.fgrid > div > a { transition: color var(--dur-fast), transform var(--dur) var(--ease-out); }
.fgrid > div > a:hover { transform: translateX(4px); }
.chip { transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out); }
.chip:hover { transform: translateY(-2px); }
.tabs a { transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out); }
.tabs a:hover { transform: translateY(-1px); }
.link-more .si { transition: transform var(--dur) var(--ease-out); }

/* ---------- product details, cart, forms ---------- */
.gallery-main img { transition: opacity .22s ease, transform .5s var(--ease-out); }
.gallery-main.is-swapping img { opacity: 0; transform: scale(.97); }
.gallery-main.can-zoom { cursor: zoom-in; }
.gallery-main.can-zoom:hover img { transform: scale(1.6); transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .25s ease-out, opacity .22s; }
.thumbs button { transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button.on { transform: scale(1.05); }
.stepper input.bump { animation: qtyBump .3s var(--ease-spring); }
@keyframes qtyBump { 50% { transform: scale(1.25); color: var(--pink-600); } }
.stepper button { transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.stepper button:active { transform: scale(.85); }
.cart-item { transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.cart-item.is-updating { opacity: .55; pointer-events: none; }
.cart-item.is-removing { opacity: 0; transform: translateX(30px); }
.motion .promo-box { animation: riseIn .6s var(--ease-out) .2s backwards; }
.field .err { animation: errIn .3s var(--ease-out); }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } }
.has-err .input { animation: shake .35s ease; }
.notice { animation: noticeIn .45s var(--ease-out); }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-8px); } }
.radio-card { transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease-out); }
.radio-card:not(.is-unavailable):hover { transform: translateY(-2px); }
.radio-card:has(input:checked) > .si { animation: badgePop .45s var(--ease-spring); }
.toast { animation: toastIn .45s var(--ease-spring); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }

/* ---------- floating WhatsApp ---------- */
.wa-float { transition: transform .35s var(--ease-out), opacity .3s, background .2s; }
.motion .wa-float { animation: waIn .6s var(--ease-spring) 1.2s backwards; }
@keyframes waIn { from { opacity: 0; transform: translateY(24px) scale(.6); } }
.wa-float::before { animation-iteration-count: 3; animation-delay: 2s; }
.wa-float .si { transition: transform .45s var(--ease-spring); }
.wa-float:hover .si { transform: rotate(-12deg) scale(1.1); }
.wa-float.is-tucked { opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; }

/* ---------- lighter on phones; nothing for reduced motion ---------- */
@media (max-width: 760px) {
  /* swipeable category row: cards off to the side must never wait for a reveal */
  .motion .cats > :not(.rv-done) { opacity: 1; transform: none; }
  .motion .hero-deco i, .motion .hero-art .blob { animation: none; }
  .hero-deco .d4, .hero-deco .d5, .hero-deco .d6 { display: none; }
  .wa-float { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-deco { display: none; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.hero .hero-cta { gap: 10px; }
.hero .btn-lg { padding-left: 24px; padding-right: 24px; }
.hero .btn-offers { padding-left: 12px; padding-right: 12px; }
@media (min-width: 1025px) { .hero-grid { grid-template-columns: 1.2fr .8fr; } }