/* =========================================================
   Ruan Araujo — Link na Bio
   Layout desenhado na escala do Figma (coluna de 932px)
   e reduzido proporcionalmente via font-size da raiz.
   ========================================================= */

/* ---------- tipografia ----------
   Articulat CF: texto corrido.  Argent CF: detalhes em itálico. */

@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-Normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-NormalOblique.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Articulat CF";
  src:url("assets/fonts/ArticulatCF-MediumOblique.woff2") format("woff2");
  font-weight:500; font-style:italic; font-display:swap;
}

@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-RegularItalic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-DemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-DemiBoldItalic.woff2") format("woff2");
  font-weight:600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Argent CF";
  src:url("assets/fonts/ArgentCF-BoldItalic.woff2") format("woff2");
  font-weight:700; font-style:italic; font-display:swap;
}

:root{
  --sans:"Articulat CF", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:"Argent CF", Georgia, "Times New Roman", serif;
  --col: 58.25rem;              /* 932px */
  --ink: #ffffff;
  --ink-soft: #e7e4e4;
  --ink-dim: #b5afaf;
  --accent: #e8462f;
  --accent-2: #f2a15f;
  --behance: #1769ff;
  --card-1: #151313;
  --card-2: #090909;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  /* A escala segue a menor entre largura e altura da janela, para a página
     caber na tela do PC sem virar um gigante em monitor grande. */
  font-size: clamp(9px, min(.86vw, .99vh), 15px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin:0;
  min-height:100svh;
  background:#080505;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- palco / fundo ---------- */

.stage{ position:fixed; inset:0; z-index:-1; overflow:hidden; }

/* Em tela deitada usa a versão larga (a cortina espelhada), que mostra o
   dobro de pregas no mesmo espaço — ou seja, pregas menores. Em tela em pé
   volta a original, senão o `cover` cortaria quase tudo. */
.stage__curtain{
  position:absolute; inset:-2%;
  background:url("assets/cortina-larga.jpg") center center / cover no-repeat;
  transform:scale(1);
  animation:breathe 34s ease-in-out infinite alternate;
}
@media (max-aspect-ratio:1/1){
  .stage__curtain{ background-image:url("assets/cortina.jpg"); }
  /* em tela em pé o `cover` mostra o miolo claro da cortina; esta camada
     extra deixa o fundo na mesma penumbra da versão de PC */
  .stage__veil{ background-color:rgba(0,0,0,.24); }
}

.stage__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(135% 85% at 50% -5%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.14) 45%, rgba(0,0,0,.42) 100%);
}

@keyframes breathe{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.05) translate3d(0,-.8%,0); }
}

/* ---------- estrutura ---------- */

.wrap{
  width:min(var(--col), 92vw);
  margin-inline:auto;
  padding: 4.5rem 0 3rem;
}

.hero{ text-align:center; }

/* ---------- avatar ---------- */

