@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Lilita";src:url(/assets/fonts/lilita.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#0b0b1a;--text:#f4f2ff;--muted:#b9b4d6;
  --c1:#7c3aed;--c2:#06b6d4;--c3:#f472b6;--c4:#4f46e5;
  --card:rgba(255,255,255,.07);--card-b:rgba(255,255,255,.16);--card-h:rgba(255,255,255,.13);
  --accent:var(--c3);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme=sunset]{--bg:#1a0a14;--c1:#f97316;--c2:#e11d48;--c3:#fbbf24;--c4:#9333ea;--accent:#fb923c}
[data-theme=forest]{--bg:#06140f;--c1:#10b981;--c2:#0ea5e9;--c3:#a3e635;--c4:#047857;--accent:#34d399}
[data-theme=midnight]{--bg:#05060f;--c1:#3b82f6;--c2:#6366f1;--c3:#22d3ee;--c4:#1e3a8a;--accent:#60a5fa}
[data-theme=ember]{--bg:#140805;--c1:#dc2626;--c2:#f59e0b;--c3:#fb7185;--c4:#7f1d1d;--accent:#fbbf24}
[data-theme=paper]{--bg:#f7f3ea;--text:#1d1b2e;--muted:#5b5775;--c1:#a78bfa;--c2:#67e8f9;--c3:#fda4af;--c4:#fcd34d;
  --card:rgba(255,255,255,.7);--card-b:rgba(29,27,46,.14);--card-h:#fff;--accent:#6d28d9}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);
  font:400 1.05rem/1.5 "Atkinson",system-ui,sans-serif;overflow-x:hidden;position:relative}

/* ---------- living background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;
  background:radial-gradient(circle at 30% 30%,var(--c),transparent 68%)}
.bg i:nth-child(1){--c:var(--c1);left:-18vmax;top:-20vmax;animation:drift1 26s ease-in-out infinite alternate}
.bg i:nth-child(2){--c:var(--c2);right:-22vmax;top:8vh;animation:drift2 32s ease-in-out infinite alternate}
.bg i:nth-child(3){--c:var(--c3);left:-6vmax;bottom:-30vmax;animation:drift3 29s ease-in-out infinite alternate;opacity:.42}
.bg i:nth-child(4){--c:var(--c4);right:10vw;bottom:-34vmax;animation:drift1 38s ease-in-out infinite alternate-reverse;opacity:.5}
[data-theme=paper] .bg i{opacity:.5;filter:blur(80px)}
@keyframes drift1{to{transform:translate(18vmax,12vmax) rotate(40deg) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vmax,16vmax) rotate(-30deg) scale(.9)}}
@keyframes drift3{to{transform:translate(14vmax,-18vmax) rotate(25deg) scale(1.2)}}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.75}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme=paper] .grain{opacity:.1;mix-blend-mode:multiply}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:3;max-width:640px;margin:0 auto;padding:max(2.5rem,env(safe-area-inset-top)) 1.1rem max(2rem,env(safe-area-inset-bottom))}
.hero{text-align:center;margin-bottom:1.8rem}
.hero>*{animation:rise .9s var(--ease) both}
.hero h1{margin:.9rem 0 .2rem;font:400 clamp(2rem,7vw,2.9rem)/1.05 "Lilita","Atkinson",sans-serif;letter-spacing:.01em;animation-delay:.12s;
  background:linear-gradient(100deg,var(--text) 20%,var(--accent) 60%,var(--text) 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation-name:rise,sheen;animation-duration:.9s,9s;animation-iteration-count:1,infinite;animation-timing-function:var(--ease),ease-in-out;animation-direction:normal,alternate;animation-fill-mode:both,none}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}
.headline{margin:0;color:var(--accent);font-weight:700;letter-spacing:.02em;animation-delay:.2s}
.bio{margin:.7rem auto 0;max-width:34rem;color:var(--muted);animation-delay:.28s}

.avatar{position:relative;width:132px;height:132px;margin:0 auto;animation-delay:0s;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));
  animation:spin 7s linear infinite;filter:blur(.3px)}
.ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:inherit;filter:blur(22px);opacity:.55;z-index:-1}
.face{position:relative;width:116px;height:116px;border-radius:50%;overflow:hidden;background:var(--bg);display:grid;place-items:center;border:3px solid var(--bg)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.initials{font:400 2.4rem "Lilita",sans-serif;color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- links ---------- */
.links{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.links>li{animation:rise .7s var(--ease) both;animation-delay:calc(.35s + var(--i) * 70ms)}
.hd h2{margin:1.1rem 0 .1rem;font:700 .85rem "Atkinson",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center}
.empty{text-align:center;color:var(--muted)}
.link{--mx:50%;--my:50%;position:relative;display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border-radius:20px;
  color:var(--text);text-decoration:none;isolation:isolate;overflow:hidden;
  background:var(--card);border:1px solid var(--card-b);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transition:transform .35s var(--ease),background .25s,border-color .25s,box-shadow .35s}
.link::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%)}
.link::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;opacity:0;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.link:hover,.link:focus-visible{transform:translateY(-3px) scale(1.012);background:var(--card-h);border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 14px 40px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.link:hover::before,.link:focus-visible::before{opacity:1}
.link:hover::after{opacity:1;animation:sweep .8s var(--ease)}
@keyframes sweep{to{left:130%}}
.link:active{transform:scale(.985)}
.link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--accent);overflow:hidden;
  background:color-mix(in srgb,var(--accent) 16%,transparent);transition:transform .35s var(--ease)}
.ico.round{border-radius:50%}
.ico img{width:100%;height:100%;object-fit:cover}
.link:hover .ico{transform:rotate(-8deg) scale(1.08)}
.txt{flex:1;min-width:0;display:flex;flex-direction:column}
.txt b{font-weight:700;font-size:1.06rem;overflow-wrap:anywhere}
.txt small{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.arrow{flex:none;opacity:.5;transition:transform .35s var(--ease),opacity .25s}
.link:hover .arrow{opacity:1;transform:translate(3px,-3px)}

.link.featured{border-color:color-mix(in srgb,var(--accent) 75%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 24%,transparent),var(--card));
  animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent),0 10px 30px -16px var(--accent)}
  50%{box-shadow:0 0 0 7px transparent,0 14px 36px -12px var(--accent)}}

