/* Shared profile card surface system — /@user/card intro + profile page atmosphere */

:root {
  --profile-card-radius: 1.55rem;
  --profile-card-border-color: rgba(255, 255, 255, 0.14);
  --profile-card-border-highlight: rgba(255, 255, 255, 0.08);
  --profile-card-shadow:
    inset 0 1px 0 var(--profile-card-border-highlight),
    0 28px 60px rgba(0, 0, 0, 0.48),
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 14%, transparent);
  --profile-card-shadow-hero:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 32px 68px rgba(0, 0, 0, 0.55),
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 16%, transparent),
    0 24px 64px color-mix(in srgb, var(--profile-accent, #8a2be2) 20%, transparent);
  --profile-card-shadow-soft:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.32),
    0 8px 20px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 10%, transparent);
  --profile-card-shadow-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 52px rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 9%, transparent);
  --profile-card-bg-classic:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(24, 18, 36, 0.96), rgba(10, 10, 16, 0.98));
  --profile-card-bg-vibrant:
    linear-gradient(160deg, color-mix(in srgb, var(--profile-accent, #8a2be2) 34%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(28, 14, 42, 0.98), rgba(10, 8, 18, 0.98));
  --profile-card-bg-overlay:
    linear-gradient(180deg, rgba(12, 12, 18, 0.35), rgba(8, 8, 14, 0.88)),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 40%);
  --profile-card-page-wash:
    radial-gradient(circle at 50% -8%, var(--profile-accent-soft, rgba(138, 43, 226, 0.28)), transparent 52%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--profile-accent, #8a2be2) 14%, transparent), transparent 34%);
  --profile-card-page-vignette:
    radial-gradient(ellipse 130% 88% at 50% -6%, transparent 24%, rgba(0, 0, 0, 0.58) 100%);
  --profile-card-glow-opacity: 0.4;
  --profile-card-hero-glow-opacity: 0.54;
  --profile-card-sheen-opacity: 0.53;
  --profile-card-hero-sheen-opacity: 0.6;
  --profile-card-sheen:
    linear-gradient(125deg, rgba(255, 255, 255, 0.22), transparent 36%, transparent 60%, rgba(255, 255, 255, 0.08));
}

.profile-card-surface__glow,
.profile-card-surface__sheen {
  position: absolute;
  pointer-events: none;
}

.profile-card-surface__glow {
  inset: 10% 6% auto;
  height: 46%;
  border-radius: 999px;
  background: radial-gradient(circle, var(--profile-accent, #8a2be2), transparent 72%);
  opacity: var(--profile-card-glow-opacity);
  filter: blur(20px);
}

.profile-card-surface__sheen {
  inset: 0;
  border-radius: inherit;
  background: var(--profile-card-sheen);
  mix-blend-mode: screen;
  opacity: var(--profile-card-sheen-opacity);
}

.profile-card-surface__stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

[data-profile-card-style="classic"] {
  --profile-card-active-bg: var(--profile-card-bg-classic);
}

[data-profile-card-style="vibrant"] {
  --profile-card-active-bg: var(--profile-card-bg-vibrant);
  --profile-card-glow-opacity: 0.48;
  --profile-card-hero-glow-opacity: 0.62;
}

[data-profile-card-style="overlay"] {
  --profile-card-active-bg: var(--profile-card-bg-overlay);
  --profile-card-glow-opacity: 0.32;
  --profile-card-hero-glow-opacity: 0.44;
  --profile-card-sheen-opacity: 0.4;
  --profile-card-hero-sheen-opacity: 0.48;
}

html[data-theme="light"] {
  --profile-card-border-color: rgba(40, 24, 64, 0.12);
  --profile-card-shadow:
    0 22px 48px rgba(40, 24, 64, 0.12),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 10%, transparent);
  --profile-card-shadow-soft:
    0 14px 36px rgba(40, 24, 64, 0.08),
    0 0 0 1px color-mix(in srgb, var(--profile-accent, #8a2be2) 6%, transparent);
  --profile-card-bg-classic:
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), transparent 40%),
    linear-gradient(180deg, #fff, #f3edfb);
  --profile-card-bg-vibrant:
    linear-gradient(160deg, color-mix(in srgb, var(--profile-accent, #8a2be2) 18%, transparent), transparent 46%),
    linear-gradient(180deg, #fff, #f6f1fc);
  --profile-card-bg-overlay:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 244, 252, 0.94)),
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), transparent 42%);
  --profile-card-page-wash:
    radial-gradient(circle at 50% -8%, var(--profile-accent-soft, rgba(138, 43, 226, 0.14)), transparent 52%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--profile-accent, #8a2be2) 6%, transparent), transparent 34%);
  --profile-card-sheen:
    linear-gradient(125deg, rgba(255, 255, 255, 0.65), transparent 38%, transparent 62%, rgba(255, 255, 255, 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .profile-card-surface__glow {
    filter: blur(12px);
    opacity: calc(var(--profile-card-glow-opacity) * 0.75);
  }
}