/* ============================================================
   Vanderson — link na bio
   Escuro texturizado + vidro. Cada card tem sua própria cor.
   ============================================================ */

:root {
  --gold: #e3cb3c;
  --gold-dim: #b3a62f;
  --olive: #6a6b5e;
  --ink: #e9ebe4;
  --ink-soft: #dddfd8;
  --bg: #141615;
  --bg-deep: #0e0f10;
  --panel: #101211;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-edge: rgba(255, 255, 255, 0.16);
}

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

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

body {
  background: var(--bg) url("assets/bg-texture.webp") repeat;
  color: var(--ink);
  font-family: "Montserrat", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== brilhos fixos — dão vida ao desfoque do vidro ===== */

.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: drift 16s ease-in-out infinite alternate;
}

.glow__orb--a {
  width: 420px;
  height: 420px;
  left: -140px;
  top: 22%;
  background: radial-gradient(circle, rgba(227, 203, 60, 0.16), transparent 70%);
}

.glow__orb--b {
  width: 520px;
  height: 520px;
  right: -180px;
  top: 48%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.13), transparent 70%);
  animation-delay: -6s;
}

.glow__orb--c {
  width: 380px;
  height: 380px;
  left: 30%;
  bottom: -160px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.11), transparent 70%);
  animation-delay: -11s;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, -50px, 0) scale(1.12); }
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== palco: arco + avatar ===== */

.stage {
  position: relative;
  width: 100%;
  height: 330px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-deep) 0%, #101112 55%, rgba(16, 17, 18, 0) 100%);
}

.stage__arc {
  position: absolute;
  left: 50%;
  top: 190px;
  width: 3600px;
  height: 3600px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #1b1d1c 0%, #171918 160px, var(--bg) 420px);
  box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.45);
}

/* fio dourado que corre o fundo inteiro e passa atrás da foto */
.stage__line {
  position: absolute;
  left: 50%;
  top: 190px;
  width: 3600px;
  height: 3600px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(227, 203, 60, 0.3);
  pointer-events: none;
}

.avatar-halo {
  position: absolute;
  left: 50%;
  top: 128px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(227, 203, 60, 0.12);
}

/* anel dourado em degradê — forte embaixo/à esquerda, some em cima */
.avatar-halo::after {
  content: "";
  position: absolute;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(227, 203, 60, 0.95) 0deg,
    rgba(227, 203, 60, 0.55) 60deg,
    rgba(227, 203, 60, 0.08) 145deg,
    rgba(227, 203, 60, 0) 195deg,
    rgba(227, 203, 60, 0.3) 265deg,
    rgba(227, 203, 60, 0.95) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 76px, #000 76.5px);
  mask: radial-gradient(circle, transparent 0 76px, #000 76.5px);
  pointer-events: none;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

/* ===== nome + @ ===== */

.id {
  text-align: center;
  margin-top: 10px;
}

.id__name {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.id__handle {
  font-size: 34px;
  font-weight: 400;
  color: var(--olive);
  margin-top: 2px;
}

.id__tagline {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.72;
  margin-top: 12px;
}

/* ===== cards ===== */

.links {
  display: grid;
  gap: 26px;
  width: min(600px, 92%);
  margin: 44px auto 0;
}

/* paleta intercalada — uma cor por card */
.card--lime {
  --accent: #a3e635;
  --tint: rgba(163, 230, 53, 0.26);
  --tint-soft: rgba(163, 230, 53, 0.10);
}
.card--gold {
  --accent: #e3cb3c;
  --tint: rgba(227, 203, 60, 0.26);
  --tint-soft: rgba(227, 203, 60, 0.10);
}
.card--cyan {
  --accent: #38bdf8;
  --tint: rgba(56, 189, 248, 0.28);
  --tint-soft: rgba(56, 189, 248, 0.11);
}
.card--violet {
  --accent: #a78bfa;
  --tint: rgba(167, 139, 250, 0.30);
  --tint-soft: rgba(167, 139, 250, 0.12);
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 34% 100px 1fr;
  align-items: center;
  min-height: 176px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  /* tinta da cor do card por cima do vidro escuro */
  background:
    radial-gradient(105% 140% at 34% 50%, var(--tint) 0%, transparent 62%),
    linear-gradient(100deg, var(--tint-soft) 0%, transparent 82%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 55%),
    var(--panel);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 18px 44px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.65, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
}

/* brilho que varre o vidro no hover */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.13) 46%,
    var(--tint) 52%,
    transparent 66%
  );
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.25, 0.6, 0.3, 1);
  pointer-events: none;
}

