/* ============================================================
   Evolved Mastery - Shimmer Gold
   Shared brand layer that unifies the portal with the website.
   Adds metallic gradient + animated shimmer to gold buttons
   and gradient text to gold serif headings.
   Loaded after each page's inline styles so it cascades on top.
   ============================================================ */

:root {
  /* Metallic gold gradient stops, light to dark */
  --gold-shine-1: #F0DC9A;
  --gold-shine-2: #E2C97E;
  --gold-shine-3: #D4B35A;
  --gold-shine-4: #C9A84C;
  --gold-shine-5: #B8932F;
  --gold-shine-6: #8E6F1F;

  /* Reusable gradients */
  --gold-metallic: linear-gradient(180deg,
      var(--gold-shine-2) 0%,
      var(--gold-shine-3) 30%,
      var(--gold-shine-4) 50%,
      var(--gold-shine-5) 75%,
      var(--gold-shine-6) 100%);
  --gold-text-gradient: linear-gradient(135deg,
      var(--gold-shine-1) 0%,
      var(--gold-shine-2) 25%,
      var(--gold-shine-4) 50%,
      var(--gold-shine-5) 75%,
      var(--gold-shine-6) 100%);

  --gold-glow: 0 4px 16px rgba(201, 168, 76, 0.22);
  --gold-glow-hover: 0 6px 22px rgba(201, 168, 76, 0.38);
  --gold-inset: inset 0 1px 0 rgba(255, 240, 200, 0.45),
                inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --gold-inset-hover: inset 0 1px 0 rgba(255, 240, 200, 0.55),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Gold buttons - metallic gradient with shimmer sweep
   Targets every primary gold button across the portal
   ============================================================ */
.btn-go,
.btn-primary,
.pw-btn-primary,
.acct-btn,
.btn-complete:not(.done),
.btn-save:not(.saved),
.cta-btn,
button.gold-btn,
a.gold-btn,
[data-em-shimmer] {
  background: var(--gold-metallic) !important;
  color: #080808 !important;
  font-weight: 600 !important;
  box-shadow: var(--gold-inset), var(--gold-glow) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border: none !important;
  transition: filter 0.24s ease, transform 0.16s ease, box-shadow 0.24s ease !important;
}

/* Shimmer sweep highlight */
.btn-go::after,
.btn-primary::after,
.pw-btn-primary::after,
.acct-btn::after,
.btn-complete:not(.done)::after,
.btn-save:not(.saved)::after,
.cta-btn::after,
button.gold-btn::after,
a.gold-btn::after,
[data-em-shimmer]::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255, 250, 225, 0) 30%,
      rgba(255, 250, 225, 0.55) 50%,
      rgba(255, 250, 225, 0) 70%,
      transparent 100%);
  transform: skewX(-22deg);
  animation: emShimmerSweep 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Slight delay between sweeps so it doesn't feel mechanical */
.btn-primary::after { animation-delay: 0.6s; }
.acct-btn::after { animation-delay: 1.4s; }
.pw-btn-primary::after { animation-delay: 2.2s; }
.btn-complete:not(.done)::after { animation-delay: 0.9s; }

@keyframes emShimmerSweep {
  0%   { left: -75%; }
  18%  { left: 125%; }
  100% { left: 125%; }
}

/* Hover state - lift + brighten + extra glow */
.btn-go:hover,
.btn-primary:hover,
.pw-btn-primary:hover,
.acct-btn:hover,
.btn-complete:not(.done):hover,
.btn-save:not(.saved):hover,
.cta-btn:hover,
button.gold-btn:hover,
a.gold-btn:hover,
[data-em-shimmer]:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: var(--gold-inset-hover), var(--gold-glow-hover) !important;
}

.btn-go:active,
.btn-primary:active,
.pw-btn-primary:active,
.acct-btn:active,
.btn-complete:not(.done):active,
.cta-btn:active,
button.gold-btn:active,
a.gold-btn:active,
[data-em-shimmer]:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Disabled state - no shimmer, dimmed */
.btn-go:disabled,
.btn-primary:disabled,
.pw-btn-primary:disabled,
.acct-btn:disabled,
.btn-complete:disabled,
.cta-btn:disabled,
button.gold-btn:disabled,
[data-em-shimmer]:disabled {
  filter: grayscale(0.4) brightness(0.7) !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.btn-go:disabled::after,
.btn-primary:disabled::after,
.pw-btn-primary:disabled::after,
.acct-btn:disabled::after,
.btn-complete:disabled::after,
.cta-btn:disabled::after,
button.gold-btn:disabled::after,
[data-em-shimmer]:disabled::after {
  display: none;
}

/* ============================================================
   Gold serif headings - metallic gradient text fill
   Targets the brand-gold text across the portal
   ============================================================ */
.em-gold-text,
[data-em-gold-text],
.main-greeting,
.stat-big,
.phase-label,
.acct-heading {
  background: var(--gold-text-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ============================================================
   Decorative gold dividers - replace flat lines with gradient
   ============================================================ */
.em-gold-divider {
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(201, 168, 76, 0.6) 50%,
      transparent 100%);
  border: none;
  margin: 24px 0;
}

/* ============================================================
   Reduced motion - disable shimmer sweep for accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-go::after,
  .btn-primary::after,
  .pw-btn-primary::after,
  .acct-btn::after,
  .btn-complete::after,
  .btn-save::after,
  .cta-btn::after,
  button.gold-btn::after,
  a.gold-btn::after,
  [data-em-shimmer]::after {
    animation: none;
    display: none;
  }
}

/* ============================================================
   Sidebar nav: Work With Princeton 1:1 highlight
   ============================================================ */
.nav-item.nav-item-deeper {
  color: var(--gold-shine-4);
}
.nav-item.nav-item-deeper:hover {
  color: var(--gold-shine-2);
}
.nav-item.nav-item-deeper .nav-icon {
  color: var(--gold-shine-4);
}