:root {
  --bg: #07080b;
  --text: #f4f5f7;
  --muted: rgba(244,245,247,.55);
  --line: rgba(255,255,255,.10);
  --glass: rgba(12,14,19,.52);
  --accent: #9b7bff;
  --accent-2: #55d6ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.ambient, .bg-video, .video-overlay, .site-shell, .enter-screen { position: fixed; inset: 0; }
.ambient { overflow: hidden; background: radial-gradient(circle at 50% 35%, #151821 0%, #090a0d 45%, #050507 100%); }
.bg-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; filter: saturate(.9) contrast(1.05); }
body.has-video .bg-video { opacity: .42; }
.video-overlay { background: linear-gradient(120deg, rgba(4,5,8,.82), rgba(8,9,13,.35), rgba(4,5,8,.88)); pointer-events: none; }

.orb { position: absolute; border-radius: 999px; filter: blur(80px); opacity: .34; mix-blend-mode: screen; }
.orb-a { width: 42vw; height: 42vw; left: -10vw; top: -12vw; background: #5d3cff; animation: drift 14s ease-in-out infinite alternate; }
.orb-b { width: 34vw; height: 34vw; right: -7vw; bottom: -10vw; background: #00a9d9; animation: drift 18s ease-in-out infinite alternate-reverse; }
.orb-c { width: 24vw; height: 24vw; left: 44vw; top: 38vh; background: #c43cff; opacity: .18; animation: pulse 8s ease-in-out infinite; }
.grid { position: absolute; inset: -20%; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(600px) rotateX(58deg) translateY(18%); mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); }
.grain { position: absolute; inset: -50%; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); animation: grain .2s steps(2) infinite; }

.site-shell { display: grid; place-items: center; padding: 24px; z-index: 5; perspective: 1200px; }
.profile-card {
  width: min(520px, 92vw);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(18,20,27,.76), rgba(8,9,13,.48));
  box-shadow: 0 30px 100px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
body.entered .profile-card { opacity: 1; transform: translateY(0) scale(1); }
.topline, .footer-row { display:flex; align-items:center; justify-content:space-between; font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); }
.status-dot, .avatar-status { display:block; width:7px; height:7px; border-radius:50%; background:#72f7a5; box-shadow:0 0 12px #72f7a5; }
.location { opacity:.65; }
.identity { text-align:center; padding:42px 12px 28px; }
.avatar-wrap { position:relative; display:inline-grid; place-items:center; margin-bottom:16px; }
.avatar { width:84px; height:84px; display:grid; place-items:center; border-radius:24px; font-family:'Space Grotesk', sans-serif; font-size:36px; font-weight:700; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 32%), linear-gradient(145deg, #242832, #101219); border:1px solid rgba(255,255,255,.16); box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.avatar-status { position:absolute; right:-3px; bottom:3px; width:15px; height:15px; border:3px solid #11131a; }
.eyebrow { margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.25em; color:rgba(255,255,255,.38); }
h1 { margin:0; font-family:'Space Grotesk', sans-serif; font-size: clamp(64px, 14vw, 104px); line-height:.86; letter-spacing:-.075em; font-weight:700; text-shadow: 0 0 50px rgba(155,123,255,.12); }
.period { color:var(--accent); }
.bio { margin:18px auto 0; max-width:340px; color:var(--muted); font-size:13px; line-height:1.6; }
.links { display:grid; gap:10px; }
.link-card { position:relative; display:flex; align-items:center; gap:14px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(255,255,255,.035); overflow:hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s, box-shadow .35s; }
.link-card::before { content:""; position:absolute; inset:-1px; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(155,123,255,.18), transparent 32%); opacity:0; transition:opacity .35s; pointer-events:none; }
.link-card:hover { border-color:rgba(155,123,255,.35); background:rgba(255,255,255,.055); box-shadow:0 12px 35px rgba(0,0,0,.22); transform:translateY(-2px); }
.link-card:hover::before { opacity:1; }
.icon { position:relative; z-index:1; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.07); color:#fff; }
.icon svg { width:21px; height:21px; }
.link-copy { position:relative; z-index:1; display:grid; gap:3px; text-align:left; }
.link-copy strong { font-size:13px; font-weight:600; }
.link-copy small { font-size:11px; color:var(--muted); }
.arrow { position:relative; z-index:1; margin-left:auto; font-size:17px; color:rgba(255,255,255,.35); transition:transform .25s, color .25s; }
.link-card:hover .arrow { color:#fff; transform:translate(2px,-2px); }
.footer-row { margin-top:20px; padding:4px 3px 0; }
.sound-control { display:inline-flex; align-items:center; gap:8px; cursor:none; user-select:none; }
.bars { display:flex; align-items:end; gap:2px; height:11px; }
.bars i { width:2px; height:4px; border-radius:2px; background:rgba(255,255,255,.42); }
body.sound-on .bars i:nth-child(1) { animation: bars .65s ease-in-out infinite alternate; }
body.sound-on .bars i:nth-child(2) { animation: bars .5s .15s ease-in-out infinite alternate; }
body.sound-on .bars i:nth-child(3) { animation: bars .7s .08s ease-in-out infinite alternate; }
body.sound-on .bars i:nth-child(4) { animation: bars .55s .22s ease-in-out infinite alternate; }

.enter-screen { z-index:20; border:0; background:rgba(3,4,7,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); display:grid; place-content:center; justify-items:center; gap:10px; color:white; cursor:none; transition:opacity .8s ease, visibility .8s ease; }
body.entered .enter-screen { opacity:0; visibility:hidden; pointer-events:none; }
.enter-kicker { font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.enter-title { font-family:'Space Grotesk', sans-serif; font-size:clamp(26px,5vw,42px); font-weight:700; letter-spacing:-.04em; }
.enter-sub { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.12em; }

.cursor-dot { position:fixed; z-index:100; width:7px; height:7px; border-radius:50%; background:#fff; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-ring { position:fixed; z-index:99; width:32px; height:32px; border:1px solid rgba(255,255,255,.55); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s; mix-blend-mode:difference; }
body.cursor-hover .cursor-ring { width:52px; height:52px; border-color:rgba(255,255,255,.9); }

@keyframes drift { to { transform:translate(8vw, 5vh) scale(1.12); } }
@keyframes pulse { 50% { transform:scale(1.25); opacity:.28; } }
@keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(2%, -1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)} }
@keyframes bars { to { height:11px; } }

@media (max-width: 600px) {
  body { cursor:auto; }
  .cursor-dot, .cursor-ring { display:none; }
  .site-shell { padding:14px; }
  .profile-card { padding:18px; border-radius:25px; }
  .identity { padding:34px 6px 24px; }
  .avatar { width:72px; height:72px; border-radius:21px; font-size:31px; }
  h1 { font-size:72px; }
  .enter-screen { cursor:pointer; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}