/*
 * Custom CSS for Velora - Halloween Edition (Marble Theme)
 */

/* --------------------------------------------------------------------------
   1. PRODUCT IMAGE TRANSITIONS (Smooth Fade on Image Change)
   -------------------------------------------------------------------------- */

.sa-product-gallery .splide__slide {
  transition: opacity 350ms cubic-bezier(0.25, 1, 0.5, 1), visibility 350ms ease !important;
  will-change: opacity;
}

.sa-product-gallery .splide__slide img {
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sa-product-gallery .splide__slide.is-active img {
  opacity: 1 !important;
  transform: scale(1);
}

.sa-product-gallery .splide__slide:not(.is-active) img {
  opacity: 0 !important;
  transform: scale(0.985);
}

/* Active thumbnail border indicator */
.splide.thumbnails .splide__slide {
  transition: border-color 200ms ease, opacity 200ms ease !important;
}

.splide.thumbnails .splide__slide.is-active {
  border-color: rgba(var(--cl-accent), 1) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   2. CONTENT & CODE PROTECTION (Disable Selection & Drag)
   -------------------------------------------------------------------------- */

html, body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Prevent image dragging and saving */
img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

/* Allow typing in inputs, textareas, and search fields so checkout works */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* --------------------------------------------------------------------------
   3. HALLOWEEN ATMOSPHERE & DECORATIONS
   -------------------------------------------------------------------------- */

/* Spiderwebs in top corners */
.hw-spiderweb {
  position: fixed;
  top: 0;
  width: 140px;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 40;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.hw-spiderweb-left {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23FF7518' stroke-opacity='0.42' stroke-width='1.2'%3E%3Cpath d='M0 0 L140 0 M0 0 L135 35 M0 0 L121 70 M0 0 L99 99 M0 0 L70 121 M0 0 L35 135 M0 0 L0 140'/%3E%3Cpath d='M22 0 Q21 9 16 16 Q9 21 0 22'/%3E%3Cpath d='M45 0 Q42 18 32 32 Q18 42 0 45'/%3E%3Cpath d='M70 0 Q66 28 50 50 Q28 66 0 70'/%3E%3Cpath d='M95 0 Q90 38 67 67 Q38 90 0 95'/%3E%3Cpath d='M120 0 Q114 48 85 85 Q48 114 0 120'/%3E%3Cpath d='M140 0 L132 53 Q99 99 53 132 L0 140'/%3E%3C/svg%3E");
}

.hw-spiderweb-right {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23FF7518' stroke-opacity='0.42' stroke-width='1.2'%3E%3Cg transform='scale(-1, 1) translate(-140, 0)'%3E%3Cpath d='M0 0 L140 0 M0 0 L135 35 M0 0 L121 70 M0 0 L99 99 M0 0 L70 121 M0 0 L35 135 M0 0 L0 140'/%3E%3Cpath d='M22 0 Q21 9 16 16 Q9 21 0 22'/%3E%3Cpath d='M45 0 Q42 18 32 32 Q18 42 0 45'/%3E%3Cpath d='M70 0 Q66 28 50 50 Q28 66 0 70'/%3E%3Cpath d='M95 0 Q90 38 67 67 Q38 90 0 95'/%3E%3Cpath d='M120 0 Q114 48 85 85 Q48 114 0 120'/%3E%3Cpath d='M140 0 L132 53 Q99 99 53 132 L0 140'/%3E%3C/g%3E%3Cline x1='95' y1='20' x2='95' y2='62' stroke='%23FFA000' stroke-opacity='0.65' stroke-width='0.9' stroke-dasharray='2,2'/%3E%3Ccircle cx='95' cy='65' r='2.8' fill='%23FF7518'/%3E%3Ccircle cx='95' cy='71' r='4' fill='%23FF7518'/%3E%3Cpath d='M92 65 Q87 61 85 64 M92 67 Q85 67 83 71 M92 70 Q86 73 85 78 M98 65 Q103 61 105 64 M98 67 Q105 67 107 71 M98 70 Q104 73 105 78' stroke='%23FFA000' stroke-opacity='0.75' stroke-width='0.8'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .hw-spiderweb {
    width: 85px;
    height: 85px;
    opacity: 0.65;
  }
}

/* Floating flying bats layer */
.hw-bats-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
}

.hw-bat {
  position: absolute;
  width: 38px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='%23FF7518' fill-opacity='0.78'%3E%3Cpath d='M50 18 C52 13 56 13 57 16 C63 9 75 5 85 10 C81 15 80 22 86 25 C75 27 68 35 65 42 C59 37 53 39 50 35 C47 39 41 37 35 42 C32 35 25 27 14 25 C20 22 19 15 15 10 C25 5 37 9 43 16 C44 13 48 13 50 18 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.45));
  will-change: transform, opacity;
}

/* Wing flapping animation applied to all bats */
@keyframes hwBatFlap {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.42) translateY(2px);
  }
}

