/* ================================================
   TIER TOKENS - shared across membership.html and
   member-dashboard.html. Values must match
   js/tier-theme.js TOKENS for JS-driven effects
   (confetti, chime) to stay visually consistent.
   ================================================ */

/* ---- Dashboard scope: <body data-tier="..."> ---- */
[data-tier="bronze"] {
  --tier-primary: #CD7F32;
  --tier-primary-soft: rgba(205,127,50,.15);
  --tier-glow: rgba(205,127,50,.5);
  --tier-gradient: linear-gradient(135deg, #CD7F32, #8C5A24);
}
[data-tier="silver"] {
  --tier-primary: #C0C0C0;
  --tier-primary-soft: rgba(192,192,192,.15);
  --tier-glow: rgba(192,192,192,.5);
  --tier-gradient: linear-gradient(135deg, #C0C0C0, #9CA3AF);
}
[data-tier="gold"] {
  --tier-primary: #FFD700;
  --tier-primary-soft: rgba(255,215,0,.15);
  --tier-glow: rgba(255,215,0,.5);
  --tier-gradient: linear-gradient(135deg, #FFD700, #B45309);
}
[data-tier="platinum"] {
  --tier-primary: #C4B5FD;
  --tier-primary-soft: rgba(196,181,253,.15);
  --tier-glow: rgba(196,181,253,.5);
  --tier-gradient: linear-gradient(90deg, #C4B5FD, #E2E8F0, #C4B5FD);
}

/* ---- Marketing scope: membership.html .ms-tier.tier-x cards ----
   Relocated from membership.html's inline <style> unchanged, so the
   existing .ms-tier markup keeps working without restructuring. */
.tier-silver .tier-header { background: linear-gradient(160deg, #1A1F29 0%, #111520 100%); }
.tier-silver .tier-icon { background: rgba(156,163,175,.12); }
.tier-silver .tier-name { color: #9CA3AF; }
.tier-silver .tier-discount { color: #9CA3AF; }

.tier-gold .tier-header { background: linear-gradient(160deg, #1C1000 0%, #140B00 100%); }
.tier-gold .tier-icon { background: rgba(251,191,36,.15); }
.tier-gold .tier-name { color: #FBBF24; }
.tier-gold .tier-discount { color: #FBBF24; }

.tier-platinum .tier-header {
  background: linear-gradient(160deg, #0F1520 0%, #080D17 100%);
  position: relative;
  overflow: hidden;
}
.tier-platinum .tier-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(196,181,253,.06) 100%);
  pointer-events: none;
}
.tier-platinum .tier-icon { background: rgba(196,181,253,.1); }
.tier-platinum .tier-name {
  background: linear-gradient(90deg, #C4B5FD, #E2E8F0, #C4B5FD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tier-platinum .tier-discount {
  background: linear-gradient(90deg, #C4B5FD, #E2E8F0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================
   AMBIENT TIER MOTION
   All keyframes animate only transform/opacity/background-position.
   ================================================ */
@keyframes tierBreathe {
  from { opacity: .4; }
  to   { opacity: .7; }
}
@keyframes tierParticleDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-60px) translateX(var(--particle-drift-x, 6px)); opacity: 0; }
}
/* Intentional exception to transform/opacity-only: background-position shift on one decorative Platinum element, accepted low-cost repaint. */
@keyframes tierGradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* The breathing glow animates a ::before layer's opacity, not the badge's
   own opacity — the badge also contains the tier label text (#tierBadgeText),
   which must stay fully legible and never pulse. */
.tier-badge-emblem {
  position: relative;
  z-index: 0;
}
.tier-badge-emblem::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: var(--tier-glow, transparent);
  filter: blur(6px);
  pointer-events: none;
  animation: tierBreathe 3s ease-in-out infinite alternate;
}
[data-tier="bronze"] .tier-badge-emblem::before { animation-duration: 3s; }
[data-tier="silver"] .tier-badge-emblem::before { animation-duration: 2.4s; }
[data-tier="gold"] .tier-badge-emblem::before { animation-duration: 2s; }
[data-tier="platinum"] .tier-badge-emblem::before { animation-duration: 1.6s; }

.tier-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
[data-tier="gold"] .tier-particle {
  background: var(--tier-primary);
  animation: tierParticleDrift 4s ease-in infinite;
}
[data-tier="platinum"] .tier-particle {
  background: var(--tier-primary);
  animation: tierParticleDrift 3.4s ease-in infinite;
}

/* The gradient shift lives on .phys-card-glow (the blurred ambient layer
   behind the card), not .phys-card-inner — that div's background sits
   directly behind an opaque 320px card <img>, which fully covers it, so
   the animation was invisible there. .phys-card-glow already renders a
   pulsing glow around the card's edges for every tier; Platinum's version
   additionally cycles through the tier gradient instead of staying red. */
[data-tier="platinum"] .phys-card-glow {
  background: var(--tier-gradient);
  background-size: 200% 200%;
  animation: cardPulse 3.5s ease-in-out infinite alternate, tierGradientShift 8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tier-badge-emblem::before,
  [data-tier="gold"] .tier-particle,
  [data-tier="platinum"] .tier-particle,
  [data-tier="platinum"] .phys-card-glow {
    animation: none;
  }
}
