/* Rocket Grunt UX animations (2026-10-10). Loaded by the Code Snippet "Design: UX animations".
   First-paint pieces (logo centring, hero headline, price, stock dot) are inline in <head> from that snippet;
   everything here is non-critical. Transform/opacity only; prefers-reduced-motion switches motion off. */
:root { --fx-red: #e0322b; --fx-red-2: #ff5a4e; --fx-gold: #ffcb3d; --fx-ease: cubic-bezier(.2, .75, .2, 1); --fx-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* scroll progress bar */
#fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100001; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--fx-red), var(--fx-red-2) 60%, var(--fx-gold));
  box-shadow: 0 0 10px rgba(224, 50, 43, .6); }

/* foil shine on buttons (hover devices) */
.fx-clip { position: relative !important; overflow: hidden !important; isolation: isolate; }
.fx-shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; overflow: hidden; }
.fx-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 55%, transparent);
  transform: skewX(-20deg); }
.fx-btn:hover .fx-shine::before, .fx-btn:focus-visible .fx-shine::before { animation: fx-sweep .75s var(--fx-ease); }
.fx-btn { transition: transform .25s var(--fx-spring), box-shadow .25s ease !important; }
.fx-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(224, 50, 43, .55); }
@keyframes fx-sweep { from { left: -70%; } to { left: 130%; } }

/* smart sticky header */
html.fx-hdr-fixed #site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999;
  transform: translateY(-105%); transition: transform .35s var(--fx-ease), box-shadow .35s ease; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
html.fx-hdr-fixed.fx-hdr-show #site-header { transform: none; }
html.fx-hdr-instant #site-header { transition: none !important; }
.fx-hdr-spacer { display: none; }
html.fx-hdr-fixed .fx-hdr-spacer { display: block; }
html.fx-hdr-fixed body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) { html.fx-hdr-fixed body.admin-bar #site-header { top: 46px; } }
@media (max-width: 600px) { html.fx-hdr-fixed body.admin-bar #site-header { top: 0; } }

/* menu underline + dropdown drop */
#site-navigation-wrap .dropdown-menu > li > a .text-wrap {
  background-image: linear-gradient(90deg, var(--fx-red), var(--fx-gold)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 2px; padding-bottom: 3px; transition: background-size .35s var(--fx-ease); }
#site-navigation-wrap .dropdown-menu > li:hover > a .text-wrap,
#site-navigation-wrap .dropdown-menu > li > a:focus-visible .text-wrap { background-size: 100% 2px; }
#site-navigation-wrap .dropdown-menu li:hover > ul.sub-menu { animation: fx-drop .32s var(--fx-ease) both; }
#site-navigation-wrap .dropdown-menu li:hover > ul.sub-menu > li { animation: fx-drop-item .35s var(--fx-ease) both; }
#site-navigation-wrap ul.sub-menu > li:nth-child(2) { animation-delay: .03s !important; }
#site-navigation-wrap ul.sub-menu > li:nth-child(3) { animation-delay: .06s !important; }
#site-navigation-wrap ul.sub-menu > li:nth-child(4) { animation-delay: .09s !important; }
#site-navigation-wrap ul.sub-menu > li:nth-child(5) { animation-delay: .12s !important; }
#site-navigation-wrap ul.sub-menu > li:nth-child(6) { animation-delay: .15s !important; }
#site-navigation-wrap ul.sub-menu > li:nth-child(n+7) { animation-delay: .18s !important; }
#site-navigation-wrap ul.sub-menu a { transition: padding-left .2s ease, color .2s ease; }
#site-navigation-wrap ul.sub-menu a:hover { padding-left: 22px; }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-10px) rotateX(-12deg); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes fx-drop-item { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* soft image loading (late lazy images only) */
img.fx-img-wait:not(.fx-img-done) { opacity: 0; transform: scale(1.015); }
img.fx-img-done { transition: opacity .5s ease, transform .6s var(--fx-ease); }

/* rocket back-to-top: round 44px, lined up with the WhatsApp button (same centre line, 12px gap) */
html body #scroll-top { width: 44px !important; height: 44px !important; line-height: 44px !important; right: 25px !important; bottom: 86px !important;
  border-radius: 50% !important; background: rgba(22, 24, 29, .78) !important; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45); overflow: visible;
  transition: background-color .25s ease, transform .3s var(--fx-spring), box-shadow .25s ease !important; }
html body #scroll-top svg { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; transition: transform .3s var(--fx-spring), opacity .2s ease; }
html body #scroll-top::after { content: ""; position: absolute; left: 50%; top: 29px; width: 8px; height: 10px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 20%, #fff 0 18%, var(--fx-gold) 40%, #ff7a2e 70%, transparent 72%); opacity: 0; transform: scaleY(.3); transform-origin: 50% 0;
  transition: opacity .2s ease, transform .2s ease; }
@media (hover: hover) {
  html body #scroll-top:hover { background: var(--fx-red) !important; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(224, 50, 43, .7); }
  html body #scroll-top:hover svg { transform: translateY(-4px); }
  html body #scroll-top:hover::after { opacity: 1; transform: none; animation: fx-flame .12s linear infinite alternate; }
}
html body #scroll-top.fx-launching svg, html body #scroll-top.fx-launching::after { opacity: 0 !important; transition: none; }
@media (max-width: 767px) { html body #scroll-top { right: 19px !important; bottom: 80px !important; } }
.fx-rocket { position: fixed; z-index: 100003; pointer-events: none; width: 26px; height: 44px; margin: -22px 0 0 -13px; will-change: transform; }
.fx-rocket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-rocket .fx-rk-flame { transform-box: fill-box; transform-origin: 50% 0; animation: fx-flame .07s linear infinite alternate; }
.fx-puff { position: fixed; z-index: 100002; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(200, 204, 212, .7); }
@keyframes fx-flame { from { transform: scaleY(.8) scaleX(.95); } to { transform: scaleY(1.2) scaleX(1.05); } }

/* smooth FAQ accordions */
details > summary { transition: color .2s ease; }
details[open] > summary { color: var(--fx-red-2); }
details.fx-acc-anim { overflow: hidden; }

/* homepage: floating energy particles */
.fx-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect; }
.fx-has-canvas .rg-hero-inner { position: relative; z-index: 1; }