.card:hover,
.card:focus-visible {
  transform: scale(1.04) translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 26px var(--tint-soft);
}

.card:hover::after,
.card:focus-visible::after {
  transform: translateX(110%);
}

/* ---- foto / vídeo ---- */

.card__media {
  position: relative;
  align-self: stretch;
  overflow: hidden;
}

.card__media img,
.card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.card:hover .card__media img,
.card:hover .card__media video {
  transform: scale(1.06);
}

/* o carrossel do SequenceFit tem a headline no topo — enquadra por ela */
.card--gold .card__media video {
  object-position: center 8%;
}

/* a foto se dissolve no painel, com a cor do card lavando a emenda */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, transparent 68%, var(--tint) 91%, var(--accent) 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* fio de luz vertical na emenda */
.card__media::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  z-index: 3;
  background: linear-gradient(180deg, transparent, var(--accent) 26%, var(--accent) 74%, transparent);
  opacity: 0.7;
  box-shadow: 0 0 9px 0 var(--tint);
}

/* ---- símbolo do produto ---- */

.card__mark {
  position: relative;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 9px var(--tint));
  transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.3, 1), color 0.35s ease;
}

/* halo suave atrás do símbolo, como na referência */
.card__mark::before {
  content: "";
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tint) 0%, transparent 70%);
  opacity: 0.55;
}

.card__mark svg {
  position: relative;
  width: 62px;
  height: 62px;
}

.card:hover .card__mark {
  transform: scale(1.08);
  color: var(--accent);
}

/* ---- texto ---- */

.card__text {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 20px 4px;
}

.card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.card__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 9px;
}

.card__desc {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #f0f1ec;
}

/* ===== rodapé ===== */

.footer {
  margin: 72px 0 44px;
  text-align: center;
}

.footer p {
  font-size: 13px;
  font-weight: 500;
  color: #43484b;
}

/* ===== mobile ===== */

@media (max-width: 560px) {
  .stage { height: 288px; }
  .stage__arc, .stage__line { top: 168px; }
  .avatar-halo { top: 108px; width: 152px; height: 152px; }
  .avatar { width: 130px; height: 130px; }
  .avatar-halo::after {
    width: 138px;
    height: 138px;
    -webkit-mask: radial-gradient(circle, transparent 0 66px, #000 66.5px);
    mask: radial-gradient(circle, transparent 0 66px, #000 66.5px);
  }

  .id__name { font-size: 21px; }
  .id__handle { font-size: 28px; }
  .id__tagline { font-size: 12.5px; margin-top: 10px; padding: 0 24px; }

  .links { gap: 20px; }

  .card {
    grid-template-columns: 29% 52px 1fr;
    min-height: 162px;
  }

  .card__mark svg { width: 32px; height: 32px; }
  .card__mark::before { width: 66px; height: 66px; }

  .card__text { padding: 15px 14px 15px 2px; }
  .card__eyebrow { font-size: 9.5px; letter-spacing: 0.15em; margin-bottom: 6px; }
  .card__title { font-size: 17.5px; margin-bottom: 7px; }
  .card__desc { font-size: 12.5px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .glow__orb { animation: none; }
  .card, .card::after, .card__media img, .card__media video, .card__mark { transition: none; }
}