/* ============================================================
   yourcustomprofile.app — profile page (/u/:username)
   Layers: bg (0) → noise (1) → effects canvas (2) → content (10)
           → enter gate (80). Cursor glow (5) is owned by effects.js.
   Colors come from tokens.css; --accent / --accent-2 are themed per profile.
   ============================================================ */

.profile-page {
  min-height: 100svh;
  background: var(--bg-0);
  overflow-x: hidden;
}

/* profile-scoped derived colors (never re-declare the raw tokens) */
.profile-page {
  --pg-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.022));
  --pg-edge: color-mix(in srgb, var(--accent) 62%, transparent);
  --pg-edge-2: color-mix(in srgb, var(--accent-2) 52%, transparent);
  --pg-glow: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- 1. background stack ---------- */
.pg-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
              radial-gradient(110% 90% at 85% 15%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 62%),
              var(--bg-0);
}
.pg-bg__media {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  transform-origin: center;
  filter: blur(var(--bg-blur, 0px));
  transition: filter var(--t-slow) var(--ease-out);
}
.pg-bg__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pg-bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, calc(var(--dim, 0.4) + 0.1)),
      rgba(0, 0, 0, var(--dim, 0.4)) 42%,
      rgba(0, 0, 0, calc(var(--dim, 0.4) + 0.22)));
}

/* ---------- 2. effects canvas ---------- */
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ---------- 3. stage + ambience ---------- */
.pg-stage {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vh, 72px) 18px clamp(64px, 9vh, 96px);
}
.pg-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pg-orb { opacity: 0.42; }
.pg-orb--a {
  width: clamp(260px, 42vw, 460px);
  height: clamp(260px, 42vw, 460px);
  top: -8%;
  left: -8%;
  background: var(--accent);
}
.pg-orb--b {
  width: clamp(220px, 36vw, 400px);
  height: clamp(220px, 36vw, 400px);
  bottom: -12%;
  right: -6%;
  background: var(--accent-2);
  opacity: 0.32;
}

.pg-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--sp-3);
}

/* ---------- 4. profile card ---------- */
.profile-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: clamp(30px, 5vw, 46px) clamp(22px, 4.4vw, 42px) clamp(26px, 4vw, 38px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--pg-glass);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  opacity: 0;
  transform: translateY(22px) scale(0.982);
  transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-spring);
}
.profile-card:focus { outline: none; }

/* gradient hairline border */
.profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--pg-edge), transparent 38%, transparent 62%, var(--pg-edge-2));
  -webkit-mask: linear-gradient(rgb(0 0 0) 0 0) content-box, linear-gradient(rgb(0 0 0) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(rgb(0 0 0) 0 0) content-box, linear-gradient(rgb(0 0 0) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}
/* soft top light */
.profile-card__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.pg-stage.is-revealed .profile-card {
  opacity: 1;
  transform: none;
  /* reveal is instant; a stalled transition must never leave the card invisible */
  transition: none;
}
.pg-stage.is-revealed .profile-card [data-stagger] {
  /* no fill mode: if the compositor stalls the animation, content stays visible */
  animation: pg-stagger 0.55s var(--ease-out);
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}

/* ---------- 5. avatar ---------- */
.avatar {
  position: relative;
  width: clamp(96px, 20vw, 118px);
  height: clamp(96px, 20vw, 118px);
  margin: 0 auto var(--sp-5);
}
.avatar__ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2) 45%, var(--accent) 78%, var(--accent-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), rgb(0 0 0) calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), rgb(0 0 0) calc(100% - 2px));
  animation: spin 16s linear infinite;
  opacity: 0.95;
}
.avatar::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-glow), transparent 68%);
  opacity: 0.5;
  pointer-events: none;
}
.avatar__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, var(--bg-2)), color-mix(in srgb, var(--accent-2) 32%, var(--bg-1)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 34px -16px rgb(0 0 0 / 0.9);
}
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar__initials {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--text-0);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.avatar.is-fallback .avatar__img { display: none; }
.avatar.is-fallback .avatar__initials { display: grid; }
.avatar__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ok);
  border: 2.5px solid var(--bg-0);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 75%, transparent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-spring);
}
html.audio-on .avatar__dot { opacity: 1; transform: none; animation: pulse-dot 1.8s ease-in-out infinite; }

