/** Shopify CDN: Minification failed

Line 467:0 Unexpected "}"
Line 500:0 Unexpected "}"

**/
/* =========================================================
   Pawkemon Halloween Effects 2026
   Homepage only · Mobile-first · Pointer-safe
   ========================================================= */

:root {
  --pawkemon-web-color: #fff8fd;
  --pawkemon-web-shadow: rgba(91, 58, 105, 0.22);
  --pawkemon-bat-color: #3a243f;
  --pawkemon-grave-color: #65526f;
  --pawkemon-grave-detail: #f5dceb;
  --pawkemon-ghost-color: #fff9f4;
  --pawkemon-ghost-cheek: #f3a9c2;
}

/* 整个装饰层不接管页面点击 */
.pawkemon-halloween-effects {
  position: fixed;
  inset: 0;
  z-index: 29;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}

/* =========================================================
   1. Hero左右蜘蛛网
   ========================================================= */

.pawkemon-halloween-web {
  position: absolute;
  top: 0;
  width: clamp(92px, 28vw, 145px);
  height: clamp(92px, 28vw, 145px);
  color: var(--pawkemon-web-color);
  opacity: 0.88;
  filter: drop-shadow(0 2px 2px var(--pawkemon-web-shadow));
  pointer-events: none;
}

.pawkemon-halloween-web--left {
  left: 0;
}

.pawkemon-halloween-web--right {
  right: 0;
  transform: scaleX(-1);
}

.pawkemon-halloween-web svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   2. 右上角吊蜘蛛
   ========================================================= */

.pawkemon-spider {
  position: absolute;
  top: 0;
  right: clamp(18px, 7vw, 48px);
  width: 30px;
  height: 118px;
  transform: translateY(-105px);
  transform-origin: top center;
  animation: pawkemon-spider-cycle 14s ease-in-out 1.5s infinite;
  pointer-events: none;
  will-change: transform;
}

.pawkemon-spider__thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 88px;
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 253, 0.95),
    rgba(209, 188, 218, 0.78)
  );
  transform: translateX(-50%);
}

.pawkemon-spider__body {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 22px;
  height: 24px;
  color: #332039;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

.pawkemon-spider__body svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes pawkemon-spider-cycle {
  0%,
  8% {
    transform: translateY(-105px) rotate(0deg);
  }

  22% {
    transform: translateY(0) rotate(0deg);
  }

  32% {
    transform: translateY(0) rotate(-4deg);
  }

  39% {
    transform: translateY(0) rotate(4deg);
  }

  46% {
    transform: translateY(0) rotate(-3deg);
  }

  55% {
    transform: translateY(0) rotate(0deg);
  }

  70%,
  100% {
    transform: translateY(-105px) rotate(0deg);
  }
}

/* 电脑端鼠标靠近蜘蛛时快速缩回 */
@media (hover: hover) and (pointer: fine) {
  .pawkemon-spider {
    pointer-events: auto;
  }

  .pawkemon-spider.is-frightened {
    animation: none;
    transform: translateY(-105px);
    transition: transform 220ms ease-in;
  }
}

/* =========================================================
   3. 两组飞行蝙蝠
   ========================================================= */

.pawkemon-bat-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  color: var(--pawkemon-bat-color);
  pointer-events: none;
  will-change: transform, opacity;
}

.pawkemon-bat-group--one {
  animation: pawkemon-bat-flight-one 21s linear 3s infinite;
}

.pawkemon-bat-group--two {
  animation: pawkemon-bat-flight-two 25s linear 9s infinite;
}

.pawkemon-bat {
  position: absolute;
  display: block;
  width: 38px;
  height: 22px;
  transform-origin: center;
}

.pawkemon-bat svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pawkemon-bat__wings {
  transform-origin: center;
  animation: pawkemon-bat-flap 560ms ease-in-out infinite;
}

.pawkemon-bat--small {
  width: 25px;
  height: 15px;
  opacity: 0.74;
}

.pawkemon-bat--large {
  width: 46px;
  height: 27px;
}

