/* Profile themes, animated avatars, and the user's accent colour. */

.profile-page,
.settings-preview--profile,
.shop-card {
  --user-accent: #7c5cff;
}

/* ── Animated avatars ─────────────────────────────────────────────── */

.avatar-anim {
  position: relative;
  display: inline-flex;
  border-radius: 14px;
}

.avatar-anim .profile-avatar {
  border-radius: inherit;
  position: relative;
  z-index: 2;
}

.avatar-anim::before,
.avatar-anim::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Room for the effects so they never bleed onto a neighbouring card. */
.shop-preview {
  padding: 14px 16px;
  min-height: 96px;
}

.cosmetic-option .shop-preview {
  padding: 12px 14px;
  min-height: 92px;
}

/* Pulse — waves rolling outward */
.anim-pulse::before {
  border: 2px solid var(--user-accent);
  animation: anim-wave 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.anim-pulse::after {
  border: 2px solid var(--user-accent);
  animation: anim-wave 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s infinite;
}

@keyframes anim-wave {
  0%   { transform: scale(1);    opacity: 0.85; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* Glow — the avatar itself lights up */
.anim-glow::before {
  inset: 0;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--user-accent) 70%, transparent),
    0 0 18px color-mix(in oklch, var(--user-accent) 55%, transparent);
  animation: anim-glow-breathe 3.2s ease-in-out infinite;
}

.anim-glow .profile-avatar {
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--user-accent) 60%, transparent));
}

@keyframes anim-glow-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Orbit — dashed ring turning */
.anim-orbit::before {
  inset: -4px;
  border: 2px dashed var(--user-accent);
  animation: anim-turn 6s linear infinite;
}

.anim-orbit::after {
  inset: -4px;
  border: 2px dashed color-mix(in oklch, var(--user-accent) 45%, transparent);
  animation: anim-turn 9s linear infinite reverse;
}

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

/* Spin — fast two-tone ring */
.anim-spin::before {
  border: 3px solid transparent;
  border-top-color: var(--user-accent);
  border-right-color: color-mix(in oklch, var(--user-accent) 40%, transparent);
  animation: anim-turn 1.6s linear infinite;
}

.anim-spin::after {
  border: 3px solid transparent;
  border-bottom-color: color-mix(in oklch, var(--user-accent) 70%, transparent);
  border-left-color: color-mix(in oklch, var(--user-accent) 25%, transparent);
  animation: anim-turn 2.6s linear infinite reverse;
}

/* Ripple — two offset waves */
.anim-ripple::before,
.anim-ripple::after {
  border: 2px solid color-mix(in oklch, var(--user-accent) 80%, transparent);
}

.anim-ripple::before { animation: anim-wave 2.8s ease-out infinite; }
.anim-ripple::after  { animation: anim-wave 2.8s ease-out 1.4s infinite; }

/* Heartbeat — a double tap */
.anim-heartbeat::before {
  border: 2px solid var(--user-accent);
  animation: anim-heartbeat 1.8s ease-in-out infinite;
}

.anim-heartbeat::after {
  border: 2px solid color-mix(in oklch, var(--user-accent) 30%, transparent);
  opacity: 0;
  animation: anim-heartbeat 1.8s ease-in-out infinite;
}

@keyframes anim-heartbeat {
  0%, 100%   { transform: scale(1); }
  12%        { transform: scale(1.12); }
  24%        { transform: scale(1); }
  36%        { transform: scale(1.12); }
  50%, 100%  { transform: scale(1); }
}

/* Prism — the ring cycles through the whole spectrum */
.anim-prism::before {
  border: 3px solid #ff3b6b;
  animation: anim-hue 4s linear infinite;
}

.anim-prism::after {
  inset: -5px;
  border: 1px solid #4dd0ff;
  opacity: 0.7;
  animation: anim-hue 4s linear infinite reverse;
}

