/* Background Effects Extension Styles */

.background-effects-container {
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

/* Back layer - fixed positioning for consistent behavior across themes */
.background-effects-container.layer-back {
  position: fixed !important;
  z-index: -1 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: transparent !important;
}

/* Make body and content transparent so spiders show through */
body.back-layer-active {
  background: transparent !important;
}

body.back-layer-active main,
body.back-layer-active .main,
body.back-layer-active .main-content,
body.back-layer-active .page-width,
body.back-layer-active .shopify-section,
body.back-layer-active header,
body.back-layer-active .header,
body.back-layer-active footer,
body.back-layer-active .footer,
body.back-layer-active .template-page,
body.back-layer-active .template-product,
body.back-layer-active .template-collection,
body.back-layer-active .shopify-section-group-header-group,
body.back-layer-active .shopify-section-group-main,
body.back-layer-active .shopify-section-group-footer-group {
  background: transparent !important;
}

/* Front layer - fixed positioning above everything */
.background-effects-container.layer-front {
  position: fixed !important;
  z-index: 999999 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Ensure spiders inherit z-index from container */
.spiders-effect {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  z-index: inherit !important;
}

.spider {
  position: absolute !important;
  z-index: inherit !important;
}

/* Force spider visibility in back mode */
.background-effects-container.layer-back .spider {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Global disable */
.background-effects-container.globally-disabled {
  display: none !important;
}

/* Spiders Effect */
.spiders-effect {
  position: absolute;
  width: 100%;
  height: 100%;
}

.spider {
  position: absolute;
  font-size: 34px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Apply effects only when in front layer */
.background-effects-container.layer-front .spider {
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 8px rgba(139, 69, 19, 0.2));
}

/* Spiders - Bottom to top crawling */
.spider.version-1 {
  animation: spiderCrawl 25s linear infinite;
}

/* Spider - Emoji handled by JavaScript to prevent double rendering */

/* 3D effect only for front layer - applied directly to spider element */
.background-effects-container.layer-front .spider.version-1 {
  transform: perspective(100px) rotateX(15deg) rotateY(-5deg);
}


/* Spider crawling animation - bottom to top */
@keyframes spiderCrawl {
  0% {
    transform: translateY(100vh) translateX(0px) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) translateX(0px) scale(1);
    opacity: 0;
  }
}

/* Spider delays - positioning will be set randomly via JavaScript */
.spider:nth-child(1) {
  animation-delay: 0s;
}

.spider:nth-child(2) {
  animation-delay: 2s;
}

.spider:nth-child(3) {
  animation-delay: 4s;
}

.spider:nth-child(4) {
  animation-delay: 6s;
}

.spider:nth-child(5) {
  animation-delay: 8s;
}

/* Mobile responsive optimizations */
@media (max-width: 768px) {
  .spider {
    font-size: 28px;
  }
  
  .spider.version-1 {
    animation-duration: 20s;
  }
  
  .spider.version-2 {
    animation-duration: 20s;
  }
  
  .spider.version-2 .svg-spider-container {
    width: 28px;
    height: 28px;
  }
  
  .spider.version-2 .svg-spider-container svg {
    width: 28px;
    height: 28px;
  }
  
  
  /* Keep all spiders visible on mobile for back layer mode */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .spider {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Performance optimizations */
.spiders-effect,
.spider {
  will-change: transform;
  backface-visibility: hidden;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .spider {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
            contrast(1.2);
  }
}

/* Fall Effect */
.fall-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.fall-emoji {
  position: absolute;
  font-size: 50px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Apply effects only when in front layer */
.background-effects-container.layer-front .fall-emoji {
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
          drop-shadow(0 0 6px rgba(255, 165, 0, 0.1));
}

/* Fall animation - top to bottom with zig-zag and rotation */
.fall-emoji {
  animation: fallDown 12s linear infinite;
}

/* 3D effect only for front layer */
.background-effects-container.layer-front .fall-emoji {
  transform: perspective(100px) rotateX(10deg) rotateY(-3deg);
}

/* Fall animation with zig-zag movement and rotation */
@keyframes fallDown {
  0% {
    transform: translateY(-50px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    transform: translateY(10vh) translateX(calc(var(--zigzag-amplitude) * 0.2)) rotate(36deg);
  }
  20% {
    transform: translateY(20vh) translateX(calc(var(--zigzag-amplitude) * -0.1)) rotate(72deg);
  }
  30% {
    transform: translateY(30vh) translateX(calc(var(--zigzag-amplitude) * 0.4)) rotate(108deg);
  }
  40% {
    transform: translateY(40vh) translateX(calc(var(--zigzag-amplitude) * -0.2)) rotate(144deg);
  }
  50% {
    transform: translateY(50vh) translateX(calc(var(--zigzag-amplitude) * 0.6)) rotate(180deg);
  }
  60% {
    transform: translateY(60vh) translateX(calc(var(--zigzag-amplitude) * -0.3)) rotate(216deg);
  }
  70% {
    transform: translateY(70vh) translateX(calc(var(--zigzag-amplitude) * 0.8)) rotate(252deg);
  }
  80% {
    transform: translateY(80vh) translateX(calc(var(--zigzag-amplitude) * -0.4)) rotate(288deg);
  }
  90% {
    transform: translateY(90vh) translateX(calc(var(--zigzag-amplitude) * 0.9)) rotate(324deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(calc(var(--zigzag-amplitude) * 1)) rotate(360deg);
    opacity: 0;
  }
}

/* Mobile responsive optimizations for fall effect */
@media (max-width: 768px) {
  .fall-emoji {
    font-size: 40px;
  }
  
  .fall-emoji {
    animation-duration: 10s;
  }
  
  /* Keep all fall emojis visible on mobile for back layer mode */
}

/* Reduced motion support for fall effect */
@media (prefers-reduced-motion: reduce) {
  .fall-emoji {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Performance optimizations for fall effect */
.fall-effect,
.fall-emoji {
  will-change: transform;
  backface-visibility: hidden;
}

/* High contrast mode support for fall effect */
@media (prefers-contrast: high) {
  .fall-emoji {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
            contrast(1.2);
  }
}

/* Ladybug Effect */
.ladybug-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.ladybug {
  position: absolute;
  font-size: 28px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Apply effects only when in front layer */
.background-effects-container.layer-front .ladybug {
  transform-style: preserve-3d;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2))
          drop-shadow(0 0 4px rgba(255, 0, 0, 0.1));
}

/* 3D effect only for front layer */
.background-effects-container.layer-front .ladybug {
  transform: perspective(100px) rotateX(5deg) rotateY(-2deg);
}

/* Ladybug crawling animation - bottom to top with oscillation */
@keyframes ladybugCrawl {
  0% {
    transform: translateY(100vh) translateX(0px) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) translateX(0px) scale(1);
    opacity: 0;
  }
}

/* Ladybug horizontal oscillation for crawling motion */
@keyframes ladybugOscillation {
  0%, 100% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(calc(var(--oscillation-amplitude) * 0.5));
  }
  50% {
    transform: translateX(calc(var(--oscillation-amplitude) * -0.3));
  }
  75% {
    transform: translateX(calc(var(--oscillation-amplitude) * 0.7));
  }
}

/* Mobile responsive optimizations for ladybug effect */
@media (max-width: 768px) {
  .ladybug {
    font-size: 24px;
  }
  
  .ladybug {
    animation-duration: 16s;
  }
  
  /* Keep all ladybugs visible on mobile for back layer mode */
}

/* Reduced motion support for ladybug effect */
@media (prefers-reduced-motion: reduce) {
  .ladybug {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Performance optimizations for ladybug effect */
.ladybug-effect,
.ladybug {
  will-change: transform;
  backface-visibility: hidden;
}

/* High contrast mode support for ladybug effect */
@media (prefers-contrast: high) {
  .ladybug {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
            contrast(1.2);
  }
}

/* Halloween Effect */
.halloween-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.halloween-element {
  position: absolute;
  font-size: 48px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Apply effects only when in front layer */
.background-effects-container.layer-front .halloween-element {
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 8px rgba(255, 165, 0, 0.2));
}

/* 3D effect only for front layer */
.background-effects-container.layer-front .halloween-element.pumpkin {
  transform: perspective(100px) rotateX(10deg) rotateY(-5deg);
}

.background-effects-container.layer-front .halloween-element.ghost {
  transform: perspective(100px) rotateX(5deg) rotateY(-3deg);
}

/* Halloween animations - pumpkins zoom in/out */
@keyframes pumpkinHalloween {
  0% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateY(0px) translateX(0px) scale(var(--zoom-scale));
  }
  40% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
  60% {
    transform: translateY(0px) translateX(0px) scale(var(--zoom-scale));
  }
  80% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0;
  }
}

/* Halloween animations - ghosts drift with sway */
@keyframes ghostHalloween {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translateY(-20px) translateX(calc(var(--sway-amplitude) * 0.3));
  }
  50% {
    transform: translateY(-40px) translateX(calc(var(--sway-amplitude) * -0.2));
  }
  75% {
    transform: translateY(-20px) translateX(calc(var(--sway-amplitude) * 0.4));
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
}

/* Continuous zoom animation for pumpkins */
@keyframes pumpkinZoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--zoom-scale));
  }
}

/* Continuous drift animation for ghosts */
@keyframes ghostDrift {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-15px) translateX(calc(var(--sway-amplitude) * 0.3));
  }
  50% {
    transform: translateY(-30px) translateX(calc(var(--sway-amplitude) * -0.2));
  }
  75% {
    transform: translateY(-15px) translateX(calc(var(--sway-amplitude) * 0.4));
  }
}

