/* vovaauer.com — overlay + skeleton.
 *
 * The page is two layers:
 *   #bg       z=0   full-viewport host for the active background module.
 *   #overlay  z=1   pointer-events:none, so events fall through to the canvas
 *                   except over .card and #toggle, which opt back in.
 */

:root {
  --bg: #0b0b0e;
  --fg: #e8e8ea;
  --muted: #9a9aa2;
  --line: rgba(255, 255, 255, 0.10);
  --card-bg: rgba(15, 15, 18, 0.55);
  --card-bg-fallback: rgba(15, 15, 18, 0.85);
  --accent: #c9c9d4;
  --radius: 14px;
  --pad: 1.25rem;
  --maxw: 76rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; }

p { margin: 0 0 .8em; }
.muted { color: var(--muted); }

/* ── background host ───────────────────────────────────────────────── */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000; /* fallback if no module ever boots */
}
#bg > canvas, #bg > video, #bg > svg, #bg > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── overlay grid ──────────────────────────────────────────────────── */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none; /* gaps pass through to #bg */
  padding: 1.5rem;
  overflow: auto;
}
#overlay[data-state="hidden"] { display: none; }

/* Header row, then 3 columns side-by-side: payments | contacts | security.
 *
 *   ┌──────────────────────────────────────────┐
 *   │             header (hdr)                 │   ← logo + name + email
 *   ├──────────┬─────────────────┬─────────────┤
 *   │ payments │    contacts     │  security   │
 *   │  (pay)   │     (soc)       │   (other)   │
 *   └──────────┴─────────────────┴─────────────┘
 *
 * On narrow screens it stacks: hdr → soc (contacts first, since it's primary)
 * → pay → other. */
.grid {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: var(--maxw);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hdr"
    "soc"
    "pay"
    "other";
}
@media (min-width: 860px) {
  .grid {
    grid-template-columns: 1fr 1.3fr 1fr;
    grid-template-areas:
      "hdr hdr hdr"
      "pay soc other";
    align-items: start;
  }
}
.is-header  { grid-area: hdr; }
.is-socials { grid-area: soc; }
.is-pay     { grid-area: pay; }
.is-other   { grid-area: other; }

/* Header card: V/A strokes span the card edge-to-edge as a backdrop, with
 * the name + email centered on top. Card stays roughly intrinsic-width
 * (centered in its grid row), with a min-width so the monogram has room. */
.is-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: min(22rem, 100%);
  max-width: 100%;
  min-height: 7rem;
  padding: 1.25rem 1.5rem;
  justify-self: center;
  overflow: hidden;
}
.is-header .logo-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 0;
}
.is-header .who {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-align: center;
  min-width: 0;
}
.is-header h1 { margin: 0; font-size: 1.7rem; }
.is-header .email { margin: 0; font-size: .95rem; color: var(--muted); }
.is-header .email a { color: inherit; }

/* ── card ──────────────────────────────────────────────────────────── */
.card {
  pointer-events: auto;
  background: var(--card-bg-fallback);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
}

/* If the browser supports backdrop-filter, switch to the translucent variant. */
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .card {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
  }
}

.card > header { margin-bottom: .6rem; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.card .lede { font-size: 1.05rem; }

/* ── search input ──────────────────────────────────────────────────── */
.search {
  flex: 1 1 auto;
  min-width: 8rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .35rem .6rem;
  font: inherit;
  outline: none;
}
.search:focus { border-color: var(--accent); }

/* ── socials list (icon + name + copy button per row) ──────────────── */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* fits 1 col in narrow contacts column, 2 when there's room */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .4rem;
}
.links li[hidden] { display: none; }
.links li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.20);
  overflow: hidden;
  transition: background .12s ease, border-color .12s ease;
}
.links li:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }
.links a.link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
}
.links a.link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.links .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--fg);
}

/* ── payments list (key + value + copy button per row) ─────────────── */
.pay {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.pay li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.20);
  overflow: hidden;
  transition: background .12s ease, border-color .12s ease;
}
.pay li:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }
.pay .pay-k {
  display: flex;
  align-items: center;
  padding: .4rem .6rem;
  color: var(--muted);
  font-size: .85rem;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.15);
}
.pay .pay-v {
  display: flex;
  align-items: center;
  padding: .4rem .6rem;
  min-width: 0;
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay a.pay-v { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.pay a.pay-v:hover { text-decoration-color: currentColor; }
.pay code.pay-v { font-family: var(--mono); font-size: .8rem; }

.small { font-size: .78rem; margin-top: .6rem; }

/* ── key/value blocks (security card) ──────────────────────────────── */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem .9rem;
  margin: 0;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.fpr, .addr {
  font-family: var(--mono);
  font-size: .85rem;
  word-break: break-all;
}

/* ── copy button (shared by socials + payments) ────────────────────── */
.copy {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  padding: 0 .65rem;
  display: grid;
  place-items: center;
  position: relative;
  transition: color .12s ease, background .12s ease;
}
.copy:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.copy:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The two icons live as backgrounds so we don't have to edit every <button>'s
 * markup. SVGs encoded inline; on .copy.ok we swap to the checkmark. */
.copy::before {
  content: "";
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-copy) center / contain no-repeat;
          mask: var(--icon-copy) center / contain no-repeat;
}
.copy.ok::before {
  -webkit-mask-image: var(--icon-check);
          mask-image: var(--icon-check);
  color: #6fdc8c;
}
.copy.fail::before { color: #e07a7a; }
:root {
  --icon-copy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V5a2 2 0 0 1 2-2h10'/></svg>");
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ── toggle button ─────────────────────────────────────────────────── */
#toggle {
  pointer-events: auto;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-bg-fallback);
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  #toggle {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
  }
}
#toggle:hover { transform: scale(1.05); }
#toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── menu popover (background picker + overlay toggle) ─────────────── */
#menu[popover] {
  position: fixed;
  inset: auto 1rem 4.2rem auto; /* sits just above the toggle button */
  margin: 0;
  padding: .4rem;
  min-width: 13rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-bg-fallback);
  color: var(--fg);
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.7);
  z-index: 3;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  #menu[popover] {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
  }
}
#menu[popover]::backdrop { background: transparent; }
#menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: .35rem 0;
}
#menu .menu-h {
  margin: 0;
  padding: .25rem .6rem .15rem;
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#menu .menu-group { list-style: none; margin: 0; padding: 0; }
#menu button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
  padding: .4rem .6rem;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
}
#menu button:hover,
#menu button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
#menu button::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
}
#menu button[aria-current="true"]::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 201, 212, 0.18);
}

/* ── bg credit line ────────────────────────────────────────────────── */
#bg-credit {
  pointer-events: auto;
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font: 11px/1.4 var(--mono);
  color: var(--muted);
  opacity: .65;
  user-select: none;
}
#bg-credit a { color: inherit; }

/* respect reduced-motion preference — backgrounds may use this hint */
@media (prefers-reduced-motion: reduce) {
  /* background modules are expected to honor matchMedia('(prefers-reduced-motion)') themselves */
}