/* ---------- 6. identity ---------- */
.profile-card__id { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }

.profile-name {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  background: linear-gradient(178deg, var(--text-0) 30%, color-mix(in srgb, var(--accent) 62%, var(--text-0)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.name-font-pixel {
  font-family: "Silkscreen", var(--font-mono);
  font-size: clamp(1.55rem, 3.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.name-font-mono {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.name-font-hand {
  font-family: "Caveat", var(--font-sans);
  font-size: clamp(2.5rem, 5.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0;
}
.name-font-sans { font-family: var(--font-sans); }

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.profile-badges:empty { display: none; }
.pg-badge {
  font-size: 0.65rem;
  padding: 0.22em 0.68em;
  gap: 0.34em;
  background: var(--surface);
}
.pg-badge svg { width: 12px; height: 12px; flex: none; }
.pg-badge--verified { color: color-mix(in srgb, var(--accent) 62%, var(--text-0)); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pg-badge--premium { color: color-mix(in srgb, var(--accent-3) 70%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); background: color-mix(in srgb, var(--accent-3) 12%, transparent); }
.pg-badge--og { color: color-mix(in srgb, var(--warn) 78%, var(--text-0)); border-color: color-mix(in srgb, var(--warn) 36%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.pg-badge--early { color: color-mix(in srgb, var(--accent-4) 74%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-4) 34%, transparent); background: color-mix(in srgb, var(--accent-4) 10%, transparent); }
.pg-badge--dev { color: color-mix(in srgb, var(--accent-2) 70%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); background: color-mix(in srgb, var(--accent-2) 11%, transparent); }

/* ---------- 7. title / bio / meta ---------- */
.profile-title {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent-2) 66%, var(--text-0));
  min-height: 1.4em;
}
.profile-title__caret {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-2);
  animation: pg-caret 1.05s steps(1, end) infinite;
}
.profile-title.has-custom-title { color: var(--title-color); }
.profile-title.has-custom-title .profile-title__caret { color: var(--title-color); }

.profile-bio {
  margin: var(--sp-4) auto 0;
  max-width: 42ch;
  color: var(--text-1);
  font-size: 0.97rem;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.profile-meta__item { display: inline-flex; align-items: center; gap: 0.45em; }
.profile-meta__item svg { opacity: 0.85; }
.profile-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

/* ---------- 8. actions & socials ---------- */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.profile-actions .icon-btn { width: 42px; height: 42px; border-radius: var(--r-md); }
.profile-actions .icon-btn:hover {
  color: var(--text-0);
  border-color: var(--pg-edge);
  box-shadow: 0 10px 30px -16px var(--pg-glow);
}

.profile-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-5);
}
.pg-social {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-fast) var(--ease-out), color var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              background-color var(--t) var(--ease-out);
}
.pg-social:hover {
  color: var(--brand, var(--text-0));
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 52%, transparent);
  background: var(--surface-2);
  box-shadow: 0 12px 30px -16px var(--brand, var(--accent));
}

/* ---------- 9. audio dock ---------- */
.audio-dock {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: pg-rise 0.7s var(--ease-out) both;
}
.audio-dock__toggle { width: 42px; height: 42px; border-radius: var(--r-md); backdrop-filter: blur(16px); background: rgba(10, 12, 20, 0.55); }
.audio-dock__toggle[aria-pressed="true"] { color: var(--accent-2); border-color: var(--pg-edge-2); }
.audio-dock__toggle[aria-pressed="true"]:hover { color: var(--accent-2); }

.audio-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-2);
  min-height: 42px;
}
.audio-pill__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-2) 72%, var(--text-1));
  padding: 0.2em 0.6em;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  background: color-mix(in srgb, var(--accent-2) 9%, transparent);
  flex: none;
}
.audio-pill__viewport {
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-width: min(190px, 34vw);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-1);
}
.audio-pill__track { display: inline-flex; white-space: nowrap; }
.audio-pill__copy { padding-right: 1.6em; display: none; }
.audio-pill__copy:first-child { display: inline; }
.audio-pill__track.is-scrolling { animation: pg-marquee var(--marquee-duration, 14s) linear infinite; }
.audio-pill__track.is-scrolling .audio-pill__copy { display: inline; }
.audio-pill__viewport.is-scrolling { justify-content: flex-start; }
.audio-pill.is-paused .audio-pill__track.is-scrolling { animation-play-state: paused; }
.audio-pill__viz { width: 44px; height: 18px; flex: none; opacity: 0.9; }