.pawkemon-bat-group--one .pawkemon-bat:nth-child(1) {
  left: 0;
  top: 0;
}

.pawkemon-bat-group--one .pawkemon-bat:nth-child(2) {
  left: 48px;
  top: 28px;
  animation-delay: 150ms;
}

.pawkemon-bat-group--two .pawkemon-bat:nth-child(1) {
  left: 0;
  top: 0;
}

.pawkemon-bat-group--two .pawkemon-bat:nth-child(2) {
  left: 52px;
  top: -24px;
}

.pawkemon-bat-group--two .pawkemon-bat:nth-child(3) {
  left: 91px;
  top: 18px;
}

@keyframes pawkemon-bat-flap {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.58);
  }
}

/* 9秒飞行，其余时间等待 */
@keyframes pawkemon-bat-flight-one {
  0% {
    opacity: 0;
    transform: translate3d(-120px, 78vh, 0) rotate(-15deg) scale(0.82);
  }

  3% {
    opacity: 0.88;
  }

  39% {
    opacity: 0.88;
    transform: translate3d(108vw, 18vh, 0) rotate(9deg) scale(1.05);
  }

  42%,
  100% {
    opacity: 0;
    transform: translate3d(108vw, 18vh, 0) rotate(9deg) scale(1.05);
  }
}

/* 约11秒飞行，其余时间等待 */
@keyframes pawkemon-bat-flight-two {
  0% {
    opacity: 0;
    transform: translate3d(112vw, 38vh, 0) rotate(8deg) scale(0.62);
  }

  3% {
    opacity: 0.7;
  }

  43% {
    opacity: 0.7;
    transform: translate3d(-180px, 8vh, 0) rotate(-9deg) scale(0.94);
  }

  46%,
  100% {
    opacity: 0;
    transform: translate3d(-180px, 8vh, 0) rotate(-9deg) scale(0.94);
  }
}

/* =========================================================
   4. 两个小墓碑
   只在屏幕边缘移动，不占中间商品区域
   ========================================================= */

.pawkemon-grave {
  position: absolute;
  width: 54px;
  height: 68px;
  opacity: 0;
  color: var(--pawkemon-grave-color);
  pointer-events: none;
  will-change: transform, opacity;
}

.pawkemon-grave svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 5px rgba(48, 31, 53, 0.2));
}

.pawkemon-grave--left {
  left: -9px;
  animation: pawkemon-grave-left 24s ease-in-out 6s infinite;
}

.pawkemon-grave--right {
  right: -10px;
  width: 49px;
  height: 62px;
  animation: pawkemon-grave-right 28s ease-in-out 14s infinite;
}

@keyframes pawkemon-grave-left {
  0% {
    opacity: 0;
    transform: translate3d(-42px, 86vh, 0) rotate(-10deg);
  }

  8% {
    opacity: 0.6;
  }

  38% {
    opacity: 0.6;
    transform: translate3d(14px, 48vh, 0) rotate(4deg);
  }

  48% {
    opacity: 0;
    transform: translate3d(23px, 38vh, 0) rotate(8deg);
  }

  49%,
  100% {
    opacity: 0;
  }
}

@keyframes pawkemon-grave-right {
  0% {
    opacity: 0;
    transform: translate3d(42px, 70vh, 0) rotate(10deg);
  }

  8% {
    opacity: 0.56;
  }

  37% {
    opacity: 0.56;
    transform: translate3d(-13px, 34vh, 0) rotate(-4deg);
  }

  47% {
    opacity: 0;
    transform: translate3d(-20px, 26vh, 0) rotate(-7deg);
  }

  48%,
  100% {
    opacity: 0;
  }
}

/* =========================================================
   Halloween Specials幽灵从左侧探头
   ========================================================= */

.pawkemon-ghost-peek {
  position: absolute;
  top: 105px;
  left: -58px;
  right: auto;
  bottom: auto;
  z-index: 20;

  width: 72px;
  height: 92px;

  color: var(--pawkemon-ghost-color);
  opacity: 0;

  transform: translate3d(0, 8px, 0) rotate(8deg);

  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(65, 43, 72, 0.22));
  will-change: transform, opacity;
}

