/* ============================================================
   Kenzi — Links · "ONYX"
   Dark-luxury OLED theme : true black, platinum + glass,
   per-brand accents that only bloom on interaction.
   ============================================================ */

:root {
  /* OLED base — pure black so the panel disappears into the screen */
  --black:   #000000;
  --ink:     #050506;
  --surface: rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --glass:   rgba(16,16,19,.55);

  /* hairlines */
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);

  /* type */
  --fg:    #F6F6F8;
  --dim:   rgba(246,246,248,.56);
  --faint: rgba(246,246,248,.34);

  /* platinum accent (replaces the old gold) */
  --pt:    #E9E9EE;
  --pt-2:  #B8B8C2;

  --status: #6E6250;   /* set live by JS for the activity dot */

  --serif: "Sora", ui-sans-serif, system-ui, sans-serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

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

  /* cursor spotlight position (fed by JS) */
  --mx: 50%;
  --my: 0px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--black);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Background layers (kept near-black for OLED) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--black); }

/* one cold, very low aura so the black still has depth */
.bg__aura {
  position: absolute;
  top: -22vh; left: 50%;
  width: 120vw; height: 90vh;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(120,130,170,.14), transparent 70%),
    radial-gradient(45% 40% at 18% 12%, rgba(90,80,120,.10), transparent 72%);
  filter: blur(8px);
}

/* spotlight tracking the cursor — only turns on with .has-spot */
.bg__spot {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(260px 260px at var(--mx) var(--my),
             rgba(255,255,255,.06), transparent 70%);
}
.has-spot .bg__spot { opacity: 1; }

/* micro film grain so flat blacks never band */
.bg__grain {
  position: absolute; inset: -50%;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- Shell ---------- */
.shell {
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  padding: clamp(2.4rem, 8vh, 4.5rem) clamp(1.1rem, 5vw, 1.6rem) 7.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 5vh, 2.6rem);
}

/* ---------- Intro ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  animation: rise .8s var(--ease) both;
}

.ava {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: .55rem;
  /* réagit à la souris sur desktop (tilt 3D piloté par le JS) */
  transform: perspective(640px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  will-change: transform;
}
.ava__mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-weight: 600; font-size: 2.2rem;
  color: var(--pt-2);
  background: radial-gradient(circle at 50% 35%, #1a1a1f, #050506);
  border-radius: 50%;
}
.ava__img {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b0b0d;
}
/* the luxe part: a thin rotating platinum ring + soft bloom */
.ava__ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.65), rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.5) 50%, rgba(255,255,255,.05) 75%,
    rgba(255,255,255,.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin 9s linear infinite;
}
.ava::after {
  content: "";
  position: absolute; inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170,180,220,.22), transparent 68%);
  z-index: -1;
}

.name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 2.6rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 22px rgba(226,230,255,.30),
    0 0 52px rgba(150,165,225,.16);
  animation: glow 4.5s ease-in-out infinite;
}
/* chaque lettre (injectée par le JS) : respire doucement et peut briller
   plus fort quand la souris s'en approche (text-shadow posé en inline). */
.name__ch {
  display: inline-block;
  color: #fff;
  animation: glow 4.5s ease-in-out infinite;
  transition: text-shadow .18s var(--ease), transform .18s var(--ease);
}
.handle {
  display: inline-flex;
  align-items: center;
  margin: .25rem 0 0;
  padding: .28rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .82rem;
  font-weight: 500;
  color: var(--dim);
}
.handle__at { color: var(--pt-2); margin-right: 1px; }
.bio {
  margin: .35rem 0 0;
  font-size: .95rem;
  color: var(--dim);
}

/* ---------- Panel ---------- */
.panel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ---------- Links ---------- */
.links {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .8rem .95rem;
  border-radius: 18px;
  /* deep-black polished surface instead of grey glass */
  background: linear-gradient(180deg, #0c0c0e, #070708);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease);
  animation: rise .7s var(--ease) both;
}
.links .row:nth-child(1) { animation-delay: .06s; }
.links .row:nth-child(2) { animation-delay: .12s; }
.links .row:nth-child(3) { animation-delay: .18s; }
.links .row:nth-child(4) { animation-delay: .24s; }

/* soft white sheen that fades in on hover — stays monochrome / OLED */
.row::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: radial-gradient(130% 120% at 0% 50%,
    rgba(255,255,255,.07), transparent 55%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}

.row__chip {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: radial-gradient(circle at 50% 30%, #17171b, #050506);
  border: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease),
              border-color .45s var(--ease);
}
.row__chip svg { width: 21px; height: 21px; }

.row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.row__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.04rem;
  letter-spacing: -.01em;
  color: var(--fg);
}
.row__user {
  font-size: .82rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__go {
  flex: none;
  color: var(--faint);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.row__go svg { width: 18px; height: 18px; }

/* hover / focus */
.row:hover,
.row:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 40px -22px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.05) inset,
    inset 0 1px 0 rgba(255,255,255,.07);
  outline: none;
}
.row:hover::before,
.row:focus-visible::before { opacity: 1; }
.row:hover .row__chip,
.row:focus-visible .row__chip {
  transform: scale(1.05);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 22px -5px rgba(255,255,255,.35);
}
.row:hover .row__go,
.row:focus-visible .row__go {
  color: var(--fg);
  transform: translate(3px, -3px);
}
.row:active { transform: translateY(0) scale(.99); }

