/* =============================================================
   Tutoz Studio — bio.tutoz.site
   A mesma identidade do site (e do Instagram): preto profundo, um
   único azul elétrico, títulos em Montserrat caixa alta com contraste
   de peso e granulado de filme. Fundo preto com a luz do hero do site
   em branco, e o cartão de vidro transparente por cima.
   Página única, estática, sem build. Regras completas na skill
   .claude/skills/tutoz-brand/SKILL.md do repositório.
   ============================================================= */

/* ---------- TOKENS (os mesmos do site principal) ---------- */
:root{
  --paper:      #050505;
  --paper-2:    #0B0B0C;
  --paper-3:    #141416;

  --tx:         #F5F5F4;
  --tx-2:       rgba(255,255,255,.62);
  --tx-3:       rgba(255,255,255,.42);

  --line:       rgba(255,255,255,.10);

  /* azul de marca: sobre o preto passa como texto (8:1); o que vai EM
     CIMA do azul cheio é o --brand-on, nunca branco (2,6:1 reprova) */
  --brand:      #00ABF8;
  --brand-on:   #04222E;
  --brand-600:  #0096DB;

  --r:     14px;
  --r-lg:  18px;
  --r-xl:  26px;

  --display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* sombras pretas — no escuro sombra cinza vira névoa */
  --shadow-m: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --glow:     0 14px 40px rgba(0,171,248,.16);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
h1,p{ margin:0; }
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--brand); color:var(--brand-on); }