/* homepage: hero button pulse */
@media (prefers-reduced-motion: no-preference) {
  .rg-hero-cta { animation: fx-ring 2.8s ease-out 1.6s infinite; }
  .rg-hero-arrow { display: inline-block; animation: fx-nudge 2.8s ease-in-out 1.6s infinite; }
}
@keyframes fx-ring { 0% { box-shadow: 0 0 0 0 rgba(224, 50, 43, .55); } 45%, 100% { box-shadow: 0 0 0 16px rgba(224, 50, 43, 0); } }
@keyframes fx-nudge { 0%, 30%, 100% { transform: none; } 10% { transform: translateX(5px); } 20% { transform: translateX(1px); } }

/* holo foil: full rainbow (Shop by Sets), soft brand glint (New Arrivals), plain sheen (product listings, blog cards) */
.fx-holo-host { transform-style: preserve-3d; will-change: transform; }
.fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .3s ease;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    linear-gradient(115deg, transparent 20%, rgba(255, 0, 132, .22) 32%, rgba(255, 220, 0, .22) 42%, rgba(0, 255, 170, .22) 52%, rgba(0, 140, 255, .22) 62%, transparent 75%);
  background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--gx, 50%) var(--gy, 50%); mix-blend-mode: overlay; }
.fx-holo-host:hover > .fx-glare { opacity: 1; }
[data-holo="soft"] > .fx-glare {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%),
    linear-gradient(115deg, transparent 30%, rgba(255, 236, 200, .10) 42%, rgba(255, 203, 61, .09) 50%, rgba(224, 50, 43, .07) 58%, transparent 70%);
  background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--gx, 50%) var(--gy, 50%); mix-blend-mode: soft-light; }
[data-holo="soft"]:hover > .fx-glare { opacity: .9; }
[data-holo="sheen"] > .fx-glare { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%); mix-blend-mode: soft-light; }
[data-holo="sheen"]:hover > .fx-glare { opacity: 1; }

/* add to basket: photo flies to the basket, basket shakes, count pops, star burst, toast */
.fx-fly { position: fixed; z-index: 100004; pointer-events: none; border-radius: 12px; object-fit: contain; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); margin: 0; max-width: none; }
.fx-cart-hit { animation: fx-cart .6s var(--fx-spring); display: inline-block; }
@keyframes fx-cart { 0% { transform: none; } 25% { transform: scale(1.3) rotate(-12deg); } 50% { transform: scale(1.15) rotate(9deg); } 75% { transform: scale(1.05) rotate(-4deg); } 100% { transform: none; } }
.fx-count-pop { animation: fx-pop .5s var(--fx-spring); display: inline-block; }
@keyframes fx-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.5); } 100% { transform: none; } }
.fx-bit { position: fixed; z-index: 100004; pointer-events: none; width: 9px; height: 9px; border-radius: 2px; }
.fx-bit.star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 13px; height: 13px; border-radius: 0; }
.fx-added { background: #1f9d55 !important; border-color: #1f9d55 !important; color: #fff !important; transition: background .3s ease !important; }
.fx-toast { position: fixed; right: 16px; top: 96px; z-index: 100005; display: flex; gap: 12px; align-items: center; max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px 12px 12px; border-radius: 14px; font: 600 14px/1.3 Poppins, system-ui, sans-serif; color: #fff;
  background: #1c1f24; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .08);
  animation: fx-toast-in .5s var(--fx-spring) both; }
.fx-toast img { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 8px; background: #fff; margin: 0; }
.fx-toast .fx-t-text { flex: 1; min-width: 0; }
.fx-toast small { display: block; font-weight: 400; opacity: .7; font-size: 12px !important; line-height: 1.35 !important; }
.fx-toast a { flex: none; font-size: 12.5px !important; font-weight: 700; color: inherit !important; text-decoration: none; padding: 7px 11px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.fx-toast a:hover { background: var(--fx-red); border-color: var(--fx-red); color: #fff !important; }
.fx-toast.fx-out { animation: fx-toast-out .35s ease forwards; }
@media (prefers-color-scheme: light) { .fx-toast { background: #fff; color: #16181d; border-color: #dadee4; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .25); } .fx-toast img { background: #f4f5f7; } }
@media (max-width: 767px) { .fx-toast { top: auto; bottom: 84px; right: 12px; left: 12px; max-width: none; } }
@keyframes fx-toast-in { from { transform: translateX(120%); } to { transform: none; } }
@keyframes fx-toast-out { to { transform: translateX(120%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-btn, .fx-btn:hover, html body #scroll-top:hover, html body #scroll-top:hover svg { transform: none !important; }
  .fx-shine, .fx-rocket, .fx-puff, .fx-bit, .fx-fly, .fx-hero-canvas, .fx-glare { display: none !important; }
  #site-navigation-wrap .dropdown-menu li:hover > ul.sub-menu, #site-navigation-wrap .dropdown-menu li:hover > ul.sub-menu > li,
  .fx-toast, .fx-toast.fx-out, .fx-cart-hit, .fx-count-pop, html body #scroll-top:hover::after { animation: none !important; }
  html.fx-hdr-fixed #site-header, img.fx-img-done { transition: none !important; }
}