/* ===== SPYDER STORE: scroll animations ===== */

/* 1) Neon-green text ticker */
.sp-ticker{overflow:hidden;position:relative;background:#050505;border-top:1px solid rgba(57,255,20,.35);border-bottom:1px solid rgba(57,255,20,.35);padding:12px 0}
.sp-ticker:before,.sp-ticker:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.sp-ticker:before{left:0;background:linear-gradient(90deg,#050505,transparent)}
.sp-ticker:after{right:0;background:linear-gradient(270deg,#050505,transparent)}
.sp-track{display:flex;width:max-content;animation:spTick 38s linear infinite}
.sp-ticker:hover .sp-track{animation-play-state:paused}
.sp-group{display:flex;flex:none}
.sp-item{flex:none;display:flex;align-items:center;font-size:13px;font-weight:900;line-height:1;letter-spacing:3px;text-transform:uppercase;color:#39ff14;text-shadow:0 0 8px rgba(57,255,20,.65),0 0 20px rgba(57,255,20,.35);white-space:nowrap}
.sp-item:after{content:"✦";margin:0 28px;color:#ffd400;text-shadow:0 0 10px rgba(255,212,0,.6);letter-spacing:0}
@keyframes spTick{to{transform:translateX(-50%)}}

/* 2) Section transitions: dividers + soft glow behind the section in view */
.sp-divider{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(57,255,20,.7),rgba(255,212,0,.6),transparent);opacity:.8}
.sp-anim .sp-divider{transform:scaleX(0);transform-origin:center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sp-anim .sp-divider.is-in{transform:scaleX(1)}
.sp-anim section{position:relative;isolation:isolate}
.sp-anim section:before{content:"";position:absolute;inset:-6% 0;z-index:-1;pointer-events:none;background:radial-gradient(62% 46% at 50% 0%,rgba(57,255,20,.11),transparent 72%);opacity:0;transition:opacity 1.3s ease}
.sp-anim section.is-active:before{opacity:1}
#sp-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9998;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#39ff14,#ffd400);box-shadow:0 0 12px rgba(57,255,20,.8);pointer-events:none}

/* Scroll reveal for blocks (hidden only when the script is active) */
.sp-anim .section-head,.sp-anim .category,.sp-anim .product,.sp-anim .delivery,.sp-anim .tshirt-soon,
.sp-anim .review-form,.sp-anim .review-feed,.sp-anim .about>*,.sp-anim .coming>*,.sp-anim .hero-logo{
  opacity:0;translate:0 42px;filter:blur(7px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),filter .9s ease;
  transition-delay:var(--d,0s)}
.sp-anim .is-in.section-head,.sp-anim .is-in.category,.sp-anim .is-in.product,.sp-anim .is-in.delivery,.sp-anim .is-in.tshirt-soon,
.sp-anim .is-in.review-form,.sp-anim .is-in.review-feed,.sp-anim .about>.is-in,.sp-anim .coming>.is-in,.sp-anim .is-in.hero-logo{
  opacity:1;translate:0 0;filter:none}

/* 3) Floating product cards */
.sp-float{animation:spFloat var(--fd,7s) ease-in-out var(--fl,0s) infinite alternate}
.sp-float.category{--amp:-5px}
@keyframes spFloat{from{transform:translateY(0)}to{transform:translateY(var(--amp,-8px))}}
.sp-anim .product,.sp-anim .category{box-shadow:0 22px 44px -26px rgba(57,255,20,.35)}
.sp-anim .product:hover,.sp-anim .category:hover,.sp-anim .product:focus-within{scale:1.015;animation-play-state:paused;box-shadow:0 26px 54px -22px rgba(57,255,20,.55)}
.sp-anim .product,.sp-anim .category{transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),filter .9s ease,scale .45s ease,box-shadow .45s ease}

/* 4) Scroll-triggered image reveals */
.sp-anim .product-image,.sp-anim .shirt-gallery{overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.sp-anim .product-image img,.sp-anim .shirt-gallery img{scale:1.2;transition:scale 1.5s cubic-bezier(.2,.7,.2,1)}
.sp-anim .product-image.is-in,.sp-anim .shirt-gallery.is-in{clip-path:inset(0 0 0 0)}
.sp-anim .product-image.is-in img,.sp-anim .shirt-gallery.is-in img{scale:1}
.sp-anim .product-image.sp-done,.sp-anim .shirt-gallery.sp-done{clip-path:none}

@media (prefers-reduced-motion:reduce){
  .sp-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.sp-group+.sp-group{display:none}
  .sp-float{animation:none}#sp-progress{display:none}
}