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

:root{
  --bg:#05060a;
  --ink:#f2f3f7;
  --muted:#8f95a1;
  --dim:#6f7580;
  --accent:#ff2e4d;
  --accent-2:#38e1ff;
  --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,46,77,.32);color:#fff}

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

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, #0b0d14 0%, #05060a 55%, #030408 100%);
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}

/* мягкое свечение за карточкой */
.orb--core{
  width:44vmax;height:44vmax;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  filter:blur(80px);
  opacity:.75;
  background:radial-gradient(circle at 50% 50%,rgba(255,46,77,.20),rgba(140,20,60,.10) 45%,rgba(255,46,77,0) 70%);
}

.orb--red{
  width:52vmax;height:52vmax;
  left:-16vmax;top:-18vmax;
  opacity:.55;
  background:radial-gradient(circle at 50% 50%,rgba(255,46,77,.55),rgba(255,46,77,0) 68%);
  animation:float-a 20s ease-in-out infinite;
}

.orb--cyan{
  width:46vmax;height:46vmax;
  right:-18vmax;bottom:-22vmax;
  opacity:.5;
  background:radial-gradient(circle at 50% 50%,rgba(56,225,255,.28),rgba(56,225,255,0) 70%);
  animation:float-b 26s ease-in-out infinite;
}

/* зерно */
.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,46,77,.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(255,255,255,.07),rgba(255,255,255,.022) 42%,rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  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,46,77,.9),rgba(255,255,255,.75),rgba(255,46,77,.35),transparent);
  opacity:.85;
  pointer-events:none;
}

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

.head{text-align:center}

.avatar{
  position:relative;
  width:108px;height:108px;
  margin:6px auto 0;
  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,.18);
  filter:saturate(1.06) contrast(1.03);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.03),
    0 18px 44px -14px rgba(255,46,77,.65),
    0 0 70px rgba(255,46,77,.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,46,77,0) 0deg,
    rgba(255,46,77,.95) 55deg,
    rgba(255,255,255,1) 110deg,
    rgba(56,225,255,.9) 160deg,
    rgba(255,46,77,0) 245deg,
    rgba(255,46,77,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;
}

.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:16px 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:#ffc6cf;
  background:rgba(255,46,77,.09);
  border:1px solid rgba(255,46,77,.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,46,77,.85);
  animation:pulse 2.4s ease-in-out infinite;
}

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

.links{
  display:grid;
  gap:10px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.06);
}

.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,46,77,.42);
  box-shadow:0 18px 38px -22px rgba(255,46,77,.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:#5b6170;
}

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

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{margin-top:24px;padding-top:20px}
  .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}
}

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

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