/* ================================
   SPG WOW ADDON — UNIVERSAL v1.1.0
   Works with different classnames
================================ */

/* Stage zoom + global glow */
.spg3d-wrap .spg3d-photoStage,
.spg3d-wrap .spg3d-stage,
.spg3d-wrap .spg3d-canvasWrap{
  transform-origin: center center;
  transition: transform .38s ease, filter .38s ease;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 28px rgba(168,85,247,.22))
    drop-shadow(0 0 42px rgba(255,42,109,.14));
}

.spg3d-wrap .spg-wow-zoom{
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 46px rgba(168,85,247,.34))
    drop-shadow(0 0 70px rgba(255,42,109,.24));
}

/* Dim overlay */
body.spg-wow-dim::before{
  content:"";
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.38);
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  animation: spgWowFadeIn .20s ease forwards;
}
@keyframes spgWowFadeIn{ to{opacity:1;} }

/* Neon pulse — target any polygon inside SPG svg */
.spg3d-wrap svg polygon.is-active,
.spg3d-wrap svg polygon.spg-seg.is-active,
.spg3d-wrap svg polygon.spg3d-seg.is-active{
  animation: spgNeonPulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform: scale(1.05);
}

@keyframes spgNeonPulse{
  0%{
    filter: drop-shadow(0 0 10px rgba(168,85,247,.45))
            drop-shadow(0 0 16px rgba(255,42,109,.20));
    opacity: .92;
  }
  50%{
    filter: drop-shadow(0 0 18px rgba(168,85,247,.95))
            drop-shadow(0 0 34px rgba(255,42,109,.55));
    opacity: 1;
  }
  100%{
    filter: drop-shadow(0 0 10px rgba(168,85,247,.45))
            drop-shadow(0 0 16px rgba(255,42,109,.20));
    opacity: .92;
  }
}

/* Smooth list transition */
.spg3d-wrap .spg3d-list{
  transition: opacity .26s ease, transform .26s ease;
  will-change: opacity, transform;
}
.spg3d-wrap .spg3d-list.spg-wow-fade{
  opacity: 0;
  transform: translateY(10px);
}

/* ===== 1.1.1: universal selectors + stronger visible WOW ===== */
:root{ --spg-wow-glow: 0 0 22px rgba(255,0,180,.55), 0 0 48px rgba(160,60,255,.35); }

/* glow frame around the stage (works for both v2.x wrappers) */
.spg3d-wrap, .spg-wrap, .spg-ui{
  filter: drop-shadow(0 0 12px rgba(255,0,180,.25)) drop-shadow(0 0 28px rgba(160,60,255,.18));
}

/* active letter “pop” (SVG polygon OR div hotspot) */
.spg-wow-active{
  transform: translateZ(0) scale(1.06) !important;
  filter: drop-shadow(0 0 10px rgba(255,0,180,.70)) drop-shadow(0 0 24px rgba(160,60,255,.45)) !important;
  transition: transform .18s ease, filter .18s ease !important;
}

@keyframes spgWowPulse {
  0%{ filter: drop-shadow(0 0 8px rgba(255,0,180,.45)) drop-shadow(0 0 16px rgba(160,60,255,.25)); }
  50%{ filter: drop-shadow(0 0 16px rgba(255,0,180,.75)) drop-shadow(0 0 34px rgba(160,60,255,.45)); }
  100%{ filter: drop-shadow(0 0 8px rgba(255,0,180,.45)) drop-shadow(0 0 16px rgba(160,60,255,.25)); }
}

.spg-wow-active-letter{
  animation: spgWowPulse 1.2s ease-in-out infinite;
}

/* make hotspots more visible (but still subtle) */
polygon.spg-seg, polygon.spg3d-seg,
.spg-seg, .spg3d-seg,
.spg-hotspot, .spg3d-hotspot{
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}

/* in case letters are DIV diamonds */
.spg-hotspot, .spg3d-hotspot{
  box-shadow: var(--spg-wow-glow);
}