/* ---------- footer ---------- */
.foot{margin-top:2.2rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;animation:rise .8s var(--ease) 1s both}
.foot button{font:inherit;font-size:.92rem;color:var(--muted);background:transparent;border:1px solid var(--card-b);border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.foot button:hover{color:var(--text);border-color:var(--accent);background:var(--card)}
.foot button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.toast{position:fixed;left:50%;bottom:1.5rem;z-index:10;transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);padding:.6rem 1.1rem;border-radius:999px;font-weight:700;transition:.35s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- calm mode: no motion, no particles (also honours the OS setting) ---------- */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
.calm #net{display:none}
.calm .bg i{filter:blur(90px);opacity:.35}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #net{display:none}
}
@media (max-width:420px){.link{padding:.85rem .9rem}.ico{width:42px;height:42px}}

/* ---------- QR dialog ---------- */
.qr-overlay{position:fixed;inset:0;z-index:20;background:rgba(5,5,15,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:.9rem;align-items:center;justify-content:center;padding:1.2rem;text-align:center;color:#f4f2ff}
.qr-box{width:min(82vw,60vh,380px);background:#fff;border-radius:22px;padding:14px}
.qr-box svg{display:block;width:100%;height:auto}
.qr-overlay p{margin:0}
.qr-overlay button{font:inherit;font-weight:700;color:#0b0b1a;background:#fff;border:0;border-radius:999px;padding:.6rem 1.6rem;cursor:pointer;min-height:44px}
.qr-overlay button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (pointer:coarse){.foot button{min-height:44px}}