.audio-dock__vol { display: inline-flex; align-items: center; }
.audio-dock__range { width: 78px; height: 18px; }

/* ---------- 10. enter gate ---------- */
.enter-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: pointer;
  background: radial-gradient(120% 100% at 50% 28%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%), rgba(5, 6, 11, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.55s var(--ease-out), visibility 0.55s;
}
.enter-gate:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -6px; }
.enter-gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  max-width: 420px;
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out);
}
.enter-gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.enter-gate.is-leaving .enter-gate__inner { transform: scale(1.05); opacity: 0; }

.gate-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-5);
}
.gate-brand__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--grad-hot);
  color: var(--bg-0);
  transform: rotate(-5deg);
}

.enter-gate.is-booting .gate-avatar,
.enter-gate.is-booting .gate-name,
.enter-gate.is-booting .gate-hint,
.enter-gate.is-booting .gate-note { display: none; }
.enter-gate:not(.is-booting) .gate-spinner { display: none; }

.gate-avatar { position: relative; width: 130px; height: 130px; margin-bottom: var(--sp-4); }
.gate-avatar__ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--accent), var(--accent-2) 40%, transparent 62%, var(--accent) 95%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), rgb(0 0 0) calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), rgb(0 0 0) calc(100% - 1px));
  animation: spin 9s linear infinite;
}
.gate-avatar::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-glow), transparent 66%);
  pointer-events: none;
}
.gate-avatar__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, var(--bg-2)), color-mix(in srgb, var(--accent-2) 32%, var(--bg-1)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 60px -22px rgb(0 0 0 / 0.95);
}
.gate-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gate-avatar__initials {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: var(--text-0);
}
.gate-avatar.is-fallback .gate-avatar__img { display: none; }
.gate-avatar.is-fallback .gate-avatar__initials { display: grid; }

.gate-name {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(178deg, var(--text-0) 35%, color-mix(in srgb, var(--accent) 60%, var(--text-0)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-1);
  animation: pg-breathe 2.6s ease-in-out infinite;
}
.gate-hint__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 12px var(--accent-2);
  animation: pg-breathe 1.7s ease-in-out infinite;
}
.gate-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gate-spinner { margin-top: var(--sp-5); }

/* ---------- 11. quiet zone (unclaimed / error) ---------- */
.quiet-zone {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  padding: clamp(32px, 6vw, 52px) clamp(24px, 5vw, 46px);
  text-align: center;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--pg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-3);
  animation: pg-rise 0.8s var(--ease-out) both;
}
.quiet-zone__halo {
  position: absolute;
  inset: -60px -40px auto;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.quiet-zone__eyebrow { display: block; margin-bottom: var(--sp-4); letter-spacing: 0.3em; }
.quiet-zone__title {
  position: relative;
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.quiet-zone__handle { color: var(--accent-2); }
.quiet-zone__text {
  position: relative;
  margin: var(--sp-4) auto 0;
  max-width: 34ch;
  color: var(--text-1);
  font-size: 0.95rem;
}
.quiet-zone__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-6);
}
.quiet-zone__note {
  position: relative;
  margin-top: var(--sp-6);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- 12. credit ---------- */
.pg-credit {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t) var(--ease-out), text-shadow var(--t) var(--ease-out);
}
.pg-credit__brand { color: var(--text-2); }
.pg-credit:hover { color: var(--text-1); text-shadow: 0 0 20px var(--pg-glow); }
.pg-credit:hover .pg-credit__brand { color: var(--accent-2); }

