/* ================================
   SPG Dynamic Camera (Safe Mode)
   WOW Map-Style without viewBox
================================ */

body.spg-dyncam-dim::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 99900;
  opacity: 0;
  pointer-events: none;
  animation: spgDimIn .18s ease forwards;
}
@keyframes spgDimIn{ to{ opacity:1; } }

.spg3d-wrap.spg-dyncam-focus{
  position: relative;
  z-index: 99910;
}
.spg3d-wrap.spg-dyncam-focus::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 22px;
  pointer-events:none;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 40px rgba(168,85,247,.42),
    0 0 90px rgba(255,42,109,.26);
}

.spg3d-wrap .spg-dyncam-viewport{
  position: relative;
  transform-origin: center center;
  will-change: transform, filter;
  transition: transform .78s cubic-bezier(.12,.82,.18,1),
              filter .78s cubic-bezier(.12,.82,.18,1);
}

.spg3d-wrap.spg-dyncam-focus .spg-dyncam-viewport{
  filter:
    drop-shadow(0 0 26px rgba(168,85,247,.38))
    drop-shadow(0 0 60px rgba(255,42,109,.22));
}

.spg3d-wrap svg polygon.spg-dyncam-active{
  transform-box: fill-box;
  transform-origin: center;
  animation: spgActivePop 1.2s cubic-bezier(.2,.9,.2,1) infinite;
  filter:
    drop-shadow(0 0 14px rgba(168,85,247,.95))
    drop-shadow(0 0 32px rgba(255,42,109,.70))
    drop-shadow(0 0 70px rgba(255,42,109,.24));
}
@keyframes spgActivePop{
  0%{ transform: scale(1.06); }
  50%{ transform: scale(1.14); }
  100%{ transform: scale(1.06); }
}

.spg3d-wrap svg polygon{
  transition: filter .25s ease;
}

.spg-dyncam-hint{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99920;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 18px rgba(168,85,247,.20),
    0 0 26px rgba(255,42,109,.14);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
body.spg-dyncam-dim .spg-dyncam-hint{
  opacity: 1;
  transform: translateY(0);
}