.avatar{
  width:9.125rem; height:9.125rem;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  box-shadow:
    0 0 0 .1875rem rgba(255,255,255,.10),
    0 1.5rem 3rem rgba(0,0,0,.55);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar:hover{
  transform:translateY(-.25rem) scale(1.03);
  box-shadow:
    0 0 0 .1875rem rgba(232,70,47,.35),
    0 1.75rem 3.5rem rgba(0,0,0,.6);
}

/* ---------- nome ---------- */

.name{
  margin:2.75rem 0 0;
  font-size:4.25rem;
  font-weight:300;
  line-height:1;
  letter-spacing:-.015em;
  background:linear-gradient(97deg,#f7bb85 0%,#f19a6c 32%,#ec6d5c 64%,#e3465c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- parágrafo ---------- */

.lead{
  /* a folga embaixo é para o background-clip:text não cortar a perna do "j"
     de "ajudar"; a margem negativa devolve o espaço no layout */
  margin:1.6rem auto -.9rem;
  padding-bottom:.9rem;
  max-width:41.5rem;
  font-size:2.3rem;
  font-weight:400;
  line-height:1.45;
  /* degradê radial: branco no alto e cinza descendo, recortado no texto.
     O centro fica em 50% porque aqui o texto é centralizado. */
  background:radial-gradient(120% 120% at 50% 10%,
    #ffffff 0%, #ffffff 26%, #a8a8a8 70%, #484848 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* filhos sem cor própria, senão pintariam por cima do degradê do pai */
.lead strong{ font-weight:700; color:transparent; }

.lead__script{
  display:block;
  margin-top:-.15em;
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:1.6em;
  line-height:1;
  color:transparent;
}

/* ---------- cartões ---------- */

.links{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  margin-top:10rem;
}

.card{
  position:relative;
  display:block;
  height:23.25rem;
  border-radius:1.25rem;
  /* vidro fosco escuro sobre a cortina */
  background:
    linear-gradient(142deg,
      rgba(255,255,255,.055) 0%,
      rgba(255,255,255,.018) 48%,
      rgba(255,255,255,.038) 100%),
    linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.62));
  -webkit-backdrop-filter:blur(1.5rem) saturate(130%) brightness(.42);
  backdrop-filter:blur(1.5rem) saturate(130%) brightness(.42);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 1.5rem 3rem rgba(0,0,0,.45);
  text-decoration:none;
  color:inherit;
  isolation:isolate;
  transition:
    transform .65s var(--ease),
    border-color .65s var(--ease),
    background-color .65s var(--ease),
    box-shadow .65s var(--ease);
}

/* navegadores sem backdrop-filter continuam com um cartão escuro sólido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{
    background:linear-gradient(142deg, var(--card-1) 0%, var(--card-2) 58%, #060606 100%);
  }
}

/* Brilho que segue o cursor. Fica em z-index 0, ou seja: acima do fundo do
   cartão e ABAIXO dos mockups e do texto. Se subir para cima dos mockups,
   ele clareia a tela do celular no hover. */
.card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.07), rgba(255,255,255,0) 68%);
  opacity:0;
  transition:opacity .55s var(--ease);
  pointer-events:none;
  z-index:0;
}

