@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-0.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-2.woff2') format('woff2');font-weight:600;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07090d;color:var(--mist,#f2f4f8);font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* fundo com profundidade: duas luzes que se movem devagar e uma grade que some nas bordas */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.45}
.orb-a{top:-180px;left:-140px;background:#3d5bd9;animation:drift-a 18s ease-in-out infinite alternate}
.orb-b{bottom:-220px;right:-160px;background:#1d8a57;opacity:.28;animation:drift-b 22s ease-in-out infinite alternate}
.grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%)}
@keyframes drift-a{to{transform:translate(120px,90px) scale(1.1)}}
@keyframes drift-b{to{transform:translate(-110px,-70px) scale(1.15)}}

.links{max-width:460px;margin:0 auto;padding:calc(48px + env(safe-area-inset-top)) 18px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}

/* entrada em sequência */
.reveal{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--d,0) * 80ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* foto com anel girando */
.avatar-wrap{position:relative;width:108px;height:108px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,#a8c4ff,#3d5bd9,#25d366,#a8c4ff);animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards .08s,spin 8s linear infinite}
.links-avatar{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #07090d;animation:spin 8s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border:1px solid #1f6b3d;border-radius:999px;background:#0d1f15cc;font-size:12px;color:#bfe9cf}
.status i{width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 #25d36699;animation:ping 2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px #25d36600}100%{box-shadow:0 0 0 0 #25d36600}}

.links-handle{margin:14px 0 6px;font-size:27px;font-weight:600;letter-spacing:-.045em}
.links-handle .x{color:var(--signal,#a8c4ff)}
.links-bio{margin:0;font-size:15px;line-height:1.5;color:#a3adbd;max-width:320px}

.stats{list-style:none;margin:22px 0 26px;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #232c3b;border-radius:14px;background:#0e121acc;backdrop-filter:blur(10px)}
.stats li{padding:12px 6px}
.stats li+li{border-left:1px solid #232c3b}
.stats b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.stats span{display:block;margin-top:2px;font-size:11.5px;color:#8a95a8}

.links-list{width:100%;display:grid;gap:12px}
.link{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid #232c3b;border-radius:16px;background:#0e121acc;backdrop-filter:blur(10px);text-align:left;transition:border-color .25s,transform .25s}
.link:hover{border-color:#a8c4ff;transform:translateY(-2px)}
.link:active{transform:scale(.99)}
.link:focus-visible{outline:2px solid var(--signal,#a8c4ff);outline-offset:3px}
.link:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),#a8c4ff22,transparent 60%);opacity:0;transition:opacity .3s}
.link:hover:after{opacity:1}
.link-text{flex:1;min-width:0}
.link-text b{display:block;font-size:15.5px;font-weight:600}
.link-text small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:#a3adbd}
.link-arrow{flex:none;font-size:18px;color:#a3adbd;transition:transform .25s}
.link:hover .link-arrow{transform:translateX(3px)}
.link-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px}
.icon-wpp{background:#25d36622;color:#25d366}
.icon-smw{background:#1a1f2a;border:1px solid #2c3546;font:600 11px/1 Georgia,'Times New Roman',serif;letter-spacing:.04em;color:#d9c3a8}

/* botão principal com prévia dos sistemas e um brilho que passa */
.link-main{flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--mist,#f2f4f8);border-color:var(--mist,#f2f4f8);color:#0b0d12}
.link-main:hover{border-color:#fff}
.link-main small,.link-main .link-arrow{color:#4a5262}
.link-main:after{background:linear-gradient(105deg,transparent 35%,#ffffffb0 50%,transparent 65%);opacity:1;transform:translateX(-120%);animation:sweep 5s ease-in-out 1.6s infinite;z-index:2;pointer-events:none}
@keyframes sweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.link-shot{position:relative;display:block;height:128px;overflow:hidden;background:#0b0d12;border-bottom:1px solid #d9dde6}
.link-shot img{position:absolute;width:78%;height:auto;border-radius:6px;border:1px solid #2a3344;box-shadow:0 12px 26px #0009}
.shot-back{right:6%;top:14px;opacity:.85}
.shot-front{left:6%;top:42px;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.link-row{display:flex;align-items:center;gap:14px;padding:14px 16px}

.link-wpp{border-color:#1f6b3d}
.link-wpp:hover{border-color:#25d366}
.link-wpp .link-arrow{color:#25d366}

.links-foot{margin-top:30px;font-size:13px;color:#7e8899}
.links-foot a:hover{color:var(--mist,#f2f4f8)}

@media(prefers-reduced-motion:reduce){
  .reveal,.avatar-wrap,.links-avatar,.orb,.status i,.shot-front,.link-main:after{animation:none!important}
  .link,.link-arrow{transition:none}
}