/* Bat 1: Flies from left to right at high altitude */
.hw-bat-1 {
  top: 14%;
  left: -80px;
  animation: hwFly1 22s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes hwFly1 {
  0% {
    transform: translateX(0) translateY(0) rotate(6deg) scale(0.9);
    opacity: 0;
  }
  4% {
    opacity: 0.85;
  }
  25% {
    transform: translateX(30vw) translateY(-25px) rotate(-8deg) scale(0.85);
  }
  50% {
    transform: translateX(55vw) translateY(20px) rotate(8deg) scale(0.9);
  }
  75% {
    transform: translateX(80vw) translateY(-15px) rotate(-6deg) scale(0.85);
  }
  96% {
    opacity: 0.85;
  }
  100% {
    transform: translateX(calc(100vw + 120px)) translateY(10px) rotate(6deg) scale(0.9);
    opacity: 0;
  }
}

/* Bat 2: Smaller, faster, mid altitude */
.hw-bat-2 {
  top: 26%;
  left: -80px;
  width: 26px;
  height: 15px;
  animation: hwFly2 28s cubic-bezier(0.35, 0, 0.65, 1) infinite;
  animation-delay: 9s;
}

@keyframes hwFly2 {
  0% {
    transform: translateX(0) translateY(0) rotate(-4deg);
    opacity: 0;
  }
  4% {
    opacity: 0.75;
  }
  30% {
    transform: translateX(35vw) translateY(30px) rotate(7deg);
  }
  60% {
    transform: translateX(65vw) translateY(-20px) rotate(-6deg);
  }
  96% {
    opacity: 0.75;
  }
  100% {
    transform: translateX(calc(100vw + 120px)) translateY(5px) rotate(4deg);
    opacity: 0;
  }
}

/* Bat 3: Swooping from right to left */
.hw-bat-3 {
  top: 8%;
  right: -80px;
  width: 32px;
  height: 18px;
  transform: scaleX(-1);
  animation: hwFly3 32s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 17s;
}

@keyframes hwFly3 {
  0% {
    transform: scaleX(-1) translateX(0) translateY(0) rotate(4deg);
    opacity: 0;
  }
  4% {
    opacity: 0.8;
  }
  35% {
    transform: scaleX(-1) translateX(40vw) translateY(-18px) rotate(-7deg);
  }
  70% {
    transform: scaleX(-1) translateX(75vw) translateY(22px) rotate(8deg);
  }
  96% {
    opacity: 0.8;
  }
  100% {
    transform: scaleX(-1) translateX(calc(100vw + 120px)) translateY(0) rotate(-4deg);
    opacity: 0;
  }
}

/* Eerie mist along screen bottom */
.hw-mist-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(138, 43, 226, 0.12), rgba(255, 107, 0, 0.05) 50%, transparent 80%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 2;
  animation: hwMistPulse 7s ease-in-out infinite alternate;
}

@keyframes hwMistPulse {
  0% { opacity: 0.45; transform: scaleY(0.9); }
  100% { opacity: 0.85; transform: scaleY(1.15); }
}

/* --------------------------------------------------------------------------
   4. HALLOWEEN GLOW, CARDS & INTERACTION EFFECTS
   -------------------------------------------------------------------------- */

/* Headline spooky text glow */
.hl-glow, .hl-accent {
  color: #FF7518 !important;
  text-shadow: 0 0 16px rgba(255, 117, 24, 0.65), 0 0 35px rgba(255, 85, 0, 0.4) !important;
}

/* Card hover glow (obsidian + jack-o-lantern flare) */
.sa-card, .sa-product-card, .product-card, [data-component-id="products"] .border-theme {
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease !important;
}

.sa-card:hover, .sa-product-card:hover, .product-card:hover, [data-component-id="products"] .border-theme:hover {
  border-color: rgba(255, 117, 24, 0.45) !important;
  box-shadow: 0 10px 30px -10px rgba(255, 107, 0, 0.28), 0 0 20px rgba(138, 43, 226, 0.18) !important;
  transform: translateY(-2px);
}

/* Glowing Halloween Buttons */
.bs-gradient .btn-primary, [data-scheme="dark"] .btn-primary, a.sa-btn-primary {
  box-shadow: 0 0 18px rgba(255, 107, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: box-shadow 250ms ease, transform 250ms ease !important;
}

.bs-gradient .btn-primary:hover, [data-scheme="dark"] .btn-primary:hover, a.sa-btn-primary:hover {
  box-shadow: 0 0 28px rgba(255, 107, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px);
}

/* Eyebrow badge pulse */
.sa-hero-eyebrow {
  border: 1px solid rgba(255, 117, 24, 0.4) !important;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Custom Halloween Scrollbar */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #0A0612;
}

::-webkit-scrollbar-thumb {
  background: #FF6B00;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
  border: 1px solid #140F20;
}

::-webkit-scrollbar-thumb:hover {
  background: #FF8533;
  box-shadow: 0 0 14px rgba(255, 133, 51, 0.85);
}

/* Halloween Text Selection */
::selection {
  background-color: #FF6B00 !important;
  color: #0A0612 !important;
}

/* Interactive Click Sparks / Embers */
.hw-ember {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: hwEmberFloat 550ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes hwEmberFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-mist-bottom, .hw-ember {
    animation: none !important;
    display: none !important;
  }
}