/* ---------------------------------------------------------------------------
   Purple theme tokens — change these to restyle the page.
   --------------------------------------------------------------------------- */
:root {
  --bg: #0d0618;
  --text: #f2ecfb;
  --text-muted: #b6a4d4;
  --text-faint: #8a76ad;

  --accent: #b06bff;
  --accent-2: #e879f9;
  --focus: #e0b3ff;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

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

/* ---------------------------------------------------------------------------
   Page: one centred statement on a purple glow.
   --------------------------------------------------------------------------- */
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: clamp(24px, 6vw, 56px);
  gap: 32px;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Purple glow field, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(176, 107, 255, 0.32), transparent 62%),
    radial-gradient(760px 520px at 88% 2%, rgba(232, 121, 249, 0.22), transparent 58%),
    radial-gradient(820px 700px at 50% 108%, rgba(124, 58, 237, 0.26), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate;
}

/* Faint grid for texture, fading out toward the edges. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(176, 107, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 107, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 80%);
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0, -22px, 0) scale(1.06);
  }
}

main {
  max-width: 680px;
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

h1 {
  /* ch here is relative to the h1's own (large) size, so this holds the
     headline to a couple of punchy lines at every width. */
  max-width: 13ch;
  margin: 0 auto 20px;
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Violet -> pink -> ice gradient on the name. */
.grad {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 60%, #7cd4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: var(--text-muted);
  text-wrap: balance;
}

.hl {
  color: var(--accent-2);
  font-weight: 650;
}

/* plink cat, in a circle with a purple ring + glow — links out to guns.lol. */
.plink-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-faint);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color 0.18s ease;
}

.plink {
  display: block;
  width: clamp(76px, 15vw, 108px);
  height: clamp(76px, 15vw, 108px);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(176, 107, 255, 0.55);
  box-shadow:
    0 0 0 7px rgba(176, 107, 255, 0.09),
    0 12px 34px rgba(124, 58, 237, 0.4);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.plink-link:hover {
  color: var(--accent-2);
}

.plink-link:hover .plink,
.plink-link:focus-visible .plink {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--accent-2);
  box-shadow:
    0 0 0 9px rgba(232, 121, 249, 0.12),
    0 16px 40px rgba(124, 58, 237, 0.55);
}

/* ---------------------------------------------------------------------------
   Volume slider, left edge. Hidden without JS, since it would do nothing.
   --------------------------------------------------------------------------- */
.volume {
  display: none;
}

.js .volume {
  position: fixed;
  left: clamp(14px, 3vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.volume-ico {
  width: 18px;
  height: 18px;
  fill: var(--text-faint);
  transition: fill 0.2s ease;
}

.volume-ico .stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Dim the speaker when the track is silenced. */
.volume.muted .volume-ico {
  fill: rgba(138, 118, 173, 0.4);
}

.volume:hover .volume-ico {
  fill: var(--accent-2);
}

/* Vertical range input. writing-mode + direction:rtl makes up = louder. */
.volume-slider {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: clamp(96px, 18vh, 150px);
  margin: 0;
  background: transparent;
  cursor: pointer;
  --pct: 55%;
}

.volume-slider::-webkit-slider-runnable-track {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    var(--accent) 0 var(--pct),
    rgba(176, 107, 255, 0.16) var(--pct) 100%
  );
}

.volume-slider::-moz-range-track {
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    var(--accent) 0 var(--pct),
    rgba(176, 107, 255, 0.16) var(--pct) 100%
  );
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-left: -4.5px; /* centre the 15px thumb on the 6px track */
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--bg);
  box-shadow:
    0 0 0 4px rgba(232, 121, 249, 0.14),
    0 4px 12px rgba(124, 58, 237, 0.5);
  transition: transform 0.15s ease;
}

.volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--bg);
  box-shadow:
    0 0 0 4px rgba(232, 121, 249, 0.14),
    0 4px 12px rgba(124, 58, 237, 0.5);
}

.volume-slider:hover::-webkit-slider-thumb,
.volume-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Links page (/links) — stacked social buttons, same purple theme.
   --------------------------------------------------------------------------- */
body.links-page {
  display: block;
  place-items: unset;
  padding-block: clamp(40px, 9vh, 90px);
}

body.links-page main {
  max-width: 460px;
  margin: 0 auto;
}

.links-title {
  margin-bottom: 6px;
  font-size: clamp(2rem, 8vw, 3.2rem);
}

.links-lead {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.link-btn {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  text-decoration: none;
  text-align: left;

  color: var(--text);
  background: rgba(176, 107, 255, 0.06);
  border: 1px solid rgba(176, 107, 255, 0.28);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.14);
  transition: transform 0.16s ease, border-color 0.16s ease,
    background 0.16s ease, box-shadow 0.16s ease;
}

.link-btn:hover,
.link-btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(232, 121, 249, 0.1);
  border-color: var(--accent-2);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.4);
}

.link-ico {
  width: 22px;
  height: 22px;
  color: var(--accent-2);
}

.link-label {
  font-weight: 650;
  letter-spacing: 0.01em;
}

.link-sub {
  color: var(--text-faint);
  font-size: 0.82rem;
}

.back-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 0.85rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.16s ease;
}

.back-link:hover {
  color: var(--accent-2);
}

/* Discreet link from the home page to /links. */
.links-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.03em;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.links-link:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* ---------------------------------------------------------------------------
   Cursor spotlight — a soft light trails the mouse and the rest of the page
   dims. The two layers are built by script.js, so the page is never left dark
   when JS is off. Tune the numbers below to taste.
   --------------------------------------------------------------------------- */
.cursor-fx {
  position: fixed;
  inset: 0;
  z-index: 4; /* above page content, below the volume slider (z-index 10) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;

  --mx: 50%; /* cursor x, set per-frame by script.js */
  --my: 50%; /* cursor y */
  --r: 340px; /* radius of the lit circle */
}

.cursor-fx.on {
  opacity: 1;
}

/* Darkens the page, with a clear hole punched out at the cursor. */
.cursor-dark {
  background: radial-gradient(
    circle var(--r) at var(--mx) var(--my),
    rgba(4, 2, 10, 0) 0%,
    rgba(4, 2, 10, 0) 42%,
    rgba(4, 2, 10, 0.52) 100%
  );
}

/* A gentle violet glow layered over the lit area so it reads as light, not
   just a gap in the shade. */
.cursor-glow {
  mix-blend-mode: screen;
  background: radial-gradient(
    circle calc(var(--r) * 0.72) at var(--mx) var(--my),
    rgba(176, 107, 255, 0.18) 0%,
    rgba(232, 121, 249, 0.08) 45%,
    transparent 75%
  );
}

@media (max-width: 560px) {
  .cursor-fx {
    --r: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}