/* ============================================================
   daf — link in bio
   тёмный неон / стекло, акцент — красный
   ============================================================ */

:root{
  --bg:#080808;
  --ink:#f5f5f5;
  --muted:#9a9a9a;
  --dim:#767676;
  --accent:#ffffff;
  --accent-2:#ffffff;
  --stroke:rgba(255,255,255,.085);
  --glass:rgba(255,255,255,.045);
  --mx:50%;
  --my:20%;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  padding:clamp(16px,4vw,44px) 16px;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

::selection{background:rgba(255,255,255,.32);color:#fff}

/* ---------- фон ---------- */

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#080808 url("assets/bg-vellum.webp") center/cover no-repeat;
}

/* точечный паттерн как в обоях */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.3px);
  background-size:5px 5px;
  opacity:.55;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* мягкое затемнение по краям, чтобы текст не терялся */
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,.10),rgba(0,0,0,.55));
  pointer-events:none;
}

.orb{display:none}

/* зерно */
.grain{
  position:absolute;
  inset:-50%;
  opacity:.05;
  pointer-events:none;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* пятно под курсором */
.spot{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(540px circle at var(--mx) var(--my),rgba(255,255,255,.10),transparent 62%);
}
body.spot-on .spot{opacity:1}

/* ---------- карточка ---------- */

.card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:520px;
  padding:34px 26px 20px;
  border-radius:28px;
  background:
    radial-gradient(120% 78% at 50% -18%,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(180deg,rgba(22,22,22,.66),rgba(12,12,12,.46));
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(18px) saturate(70%);
  -webkit-backdrop-filter:blur(18px) saturate(70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 40px 90px -40px rgba(0,0,0,.95);
  animation:card-in .9s cubic-bezier(.2,.8,.2,1) backwards;
}

/* светящаяся кромка сверху */
.card::before{
  content:"";
  position:absolute;
  left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),rgba(255,255,255,.75),rgba(255,255,255,.35),transparent);
  opacity:.85;
  pointer-events:none;
}

/* ---------- шапка ---------- */

.head{text-align:center;position:relative}

.hero{
  position:relative;
  width:108px;
  margin:6px auto 0;
}

.avatar{
  position:relative;
  width:108px;height:108px;
  margin:0 auto;
  border-radius:50%;
}

.avatar img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 18%;
  border:1px solid rgba(255,255,255,.22);
  filter:grayscale(1) contrast(1.02);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.04),
    0 18px 44px -14px rgba(0,0,0,.9),
    0 0 70px rgba(255,255,255,.22);
}

.avatar:hover img{transform:scale(1.035) rotate(-1.5deg)}

.avatar__ring{
  position:absolute;
  inset:-6px;
  padding:1.5px;
  border-radius:50%;
  opacity:.95;
  background:conic-gradient(
    from 0deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.55) 55deg,
    rgba(255,255,255,.95) 110deg,
    rgba(190,190,190,.7) 160deg,
    rgba(255,255,255,0) 245deg,
    rgba(255,255,255,0) 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:spin 9s linear infinite;
  pointer-events:none;
}

/* ---------- реплика у аватарки ---------- */

.say{
  position:absolute;
  left:calc(100% + 8px);
  bottom:0;
  width:168px;
  margin:0;
  padding:9px 12px;
  border-radius:14px;
  text-align:left;
  font-size:12px;
  line-height:1.35;
  color:#fff;
  z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 40px -24px #000,
    inset 0 0 0 1px rgba(255,255,255,.07);
  animation:say-in .7s cubic-bezier(.2,.8,.2,1) .55s backwards;
  pointer-events:none;
}

.say__sizer{visibility:hidden}

.say__txt{
  position:absolute;
  inset:0;
  padding:9px 12px;
  text-align:inherit;
}

.say.is-typing .say__caret{animation:none;opacity:1}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* хвостик в сторону аватарки */
.say::before{
  content:"";
  position:absolute;
  left:-5px;
  top:calc(45% - 5px);
  width:10px;
  height:10px;
  transform:rotate(45deg);
  border-left:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.12));
  border-radius:0 0 0 3px;
}

