/* ============================================================
   WORLD STAGE — Custom Icon System
   Brand: Blue #1e90ff · White #ffffff · Black #0a0a0a
   Version 2.0 · March 2026
   ============================================================ */

/* ─── Base Icon Element ─── */
.sop-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.sop-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Sizes ─── */
.sop-icon-sm   { width: 20px; height: 20px; }
.sop-icon-md   { width: 32px; height: 32px; }
.sop-icon-lg   { width: 48px; height: 48px; }
.sop-icon-xl   { width: 64px; height: 64px; }
.sop-icon-2xl  { width: 80px; height: 80px; }

/* ─── Color Variants ─── */
.sop-icon-blue  { color: #1e90ff; }
.sop-icon-white { color: #ffffff; }
.sop-icon-dim   { color: rgba(30,144,255,0.45); }
.sop-icon-grey  { color: #aaaaaa; }
.sop-icon-warm  { color: #e8931a; }
.sop-icon-green { color: #3ddc84; }

/* ─── Pillar Icon Container ─── */
.sop-pillar-icon {
  width: 56px;
  height: 56px;
  color: #1e90ff;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter  0.35s ease;
}

.pillar-card:hover .sop-pillar-icon {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 14px rgba(30,144,255,0.55));
}

/* ─── About / Value Icon Container ─── */
.sop-value-icon {
  width: 48px;
  height: 48px;
  color: rgba(30,144,255,0.35);
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.value-item:hover .sop-value-icon {
  color: #1e90ff;
}

/* ─── AI Principle Icon ─── */
.sop-principle-icon {
  width: 22px;
  height: 22px;
  color: #1e90ff;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Community Card Icon ─── */
.sop-community-icon {
  width: 44px;
  height: 44px;
  color: #1e90ff;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.community-card:hover .sop-community-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(30,144,255,0.5));
}

/* ─── Jukebox Step Icon ─── */
.sop-step-icon {
  width: 40px;
  height: 40px;
  color: #1e90ff;
  margin-bottom: 1.25rem;
}

/* ─── Jukebox Panel Icon ─── */
.sop-panel-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1.25rem;
  display: block;
}

.jb-panel-artist .sop-panel-icon { color: #1e90ff; }
.jb-panel-venue  .sop-panel-icon { color: #e8931a; }
.jb-panel-fan    .sop-panel-icon { color: #3ddc84; }

/* ─── Trust Grid Icon ─── */
.sop-trust-icon {
  width: 40px;
  height: 40px;
  color: #1e90ff;
  margin: 0 auto 1rem;
  display: block;
}

/* ─── Hover Glow States ─── */
.jb-trust-item:hover .sop-trust-icon,
.sop-step-icon:hover {
  filter: drop-shadow(0 0 12px rgba(30,144,255,0.6));
}

/* ─── About Page Pillar Emoji Replacement ─── */
.sop-about-pillar-icon {
  width: 44px;
  height: 44px;
  color: #1e90ff;
  margin-bottom: 1rem;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.pillar-card:hover .sop-about-pillar-icon {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 12px rgba(30,144,255,0.5));
}

/* ─── Inline icon (used next to text) ─── */
.sop-icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  color: currentColor;
}

/* ─── Animated pulse ring around icon ─── */
.sop-icon-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sop-icon-ring::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(30,144,255,0.3);
  animation: sopIconPulse 3s ease-in-out infinite;
}

@keyframes sopIconPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

/* ─── Icon scale-in on scroll reveal ─── */
.reveal .sop-pillar-icon,
.reveal .sop-community-icon,
.reveal .sop-about-pillar-icon {
  transform: scale(0.8) translateY(6px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity   0.5s ease;
  transition-delay: 0.1s;
}

.reveal.active .sop-pillar-icon,
.reveal.active .sop-community-icon,
.reveal.active .sop-about-pillar-icon {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ─── Stagger delays for grid children ─── */
.reveal-stagger > *:nth-child(1) .sop-pillar-icon,
.reveal-stagger > *:nth-child(1) .sop-community-icon { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) .sop-pillar-icon,
.reveal-stagger > *:nth-child(2) .sop-community-icon { transition-delay: 0.15s; }
.reveal-stagger > *:nth-child(3) .sop-pillar-icon,
.reveal-stagger > *:nth-child(3) .sop-community-icon { transition-delay: 0.25s; }
.reveal-stagger > *:nth-child(4) .sop-pillar-icon,
.reveal-stagger > *:nth-child(4) .sop-community-icon { transition-delay: 0.35s; }