/* Mobile responsive optimizations for halloween effect */
@media (max-width: 768px) {
  .halloween-element {
    font-size: 36px;
  }
  
  .halloween-element.pumpkin {
    animation-duration: 12s;
  }
  
  .halloween-element.ghost {
    animation-duration: 10s;
  }
  
  /* Keep all halloween elements visible on mobile for back layer mode */
}

/* Reduced motion support for halloween effect */
@media (prefers-reduced-motion: reduce) {
  .halloween-element {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Performance optimizations for halloween effect */
.halloween-effect,
.halloween-element {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* High contrast mode support for halloween effect */
@media (prefers-contrast: high) {
  .halloween-element {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
            contrast(1.2);
  }
}

/* Thanksgiving Effect */
.thanksgiving-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.thanksgiving-element {
  position: absolute;
  font-size: 36px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Apply effects only when in front layer */
.background-effects-container.layer-front .thanksgiving-element {
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
          drop-shadow(0 0 6px rgba(255, 140, 0, 0.1));
}

/* 3D effect only for front layer */
.background-effects-container.layer-front .thanksgiving-element.leaf {
  transform: perspective(100px) rotateX(10deg) rotateY(-3deg);
}

.background-effects-container.layer-front .thanksgiving-element.turkey {
  transform: perspective(100px) rotateX(5deg) rotateY(-2deg);
}

/* Thanksgiving leaf falling animation with sway and rotation */
@keyframes leafFall {
  0% {
    transform: translateY(-50px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    transform: translateY(10vh) translateX(calc(var(--leaf-sway) * 0.2)) rotate(36deg);
  }
  20% {
    transform: translateY(20vh) translateX(calc(var(--leaf-sway) * -0.1)) rotate(72deg);
  }
  30% {
    transform: translateY(30vh) translateX(calc(var(--leaf-sway) * 0.4)) rotate(108deg);
  }
  40% {
    transform: translateY(40vh) translateX(calc(var(--leaf-sway) * -0.2)) rotate(144deg);
  }
  50% {
    transform: translateY(50vh) translateX(calc(var(--leaf-sway) * 0.6)) rotate(180deg);
  }
  60% {
    transform: translateY(60vh) translateX(calc(var(--leaf-sway) * -0.3)) rotate(216deg);
  }
  70% {
    transform: translateY(70vh) translateX(calc(var(--leaf-sway) * 0.8)) rotate(252deg);
  }
  80% {
    transform: translateY(80vh) translateX(calc(var(--leaf-sway) * -0.4)) rotate(288deg);
  }
  90% {
    transform: translateY(90vh) translateX(calc(var(--leaf-sway) * 0.9)) rotate(324deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(calc(var(--leaf-sway) * 1)) rotate(360deg);
    opacity: 0;
  }
}

/* Thanksgiving turkey walking animation - left to right (flipped to face right) */
@keyframes turkeyWalkLeftToRight {
  0% {
    transform: translateX(-100px) scaleX(-1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 100px)) scaleX(-1);
    opacity: 0;
  }
}

/* Thanksgiving turkey walking animation - right to left (natural facing left) */
@keyframes turkeyWalkRightToLeft {
  0% {
    transform: translateX(calc(100vw + 20px));
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100px);
    opacity: 0;
  }
}

/* Mobile responsive optimizations for thanksgiving effect */
@media (max-width: 768px) {
  .thanksgiving-element {
    font-size: 28px;
  }
  
  .thanksgiving-element.leaf {
    animation-duration: 10s;
  }
  
  .thanksgiving-element.turkey {
    animation-duration: 6s;
  }
  
  /* Keep all thanksgiving elements visible on mobile for back layer mode */
}

/* Reduced motion support for thanksgiving effect */
@media (prefers-reduced-motion: reduce) {
  .thanksgiving-element {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Performance optimizations for thanksgiving effect */
.thanksgiving-effect,
.thanksgiving-element {
  will-change: transform;
  backface-visibility: hidden;
}

/* High contrast mode support for thanksgiving effect */
@media (prefers-contrast: high) {
  .thanksgiving-element {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8))
            contrast(1.2);
  }
}

/* Hearts Effect */
.hearts-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: inherit;
}

.heart {
  position: absolute;
  font-size: 24px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Apply subtle styling only when in front layer */
.background-effects-container.layer-front .heart {
  transform-style: preserve-3d;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15))
          drop-shadow(0 0 4px rgba(255, 0, 0, 0.08));
}

@media (max-width: 768px) {
  .heart {
    font-size: 20px;
  }
}

/* Hearts Effect - mobile fade timing: redefine heartBloom keyframes only on mobile */
@media (max-width: 768px) {
  @keyframes heartBloom {
    0% { transform: translateZ(0) scale(0.8); opacity: 0; }
    30% { transform: translateZ(0) scale(var(--bloom-scale)); opacity: 1; }
    75% { transform: translateZ(0) scale(var(--bloom-scale)); opacity: 1; }
    100% { transform: translateZ(0) scale(calc(var(--bloom-scale) * 1.05)); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Shamrocks Effect - mobile adjustments */
@media (max-width: 768px) {
  /* Further reduce size by ~20% (48px → 38.4px) and hide every 2nd */
  .shamrocks-effect .shamrock {
    font-size: 38.4px !important;
  }
  .shamrocks-effect .shamrock:nth-child(2n) {
    display: none !important;
  }
}
/* Schedule warning — theme editor only.
   Rendered by maybeWarnInEditor() and appended to <body> rather than the
   effects container, which is pointer-events:none at z-index:-1 and would
   bury it. Shoppers never see this: Shopify.designMode gates it. */
.bfx-schedule-warning {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 380px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #d9822b;
  background: #fff8f0;
  color: #4a2c08;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.bfx-schedule-warning strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.bfx-schedule-warning ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.bfx-schedule-warning li {
  margin-bottom: 4px;
}

.bfx-schedule-warning p {
  margin: 0;
  opacity: 0.75;
  font-size: 12px;
}