.say__caret{
  display:inline-block;
  width:6px;
  height:12px;
  margin-left:3px;
  vertical-align:-1px;
  background:var(--accent);
  box-shadow:0 0 10px rgba(255,255,255,.85);
  animation:caret 1.05s steps(1) infinite;
}

@keyframes caret{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@keyframes say-in{
  from{opacity:0;transform:translateX(10px) scale(.96)}
  to{opacity:1;transform:none}
}

.name{
  margin:24px 0 0;
  font-family:"Unbounded","Inter",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(42px,11vw,58px);
  line-height:.9;
  letter-spacing:-.05em;
  background:linear-gradient(180deg,#ffffff 20%,#c3c8d3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.handle{
  margin:12px 0 0;
  font-size:14px;
  letter-spacing:.07em;
  color:var(--muted);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:20px 0 0;
  padding:6px 13px 6px 11px;
  border-radius:999px;
  font-family:"Unbounded","Inter",system-ui,sans-serif;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#e6e6e6;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.28);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) .22s backwards;
}

.dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px 2px rgba(255,255,255,.85);
  animation:pulse 2.4s ease-in-out infinite;
}

/* ---------- вкладки ---------- */

.tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:23px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  animation:rise .75s cubic-bezier(.2,.8,.2,1) .28s backwards;
}

.tabs__ind{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / 3);
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e4e4e4);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 6px 20px -12px rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

.tab{
  position:relative;
  z-index:1;
  appearance:none;
  border:0;
  background:none;
  padding:9px 6px;
  border-radius:999px;
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  color:#8a8a8a;
  cursor:pointer;
  transition:color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.tab:hover{color:#d6d6d6}
.tab.is-active{color:#101010}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- панели ---------- */

.panels{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
}

.panel[hidden]{display:none}

.panel.is-active{
  animation:panel-in .4s cubic-bezier(.2,.8,.2,1) both;
}

.panel:focus{outline:none}

@keyframes panel-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* ---------- живой статус Discord ---------- */

.live{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.4;
  color:#d4d4d4;
}
.live[hidden]{display:none}

.live__dot{
  position:relative;
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:50%;
  background:#6e6e6e;
  transition:background .3s ease,box-shadow .3s ease;
}
.live__dot[data-status="online"]{background:#ffffff;box-shadow:0 0 10px 1px rgba(255,255,255,.65)}
.live__dot[data-status="idle"]{background:#b3b3b3;box-shadow:0 0 8px 1px rgba(255,255,255,.25)}
.live__dot[data-status="dnd"]{background:#ffffff;box-shadow:0 0 0 2px rgba(255,255,255,.28)}
.live__dot[data-status="offline"]{background:#6e6e6e;box-shadow:none}

.live__dot[data-status="online"]::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  animation:live-ring 2.6s ease-out infinite;
}

.live__main b{font-weight:600;color:#fff}
.live__main .live__dim{color:#a4a4a4}

.live__time{color:#9a9a9a;white-space:nowrap}
.live__time::before{content:"·";margin:0 6px;color:#606060}
.live__time[hidden]{display:none}

@keyframes live-ring{
  0%{transform:scale(.7);opacity:.9}
  100%{transform:scale(1.6);opacity:0}
}

/* ---------- характеристики ---------- */

.spec{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:11px 2px;
  border-bottom:1px solid rgba(255,255,255,.055);
  transition:background .25s ease,padding-left .25s ease;
}
.spec:last-child{border-bottom:0}
.spec:hover{background:rgba(255,255,255,.028);padding-left:8px}

.spec__k{
  flex:0 0 102px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7f7f7f;
}

.spec__v{
  font-size:13.5px;
  font-weight:500;
  color:#ededed;
  line-height:1.3;
}

.spec__v small{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  font-weight:400;
  color:#909090;
}

/* ---------- ссылки ---------- */

.links{
  display:grid;
  gap:10px;
}

.link{
  --brand:#ffffff;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:var(--glass);
  border:1px solid var(--stroke);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
  animation:rise .75s cubic-bezier(.2,.8,.2,1) backwards;
}

.link:nth-child(1){animation-delay:.30s}
.link:nth-child(2){animation-delay:.38s}
.link:nth-child(3){animation-delay:.46s}
.link:nth-child(4){animation-delay:.54s}

/* брендовый отблеск */
.link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  transition:opacity .35s ease;
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 17%,transparent),transparent 58%);
}

.link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.062);
  border-color:color-mix(in srgb,var(--brand) 45%,rgba(255,255,255,.10));
  box-shadow:
    0 18px 38px -20px color-mix(in srgb,var(--brand) 80%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent);
}
.link:hover::before{opacity:1}
.link:active{transform:translateY(0) scale(.995)}

.link__ic{
  flex:0 0 40px;
  width:40px;height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#e9ebf0;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
  transition:color .35s,background .35s,border-color .35s,transform .35s;
}

.link__ic svg{width:20px;height:20px;display:block;fill:currentColor}

.link:hover .link__ic{
  color:var(--brand);
  background:color-mix(in srgb,var(--brand) 15%,rgba(255,255,255,.04));
  border-color:color-mix(in srgb,var(--brand) 42%,transparent);
  transform:rotate(-4deg) scale(1.05);
}

.link__tx{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}

.link__t{
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.005em;
}

.link__s{
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .35s;
}
.link:hover .link__s{color:#b3b9c5}

.link__go{
  margin-left:auto;
  flex:0 0 auto;
  color:#5f6572;
  transition:color .35s,transform .35s;
}
.link__go svg{width:16px;height:16px;display:block}
.link:hover .link__go{color:var(--brand);transform:translateX(3px)}

/* ---------- проекты (заготовка) ---------- */

.projects{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.proj{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  padding:11px;
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  background:var(--glass);
  border:1px solid var(--stroke);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s,box-shadow .35s;
}

.proj:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.062);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 18px 38px -22px rgba(255,255,255,.8);
}

.proj__img{
  width:76px;height:76px;
  border-radius:11px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
}

.proj__tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.proj__t{font-size:14.5px;font-weight:600}
.proj__s{font-size:12.5px;line-height:1.4;color:var(--muted)}

/* ---------- футер ---------- */

.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11.5px;
  color:var(--dim);
  letter-spacing:.02em;
  animation:rise .75s cubic-bezier(.2,.8,.2,1) .56s backwards;
}



.foot__b{
  font-family:"Unbounded","Inter",system-ui,sans-serif;
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#606060;
}

/* ---------- фокус ---------- */

a:focus-visible,
.link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:16px;
}

/* ---------- анимации ---------- */

@keyframes card-in{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

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

@keyframes spin{
  to{transform:rotate(360deg)}
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

@keyframes float-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vmax,4vmax,0) scale(1.12)}
}

@keyframes float-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5vmax,-4vmax,0) scale(1.1)}
}