.card:hover,
.card:focus-visible{
  transform:translateY(-.6rem);
  border-color:rgba(232,70,47,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 2.25rem 4.5rem rgba(0,0,0,.55),
    0 0 4.5rem rgba(232,70,47,.18);
}
.card:hover::after,
.card:focus-visible::after{ opacity:1; }
.card:focus-visible{ outline:2px solid rgba(232,70,47,.6); outline-offset:.35rem; }
.card:active{ transform:translateY(-.25rem) scale(.996); }

.card__copy{
  position:absolute;
  top:50%;
  left:5.75rem;
  transform:translateY(-50%);
  z-index:2;
  transition:transform .65s var(--ease);
}
.card__copy--right{ left:auto; right:3.5rem; }
.card--be .card__copy--right{ right:2rem; left:57%; }
.card--be .card__title{ max-width:none; }

.card:hover .card__copy{ transform:translateY(-50%) translateX(.25rem); }
.card--be:hover .card__copy{ transform:translateY(-50%) translateX(-.25rem); }

.card__title{
  margin:0;
  max-width:20rem;
  font-size:3rem;
  font-weight:300;
  line-height:1.07;
  letter-spacing:-.01em;
  /* degradê radial: branco no alto à esquerda, cinza nas pontas */
  background:radial-gradient(118% 118% at 20% 12%,
    #ffffff 0%, #ffffff 24%, #a8a8a8 68%, #484848 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.card__title strong{ font-weight:700; }

.card__title em{
  /* bloco próprio: o entrelinhas até "exclusivo no" vira margem negativa.
     O padding dá folga para o background-clip:text não cortar o "pp". */
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:1.25em;
  line-height:1;
  padding:.14em 0 .24em;
  margin:-.30em 0 -.24em;
  background:linear-gradient(95deg,#f5a765 0%,#ec6a3f 45%,#e0352f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- selos ---------- */

.chip{
  display:grid;
  place-items:center;
  width:2.75rem; height:2.75rem;
  border-radius:.7rem;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), background-color .6s var(--ease);
}
.chip svg{ width:62%; height:62%; display:block; }

/* selo do WhatsApp (PNG do Figma: quadrado + luz ao redor).
   O quadrado ocupa 53px dos 257px da imagem, então a largura total
   é 3,4rem x 257/53 para o selo sair com 3,4rem na tela. */
.wa{
  position:absolute;
  top:59%; left:56%;
  width:16.5rem;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
  transition:transform .6s var(--ease);
}
.wa img{ width:100%; height:auto; display:block; }
.wa::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(30% 30% at 50% 50%,
    rgba(255,124,86,.34) 0%, rgba(255,124,86,.10) 45%, rgba(255,124,86,0) 72%);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.card:hover .wa{ transform:translate(-50%,-50%) scale(1.07); }
.card:hover .wa::after{ opacity:1; }

.chip--be{
  margin-bottom:1.1rem;
  background:var(--behance);
  color:#fff;
  box-shadow:0 .5rem 1.25rem rgba(23,105,255,.28);
}
.card:hover .chip--be{
  transform:translateY(-.15rem) scale(1.06);
  box-shadow:0 .75rem 1.75rem rgba(23,105,255,.45);
}

/* ---------- mockups ---------- */

.mock{ position:absolute; z-index:1; pointer-events:none; }
.mock img{
  display:block; height:auto;
  transition:transform .8s var(--ease);
  transform-origin:center bottom;
}

/* iPhone — sai por cima do cartão, corta na base */
.mock--phone{
  top:-9rem;
  bottom:0;
  left:56.4%;
  width:36.5%;
  overflow:hidden;
}
/* sem `filter` aqui: junto com o backdrop-filter do cartão, o Chromium
   compõe a imagem contra o fundo da página e a tela do celular fica
   transparente. Os mockups já vêm com a sombra embutida do Figma. */
.mock--phone img{
  width:100%;
  margin-top:3.5rem;
}
/* Nada de `transform` ou `filter` nos mockups: dentro de um elemento com
   backdrop-filter, o Chromium compõe o filho contra o fundo da página e a
   tela do celular fica transparente. O cartão inteiro já sobe no hover. */

/* mockup do portfólio (exportado do Figma) */
.mock--ipad{
  left:4.5%;
  top:-1%;
  width:52%;
}
.mock--ipad img{
  width:100%;
}

/* ---------- rodapé ---------- */

.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin-top:7rem;
  font-size:1.2rem;
  color:var(--ink-dim);
}
.foot__sep{
  width:1px; height:1.35rem;
  background:rgba(255,255,255,.18);
}
.foot__ig{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .5s var(--ease), transform .5s var(--ease);
}
.foot__ig:hover{ color:#fff; transform:translateY(-.1rem); }
.ig-mark{
  display:block;
  width:1.9rem; height:1.9rem;
  transition:transform .5s var(--ease);
}
.ig-mark svg{ width:100%; height:100%; display:block; }
.foot__ig:hover .ig-mark{ transform:scale(1.08); }

/* ---------- entrada ---------- */

.reveal{
  opacity:0;
  animation:rise .95s var(--ease) var(--d, 0ms) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(1.5rem); }
  to  { opacity:1; transform:none; }
}

/* ---------- telas menores ---------- */

@media (max-width:700px){
  html{ font-size:clamp(7.6px, 2.1vw, 12px); }

  .wrap{ width:min(var(--col), 90vw); padding:4.5rem 0 3rem; }
  .links{ margin-top:8.5rem; gap:1.5rem; }

  /* texto de apresentação menor, para não encostar nas bordas */
  .lead{ font-size:2.05rem; max-width:37rem; }

  .card{ height:19.5rem; }
  .card__copy{ left:3.5rem; }
  .card__copy--right{ right:2.25rem; }
  /* mesmo 57% do desktop: abaixo disso o mockup encosta no texto */
  .card--be .card__copy--right{ left:57%; right:1.25rem; }
  .card__title{ font-size:2.5rem; max-width:16rem; }
  .card--be .card__title{ font-size:2.3rem; }

  .mock--phone{ top:-7.5rem; left:57%; width:38%; }
  /* o mockup do iPad usa as mesmas medidas do desktop */

  .foot{ font-size:1.4rem; gap:1rem; margin-top:5.5rem; flex-wrap:wrap; }
  .ig-mark{ width:2.2rem; height:2.2rem; }
}

@media (max-width:400px){
  .foot{ font-size:1.55rem; }
}

/* ---------- acessibilidade ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}