/* paleta extraída de oseasmoreto.com */
:root{
  --color-white:#fff;
  --color-light:#f5f8fb;
  --color-dark:#161616;
  --color-info:#10126e;
  --color-warning:#fba94c;
  --color-danger:#dc3545;
  --color-success:#00875f;
  --color-primary:#10126e;
  --color-text:#fff;
  --color-text-secondary:#f5f8fbcc;
  --color-bg:#151619;
  --color-bg-secondary:#131112;
  --color-border:#ffffff14;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}

body{
  position: relative;
  overflow-x: hidden;
  display:flex;
  justify-content:center;
  padding: 56px 20px 80px;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 42%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--color-info) 14%, transparent), transparent 46%);
  pointer-events:none;
  z-index:0;
}

.noise{
  position: fixed;
  inset:0;
  opacity: 0.04;
  pointer-events:none;
  z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display:flex;
  flex-direction: column;
  align-items:center;
}

/* ---------- PERFIL ---------- */
.avatar-wrap{
  position:relative;
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
}

.avatar-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background: conic-gradient(from 0deg, var(--color-primary), var(--color-warning), var(--color-info), var(--color-primary));
  animation: spin 7s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .avatar-ring{ animation: none; }
}

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

.avatar{
  position:absolute;
  inset: 4px;
  border-radius:50%;
  background: var(--color-bg-secondary);
  border: 3px solid var(--color-bg);
  overflow:hidden;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.handle{
  font-family:'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-align:center;
}

.handle span{ color: var(--color-white); }

.bio{
  color: var(--color-text-secondary);
  font-weight:300;
  font-size: 14.5px;
  text-align:center;
  line-height:1.55;
  margin: 0 0 32px;
  max-width: 320px;
}

/* ---------- LINKS ---------- */
.links{
  width:100%;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.link{
  position: relative;
  display:flex;
  align-items:center;
  gap: 14px;
  width:100%;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  text-decoration:none;
  font-size: 15.5px;
  font-weight: 600;
  isolation: isolate;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}

.link:active{ transform: scale(0.98); }

.link .ic{
  width: 24px;
  height:24px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 19px;
  color: var(--link-color, var(--color-primary));
}

.link .label{ flex:1; }

.link .arrow{
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: transform .15s ease, color .15s ease;
}

/* --- assinatura visual: glitch RGB-split ao passar o mouse/tocar --- */
.link::before,
.link::after{
  content: attr(data-label);
  position:absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-weight:600;
  font-size:15.5px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}

.link::before{ color: var(--color-primary); }
.link::after{ color: var(--color-info); }

.link:hover{ border-color: var(--link-color, var(--color-primary)); }

.link:hover .arrow{
  transform: translateX(3px);
  color: var(--link-color, var(--color-primary));
}

.link:hover::before{ opacity:.55; animation: glitchL .5s steps(2, end) infinite; }
.link:hover::after{ opacity:.55; animation: glitchR .5s steps(2, end) infinite; }

@keyframes glitchL{
  0%,100%{ transform: translate(-2px,-50%); }
  50%{ transform: translate(-3px,calc(-50% - 1px)); }
}
@keyframes glitchR{
  0%,100%{ transform: translate(2px,-50%); }
  50%{ transform: translate(3px,calc(-50% + 1px)); }
}

@media (prefers-reduced-motion: reduce){
  .link:hover::before, .link:hover::after{ animation:none; opacity:0; }
}

footer{
  margin-top: 40px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  opacity: .55;
  text-align:center;
}

@media (max-width: 380px){
  .handle{ font-size: 22px; }
  .link{ padding:14px 16px; font-size:14.5px; }
}