@keyframes anim-hue {
  0%   { border-color: #ff3b6b; }
  25%  { border-color: #ffd93b; }
  50%  { border-color: #4dd06b; }
  75%  { border-color: #4d9bff; }
  100% { border-color: #ff3b6b; }
}

/* Aura — soft rings pulsing out of phase */
.anim-aura::before {
  inset: -3px;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--user-accent) 65%, transparent),
    0 0 22px color-mix(in oklch, var(--user-accent) 45%, transparent);
  animation: anim-aura 3.6s ease-in-out infinite;
}

.anim-aura::after {
  inset: -3px;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--user-accent) 35%, transparent),
    0 0 14px color-mix(in oklch, var(--user-accent) 25%, transparent);
  animation: anim-aura 3.6s ease-in-out 1.8s infinite;
}

@keyframes anim-aura {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Nova — expanding halo behind the avatar */
.anim-nova::before {
  inset: -6px;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--user-accent) 55%, transparent) 0%,
    transparent 70%
  );
  animation: anim-nova 2.6s ease-in-out infinite;
}

.anim-nova::after {
  border: 2px solid color-mix(in oklch, var(--user-accent) 70%, transparent);
  animation: anim-wave 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes anim-nova {
  0%, 100% { opacity: 0.4; transform: scale(0.92); }
  50%      { opacity: 0.95; transform: scale(1.15); }
}

/* Shimmer — a highlight sweeps across the avatar */
.anim-shimmer::before {
  inset: -2px;
  overflow: hidden;
  background: linear-gradient(
    115deg,
    transparent 35%,
    color-mix(in oklch, #fff 55%, transparent) 50%,
    transparent 65%
  );
  background-size: 250% 250%;
  animation: anim-shimmer 2.8s ease-in-out infinite;
}

.anim-shimmer::after {
  border: 2px solid color-mix(in oklch, var(--user-accent) 55%, transparent);
}

@keyframes anim-shimmer {
  0%   { background-position: 180% 0; }
  60%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}

/* ── Accent colour ────────────────────────────────────────────────── */

.accent-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.accent-input {
  width: 54px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-3);
  cursor: pointer;
}

.accent-hex {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text-muted, inherit);
  text-transform: uppercase;
}

.accent-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.accent-preset {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  padding: 0;
  appearance: none;
}