/* ---------- Discord card ---------- */
.dc {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .95rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: rise .7s var(--ease) both .3s;
}
.dc[hidden] { display: none; }

.dc__avatar { position: relative; flex: none; width: 44px; height: 44px; }
.dc__avatar img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b0b0d;
  border: 1px solid var(--line-2);
}
.dc__dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--presence, #6E6250);
  border: 3px solid var(--black);
  transform: scale(0);
  transition: transform .4s var(--ease);
}
.dc__dot.is-live { transform: scale(1); }

.dc__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc__row { display: flex; align-items: center; gap: .4rem; }
.dc__name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc__badges { display: inline-flex; align-items: center; gap: .25rem; }
.dc__badges img { width: 16px; height: 16px; border-radius: 4px; }
.dc__status {
  display: flex; align-items: center; gap: .3rem;
  font-size: .82rem;
  color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc__status-emoji { width: 15px; height: 15px; }

/* ---------- Activity card ---------- */
.act {
  padding: .9rem 1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: rise .7s var(--ease) both .36s;
}
.act[hidden] { display: none; }

.act__label {
  margin: 0 0 .55rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--status);
  font-weight: 600;
}
.act__body { display: flex; gap: .8rem; align-items: center; }

.act__art { position: relative; flex: none; width: 54px; height: 54px; }
.act__art-big {
  width: 54px; height: 54px;
  border-radius: 12px;
  object-fit: cover;
  background: #0b0b0d;
  border: 1px solid var(--line-2);
}
.act__art-mini {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--black);
  background: #0b0b0d;
}

.act__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act__name { font-weight: 600; font-size: .95rem; color: var(--fg); }
.act__line {
  font-size: .82rem; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act__time {
  margin-top: 2px;
  font-size: .76rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer ---------- */
.foot {
  margin-top: .4rem;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  animation: rise .7s var(--ease) both .42s;
}

/* ---------- Now-playing pill ---------- */
.np {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  transform: translateX(-50%) translateY(14px);
  z-index: 40;

  display: none;              /* revealed when the player is ready */
  align-items: center;
  gap: .7rem;
  padding: .5rem .85rem .5rem .55rem;
  border-radius: 999px;

  background: var(--glass);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  color: var(--fg);
  cursor: pointer;
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease),
              border-color .4s var(--ease);
  font-family: inherit;
}
.np.is-ready { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.np:hover { border-color: rgba(255,255,255,.3); }

.np__art {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #0b0b0d;
  border: 1px solid var(--line-2);
}
.np__art img { width: 100%; height: 100%; object-fit: cover; }

.np__meta { display: flex; flex-direction: column; gap: 5px; max-width: 150px; }
.np__title {
  font-size: .78rem; font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np__progress {
  position: relative;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.np__bar {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--pt-2), var(--pt));
  border-radius: 2px;
  transition: width .25s linear;
}

.np__icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--pt); }
.np__muted { width: 20px; height: 20px; }

/* equalizer shown when sound is ON, mute glyph otherwise */
.np__eq { display: none; align-items: flex-end; gap: 2px; height: 15px; }
.np__eq i {
  width: 2.5px; border-radius: 2px;
  background: var(--pt);
  animation: eq .9s ease-in-out infinite;
}
.np__eq i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.np__eq i:nth-child(2) { height: 85%; animation-delay: -.5s; }
.np__eq i:nth-child(3) { height: 60%; animation-delay: -.1s; }
.np__eq i:nth-child(4) { height: 95%; animation-delay: -.35s; }

.np.is-on .np__eq { display: inline-flex; }
.np.is-on .np__muted { display: none; }

/* ---------- Hidden YouTube player ---------- */
.yt {
  position: fixed;
  width: 1px; height: 1px;
  left: -9999px; top: -9999px;
  opacity: 0; pointer-events: none;
}

/* ---------- Motion ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow {
  0%, 100% { text-shadow: 0 0 20px rgba(226,230,255,.26), 0 0 48px rgba(150,165,225,.13); }
  50%      { text-shadow: 0 0 30px rgba(226,230,255,.46), 0 0 68px rgba(150,165,225,.24); }
}
@keyframes eq {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}

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

/* ---------- Larger screens: a touch more air ---------- */
@media (min-width: 720px) {
  .shell { max-width: 476px; }
  .row { padding: .95rem 1.1rem; }
}