/* ==================================================================
   Davi Araújo — link na bio
   Grafite domina, o ciano manda, o dourado só assina os rótulos.
   ================================================================== */

:root {
  /* cor */
  --bg:        #000000;
  --hero-src:  url("assets/banner.jpg");
  --card:      #17171F;
  --card-hi:   #1D1D28;
  --text:      #F2F1EC;
  --cyan:      #35D6FF;
  --cyan-deep: #12A2D6;
  --gold:      #CDA349;

  --muted: rgba(242, 241, 236, 0.56);
  --dim:   rgba(242, 241, 236, 0.52);
  --line:  rgba(242, 241, 236, 0.09);

  /* tipo */
  --display: "Archivo", system-ui, sans-serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* medida */
  --col: 520px;
  --hero-h: clamp(320px, 44vh, 520px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip; /* clip, nao hidden: hidden faz o body virar container de rolagem */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------
   FUNDO — linhas fluidas + halo. Ficam atrás de tudo, inclusive da foto.
   ------------------------------------------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg__glow {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 760px;
  height: 760px;
  max-width: 140vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(53, 214, 255, 0.13), rgba(53, 214, 255, 0) 64%);
  filter: blur(10px);
}

/* rastro do cursor (criado pelo script) */
.cursorfx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   HERÓI — a foto full-bleed e a dobra
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 1;
  height: var(--hero-h);
}
.hero__img {
  position: absolute;
  inset: 0;
  background-image: var(--hero-src);
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  /* sem tratamento de cor: a foto já vem com o tratamento azul embutido */
  /* a foto se dissolve no grafite antes de encostar na dobra */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.55) 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.55) 82%, transparent 100%);
  animation: heroIn 1.4s var(--ease) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: none; }
}
.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,15,0.34) 0%, rgba(11,11,15,0) 34%, rgba(11,11,15,0.72) 88%, var(--bg) 100%);
}

/* A DOBRA — a linha onde a foto acaba e a página começa a ser construída */
.hero__fold {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(var(--col), calc(100% - 44px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--cyan) 22%, var(--cyan) 78%, transparent);
  box-shadow: 0 0 18px rgba(53, 214, 255, 0.55);
  transform-origin: center;
  animation: foldIn 1.1s var(--ease) 0.35s both;
}
@keyframes foldIn {
  from { transform: translateX(-50%) scaleX(0); opacity: 0; }
  to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

/* ------------------------------------------------------------------
   COLUNA
   ------------------------------------------------------------------ */
.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 30px 22px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- pílula de status ----------
   Duas camadas de movimento: um anel de luz que dá a volta na borda
   e, dentro, duas massas de ciano que se cruzam em ritmos diferentes.
   Os ritmos são propositalmente desencontrados (5,5s e 9s no anel)
   pra nunca baterem no mesmo ponto — é isso que faz parecer líquido
   em vez de um loop girando. */
@property --anel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(53, 214, 255, 0.18);
  background: linear-gradient(180deg, rgba(53, 214, 255, 0.08), rgba(53, 214, 255, 0.02));
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, 0.95);
  text-shadow: 0 1px 2px rgba(6, 9, 12, 0.45);
  box-shadow: 0 0 26px rgba(53, 214, 255, 0.16);
  overflow: visible;
}

/* o líquido: dois blobs em rotas opostas, recortados pelo próprio raio */
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    /* massa principal num azul fundo: rende forte sem clarear o suficiente
       pra comer o contraste do texto de 10,5px por cima */
    radial-gradient(58% 150% at 50% 50%, rgba(14, 134, 196, 0.88), transparent 68%),
    radial-gradient(46% 140% at 50% 50%, rgba(140, 232, 255, 0.30), transparent 70%);
  background-repeat: no-repeat;
  background-size: 190% 100%, 230% 100%;
  animation: liquido 9s ease-in-out infinite;
}
@keyframes liquido {
  0%   { background-position: -70% 50%, 170% 50%; }
  50%  { background-position: 165% 50%,  -5% 50%; }
  100% { background-position: -70% 50%, 170% 50%; }
}

/* o anel: um arco de luz percorrendo a borda */
.pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--anel),
    transparent 0turn, transparent 0.46turn,
    rgba(190, 244, 255, 0.95) 0.70turn, var(--cyan) 0.80turn,
    transparent 0.94turn, transparent 1turn);
  -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: giraAnel 5.5s linear infinite;
  pointer-events: none;
}
@keyframes giraAnel { to { --anel: 360deg; } }