/* ---------- мобилки ---------- */

@media (max-width:430px){
  body{padding:14px 12px}
  .card{padding:26px 17px 16px;border-radius:24px}
  .avatar{width:96px;height:96px}
  .avatar__ring{inset:-7px}
  .name{font-size:clamp(38px,13vw,48px);margin-top:21px}
  .links{gap:9px}
  .tab{font-size:11px;padding:9px 3px}
  .spec{padding:10px 2px}
  .spec__k{flex-basis:86px;font-size:10px;letter-spacing:.09em}
  .spec__v{font-size:13px}
  .spec__v small{font-size:11px}
  .live{font-size:12px}
  .link{padding:11px 12px;gap:11px}
  .link__ic{flex-basis:38px;width:38px;height:38px}
  .link__t{font-size:14px}
  .link__s{font-size:12px}
}

@media (max-width:360px){
  .link__s{font-size:11.5px}
  .foot{font-size:11px}
  .tab{font-size:10.5px}
  .spec__k{flex-basis:78px}
}

/* ---------- доступность ---------- */

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

/* на узких экранах места справа нет — пузырь уезжает под аватарку */
@media (max-width:560px){
  .hero{width:100%}
  .say{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    width:max-content;
    max-width:100%;
    margin:12px auto 0;
    text-align:center;
    animation:rise .7s cubic-bezier(.2,.8,.2,1) .5s backwards;
  }
  .say::before{display:none}
  .say__sizer{padding-right:14px}
}