body{
  margin:0;
  background:var(--paper);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* granulado de filme, o mesmo ruído dos posts e do site */
body::after{
  content:""; position:fixed; inset:0; z-index:9;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- FUNDO ----------
   Preto, fixo na tela, atrás de tudo (z-index negativo no contexto
   raiz). Por cima dele, a luz do hero do site em branco
   (assets/js/glow.js), que o cartão de vidro deixa passar. Sem WebGL o
   canvas nem entra e ficam os dois halos brancos abaixo. */
.bg{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 34% at 50% 8%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(50% 30% at 50% 92%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 72%),
    var(--paper);
}
/* a luz entra com um fade depois do primeiro quadro */
.glow{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  opacity:0;
  transition:opacity 1.6s ease;
}
.glow.is-on{ opacity:1; }

/* O centro da tela mora num invólucro, não no <body>. O navegador
   interno do Instagram injeta elementos no fim do <body>; com o body em
   flex eles entravam como vizinhos do conteúdo e dividiam a largura. */
.page{
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:
    max(clamp(22px,6vw,56px), env(safe-area-inset-top))
    clamp(26px, 7vw, 40px)
    max(clamp(22px,6vw,56px), env(safe-area-inset-bottom));
}
/* em tela baixa (celular deitado) o cartão fica mais alto que a janela;
   com "center" puro o topo dele sairia da área rolável. O "safe" só
   centraliza enquanto couber — por isso vem depois, como upgrade. */
@supports (align-items: safe center){
  .page{ align-items:safe center; }
}

/* ---------- CARTÃO ----------
   A estrutura clássica de página de links: capa, avatar em cima da
   divisa, nome, bio curta e a lista. O cartão é vidro: quase
   transparente, com desfoque, deixando a luz branca do fundo passar
   macia por trás. Um véu preto leve garante a leitura do texto cinza
   mesmo quando a fita passa bem atrás dele; o filete claro no topo é o
   reflexo da borda do vidro. */
.card{
  position:relative;
  /* largura e teto separados, sem min(): funciona até em WebView antiga */
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 40%, rgba(255,255,255,.025) 100%), rgba(5,5,7,.6);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}

/* capa: a arte do preview (og-img.png) recortada em volta do bloco
   "marca | sites que trabalham por você.". O bloco está praticamente no
   centro da arte, então o object-position acerta sem arquivo à parte.
   Em "screen" o preto da arte some e sobram só a marca, o texto e os
   cantos azuis, direto sobre o vidro — sem retângulo preto no topo. */
.cover{
  display:block;
  width:100%; height:auto;
  aspect-ratio:1440 / 570;
  object-fit:cover;
  object-position:50% 47%;
  mix-blend-mode:screen;
  border-bottom:1px solid var(--line);
}

.card__in{
  position:relative;
  padding:0 clamp(18px,5.5vw,30px) clamp(24px,5vw,30px);
  text-align:center;
}

/* a marca de vidro em cima da divisa entre capa e corpo; o anel é
   preto (o cartão agora é transparente) e o brilho azul é a mesma luz
   dos posts */
.avatar{
  position:relative;
  width:104px; height:104px;
  margin:-40px auto 0;
  border-radius:50%;
  border:5px solid var(--paper);
  background:#000;
  box-shadow:0 0 0 1px rgba(0,171,248,.28), 0 14px 32px rgba(0,0,0,.6), 0 0 44px rgba(0,171,248,.22);
}

/* nome: a regra dos títulos — caixa alta, parte pesada (900) + leve (500) */
.card__name{
  margin-top:14px;
  font-family:var(--display);
  font-size:22px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.card__name em{ font-style:normal; font-weight:900; }
.card__handle{
  margin-top:4px;
  font-size:13.5px;
  color:var(--tx-2);
}
.card__bio{
  margin:14px auto 0;
  max-width:36ch;
  font-size:15.5px;
  line-height:1.6;
  color:var(--tx-2);
  text-wrap:pretty;
}

/* ---------- LINKS ---------- */
.links{
  margin-top:clamp(22px,6vw,28px);
  display:grid;
  gap:12px;
}
.lk{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  min-height:72px;
  padding:12px 20px 12px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* o vidro é o cartão; o link é só um degrau mais claro dentro dele */
  background:rgba(255,255,255,.035);
  text-align:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
/* hover da marca no escuro: borda azul a 40% + glow, sobe 3px */
.lk:hover{
  transform:translateY(-3px);
  border-color:rgba(0,171,248,.45);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow-m), var(--glow);
}
.lk:active{ transform:translateY(0); }

.lk__ic{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:#fff;
}
/* nada de "fill:currentColor" genérico: regra de CSS venceria o
   fill="none" dos ícones de traço (globo, envelope) */
.lk__ic svg{ width:22px; height:22px; }

.lk__tx{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.lk__k{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; }
.lk__s{
  margin-top:3px;
  font-size:13.5px; color:var(--tx-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lk__ar{
  width:17px; height:17px; flex-shrink:0;
  color:var(--tx-3);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), color .35s;
}
.lk:hover .lk__ar{ transform:translateX(3px); color:var(--brand); }

/* o principal: pílula azul cheia com o brilho que varre, igual ao botão
   do site. O texto em cima do azul é o --brand-on, não branco. */
.lk--brand{
  border-color:var(--brand);
  background-color:var(--brand);
  background-image:linear-gradient(100deg,
    #0096DB 0%, #00ABF8 30%, #12BAFF 50%, #00ABF8 70%, #0096DB 100%);
  background-size:220% 100%;
  color:var(--brand-on);
  box-shadow:0 10px 30px rgba(0,150,219,.28);
  animation:brilhoBotao 8s linear infinite;
}
.lk--brand:hover{
  border-color:var(--brand);
  box-shadow:0 16px 40px rgba(0,150,219,.38);
  animation-duration:3.5s;
}
.lk--brand .lk__ic{ background:var(--brand-on); border-color:transparent; color:#fff; }
.lk--brand .lk__s{ color:rgba(4,34,46,.78); }
.lk--brand .lk__ar,
.lk--brand:hover .lk__ar{ color:var(--brand-on); }
@keyframes brilhoBotao{ to{ background-position:-220% 0; } }

/* ---------- RODAPÉ DO CARTÃO ---------- */
.foot{
  padding:16px 20px 18px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);
  text-align:center;
  font-size:13px;
  color:var(--tx-2);
}
.foot a{
  color:var(--tx);
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .2s;
}
.foot a:hover{ border-color:var(--brand); }

/* ---------- TELAS PEQUENAS ---------- */
@media (max-width:420px){
  .avatar{ width:96px; height:96px; margin-top:-36px; }
  .card__name{ font-size:20px; }
  .card__bio{ font-size:15px; }
  .lk{ gap:14px; padding:11px 16px 11px 11px; min-height:68px; }
  .lk__ic{ width:44px; height:44px; }
  .lk__k{ font-size:16px; }
  /* estreito, o subtítulo cortava no meio ("resposta r…"): quebra em
     duas linhas em vez de esconder o fim */
  .lk__s{ white-space:normal; overflow:visible; }
}

/* ---------- MENOS MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  .lk--brand{ animation:none !important; }
  .lk--brand{ background-image:none; }
  *{ transition-duration:.01ms !important; }
}