.pawkemon-ghost-peek.is-peeking {
  animation: pawkemon-ghost-peek-animation 6s
    cubic-bezier(0.4, 0, 0.2, 1) both;
}

.pawkemon-ghost-peek svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes pawkemon-ghost-peek-animation {
  /* 藏在Section左侧 */
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) rotate(8deg);
  }

  /* 开始探头 */
  10% {
    opacity: 1;
    transform: translate3d(42px, 0, 0) rotate(8deg);
  }

  /* 完整探出 */
  23% {
    opacity: 1;
    transform: translate3d(58px, 0, 0) rotate(5deg);
  }

  /* 停留 */
  55% {
    opacity: 1;
    transform: translate3d(58px, -4px, 0) rotate(-4deg);
  }

  /* 轻轻摇摆 */
  70% {
    opacity: 1;
    transform: translate3d(55px, 1px, 0) rotate(4deg);
  }

  /* 开始缩回 */
  86% {
    opacity: 1;
    transform: translate3d(42px, 3px, 0) rotate(8deg);
  }

  /* 完全消失 */
  100% {
    opacity: 0;
    transform: translate3d(-4px, 8px, 0) rotate(8deg);
  }
}

@media screen and (max-width: 749px) {
  .pawkemon-ghost-peek {
    top: 88px;
    left: -52px;
    right: auto;
    width: 72px;
    height: 83px;
  }
}
}

/* =========================================================
   手机端安全调整
   ========================================================= */

@media screen and (max-width: 749px) {
  .pawkemon-halloween-web {
    width: 110px;
    height: 110px;
  }

  .pawkemon-spider {
    right: 17px;
    width: 27px;
    height: 108px;
  }

  .pawkemon-spider__thread {
    height: 81px;
  }

  .pawkemon-grave {
    width: 46px;
    height: 59px;
  }

  .pawkemon-grave--right {
    width: 43px;
    height: 55px;
  }

  }
}

/* 用户选择减少动态效果时，仅保留静态蜘蛛网 */
@media (prefers-reduced-motion: reduce) {
  .pawkemon-spider,
  .pawkemon-bat-group,
  .pawkemon-grave,
  .pawkemon-ghost-peek {
    display: none !important;
    animation: none !important;
  }
}/* =========================================================
   PAWKEMON — ADD TO CART CANDY BURST
   ========================================================= */

.pawkemon-candy-burst-layer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.pawkemon-candy-particle {
  --burst-x: 0px;
  --burst-y: -70px;
  --burst-rotate: 0deg;
  --burst-duration: 780ms;

  position: fixed;
  left: 0;
  top: 0;
  display: block;

  font-size: 22px;
  line-height: 1;

  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;

  filter: drop-shadow(0 3px 3px rgba(56, 21, 63, 0.18));

  animation:
    pawkemon-candy-burst
    var(--burst-duration)
    cubic-bezier(0.18, 0.75, 0.26, 1)
    forwards;
}

@keyframes pawkemon-candy-burst {
  0% {
    opacity: 0;
    transform:
      translate3d(0, 4px, 0)
      rotate(0deg)
      scale(0.35);
  }

  18% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--burst-x) * 0.18),
        calc(var(--burst-y) * 0.18),
        0
      )
      rotate(calc(var(--burst-rotate) * 0.18))
      scale(1.12);
  }

  68% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--burst-x) * 0.72),
        calc(var(--burst-y) * 0.72),
        0
      )
      rotate(calc(var(--burst-rotate) * 0.72))
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        var(--burst-x),
        var(--burst-y),
        0
      )
      rotate(var(--burst-rotate))
      scale(0.82);
  }
}

/* 手机端稍小，避免遮挡商品信息 */
@media screen and (max-width: 749px) {
  .pawkemon-candy-particle {
    font-size: 19px;
  }
}

/* 用户开启“减少动态效果”时完全关闭 */
@media (prefers-reduced-motion: reduce) {
  .pawkemon-candy-particle {
    display: none !important;
    animation: none !important;
  }
}