/* ---------- 13. keyframes ---------- */
@keyframes pg-stagger {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes pg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pg-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }
@keyframes pg-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes pg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 14. responsive ---------- */
@media (max-width: 640px) {
  .pg-stage { padding-top: clamp(84px, 16vh, 120px); }
  .profile-card { padding: 30px 20px 26px; }
  .audio-dock { gap: 8px; }
  .audio-pill { padding: 5px 10px; gap: 8px; }
  .audio-pill__viewport { max-width: 38vw; }
  .audio-dock__range { width: 62px; }
  .profile-bio { max-width: 100%; }
}
@media (max-width: 420px) {
  .audio-pill__viz { display: none; }
  .profile-actions .icon-btn, .pg-social { width: 40px; height: 40px; }
}

/* ---------- 15. reduced motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .profile-card { opacity: 1; transform: none; }
  .pg-stage.is-revealed .profile-card [data-stagger] { animation: none; opacity: 1; transform: none; }
  .profile-card, .enter-gate, .enter-gate__inner, .quiet-zone, .audio-dock { animation: none; transition: none; }
  .avatar__ring, .gate-avatar__ring { animation: none; }
  .avatar__dot { animation: none; }
  .profile-title__caret { animation: none; }
  .gate-hint, .gate-hint__pulse { animation: none; opacity: 1; }
  .audio-pill__track.is-scrolling { animation: none; }
  .pg-bg__media { transition: none; }
}

/* ============================================================
   v2 — extended fonts, badges, social effects, interactive effects
   ============================================================ */

/* ---------- extra name fonts ---------- */
.name-font-display { font-family: "Unbounded", var(--font-sans); font-size: clamp(1.55rem, 3.7vw, 2.2rem); font-weight: 600; letter-spacing: -0.045em; }
.name-font-serif { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.15rem, 5vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; }
.name-font-wide { font-family: "Syne", var(--font-sans); font-size: clamp(1.75rem, 4vw, 2.45rem); font-weight: 700; letter-spacing: 0.015em; }
.name-font-tech { font-family: "Space Grotesk", var(--font-sans); font-size: clamp(1.9rem, 4.2vw, 2.65rem); font-weight: 600; letter-spacing: -0.04em; }

/* ---------- bio typography ---------- */
.profile-bio {
  white-space: pre-line;
  transition: color var(--t), font-size var(--t), text-align var(--t);
}
.profile-bio.bio-font-pixel { font-family: "Silkscreen", var(--font-mono); line-height: 1.8; }
.profile-bio.bio-font-mono { font-family: var(--font-mono); }
.profile-bio.bio-font-hand { font-family: "Caveat", var(--font-sans); line-height: 1.35; }
.profile-bio.bio-font-display { font-family: "Unbounded", var(--font-sans); line-height: 1.55; }
.profile-bio.bio-font-serif { font-family: "Playfair Display", Georgia, serif; line-height: 1.6; }
.profile-bio.bio-font-wide { font-family: "Syne", var(--font-sans); }
.profile-bio.bio-font-tech { font-family: "Space Grotesk", var(--font-sans); }
.profile-bio.bio-font-sans { font-family: var(--font-sans); }

/* ---------- reserved badges + custom badge colors ---------- */
.pg-badge--staff { color: color-mix(in srgb, var(--accent-2) 72%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); background: color-mix(in srgb, var(--accent-2) 11%, transparent); }
.pg-badge--founder { color: color-mix(in srgb, var(--accent-4) 72%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-4) 36%, transparent); background: color-mix(in srgb, var(--accent-4) 10%, transparent); }
.pg-badge--admin { color: color-mix(in srgb, var(--accent-3) 70%, var(--text-0)); border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); background: color-mix(in srgb, var(--accent-3) 12%, transparent); }
.pg-badge--custom {
  color: color-mix(in srgb, var(--badge-color, var(--accent)) 76%, var(--text-0));
  border-color: color-mix(in srgb, var(--badge-color, var(--accent)) 44%, transparent);
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 12%, transparent);
}