.pill i, .pill span { position: relative; z-index: 1; }
.pill i {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(53, 214, 255, 0.9);
}
.pill i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(53, 214, 255, 0.6);
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  75%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- identidade ---------- */
.name {
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(34px, 8.5vw, 46px);
  font-weight: 700;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.022em;
  line-height: 1;
}
.handle {
  margin-top: 9px;
  font-size: 14px;
  color: var(--cyan);
  letter-spacing: 0.005em;
}
.bio {
  margin-top: 14px;
  max-width: 33ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.bio em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  color: var(--text);
}

/* ---------- redes ---------- */
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(242, 241, 236, 0.035);
  color: var(--text);
  transition: transform 0.28s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.socials a:hover {
  transform: translateY(-3px);
  background: rgba(53, 214, 255, 0.12);
  border-color: rgba(53, 214, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(53, 214, 255, 0.07);
}
.socials svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------ */
.links {
  width: 100%;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 17px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform 0.3s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.3s;
}
.link:hover {
  transform: translateY(-3px);
  background: var(--card-hi);
  border-color: rgba(53, 214, 255, 0.42);
  box-shadow: 0 20px 44px -24px rgba(53, 214, 255, 0.85);
}
/* faixa de luz atravessando no hover */
.link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(53, 214, 255, 0.13) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease);
}
.link:hover::after { transform: translateX(130%); }

.link__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(53, 214, 255, 0.10);
  border: 1px solid rgba(53, 214, 255, 0.20);
  color: var(--cyan);
}
.link__ic svg { width: 22px; height: 22px; }

.link__tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.link__kick {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.link__tx b {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.link__sub {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dim);
}

.link__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(242, 241, 236, 0.05);
  color: var(--muted);
  transition: transform 0.28s var(--ease), background 0.25s, color 0.25s;
}
.link__go svg { width: 15px; height: 15px; }
.link:hover .link__go {
  transform: translateX(3px);
  background: rgba(53, 214, 255, 0.28);
  color: var(--text);
}

/* ---------- card de ação: o ciano cheio, uma vez só ---------- */
.link--cta {
  border-color: rgba(53, 214, 255, 0.42);
  background: linear-gradient(135deg, var(--cyan) 0%, #22BEF0 52%, var(--cyan-deep) 100%);
  color: #06090C;
  box-shadow: 0 18px 42px -18px rgba(53, 214, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.link--cta:hover {
  border-color: rgba(53, 214, 255, 0.7);
  background: linear-gradient(135deg, #4EDDFF 0%, #2ECAF7 52%, #17ADE2 100%);
  box-shadow: 0 24px 54px -18px rgba(53, 214, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.link--cta::after {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
}
.link--cta .link__ic {
  background: rgba(6, 9, 12, 0.13);
  border-color: rgba(6, 9, 12, 0.16);
  color: #06090C;
}
.link--cta .link__kick { color: rgba(6, 9, 12, 0.62); }
.link--cta .link__sub  { color: rgba(6, 9, 12, 0.68); }
.link--cta .link__go {
  background: rgba(6, 9, 12, 0.14);
  color: #06090C;
}
.link--cta:hover .link__go { background: rgba(6, 9, 12, 0.24); color: #06090C; }

/* ------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------ */
.foot {
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 241, 236, 0.46);
}

/* ------------------------------------------------------------------
   ENTRADA EM CASCATA
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: revealIn 0.75s var(--ease) forwards;
  animation-delay: calc(0.45s + var(--i, 0) * 70ms);
}
@keyframes revealIn {
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   TELAS GRANDES
   O herói tinha altura presa em vh. Como o `cover` escala pela largura
   numa tela larga, quanto maior o monitor mais a imagem era cortada:
   num 1920 sobrava só 475px de altura pra uma imagem renderizada a 768.
   Aqui a altura passa a acompanhar a largura, então o corte para de
   crescer junto com a tela.
   ------------------------------------------------------------------ */
@media (min-width: 1100px) {
  :root { --hero-h: min(34vw, 720px); }
}

/* ------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root { --hero-h: 320px; }

  .hero__img { background-position: 47% 0%; }
  .wrap { padding: 26px 20px 44px; }
  .links { margin-top: 28px; gap: 11px; }
  .link { padding: 14px 14px; gap: 12px; border-radius: 16px; }
  .link__ic { width: 44px; height: 44px; border-radius: 12px; }
  .link__tx b { font-size: 14.5px; }
  .link__sub { font-size: 12px; }
  .socials a { width: 42px; height: 42px; }
  .foot { font-size: 9.5px; }
}

/* ------------------------------------------------------------------
   MOVIMENTO REDUZIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none; }
  .hero__img, .hero__fold { animation: none; }
  .pill i::after, .pill::before, .pill::after { animation: none; }
  .link::after { transition: none; }
}