/* ===================== THE CARD SHOWCASE (spec output) ===================== */
.wpsc-section{
  position:relative;border-radius:26px;padding:30px 28px 32px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 70px -26px var(--wpsc-glow-color,#9b4dff),inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .25s ease,box-shadow .25s ease;
}
.wpsc-meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;}
.wpsc-section[data-bgfx="meteors"] .wpsc-meteors{opacity:1;}
.wpsc-meteor{
  position:absolute;top:-14%;left:0;width:2px;height:64px;border-radius:2px;
  background:linear-gradient(190deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 55%,rgba(255,255,255,0) 100%);
  opacity:0;animation:wpscMeteor 3.6s linear infinite;
}
.wpsc-meteor:nth-child(1){left:6%;animation-delay:.1s;}
.wpsc-meteor:nth-child(2){left:24%;animation-delay:1.7s;}
.wpsc-meteor:nth-child(3){left:44%;animation-delay:.9s;}
.wpsc-meteor:nth-child(4){left:63%;animation-delay:2.5s;}
.wpsc-meteor:nth-child(5){left:80%;animation-delay:3.1s;}
.wpsc-meteor:nth-child(6){left:93%;animation-delay:1.3s;}
@keyframes wpscMeteor{
  0%{transform:translateY(0) translateX(0) rotate(35deg);opacity:0;}
  10%{opacity:.95;}
  55%{opacity:.45;}
  78%{opacity:0;}
  100%{transform:translateY(var(--wpsc-fx-fall,300px)) translateX(90px) rotate(35deg);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.wpsc-meteor{animation:none;opacity:0;}}

/* stars: small twinkling dots, tiled so density scales automatically with section area —
   more tiles repeat as the section grows taller/wider, unlike a fixed set of positioned dots */
.wpsc-section[data-bgfx="stars"]::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 25%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 60%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 40% 82%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 15%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 68%, #fff, transparent 60%);
  background-size:120px 120px;background-repeat:repeat;
  opacity:.45;animation:wpscTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes wpscTwinkle{from{opacity:.22}to{opacity:.6}}
@media (prefers-reduced-motion:reduce){.wpsc-section[data-bgfx="stars"]::before{animation:none;opacity:.4;}}

/* gridlines: slow-panning tech grid in theme color */
.wpsc-section[data-bgfx="gridlines"]::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--wpsc-glow-color,#9b4dff) 1px, transparent 1px),
    linear-gradient(90deg, var(--wpsc-glow-color,#9b4dff) 1px, transparent 1px);
  background-size:34px 34px;opacity:.12;
  animation:wpscGridPan 18s linear infinite;
}
@keyframes wpscGridPan{from{background-position:0 0,0 0;}to{background-position:34px 34px,34px 34px;}}
@media (prefers-reduced-motion:reduce){.wpsc-section[data-bgfx="gridlines"]::before{animation:none;}}

/* spotlight: soft diagonal beam sweeping across, theme color */
.wpsc-section[data-bgfx="spotlight"]::before{
  content:"";position:absolute;inset:-30% -60%;pointer-events:none;z-index:0;
  background:linear-gradient(100deg, transparent 42%, var(--wpsc-glow-color,#9b4dff) 48%, transparent 56%);
  opacity:.26;filter:blur(18px);
  animation:wpscSpotlight 5.5s ease-in-out infinite;
}
@keyframes wpscSpotlight{0%{transform:translateX(-42%);}100%{transform:translateX(42%);}}
@media (prefers-reduced-motion:reduce){.wpsc-section[data-bgfx="spotlight"]::before{animation:none;opacity:0;}}

/* vignette glow: breathing ambient edge glow plus a bright highlight that continuously
   sweeps around the frame — the highlight's angle is animated via @property rather than
   rotating the element, for the same reason the border running-light needs it: rotating a
   masked ring shape desyncs its corners from the section's own fixed rounded-rect clip. */
@property --wpsc-vignette-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.wpsc-section[data-bgfx="vignetteglow"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  padding:10px;
  box-shadow:inset 0 0 55px 3px var(--wpsc-glow-color,#9b4dff);
  background:conic-gradient(from var(--wpsc-vignette-angle,0deg), transparent 0deg, var(--wpsc-glow-color,#9b4dff) 40deg, transparent 110deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(4px);
  opacity:.7;
  animation:wpscVignetteSweep 8s linear infinite, wpscVignette 5s ease-in-out infinite;
}
@keyframes wpscVignetteSweep{from{--wpsc-vignette-angle:0deg;}to{--wpsc-vignette-angle:360deg;}}
@keyframes wpscVignette{0%,100%{opacity:.5;}50%{opacity:.95;}}
@media (prefers-reduced-motion:reduce){.wpsc-section[data-bgfx="vignetteglow"]::before{animation:none;opacity:.6;}}
@supports not (mask-composite: exclude) and not (-webkit-mask-composite: xor){
  .wpsc-section[data-bgfx="vignetteglow"]::before{background:none;box-shadow:inset 0 0 60px 4px var(--wpsc-glow-color,#9b4dff);}
}

/* radiant sweep: soft radiant beam rotating around an off-center pivot, like a slow lighthouse
   sweep — a genuinely different motion (rotation around a point) from spotlight's straight-line
   translate, so the two read as clearly distinct effects */
@property --wpsc-radiant-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.wpsc-section[data-bgfx="radiantsweep"]::before{
  content:"";position:absolute;inset:-35%;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--wpsc-radiant-angle,0deg) at 28% 24%,
    transparent 0deg, var(--wpsc-glow-color,#9b4dff) 26deg, transparent 78deg, transparent 360deg);
  opacity:.4;filter:blur(22px);
  animation:wpscRadiantSpin 9s linear infinite;
}
@keyframes wpscRadiantSpin{from{--wpsc-radiant-angle:0deg;}to{--wpsc-radiant-angle:360deg;}}
@media (prefers-reduced-motion:reduce){.wpsc-section[data-bgfx="radiantsweep"]::before{animation:none;opacity:.3;}}

/* velvet bokeh: several large soft blurred circles, each drifting independently (own size,
   delay, and duration) so the field feels alive rather than one rigid backdrop moving as a unit */
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p{
  border-radius:50%;background:var(--wpsc-glow-color,#9b4dff);
  filter:blur(9px);opacity:0;
  animation:wpscBokehDrift 14s ease-in-out infinite;
}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(1){left:10%;top:58%;width:74px;height:74px;animation-delay:0s;animation-duration:13s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(2){left:64%;top:22%;width:58px;height:58px;animation-delay:2s;animation-duration:16s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(3){left:83%;top:66%;width:48px;height:48px;animation-delay:4.2s;animation-duration:11s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(4){left:30%;top:18%;width:62px;height:62px;animation-delay:1.1s;animation-duration:15s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(5){left:48%;top:74%;width:44px;height:44px;animation-delay:5.3s;animation-duration:12s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(6){left:6%;top:32%;width:52px;height:52px;animation-delay:3.1s;animation-duration:17s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(7){left:92%;top:38%;width:38px;height:38px;animation-delay:6.4s;animation-duration:10s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(8){left:40%;top:46%;width:66px;height:66px;animation-delay:2.6s;animation-duration:14s;}
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-p:nth-child(n+9){display:none;}
@keyframes wpscBokehDrift{
  0%{transform:translate(0,0) scale(1);opacity:0;}
  15%{opacity:.42;}
  50%{transform:translate(20px,-16px) scale(1.15);opacity:.58;}
  85%{opacity:.36;}
  100%{transform:translate(-16px,12px) scale(.95);opacity:0;}
}

/* shared particle layer, restyled per effect: rain / snow / gold shimmer / diamond facets / champagne */
.wpsc-fx-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-layer,
.wpsc-section[data-bgfx="snow"] .wpsc-fx-layer,
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-layer,
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-layer,
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-layer,
.wpsc-section[data-bgfx="velvetbokeh"] .wpsc-fx-layer{opacity:1;}
.wpsc-fx-p{position:absolute;}

.wpsc-section[data-bgfx="rain"] .wpsc-fx-p{
  top:-14%;width:1.5px;height:38px;border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--wpsc-glow-color,#9b4dff), transparent);
  opacity:0;animation:wpscRain 1.7s linear infinite;
}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(1){left:8%;animation-delay:0s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(2){left:20%;animation-delay:.4s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(3){left:33%;animation-delay:.9s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(4){left:46%;animation-delay:.2s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(5){left:59%;animation-delay:1.2s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(6){left:71%;animation-delay:.6s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(7){left:84%;animation-delay:1.4s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(8){left:95%;animation-delay:.1s;}
.wpsc-section[data-bgfx="rain"] .wpsc-fx-p:nth-child(n+9){display:none;}
@keyframes wpscRain{0%{transform:translateY(0);opacity:0;}10%{opacity:.8;}90%{opacity:.4;}100%{transform:translateY(var(--wpsc-fx-fall,300px));opacity:0;}}

.wpsc-section[data-bgfx="snow"] .wpsc-fx-p{
  top:-8%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--wpsc-glow-color,#9b4dff) 150%);
  box-shadow:0 0 4px 1px rgba(255,255,255,.5);
  opacity:0;animation:wpscSnow 10s linear infinite;
}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(1){left:4%;animation-delay:0s;width:5px;height:5px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(2){left:11%;animation-delay:2.4s;width:7px;height:7px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(3){left:18%;animation-delay:4.8s;width:4px;height:4px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(4){left:25%;animation-delay:1.2s;width:6px;height:6px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(5){left:33%;animation-delay:6.9s;width:5px;height:5px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(6){left:40%;animation-delay:3.5s;width:7px;height:7px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(7){left:48%;animation-delay:5.8s;width:4px;height:4px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(8){left:55%;animation-delay:1.7s;width:6px;height:6px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(9){left:62%;animation-delay:8.1s;width:5px;height:5px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(10){left:69%;animation-delay:.6s;width:7px;height:7px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(11){left:76%;animation-delay:4.1s;width:4px;height:4px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(12){left:83%;animation-delay:7.3s;width:6px;height:6px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(13){left:89%;animation-delay:2.9s;width:5px;height:5px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(14){left:94%;animation-delay:5.4s;width:7px;height:7px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(15){left:58%;animation-delay:9.2s;width:4px;height:4px;}
.wpsc-section[data-bgfx="snow"] .wpsc-fx-p:nth-child(16){left:2%;animation-delay:6.1s;width:5px;height:5px;}
@keyframes wpscSnow{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  8%{opacity:.9;}
  25%{transform:translateY(calc(var(--wpsc-fx-fall,300px) * .25)) translateX(14px);}
  50%{transform:translateY(calc(var(--wpsc-fx-fall,300px) * .5)) translateX(-12px);}
  75%{transform:translateY(calc(var(--wpsc-fx-fall,300px) * .75)) translateX(12px);}
  92%{opacity:.55;}
  100%{transform:translateY(var(--wpsc-fx-fall,300px)) translateX(-8px);opacity:0;}
}

.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p{
  border-radius:50%;width:3px;height:3px;background:var(--wpsc-glow-color,#9b4dff);
  box-shadow:0 0 10px 2px var(--wpsc-glow-color,#9b4dff);
  opacity:0;animation:wpscShimmer 3.6s ease-in-out infinite;
}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(1){left:8%;top:22%;animation-delay:0s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(2){left:22%;top:64%;animation-delay:.5s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(3){left:35%;top:14%;animation-delay:1.2s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(4){left:48%;top:76%;animation-delay:1.9s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(5){left:61%;top:34%;animation-delay:.3s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(6){left:74%;top:68%;animation-delay:2.5s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(7){left:86%;top:24%;animation-delay:1.5s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(8){left:93%;top:56%;animation-delay:3s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(9){left:15%;top:88%;animation-delay:2.1s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(10){left:29%;top:44%;animation-delay:.9s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(11){left:42%;top:92%;animation-delay:3.3s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(12){left:55%;top:8%;animation-delay:1.7s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(13){left:68%;top:48%;animation-delay:.1s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(14){left:80%;top:86%;animation-delay:2.8s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(15){left:4%;top:52%;animation-delay:1.1s;}
.wpsc-section[data-bgfx="goldshimmer"] .wpsc-fx-p:nth-child(16){left:97%;top:38%;animation-delay:3.6s;}
@keyframes wpscShimmer{0%,100%{opacity:0;transform:scale(.6);}50%{opacity:.95;transform:scale(1.4);}}

.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p{
  width:6px;height:6px;background:var(--wpsc-glow-color,#9b4dff);
  transform:rotate(45deg);opacity:0;
  box-shadow:0 0 8px 1px var(--wpsc-glow-color,#9b4dff);
  animation:wpscFacet 4.2s ease-in-out infinite;
}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(1){left:10%;top:26%;animation-delay:0s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(2){left:24%;top:60%;animation-delay:.8s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(3){left:37%;top:20%;animation-delay:1.6s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(4){left:50%;top:70%;animation-delay:2.4s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(5){left:63%;top:32%;animation-delay:.4s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(6){left:76%;top:66%;animation-delay:3.2s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(7){left:88%;top:22%;animation-delay:1.9s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(8){left:95%;top:54%;animation-delay:2.7s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(9){left:17%;top:90%;animation-delay:3.5s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(10){left:31%;top:46%;animation-delay:1.1s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(11){left:44%;top:94%;animation-delay:2.9s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(12){left:57%;top:10%;animation-delay:.2s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(13){left:70%;top:48%;animation-delay:1.4s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(14){left:82%;top:84%;animation-delay:3.8s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(15){left:6%;top:56%;animation-delay:.6s;}
.wpsc-section[data-bgfx="diamondfacets"] .wpsc-fx-p:nth-child(16){left:96%;top:36%;animation-delay:2.2s;}
@keyframes wpscFacet{
  0%,100%{opacity:0;transform:rotate(45deg) scale(.5);}
  50%{opacity:.95;transform:rotate(45deg) scale(1.4);}
}

.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p{
  bottom:-8%;width:6px;height:6px;border-radius:50%;
  border:1.5px solid var(--wpsc-glow-color,#9b4dff);background:rgba(255,255,255,.12);opacity:0;
  box-shadow:0 0 5px 1px var(--wpsc-glow-color,#9b4dff);
  animation:wpscChampagne 9s ease-in infinite;
}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(1){left:6%;animation-delay:0s;width:5px;height:5px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(2){left:13%;animation-delay:1.9s;width:7px;height:7px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(3){left:20%;animation-delay:3.8s;width:4px;height:4px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(4){left:28%;animation-delay:.9s;width:6px;height:6px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(5){left:35%;animation-delay:5.7s;width:5px;height:5px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(6){left:43%;animation-delay:2.6s;width:7px;height:7px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(7){left:50%;animation-delay:7.4s;width:4px;height:4px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(8){left:58%;animation-delay:1.3s;width:6px;height:6px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(9){left:65%;animation-delay:6.5s;width:5px;height:5px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(10){left:72%;animation-delay:.3s;width:7px;height:7px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(11){left:80%;animation-delay:4.4s;width:4px;height:4px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(12){left:87%;animation-delay:8.2s;width:6px;height:6px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(13){left:94%;animation-delay:2.1s;width:5px;height:5px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(14){left:9%;animation-delay:5.1s;width:7px;height:7px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(15){left:47%;animation-delay:8.8s;width:4px;height:4px;}
.wpsc-section[data-bgfx="champagne"] .wpsc-fx-p:nth-child(16){left:97%;animation-delay:3.3s;width:6px;height:6px;}
@keyframes wpscChampagne{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.85;}
  50%{transform:translateY(calc(var(--wpsc-fx-fall,300px) * -.5)) translateX(10px);}
  90%{opacity:.5;}
  100%{transform:translateY(calc(var(--wpsc-fx-fall,300px) * -1)) translateX(-8px);opacity:0;}
}

@media (prefers-reduced-motion:reduce){.wpsc-fx-p{animation:none!important;opacity:0!important;}}

.wpsc-header{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.wpsc-section[data-align="left"] .wpsc-header{justify-content:flex-start;}
.wpsc-section[data-align="center"] .wpsc-header{justify-content:center;text-align:center;flex-direction:column;align-items:center;}
.wpsc-section[data-align="right"] .wpsc-header{justify-content:flex-end;text-align:right;flex-direction:row-reverse;}
.wpsc-section[data-align="between"] .wpsc-header{justify-content:space-between;}
.wpsc-header-title{display:flex;align-items:center;gap:12px;min-width:0;}
.wpsc-icon{font-size:21px;line-height:1;filter:drop-shadow(0 0 8px var(--wpsc-glow-color,#9b4dff));flex-shrink:0;}
.wpsc-header-title .wpsc-title{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--wpsc-title-color,var(--wpsc-text,#fff));}
.wpsc-header-title p{margin:2px 0 0;font-size:12px;color:var(--wpsc-subtitle-color,var(--wpsc-muted,#b9a7c9));}
.wpsc-viewall{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--wpsc-viewall-color,var(--wpsc-muted,#b9a7c9));text-decoration:none;transition:color .2s;flex-shrink:0;}
.wpsc-viewall:hover{color:var(--wpsc-text,#fff);}

.wpsc-grid-wrap,.wpsc-slider-wrap{position:relative;z-index:1;}
.wpsc-section[data-layout="slider"] .wpsc-grid-wrap{display:none;}
.wpsc-section[data-layout="grid"] .wpsc-slider-wrap{display:none;}
.wpsc-grid{display:grid;grid-template-columns:repeat(var(--wpsc-cols,6),1fr);gap:var(--wpsc-gap,18px);}

.wpsc-slider-viewport{overflow:hidden;container-type:inline-size;}
.wpsc-track{display:flex;gap:var(--wpsc-gap,18px);width:max-content;animation:wpscMarquee var(--wpsc-marquee-dur,32s) linear infinite;will-change:transform;}
.wpsc-section[data-pause-hover="true"] .wpsc-slider-viewport:hover .wpsc-track{animation-play-state:paused;}
@keyframes wpscMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wpsc-track{animation-duration:120s;}}
/* card width: JS computes an exact pixel value into --wpsc-slider-card-px on every render/resize/device
   switch, so sizing is correct even in browsers without container-query-unit support. Where cqw IS
   supported, it takes over so resizing stays smooth without waiting on a JS recalculation. Both formulas
   target (cols + 0.22) card-widths instead of exactly cols — a small fixed "peek" of the next card, so
   the amount visibly cut off at the trailing edge stays proportionally similar at every column count
   instead of shrinking to nothing at 6 columns and ballooning to half a card at 2. */
.wpsc-track .wpsc-card{flex:0 0 var(--wpsc-slider-card-px,200px);}
@supports (container-type: inline-size){
  .wpsc-track .wpsc-card{flex:0 0 calc((100cqw - var(--wpsc-cols,6) * var(--wpsc-gap,18px)) / (var(--wpsc-cols,6) + 0.22));}
}

/* Responsive column counts: the desktop count above is the default; a live
   page has a real, unknown viewport, so — unlike the Phase 1 prototype's
   device-switcher tabs, which just swapped --wpsc-cols by hand — these
   media queries let the browser choose the right column count itself.
   Kept as the base/fallback for browsers without container-query support. */
@media (max-width:900px){
  .wpsc-grid{grid-template-columns:repeat(var(--wpsc-cols-tablet,3),1fr);}
  @supports (container-type: inline-size){
    .wpsc-track .wpsc-card{flex:0 0 calc((100cqw - var(--wpsc-cols-tablet,3) * var(--wpsc-gap,18px)) / (var(--wpsc-cols-tablet,3) + 0.22));}
  }
}
@media (max-width:600px){
  .wpsc-grid{grid-template-columns:repeat(var(--wpsc-cols-mobile,2),1fr);}
  @supports (container-type: inline-size){
    .wpsc-track .wpsc-card{flex:0 0 calc((100cqw - var(--wpsc-cols-mobile,2) * var(--wpsc-gap,18px)) / (var(--wpsc-cols-mobile,2) + 0.22));}
  }
}
/* Container-query versions of the same two breakpoints: these respond to
   the showcase's OWN rendered width (e.g. a narrow sidebar widget, or the
   Live Preview panel when a device size is picked) instead of the whole
   browser window's width — which is what the plain @media rules above
   actually check, even though from the admin screen it looks like it should
   be checking the preview box. Layered on top of (and after) the @media
   fallback, so a container-query-capable browser always gets the more
   accurate result regardless of which "wins" on specificity. */
@supports (container-type: inline-size){
  .wpsc-section{container-type:inline-size;container-name:wpsc-showcase;}
  @container wpsc-showcase (max-width:900px){
    .wpsc-grid{grid-template-columns:repeat(var(--wpsc-cols-tablet,3),1fr);}
  }
  @container wpsc-showcase (max-width:600px){
    .wpsc-grid{grid-template-columns:repeat(var(--wpsc-cols-mobile,2),1fr);}
  }
}

/* --- Card anatomy --- */
.wpsc-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--wpsc-card-bg,#160427);
  border:var(--wpsc-border-outer-width,1px) var(--wpsc-border-outer-style,solid) var(--wpsc-border-outer-color,#3d2166);
  border-radius:var(--wpsc-radius,18px);overflow:hidden;
  backdrop-filter:blur(var(--wpsc-card-blur,0px));-webkit-backdrop-filter:blur(var(--wpsc-card-blur,0px));
  box-shadow:var(--wpsc-shadow,0 10px 24px rgba(0,0,0,.3));
  transition:transform var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out),
             box-shadow var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out),
             border-color var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out),
             filter var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out);
}
.wpsc-card:focus-visible{outline:2px solid var(--wpsc-glow-color,#9b4dff);outline-offset:3px;}
.wpsc-section.is-glass .wpsc-card{backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);}

/* running light: animated bright arc tracing the border ring, outer (::before) and inner (::after).
   IMPORTANT: the gradient's own angle is animated via @property — the element itself never
   rotates. Rotating the whole masked shape would spin its corners out of sync with the card's
   own fixed rounded-rect clip, making the light detach into floating fragments instead of
   tracing the edge. */
@property --wpsc-run-angle-outer{syntax:'<angle>';inherits:false;initial-value:0deg;}
.wpsc-section[data-border-outer="running"] .wpsc-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  padding:max(2px,var(--wpsc-border-outer-width,2px));
  background:conic-gradient(from var(--wpsc-run-angle-outer,0deg), transparent 0%, var(--wpsc-border-outer-color,#9b4dff) 6%, transparent 22%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:wpscBorderRunOuter 2.4s linear infinite;
}
@keyframes wpscBorderRunOuter{from{--wpsc-run-angle-outer:0deg;}to{--wpsc-run-angle-outer:360deg;}}
@media (prefers-reduced-motion:reduce){
  .wpsc-section[data-border-outer="running"] .wpsc-card::before{animation:none;}
}
/* fallback for browsers without mask-composite support: a plain colored border instead
   of an invisible/broken effect, so "running" always shows something rather than nothing */
@supports not (mask-composite: exclude) and not (-webkit-mask-composite: xor){
  .wpsc-section[data-border-outer="running"] .wpsc-card{
    border:max(2px,var(--wpsc-border-outer-width,2px)) solid var(--wpsc-border-outer-color,#9b4dff);
  }
}

.wpsc-card-media{position:relative;aspect-ratio:var(--wpsc-aspect,3 / 2);overflow:hidden;display:flex;align-items:center;justify-content:var(--wpsc-card-icon-justify,center);background-size:var(--wpsc-image-fit,cover);background-repeat:no-repeat;background-position:center;}
.wpsc-card-media-auto{aspect-ratio:auto;}
.wpsc-card-media-img{display:block;width:100%;height:auto;min-width:0;min-height:0;}
.wpsc-card-button{display:inline-flex;align-items:center;justify-content:center;background:var(--wpsc-button-bg,#9b4dff);color:var(--wpsc-button-color,#fff);font-weight:700;margin-top:9px;border-radius:999px;box-shadow:0 6px 16px -4px rgba(0,0,0,.4);transition:transform var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out);white-space:nowrap;}
.wpsc-button-size-small{font-size:10.5px;padding:5px 13px;}
.wpsc-button-size-medium{font-size:12px;padding:8px 18px;}
.wpsc-button-size-large{font-size:13.5px;padding:11px 24px;}

.wpsc-toplabel{position:absolute;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.02em;z-index:2;backdrop-filter:blur(2px);}
.wpsc-toplabel[data-pos="top-left"]{top:9px;left:9px;}
.wpsc-toplabel[data-pos="top-right"]{top:9px;right:9px;}
.wpsc-toplabel[data-pos="bottom-left"]{bottom:9px;left:9px;}
.wpsc-toplabel[data-pos="bottom-right"]{bottom:9px;right:9px;}

.wpsc-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--wpsc-badge-bg,#9b4dff);color:var(--wpsc-badge-color,#fff);letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 8px -2px rgba(0,0,0,.45);}
.wpsc-badge[data-pos="top-left"]{position:absolute;top:9px;left:9px;z-index:2;}
.wpsc-badge[data-pos="top-right"]{position:absolute;top:9px;right:9px;z-index:2;}
.wpsc-badge[data-pos="bottom-left"]{position:absolute;bottom:9px;left:9px;z-index:2;}
.wpsc-badge[data-pos="bottom-right"]{position:absolute;bottom:9px;right:9px;z-index:2;}
.wpsc-badge[data-pos="above-title"],.wpsc-badge[data-pos="below-title"]{position:static;}

.wpsc-online-badge{position:absolute;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;letter-spacing:.02em;z-index:2;backdrop-filter:blur(2px);white-space:nowrap;}
.wpsc-online-badge[data-pos="top-left"]{top:9px;left:9px;}
.wpsc-online-badge[data-pos="top-right"]{top:9px;right:9px;}
.wpsc-online-badge[data-pos="bottom-left"]{bottom:9px;left:9px;}
.wpsc-online-badge[data-pos="bottom-right"]{bottom:9px;right:9px;}
.wpsc-online-badge[data-pos="above-title"],.wpsc-online-badge[data-pos="below-title"]{position:static;}
.wpsc-online-dot{width:6.5px;height:6.5px;border-radius:50%;flex-shrink:0;background:var(--wpsc-online-dot-color,#22c55e);box-shadow:0 0 4px 1px var(--wpsc-online-dot-color,#22c55e);animation:wpscOnlinePulse 1.6s ease-in-out infinite;}
@keyframes wpscOnlinePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
@media (prefers-reduced-motion:reduce){.wpsc-online-dot{animation:none;}}

/* corner stacking: when 2-3 of Top Label / Badge / Online Count share a corner, offset them so
   they never overlap. Stacks toward the card's inner edge — downward from a top corner, upward
   from a bottom corner — rather than always forcing elements to the top regardless of which
   corner they're actually in. */
.wpsc-toplabel[data-pos^="top-"][data-stack="2"],.wpsc-badge[data-pos^="top-"][data-stack="2"],.wpsc-online-badge[data-pos^="top-"][data-stack="2"]{top:34px;}
.wpsc-toplabel[data-pos^="top-"][data-stack="3"],.wpsc-badge[data-pos^="top-"][data-stack="3"],.wpsc-online-badge[data-pos^="top-"][data-stack="3"]{top:59px;}
.wpsc-toplabel[data-pos^="bottom-"][data-stack="2"],.wpsc-badge[data-pos^="bottom-"][data-stack="2"],.wpsc-online-badge[data-pos^="bottom-"][data-stack="2"]{bottom:34px;}
.wpsc-toplabel[data-pos^="bottom-"][data-stack="3"],.wpsc-badge[data-pos^="bottom-"][data-stack="3"],.wpsc-online-badge[data-pos^="bottom-"][data-stack="3"]{bottom:59px;}

.wpsc-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.wpsc-shine::after{content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;background:linear-gradient(75deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0;}

.wpsc-overlay{
  position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding:14px;
  background:linear-gradient(to top,var(--wpsc-overlay,rgba(8,0,20,.55)) 6%,transparent 78%);
  opacity:0;transition:opacity var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out),transform var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out);
}
.wpsc-card:hover .wpsc-overlay,.wpsc-card:focus-visible .wpsc-overlay{opacity:1;}
.wpsc-section[data-hover="overlay-slide-up"] .wpsc-overlay{transform:translateY(16%);}
.wpsc-section[data-hover="overlay-slide-up"] .wpsc-card:hover .wpsc-overlay{transform:translateY(0);}
.wpsc-hovertext{
  background:var(--wpsc-hovertext-bg,var(--wpsc-glow-color,#9b4dff));color:var(--wpsc-hovertext-color,#fff);font-weight:700;font-size:11.5px;
  padding:8px 17px;border-radius:999px;transform:translateY(10px);
  transition:transform var(--wpsc-dur,280ms) var(--wpsc-ease,ease-out);
  box-shadow:0 8px 18px -6px var(--wpsc-hovertext-bg,var(--wpsc-glow-color,#9b4dff));white-space:nowrap;
}
.wpsc-card:hover .wpsc-hovertext,.wpsc-card:focus-visible .wpsc-hovertext{transform:translateY(0);}

.wpsc-card-body{padding:12px 14px 14px;position:relative;z-index:1;background:var(--wpsc-card-bg,#160427);text-align:var(--wpsc-card-text-align,left);}
.wpsc-title-row{display:flex;align-items:center;justify-content:var(--wpsc-card-icon-justify,flex-start);gap:8px;flex-wrap:wrap;min-width:0;}
.wpsc-card-title{margin:0;font-size:13px;font-weight:700;color:var(--wpsc-text,#fff);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:0;}
.wpsc-card-subtitle{margin:3px 0 0;font-size:11px;color:var(--wpsc-muted,#b9a7c9);order:3;flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wpsc-title-row .wpsc-badge[data-pos="below-title"]{order:1;}
.wpsc-title-row .wpsc-online-badge[data-pos="below-title"]{order:1;}
.wpsc-card-body>.wpsc-badge[data-pos="above-title"]{display:inline-block;position:static;margin-bottom:6px;}
.wpsc-card-body>.wpsc-online-badge[data-pos="above-title"]{position:static;margin-bottom:6px;}

/* ---- Hover effect variants ---- */
.wpsc-section[data-hover="zoom-in"] .wpsc-card:hover{transform:scale(1.055);z-index:3;}
.wpsc-section[data-hover="zoom-out"] .wpsc-card:hover{transform:scale(0.945);}
.wpsc-section[data-hover="lift-up"] .wpsc-card:hover{transform:translateY(-9px);z-index:3;}
.wpsc-section[data-hover="glow"] .wpsc-card:hover{box-shadow:var(--wpsc-glow,0 0 40px 4px rgba(155,77,255,.55)),var(--wpsc-shadow);}
.wpsc-section[data-hover="border-glow"] .wpsc-card:hover{border-color:var(--wpsc-glow-color,#9b4dff);box-shadow:var(--wpsc-glow,0 0 40px 4px rgba(155,77,255,.55));}
.wpsc-section[data-hover="image-darken"] .wpsc-card:hover .wpsc-card-media{filter:brightness(.55);}
.wpsc-section[data-hover="image-brighten"] .wpsc-card:hover .wpsc-card-media{filter:brightness(1.3) saturate(1.15);}
.wpsc-section[data-hover="tilt"] .wpsc-card:hover{transform:perspective(700px) rotateX(6deg) rotateY(-7deg) scale(1.015);z-index:3;}
.wpsc-section[data-hover="shine"] .wpsc-card:hover .wpsc-shine::after{opacity:1;animation:wpscShine .85s ease forwards;}
@keyframes wpscShine{from{left:-60%}to{left:140%}}
.wpsc-section[data-hover="zoom-in"] .wpsc-card:hover .wpsc-card-button,
.wpsc-section[data-hover="lift-up"] .wpsc-card:hover .wpsc-card-button{transform:scale(1.08);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:640px){
  .wpsc-section{padding:22px 16px 24px;border-radius:20px;}
}