/* ═══════════════════════════════════════════════════
   SPIDEY-FX — shared web-slinger decoration layer
   Used on index.html, spiderman.html, return-policy.html
   (excluded on fifa.html, anime.html, admin.html)
   ═══════════════════════════════════════════════════ */
:root{ --sf-red: var(--red, #E8002D); --sf-blue: #2979ff; }

@media (prefers-reduced-motion: reduce) {
  .spidey-corner, .spidey-bg-mesh, .spidey-divider, .spidey-trail-canvas { display: none !important; }
  .btn-primary::before, .add-btn::before, .wish-add-btn::before { animation: none !important; }
}

/* 1) Web-sling corner decorations --------------------- */
.spidey-corner{
  position: fixed; width: 130px; height: 130px; pointer-events: none;
  z-index: 5; opacity: 0.16; filter: drop-shadow(0 0 6px rgba(232,0,45,0.15));
}
.spidey-corner svg{ width: 100%; height: 100%; display: block; }
.spidey-corner-tl{ top: 0; left: 0; }
.spidey-corner-tr{ top: 0; right: 0; transform: scaleX(-1); }
.spidey-corner-bl{ bottom: 0; left: 0; transform: scaleY(-1); }
.spidey-corner-br{ bottom: 0; right: 0; transform: scale(-1,-1); }
.spidey-corner path{
  fill: none; stroke: url(#spideyCornerGrad); stroke-width: 1.1;
  stroke-linecap: round;
}
@media (max-width: 640px){ .spidey-corner{ width: 78px; height: 78px; opacity: 0.12; } }

/* 2) Cursor web-trail (canvas, scoped to hero) -------- */
.spidey-trail-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; opacity: 0.85;
}

/* 3) Spidey-sense pulse rings behind CTAs ------------- */
.btn-primary, .add-btn, .wish-add-btn{ position: relative; isolation: isolate; }
.btn-primary{ overflow: visible; }
.btn-primary::before, .add-btn::before, .wish-add-btn::before{
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  border: 1.5px solid var(--sf-red); opacity: 0; pointer-events: none; z-index: -1;
  animation: spideyPulse 2.6s ease-out infinite;
}
.add-btn::before, .wish-add-btn::before{ animation-delay: 0.6s; }
@keyframes spideyPulse{
  0%   { transform: scale(0.92); opacity: 0.55; border-color: var(--sf-red); }
  60%  { transform: scale(1.18); opacity: 0; border-color: var(--sf-blue); }
  100% { transform: scale(1.18); opacity: 0; }
}

/* 4) Swinging divider line between sections ----------- */
.spidey-divider{
  position: relative; height: 34px; margin: 0 auto; max-width: 220px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.spidey-divider::before{
  content: ''; display: block; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,0,45,0.5), rgba(41,121,255,0.5), transparent);
  transform-origin: left center; transition: transform 1.4s cubic-bezier(0.34,1.2,0.4,1);
}
.spidey-divider.in-view::before{ animation: spideySwing 1.6s cubic-bezier(0.34,1.2,0.4,1) 1; }
@keyframes spideySwing{
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-4deg); }
  55%  { transform: rotate(2.5deg); }
  75%  { transform: rotate(-1.2deg); }
  100% { transform: rotate(0deg); }
}

/* 5) Web-shatter hover effect on product cards -------- */
.product-card{ position: relative; }
.product-card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit; opacity: 0; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.9' opacity='0.9'%3E%3Cpath d='M100 100 L40 30 M100 100 L160 25 M100 100 L20 110 M100 100 L180 115 M100 100 L70 180 M100 100 L135 185 M100 100 L100 20'/%3E%3Cpath d='M40 30 L55 15 M40 30 L30 55 M160 25 L145 12 M160 25 L175 48 M20 110 L5 95 M20 110 L8 128 M180 115 L195 100 M180 115 L192 132 M70 180 L55 195 M135 185 L150 197' stroke-width='0.6' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140% 140%; background-position: center;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
  transform: scale(0.85);
}
.product-card:hover::after{ opacity: 0.5; transform: scale(1); }

/* 6) Full-bleed drifting web-mesh background ---------- */
.spidey-bg-mesh{
  position: absolute; inset: -15%; pointer-events: none; z-index: 0; opacity: 0.055;
  background-repeat: repeat; background-size: 340px 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M170 170 L170 -20 M170 170 L170 360 M170 170 L-20 170 M170 170 L360 170 M170 170 L40 40 M170 170 L300 40 M170 170 L40 300 M170 170 L300 300'/%3E%3Ccircle cx='170' cy='170' r='40' /%3E%3Ccircle cx='170' cy='170' r='85' /%3E%3Ccircle cx='170' cy='170' r='135' /%3E%3C/g%3E%3C/svg%3E");
  animation: spideyDriftMesh 70s linear infinite;
}
@keyframes spideyDriftMesh{
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(-2%,1.5%) rotate(0.6deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}