/* =================================
   Space Vanta Theme 1.0
   DNA: Privilege, guest and member
   Path: public/header/dna/privilege-state.css

   Same object, two clearly different states:
   - guest   quiet warm silver, gem unlit, "Join" invites, edge light runs
   - member  cool blue chrome, gem lit, edge glows, chance count in a
             blue chamfered chip
   State comes from data-state on [data-sv-privilege] (set by the theme
   from the signed-in customer); the chip is filled by privilege.js.
   Works on the desktop tag, the mobile strip and the drawer.
   ================================= */

/* ---------- guest: gem unlit ---------- */
[data-sv-privilege][data-state="guest"] .sv-icon-gem__core { opacity: 0.38; filter: none; }

/* ---------- member: blue chrome plate ---------- */
[data-sv-privilege][data-state="member"] .sv-priv__shape {
  background: linear-gradient(135deg, #ffffff 0%, #cfe0ff 26%, #86a9ee 54%, #e6eeff 78%, #ffffff 100%);
}
[data-sv-privilege][data-state="member"] .sv-priv__shape::before {
  background:
    linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.95) 46% 54%, transparent 60% 100%) -140% 0 / 70% 100% no-repeat,
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.9) 48% 53%, transparent 53% 100%),
    linear-gradient(135deg, #fbfdff 0%, #e4edff 55%, #c4d6f7 100%);
}
[data-sv-privilege][data-state="member"] .sv-priv__shape::after {
  height: 3px;
  box-shadow: 0 0 16px var(--sv-blue-glow, rgba(29, 107, 255, 0.38)), 0 0 4px var(--sv-blue, #1d6bff);
}
[data-sv-privilege][data-state="member"] .sv-priv__shard { background: linear-gradient(135deg, #ffffff 0%, #8fb2f5 100%); }
[data-sv-privilege][data-state="member"] .sv-icon-gem__core { opacity: 1; filter: url(#svg-glow); }

/* drawer has no .sv-priv__shape: same two states on its flat plate */
.sv-drawer__privilege[data-state="member"] {
  background: linear-gradient(135deg, #fbfdff 0%, #dbe7ff 60%, #b4cbf5 100%);
  box-shadow: inset 0 -3px 0 var(--sv-blue, #1d6bff), 0 0 14px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}
.sv-drawer__privilege[data-state="member"] [data-sv-privilege-tag] {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--sv-ink, #252321);
}

/* ---------- chance count ---------- */
.sv-priv__chances { display: none; }
[data-sv-privilege][data-state="member"] .sv-priv__chances:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  min-width: 26px;
  padding: 0 9px 0 7px;
  box-sizing: border-box;
  justify-content: center;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(135deg, #1d6bff 0%, #4d8dff 100%);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
[data-sv-privilege][data-state="member"] .sv-priv__chances:not([hidden])::before { content: "×"; font-size: 10px; opacity: 0.85; }
[data-sv-privilege][data-state="member"] .sv-priv__chances.is-zero { background: linear-gradient(135deg, #8f9bb0 0%, #b3bccb 100%); }
/* in the strip / drawer the chip sits with the label */
.sv-strip__privilege .sv-priv__chances,
.sv-drawer__privilege .sv-priv__chances { position: relative; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
  .sv-priv__chances.is-bump { animation: sv-chip-bump 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
  @keyframes sv-chip-bump { 0% { transform: scale(0.4); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }

  /* member: the plate slowly breathes cool light; guest keeps the invitation run (interact.css) */
  [data-sv-privilege][data-state="member"] .sv-icon-gem { animation: sv-gem-float 3.6s ease-in-out infinite alternate; }
  @keyframes sv-gem-float { from { translate: 0 0; } to { translate: 0 -1.5px; } }
}