/* ============================================================
   Klyox — bio page
   ============================================================ */

:root{
  --bg:            #000000;
  --text:          #ffffff;
  --text-dim:      rgba(255,255,255,.58);
  --text-dimmer:   rgba(255,255,255,.34);

  --surface:        rgba(255,255,255,.045);
  --surface-strong: rgba(255,255,255,.09);
  --border:         rgba(255,255,255,.09);
  --border-strong:  rgba(255,255,255,.18);

  --glow:  rgba(255,255,255,.9);
  --glow-soft: rgba(255,255,255,.35);

  /* faint ember tone — a quiet nod to the source art, never used above 8% opacity */
  --ember: 58, 12, 12;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

body{
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  overflow-x: hidden;
  position: relative;
}

h1, h2, .nickname{
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
}

/* ---------------------------------------------------------
   Ambient background — animated mesh gradient
--------------------------------------------------------- */
.mesh-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}

.mesh-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}

.mesh-blob--1{
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -14%; left: -12%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.07), transparent 70%);
  animation: drift1 26s var(--ease) infinite alternate;
}

.mesh-blob--2{
  width: 40vw; height: 40vw;
  max-width: 560px; max-height: 560px;
  bottom: -16%; right: -10%;
  background: radial-gradient(circle at 60% 60%, rgba(var(--ember), .5), transparent 72%);
  animation: drift2 32s var(--ease) infinite alternate;
}

.mesh-blob--3{
  width: 34vw; height: 34vw;
  max-width: 480px; max-height: 480px;
  top: 38%; left: 58%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.05), transparent 70%);
  animation: drift3 22s var(--ease) infinite alternate;
}

@keyframes drift1{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(6%, 8%) scale(1.12); }
}
@keyframes drift2{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-8%, -6%) scale(1.15); }
}
@keyframes drift3{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-5%, 6%) scale(.92); }
}

/* particle canvas sits above mesh, below card */
#particles-canvas{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* subtle film grain, echoes the sketched texture of the source art */
.grain{
  position: fixed;
  inset: -60px;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* cursor glow — desktop only */
.cursor-glow{
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin-left: -210px;
  margin-top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cursor-glow.is-active{ opacity: 1; }

/* ---------------------------------------------------------
   Card
--------------------------------------------------------- */
.card{
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 408px;
  padding: 40px 30px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.75),
    0 2px 0 rgba(255,255,255,.03) inset,
    0 0 0 1px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: cardIn .8s var(--ease) both;
}

@keyframes cardIn{
  from{ opacity: 0; transform: translateY(18px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* staggered fade/slide for children */
[data-anim]{
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn .7s var(--ease) forwards;
}
.card [data-anim]:nth-of-type(1){ animation-delay: .12s; }
.card [data-anim]:nth-of-type(2){ animation-delay: .20s; }
.card [data-anim]:nth-of-type(3){ animation-delay: .28s; }
.card [data-anim]:nth-of-type(4){ animation-delay: .36s; }
.card [data-anim]:nth-of-type(5){ animation-delay: .44s; }
.card [data-anim]:nth-of-type(6){ animation-delay: .52s; }
.card [data-anim]:nth-of-type(7){ animation-delay: .60s; }

@keyframes riseIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Avatar
--------------------------------------------------------- */
.avatar-ring{
  position: relative;
  width: 132px;
  height: 132px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
}

.avatar-frame{
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.05));
  box-shadow: 0 0 40px rgba(255,255,255,.14);
}

.avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: #0a0a0a;
}

.avatar-ring__pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  animation: pulseRing 3.2s var(--ease) infinite;
}
.avatar-ring__pulse--delay{ animation-delay: 1.6s; }

@keyframes pulseRing{
  0%   { transform: scale(.86); opacity: .55; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* ---------------------------------------------------------
   Identity
--------------------------------------------------------- */
.nickname{
  margin: 0;
  font-size: clamp(24px, 5.5vw, 28px);
  font-weight: 600;
  letter-spacing: -.01em;
  text-shadow: 0 0 24px rgba(255,255,255,.22);
}

.username{
  margin: 4px 0 18px;
  font-size: 14.5px;
  color: var(--text-dim);
  font-weight: 500;
}

.status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 26px;
}

.status__dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: dotPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.status__text{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  transition: opacity .35s var(--ease);
}
.status__text.is-fading{ opacity: 0; }

/* ---------------------------------------------------------
   Socials
--------------------------------------------------------- */
.socials{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.social{
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.social svg{ width: 19px; height: 19px; }

.social:hover,
.social:focus-visible{
  transform: translateY(-4px);
  background: var(--surface-strong);
  border-color: var(--border-strong);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), 0 0 22px rgba(255,255,255,.12);
}

.social:active{ transform: translateY(-1px); }

.social:focus-visible{ outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; }

.social__tooltip{
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(20,20,20,.95);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.social:hover .social__tooltip,
.social:focus-visible .social__tooltip{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------
   Music
--------------------------------------------------------- */
.music{
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 16px 6px;
  margin-bottom: 24px;
  text-align: left;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.music:hover{
  border-color: var(--border-strong);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.65);
  transform: translateY(-2px);
}

.music__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.music__eyebrow{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.music__provider{
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
}

.music__player{
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #050505;
}

.music__player iframe{
  display: block;
  border: none;
}

/* ---------------------------------------------------------
   View counter
--------------------------------------------------------- */
.views{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dimmer);
  font-size: 12.5px;
  margin: 0;
}

.views svg{ width: 15px; height: 15px; }

.views__count{
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Toast
--------------------------------------------------------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 20;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(18,18,18,.92);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,.7);
}

.toast.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 480px){
  body{ padding: 32px 14px; }
  .card{ padding: 34px 22px 26px; border-radius: 24px; }
  .avatar-ring, .avatar-frame{ width: 112px; height: 112px; }
  .social{ width: 42px; height: 42px; }
  .social svg{ width: 17px; height: 17px; }
}

@media (min-width: 700px){
  .card{ max-width: 440px; padding: 46px 36px 36px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* hide cursor glow entirely on coarse pointers */
@media (hover: none) and (pointer: coarse){
  .cursor-glow{ display: none; }
}