/* Animated profile-card outlines.
   The rim lives on ::before so it never fights a theme's ::after. */

:is(.profile-page, .settings-preview--profile)[class*="border-"] {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  padding: 3px;
}

:is(.profile-page, .settings-preview--profile)[class*="border-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:is(.profile-page, .settings-preview--profile)[class*="border-"] > * {
  position: relative;
  z-index: 1;
}

:is(.profile-page, .settings-preview--profile)[class*="border-"] .profile-card {
  border-color: transparent;
}

/* Spin — the full spectrum turning once a round */
.border-spin::before {
  background: conic-gradient(from 0deg,
    #ff3b6b, #ffd93b, #6bff8f, #4dd2ff, #7a6bff, #ff3b6b);
  animation: anim-turn 6s linear infinite;
}

/* Flow — a two-stop gradient sliding across */
.border-flow::before {
  background: linear-gradient(90deg,
    #7c5cff 0%, #00cec9 25%, #7c5cff 50%, #00cec9 75%, #7c5cff 100%);
  background-size: 300% 100%;
  animation: border-slide 5s linear infinite;
}

/* Pulse — the rim breathes in and out */
.border-pulse::before {
  background: linear-gradient(120deg, #7c5cff, #00cec9);
  animation: border-breathe 3.4s ease-in-out infinite;
}

/* March — hard stops, so it reads as travelling dashes */
.border-march::before {
  background: conic-gradient(from 0deg,
    #ff3b6b 0deg 18deg, transparent 18deg 36deg,
    #4dd2ff 36deg 54deg, transparent 54deg 72deg,
    #6bff8f 72deg 90deg, transparent 90deg 108deg,
    #ffd93b 108deg 126deg, transparent 126deg 144deg,
    #7a6bff 144deg 162deg, transparent 162deg 180deg);
  animation: anim-turn 4s linear infinite;
}

/* Wave — two tones chasing each other */
.border-wave::before {
  background: conic-gradient(from 180deg at 50% 50%,
    #ff6bd6, #4dd2ff, #ff6bd6);
  animation: anim-turn 9s linear infinite;
}

/* Spotlight — one soft lobe orbiting the edge */
.border-spotlight::before {
  background: radial-gradient(60% 60% at 50% 50%, transparent 40%, #7c5cff 100%);
  animation: border-orbit 7s linear infinite;
}

/* Frost — pale and quiet, sits well with dark themes */
.border-frost::before {
  background: linear-gradient(120deg, #e8fbff, #7ad7ff, #ffffff, #7ad7ff, #e8fbff);
  background-size: 250% 250%;
  animation: border-slide 11s ease-in-out infinite;
}

/* Ember — warm, slow */
.border-ember::before {
  background: conic-gradient(from 0deg,
    #ff512f, #dd2476, #ffb347, #ff512f);
  animation: anim-turn 8s linear infinite;
}

/* Mono — no colour, just a moving sheen */
.border-mono::before {
  background: linear-gradient(120deg, #ffffff, #555555, #ffffff);
  background-size: 200% 100%;
  animation: border-slide 6s linear infinite;
}

@keyframes anim-turn {
  to { transform: rotate(360deg); }
}

@keyframes border-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes border-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

@keyframes border-orbit {
  0%   { transform: translate(-45%, -35%); }
  25%  { transform: translate(45%, -35%); }
  50%  { transform: translate(45%, 35%); }
  75%  { transform: translate(-45%, 35%); }
  100% { transform: translate(-45%, -35%); }
}

/* ── Purchasable tags ─────────────────────────────────────────────── */

.profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
  border: 1px solid transparent;
}

.tag-plain {
  background: var(--surface-3);
  color: var(--text-muted, #aaa);
  border-color: var(--border-strong);
}

.tag-glow {
  background: color-mix(in oklch, var(--user-accent) 22%, transparent);
  color: color-mix(in oklch, var(--user-accent) 70%, white);
  border-color: color-mix(in oklch, var(--user-accent) 45%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, var(--user-accent) 30%, transparent);
}

.tag-gradient {
  background: linear-gradient(120deg, #7c5cff, #00cec9, #ff6bd6, #7c5cff);
  background-size: 250% 100%;
  color: #fff;
  animation: border-slide 6s linear infinite;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.tag-ember {
  background: linear-gradient(120deg, #ff512f, #ffb347);
  color: #2a1200;
}

.tag-frost {
  background: linear-gradient(120deg, #e8fbff, #7ad7ff);
  color: #04222e;
}

.tag-neon {
  background: #0b0b12;
  color: #39ff14;
  border-color: #39ff14;
  box-shadow: 0 0 10px rgb(57 255 20 / 0.45), inset 0 0 8px rgb(57 255 20 / 0.25);
}

.tag-gold {
  background: linear-gradient(120deg, #fff1a8, #c9a227 45%, #fff6c8 70%, #8a6a12);
  color: #3a2c00;
}

.tag-void {
  background: linear-gradient(120deg, #1a1028, #6b3fa0);
  color: #e9d8ff;
  border-color: #6b3fa0;
}

.tag-forest {
  background: linear-gradient(120deg, #14532d, #4ade80);
  color: #04240f;
}

.tag-rose {
  background: linear-gradient(120deg, #8b1e3f, #fb7185);
  color: #fff1f3;
}

/.tag-ocean {
  background: linear-gradient(120deg, #004e64, #22d3ee);
  color: #e6feff;
}

/* ── Username styles ───────────────────────────────────────────────── */

.title-plain .profile-name {
  letter-spacing: normal;
}

.title-gradient .profile-name {
  background: linear-gradient(90deg, #7c5cff, #00cec9, #ff6bd6, #7c5cff);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: border-slide 7s linear infinite;
}

.title-glow .profile-name {
  color: color-mix(in oklch, var(--user-accent) 75%, white);
  text-shadow:
    0 0 8px color-mix(in oklch, var(--user-accent) 60%, transparent),
    0 0 22px color-mix(in oklch, var(--user-accent) 40%, transparent);
}

.title-outline .profile-name {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklch, var(--user-accent) 85%, white);
}

.title-shadow .profile-name {
  text-shadow: 3px 3px 0 color-mix(in oklch, var(--user-accent) 70%, transparent);
}

.title-wide .profile-name {
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.title-neon .profile-name {
  color: #f8f8ff;
  text-shadow:
    0 0 4px #39ff14,
    0 0 10px #39ff14,
    0 0 22px #00e5ff,
    0 0 42px #ff00aa;
}

.title-frost .profile-name {
  color: #e8fbff;
  text-shadow: 0 0 10px #7ad7ff, 0 0 26px #4dd2ff;
}

.title-ember .profile-name {
  background: linear-gradient(180deg, #fff6c8 0%, #ffb347 55%, #ff512f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title-glitch {
  position: relative;
}

.title-glitch .profile-name::before,
.title-glitch .profile-name::after {
  content: attr(data-name);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.title-glitch .profile-name::before {
  color: #ff3b6b;
  animation: title-glitch-a 3.2s steps(2, end) infinite;
}

.title-glitch .profile-name::after {
  color: #4dd2ff;
  animation: title-glitch-b 2.7s steps(2, end) infinite;
}

@keyframes title-glitch-a {
  0%, 88%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; }
  90%           { transform: translate(-2px, -1px); opacity: 0.9; clip-path: inset(12% 0 62% 0); }
  93%           { transform: translate(2px, 1px); opacity: 0.9; clip-path: inset(52% 0 22% 0); }
  96%           { transform: translate(-1px, 1px); opacity: 0.9; clip-path: inset(28% 0 48% 0); }
}

@keyframes title-glitch-b {
  0%, 84%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; }
  86%           { transform: translate(2px, 1px); opacity: 0.9; clip-path: inset(38% 0 42% 0); }
  89%           { transform: translate(-2px, -1px); opacity: 0.9; clip-path: inset(66% 0 12% 0); }
  92%           { transform: translate(1px, -1px); opacity: 0.9; clip-path: inset(8% 0 76% 0); }
}

.border-swatch {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 84px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface-3);
}

.border-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.border-swatch > * {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.border-swatch .avatar-frame {
  padding: 2px;
}

.border-swatch.border-spin::before      { animation: anim-turn 6s linear infinite; }
.border-swatch.border-flow::before      { animation: border-slide 5s linear infinite; }
.border-swatch.border-march::before     { animation: anim-turn 4s linear infinite; }
.border-swatch.border-pulse::before     { animation: border-breathe 3.4s ease-in-out infinite; }
.border-swatch.border-wave::before      { animation: anim-turn 9s linear infinite; }
.border-swatch.border-spotlight::before { animation: border-orbit 7s linear infinite; }
.border-swatch.border-frost::before     { animation: border-slide 11s ease-in-out infinite; }
.border-swatch.border-ember::before     { animation: anim-turn 8s linear infinite; }
.border-swatch.border-mono::before      { animation: border-slide 6s linear infinite; }

/* Shared preview box for text-based cosmetics (tags, username styles). */
.cosmetic-text-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  overflow: hidden;
}

.preview-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text, #eee);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-off,
.title-off {
  background: transparent;
  color: var(--text-muted, #7a7a7a);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
}

.title-off {
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}

.profile-tag {
  border-color: oklch(1 0 0 / 0.16);
}

.tag-text-input {
  width: 180px;
  max-width: 100%;
  font-family: var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The name row was a fixed 22px tall, which squashed the tag pill and
   clipped the glitch layers. */
.profile-identity {
  height: auto;
  min-height: 22px;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.profile-identity .profile-name {
  max-width: min(100%, 260px);
}

.profile-identity .profile-tag {
  flex: 0 0 auto;
  align-self: center;
}

.title-glitch .profile-name {
  position: relative;
  overflow: visible;
}

.profile-name-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

.preview-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.preview-name-row strong {
  font-size: 15px;
  line-height: 1.4;
}

.cosmetic-text-preview .profile-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}