/* ---------- social colours + effects ---------- */
.pg-social { color: var(--social-color, var(--text-1)); }
.pg-social--fx-glow {
  border-color: color-mix(in srgb, var(--brand) 52%, transparent);
  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--brand) 70%, transparent),
              inset 0 0 14px -8px var(--brand);
}
.pg-social--fx-pulse { animation: social-pulse 2.8s ease-in-out infinite; }
.pg-social--fx-rainbow {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    conic-gradient(from var(--social-angle, 0deg), #f472b6, #a78bfa, #22d3ee, #a3e635, #f472b6) border-box;
  border: 1px solid transparent;
  animation: social-rainbow 6s linear infinite;
}
@keyframes social-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent), 0 0 24px -4px var(--brand); }
}
@keyframes social-rainbow { to { --social-angle: 360deg; } }
@property --social-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- background geometry ---------- */
.pg-bg__media {
  background-size: var(--bg-size, cover);
  background-position: var(--bg-pos, 50% 50%);
  background-repeat: var(--bg-repeat, no-repeat);
}
.pg-bg__el {
  object-fit: var(--bg-fit, cover);
  object-position: var(--bg-pos, 50% 50%);
  transform: scale(var(--bg-zoom, 1));
  transform-origin: var(--bg-pos, 50% 50%);
  will-change: transform;
}

/* ---------- flicker / shake / audio-reactive ---------- */
body.fx-flicker .profile-card__sheen { animation: fx-flicker 9s steps(1, end) infinite; }
body.fx-flicker .profile-name { animation: fx-flicker-text 9s steps(1, end) infinite; }
body.fx-shake .profile-card__id { animation: fx-shake 6.5s ease-in-out infinite; transform-origin: center bottom; }

@keyframes fx-flicker {
  0%, 91%, 93.5%, 95%, 100% { opacity: 1; }
  91.5%, 94.2% { opacity: 0.28; }
  92.4% { opacity: 0.7; }
}
@keyframes fx-flicker-text {
  0%, 90%, 96%, 100% { filter: none; opacity: 1; }
  90.5%, 95.4% { filter: brightness(1.9) saturate(1.4); opacity: 0.66; }
  93.2% { opacity: 0.86; }
}
@keyframes fx-shake {
  0%, 86%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  87% { transform: translate3d(-2px, 1px, 0) rotate(-0.5deg); }
  88% { transform: translate3d(2px, -1px, 0) rotate(0.55deg); }
  89% { transform: translate3d(-1.5px, 0, 0) rotate(-0.35deg); }
  90% { transform: translate3d(1px, 1px, 0) rotate(0.2deg); }
  91% { transform: translate3d(0, 0, 0) rotate(0); }
}

html.is-reactive .pg-orb--a {
  transform: scale(calc(1 + var(--audio-level, 0) * 0.55));
  opacity: calc(0.42 + var(--audio-level, 0) * 0.9);
  will-change: transform, opacity;
}
html.is-reactive .pg-orb--b {
  transform: scale(calc(1 + var(--audio-level, 0) * 0.42));
  opacity: calc(0.32 + var(--audio-level, 0) * 0.7);
  will-change: transform, opacity;
}
html.is-reactive .profile-card {
  box-shadow:
    var(--shadow-3),
    0 0 calc(30px + var(--audio-level, 0) * 160px) color-mix(in srgb, var(--accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.is-reactive.audio-on .avatar__ring { animation-duration: max(2.5s, calc(16s - var(--audio-level, 0) * 40s)); }

/* ---------- preview click-to-edit ---------- */
html.is-preview [data-edit] {
  cursor: crosshair;
  border-radius: 10px;
  transition: outline-color 0.15s, background-color 0.15s;
  outline: 1px dashed transparent;
  outline-offset: 4px;
}
html.is-preview [data-edit]:hover {
  outline-color: color-mix(in srgb, var(--accent-2) 82%, transparent);
}
/* Only plain containers get the soft tint. Surfaces (card, dock, counter,
   bento blocks) keep their own background — swapping the colour out made the
   whole card go see-through while the editor cursor was over it. */
html.is-preview [data-edit]:not(.profile-card):not(.audio-dock):not(.pg-views):not(.profile-card__portrait):not(.profile-card__body):hover {
  background-color: color-mix(in srgb, var(--accent-2) 7%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.fx-flicker .profile-card__sheen,
  body.fx-flicker .profile-name,
  body.fx-shake .profile-card__id,
  .pg-social--fx-pulse,
  .pg-social--fx-rainbow { animation: none !important; }
  html.is-reactive .pg-orb--a,
  html.is-reactive .pg-orb--b { transform: none; opacity: 0.42; }
}