@media (max-width: 760px) {
  /* 24px swatches are below a comfortable thumb target */
  .accent-presets {
    gap: 8px;
  }

  .accent-preset {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
}

.accent-preset:hover {
  transform: scale(1.12);
}

.accent-preset[aria-pressed="true"] {
  border-color: var(--surface-1, #fff);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 10px currentColor;
}

.avatar-anim[style*="--user-accent"],
.profile-page[style*="--user-accent"] {
  --user-accent: inherit;
}

/* ── Profile themes ───────────────────────────────────────────────── */

.profile-page[class*="theme-"] {
  position: relative;
  isolation: isolate;
  border-radius: 14px;
  padding: 2px;
}

.profile-page[class*="theme-"] .profile-card {
  background: oklch(0.13 0 0 / 0.66);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: oklch(1 0 0 / 0.09);
}

.profile-page--has-bg[class*="theme-"] .profile-card {
  background: oklch(0.13 0 0 / 0.74);
}

.theme-aurora {
  background:
    radial-gradient(120% 90% at 15% 0%, oklch(0.62 0.19 300 / 0.55) 0%, transparent 60%),
    radial-gradient(110% 90% at 85% 10%, oklch(0.72 0.16 200 / 0.5) 0%, transparent 62%),
    radial-gradient(120% 100% at 50% 100%, oklch(0.6 0.2 340 / 0.4) 0%, transparent 68%),
    var(--surface-2);
  background-size: 180% 180%;
  animation: theme-drift 22s ease-in-out infinite;
}

.theme-sunset {
  background: linear-gradient(135deg, #ff512f 0%, #dd2476 45%, #7a1fa2 100%);
  background-size: 200% 200%;
  animation: theme-pan 16s ease-in-out infinite;
}

.theme-abyss {
  background:
    radial-gradient(100% 80% at 50% 120%, oklch(0.35 0.16 265 / 0.9) 0%, transparent 70%),
    linear-gradient(180deg, #05060f 0%, #0b1026 60%, #131a3a 100%);
}

.theme-abyss::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, oklch(0.7 0.15 250 / 0.35), transparent 70%);
  animation: theme-breathe 9s ease-in-out infinite;
  pointer-events: none;
}

.theme-nebula {
  background:
    radial-gradient(80% 60% at 20% 25%, oklch(0.65 0.22 330 / 0.55) 0%, transparent 65%),
    radial-gradient(70% 60% at 78% 35%, oklch(0.6 0.2 265 / 0.5) 0%, transparent 65%),
    radial-gradient(90% 70% at 50% 95%, oklch(0.55 0.18 200 / 0.45) 0%, transparent 70%),
    #0a0714;
  background-size: 140% 140%;
  animation: theme-drift 28s ease-in-out infinite reverse;
}

.theme-mint {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 50%, #55efc4 100%);
  background-size: 200% 200%;
  animation: theme-pan 20s ease-in-out infinite;
}

.theme-ember {
  background:
    radial-gradient(90% 70% at 50% 110%, oklch(0.7 0.2 45 / 0.6) 0%, transparent 65%),
    radial-gradient(80% 60% at 20% 0%, oklch(0.6 0.22 20 / 0.55) 0%, transparent 60%),
    #180a06;
  background-size: 160% 160%;
  animation: theme-ember 14s ease-in-out infinite;
}

.theme-vapor {
  background: linear-gradient(180deg, #2b1055 0%, #7597de 55%, #ff7eb3 100%);
  background-size: 100% 300%;
  animation: theme-vapor 12s ease-in-out infinite;
}

.theme-mono {
  background: repeating-linear-gradient(135deg, oklch(0.22 0 0) 0 14px, oklch(0.17 0 0) 14px 28px);
}

.theme-mono .profile-name {
  background: linear-gradient(90deg, #fff, #9a9a9a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.theme-ocean {
  background:
    radial-gradient(90% 70% at 25% 0%, oklch(0.7 0.15 220 / 0.5) 0%, transparent 62%),
    linear-gradient(160deg, #022b3a 0%, #004e64 45%, #00798c 100%);
  background-size: 160% 160%;
  animation: theme-ember 18s ease-in-out infinite;
}

.theme-forest {
  background:
    radial-gradient(80% 60% at 80% 0%, oklch(0.75 0.16 140 / 0.4) 0%, transparent 60%),
    linear-gradient(150deg, #0a2e1b 0%, #14532d 55%, #166534 100%);
  background-size: 150% 150%;
  animation: theme-pan 24s ease-in-out infinite;
}

.theme-cherry {
  background:
    radial-gradient(85% 65% at 20% 10%, oklch(0.8 0.14 350 / 0.5) 0%, transparent 62%),
    linear-gradient(140deg, #4a0d20 0%, #8b1e3f 55%, #c23b5a 100%);
  background-size: 170% 170%;
  animation: theme-drift 19s ease-in-out infinite;
}

.theme-candy {
  background:
    conic-gradient(from 210deg at 50% 120%, #ff9ff3, #fec6ff, #a18cd1, #fbc2eb, #ff9ff3);
  animation: theme-turn 30s linear infinite;
}

.theme-grape {
  background:
    radial-gradient(90% 70% at 50% 110%, oklch(0.6 0.24 320 / 0.6) 0%, transparent 65%),
    linear-gradient(150deg, #2b0a3f 0%, #5b1a72 50%, #7d2a86 100%);
  background-size: 160% 160%;
  animation: theme-ember 15s ease-in-out infinite;
}

.theme-steel {
  background: linear-gradient(140deg, #1c1f26 0%, #394150 50%, #586174 100%);
  background-size: 200% 200%;
  animation: theme-pan 26s ease-in-out infinite;
}

.theme-lime {
  background:
    radial-gradient(80% 60% at 15% 0%, oklch(0.9 0.2 120 / 0.45) 0%, transparent 60%),
    linear-gradient(135deg, #1b3b00 0%, #4d7c0f 55%, #84cc16 100%);
  background-size: 160% 160%;
  animation: theme-drift 21s ease-in-out infinite;
}

.theme-copper {
  background:
    radial-gradient(85% 65% at 85% 5%, oklch(0.7 0.14 60 / 0.45) 0%, transparent 60%),
    linear-gradient(150deg, #3b1d0a 0%, #8a4b1f 50%, #c1702a 100%);
  background-size: 170% 170%;
  animation: theme-pan 23s ease-in-out infinite;
}

.theme-sakura {
  background:
    radial-gradient(90% 70% at 25% 5%, oklch(0.85 0.1 350 / 0.5) 0%, transparent 62%),
    linear-gradient(155deg, #3d1f2b 0%, #7c4a5e 55%, #c98fa6 100%);
  background-size: 160% 160%;
  animation: theme-drift 25s ease-in-out infinite reverse;
}

.theme-midnight {
  background:
    radial-gradient(100% 80% at 50% 0%, oklch(0.4 0.14 275 / 0.55) 0%, transparent 65%),
    linear-gradient(180deg, #0a0a14 0%, #14142b 55%, #1f1f3d 100%);
}

.theme-rainbow {
  background: linear-gradient(
    120deg,
    #ff4d4d, #ffb84d, #ffe94d, #6bff8f, #4dd2ff, #7a6bff, #ff4dc4, #ff4d4d
  );
  background-size: 300% 300%;
  animation: theme-pan 18s ease-in-out infinite;
}

@keyframes theme-turn {
  to { filter: hue-rotate(360deg); }
}

@keyframes theme-drift {
  0%, 100% { background-position: 0% 50%, 100% 0%, 50% 100%, 0 0; }
  50%      { background-position: 100% 20%, 0% 60%, 50% 0%, 0 0; }
}

@keyframes theme-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes theme-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 0.8; transform: scale(1.1); }
}

@keyframes theme-ember {
  0%, 100% { background-position: 50% 100%, 20% 0%, 0 0, 0 0; }
  50%      { background-position: 50% 60%, 80% 30%, 0 0, 0 0; }
}

@keyframes theme-vapor {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 100%; }
}

/* ── Shop and settings scaffolding ────────────────────────────────── */

.theme-swatch {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}

.shop-body {
  position: relative;
}

.tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.shop-tabbar {
  display: flex;
  gap: 6px;
  margin: 1.1rem 0 1rem;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.shop-tabbar label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.6;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.shop-tabbar label:hover {
  background: var(--surface-3);
  opacity: 0.9;
}

#tab-frame:checked  ~ .shop-tabbar label[for="tab-frame"],
#tab-theme:checked  ~ .shop-tabbar label[for="tab-theme"],
#tab-avatar:checked ~ .shop-tabbar label[for="tab-avatar"],
#tab-border:checked ~ .shop-tabbar label[for="tab-border"],
#tab-tag:checked    ~ .shop-tabbar label[for="tab-tag"],
#tab-title:checked  ~ .shop-tabbar label[for="tab-title"] {
  background: var(--surface-3);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

#tab-frame:checked:focus-visible  ~ .shop-tabbar label[for="tab-frame"],
#tab-theme:checked:focus-visible  ~ .shop-tabbar label[for="tab-theme"],
#tab-avatar:checked:focus-visible ~ .shop-tabbar label[for="tab-avatar"],
#tab-border:checked:focus-visible ~ .shop-tabbar label[for="tab-border"],
#tab-tag:checked:focus-visible    ~ .shop-tabbar label[for="tab-tag"],
#tab-title:checked:focus-visible  ~ .shop-tabbar label[for="tab-title"] {
  outline: 2px solid var(--user-accent, #7c5cff);
  outline-offset: 2px;
}

.shop-panel {
  display: none;
}

#tab-frame:checked  ~ .shop-panel[data-shop-panel="frame"],
#tab-theme:checked  ~ .shop-panel[data-shop-panel="theme"],
#tab-avatar:checked ~ .shop-panel[data-shop-panel="avatar"],
#tab-border:checked ~ .shop-panel[data-shop-panel="border"],
#tab-tag:checked    ~ .shop-panel[data-shop-panel="tag"],
#tab-title:checked  ~ .shop-panel[data-shop-panel="title"] {
  display: grid;
}

.cosmetics-section + .cosmetics-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.cosmetics-empty {
  margin: 0;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-anim::before,
  .avatar-anim::after,
  .theme-aurora,
  .theme-sunset,
  .theme-nebula,
  .theme-mint,
  .theme-ember,
  .theme-vapor,
  .theme-ocean,
  .theme-forest,
  .theme-cherry,
  .theme-candy,
  .theme-grape,
  .theme-steel,
  .theme-lime,
  .theme-copper,
  .theme-sakura,
  .theme-rainbow,
  .theme-abyss::after {
    animation: none !important;
  }
}