/* ═══ Base ═══ */

/* Registradas para poderem ser INTERPOLADAS: é isso que faz o fundo derreter de
   uma cor de projeto para a outra em vez de piscar. */
@property --pj1{syntax:"<color>";inherits:true;initial-value:#e0447a}
@property --pj2{syntax:"<color>";inherits:true;initial-value:#5b6cff}

:root{
  --bg:#08080b;
  --ink:#f4f4f6;
  --ink-dim:#c2c2cc;
  --ink-faint:#bcbcc8;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --surface:rgba(255,255,255,.05);
  --ease:cubic-bezier(.22,.85,.24,1);

  /* Lado do quadrado de informações. Todo o conteúdo interno é dimensionado em
     cqw sobre ele, então a composição fica idêntica em qualquer tela. */
  --bio:min(520px,32vw,72vh);

  /* A carta é limitada pela ALTURA: a pilha inteira precisa caber no palco. */
  --card-w:min(1100px,48vw,74vh);

  /* Geometria da pilha 3D — lida pelo JS, para os breakpoints morarem só aqui. */
  --geo-gap:58;
  --geo-depth:230;
  --geo-tilt:30;
  --geo-shrink:.07;
  --geo-fade:.2;
  --geo-limit:2.4;
}

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

/* Página travada no viewport: toda a navegação acontece no carrossel. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{
  -webkit-text-size-adjust:100%;
  /* O JS troca --pj1/--pj2 na carta ativa; a transição mora aqui. */
  transition:--pj1 1s var(--ease),--pj2 1s var(--ease);
}

body{
  position:fixed;inset:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,video{display:block;max-width:100%}
picture{display:contents}

/* ═══ Fundo reativo ═══
   As manchas usam as cores do projeto em destaque. No escuro elas somam luz, e
   pouca cor já rende muito — daí as porcentagens baixas. */
.glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(66vw 66vw at 84% 12%,color-mix(in oklab,var(--pj1) 55%,transparent),transparent 70%),
    radial-gradient(60vw 60vw at 8% 90%,color-mix(in oklab,var(--pj2) 48%,transparent),transparent 72%),
    radial-gradient(90vw 70vw at 50% 50%,color-mix(in oklab,var(--pj1) 14%,transparent),transparent 74%);
}

/* Segunda camada, bem fraca e girada: dá profundidade sem virar arco-íris. */
.glow::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(42vw 42vw at 18% 18%,color-mix(in oklab,var(--pj2) 24%,transparent),transparent 72%),
    radial-gradient(38vw 38vw at 88% 82%,color-mix(in oklab,var(--pj1) 20%,transparent),transparent 72%);
}

/* ═══ Liquid glass ═══
   Quase só desfoque: o fundo é praticamente transparente e o volume vem das
   arestas — luz em cima, sombra embaixo, que é o que dá o relevo 3D. */
.glass{
  position:relative;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 14px 34px -14px rgba(0,0,0,.85),
    0 4px 10px -6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 10px 22px -16px rgba(255,255,255,.45),
    inset 0 -12px 22px -18px rgba(0,0,0,.8);
  transition:background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}

/* Reflexo diagonal — a "gota" do liquid glass. */
.glass::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(132deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,0) 56%,
    rgba(255,255,255,.08) 100%);
  transition:opacity .35s var(--ease);
}

/* ═══ Layout ═══
   A coluna do carrossel é medida pela CARTA, não por "1fr". Com 1fr ela comia
   toda a sobra em ultrawide e empurrava a arte para longe do painel; agora as
   duas colunas formam um bloco e é o bloco que se centraliza na tela.
   O minmax deixa a coluna encolher quando a tela é estreita. */
.shell{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,calc(var(--card-w) + 14rem));
  justify-content:center;
  align-items:center;
  height:100dvh;
}

/* ═══ Bloco de informações (quadrado) ═══ */
.bio{
  inline-size:var(--bio);
  aspect-ratio:1;
  /* Margem esquerda maior: o painel respira longe da borda da tela. */
  margin-inline:clamp(1.5rem,7vw,7.5rem) clamp(1rem,3vw,3.5rem);
  /* Vira contexto de container: os filhos medem em cqw sobre este quadrado. */
  container-type:size;
  overflow:hidden;
}

.bio__box{
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
  /* Espaçamento generoso para o conteúdo ocupar o quadrado em vez de sobrar
     vazio nas pontas — é isso que aproxima o painel do carrossel no mobile. */
  gap:7.5cqw;
  padding:2cqw;
}

.bio__status{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:1.6cqw;
  padding:1cqw 2.6cqw 1cqw 2cqw;
  border:1px solid var(--line);border-radius:999px;
  background:var(--surface);
  font-size:3.1cqw;color:var(--ink-dim);
}
.bio__dot{
  width:1.8cqw;aspect-ratio:1;border-radius:50%;
  background:#3ddc84;box-shadow:0 0 0 .9cqw rgba(61,220,132,.16);
}

/* Cabeçalho na horizontal: aproveita a largura do quadrado em vez de empilhar. */
.bio__head{display:flex;align-items:center;gap:3.6cqw}

.bio__avatar img{
  width:21cqw;aspect-ratio:1;height:auto;
  border-radius:50%;
  object-fit:cover;object-position:center 22%;
  border:1px solid var(--line-strong);
  box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.9);
}

.bio__id{min-width:0}

/* Nome numa linha só. O tamanho é limitado pela largura que sobra ao lado da
   foto — daí o nowrap com fonte menor que a de duas linhas. */
.bio__name{
  font-size:8.2cqw;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.bio__role{
  margin-top:1.2cqw;
  font-size:3.5cqw;font-weight:600;line-height:1.3;
  color:var(--ink-dim);
}

.bio__desc{
  color:var(--ink-dim);
  font-size:3.6cqw;
  line-height:1.5;
  text-wrap:pretty;
}

.bio__links{display:flex;flex-wrap:wrap;gap:1.8cqw}

.link{
  display:inline-flex;align-items:center;gap:1.5cqw;
  padding:1.7cqw 3.2cqw;
  border-radius:999px;
  color:var(--ink);text-decoration:none;
  font-size:3.2cqw;font-weight:600;line-height:1;
}
/* O conteúdo fica acima do reflexo do vidro. */
.link svg,.link span{position:relative;z-index:1}
.link svg{width:4cqw;height:4cqw;fill:currentColor;flex:none;transition:color .3s}

.link:hover{
  transform:translateY(-2px);
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,.9),
    0 6px 14px -8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 10px 22px -16px rgba(255,255,255,.55),
    inset 0 -12px 22px -18px rgba(0,0,0,.8);
}

/* Cada rede acende na própria cor. O ícone puxa o tom cheio; o fundo fica no
   véu translúcido para não perder o vidro. */
.link--be:hover{background:rgba(23,105,255,.22);border-color:rgba(23,105,255,.55)}
.link--be:hover svg{color:#6ba2ff}

.link--ig:hover{
  background:linear-gradient(132deg,
    rgba(247,146,49,.26),rgba(221,42,123,.26) 52%,rgba(129,52,175,.28));
  border-color:rgba(221,42,123,.5);
}
.link--ig:hover svg{color:#ff8ab8}

.link--wa:hover{background:rgba(37,211,102,.20);border-color:rgba(37,211,102,.5)}
.link--wa:hover svg{color:#5ff0a0}

.link:focus-visible,.nav:focus-visible,.dot:focus-visible,.stage:focus-visible{
  outline:2px solid rgba(255,255,255,.85);outline-offset:3px;
}

.bio__foot{font-size:2.9cqw;color:var(--ink-faint)}

/* ═══ Carrossel vertical ═══ */
.work{
  position:relative;
  height:100%;min-width:0;
}

.stage{
  position:absolute;inset:0;
  perspective:1900px;
  perspective-origin:50% 50%;
  touch-action:none;      /* o arraste vertical é do carrossel, não da página */
  cursor:grab;
  outline-offset:-4px;
}
.stage.is-dragging{cursor:grabbing}

.track{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

.card{
  position:absolute;
  top:50%;left:50%;
  width:var(--card-w);
  aspect-ratio:16/9;
  margin:calc(var(--card-w) * -0.28125) 0 0 calc(var(--card-w) / -2);
  border-radius:16px;
  overflow:hidden;
  background:#111;
  border:1px solid var(--line);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.92);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  /* Eixo vertical: as cartas sobem de baixo para cima. Vars vindas do JS. */
  transform:
    translate3d(0,calc(var(--y,0) * 1%),calc(var(--z,0) * 1px))
    rotateX(calc(var(--rx,0) * 1deg))
    scale(var(--sc,1));
  opacity:var(--op,1);
  transition:transform .62s var(--ease),opacity .62s var(--ease),box-shadow .5s;
  will-change:transform,opacity;
}

.card[data-hidden="true"]{visibility:hidden;pointer-events:none}

.card__media{width:100%;height:100%;object-fit:cover}

/* Véu que escurece as cartas afastadas e some na ativa */
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,10,.18),rgba(6,6,10,.72));
  opacity:var(--veil,0);
  transition:opacity .62s var(--ease);
  pointer-events:none;
}

.card.is-active{border-color:var(--line-strong)}
.card:not(.is-active){cursor:pointer}

/* ═══ Controles: trilha de vidro na lateral do carrossel ═══ */
.rail{
  position:absolute;
  right:clamp(10px,calc(50% - var(--card-w) / 2 - 64px),8vw);
  top:50%;transform:translateY(-50%);
  z-index:200;
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;
  padding:.6rem .45rem;
  border-radius:999px;
}

.nav{
  flex:none;position:relative;z-index:1;
  display:grid;place-items:center;
  width:clamp(34px,3.8vh,42px);aspect-ratio:1;
  border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--ink);
  cursor:pointer;
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.nav svg{width:18px;height:18px}
.nav:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
  transform:scale(1.08);
}
.nav:active{transform:scale(.94)}

.dots{display:flex;flex-direction:column;gap:.55rem;position:relative;z-index:1}
.dot{
  width:7px;height:7px;padding:0;
  border:0;border-radius:999px;
  background:rgba(255,255,255,.26);
  cursor:pointer;
  transition:height .4s var(--ease),background .3s;
}
.dot[aria-selected="true"]{height:24px;background:rgba(255,255,255,.88)}

/* ═══ Mobile: quadrado em cima, carrossel embaixo — tudo em uma tela ═══ */
@media (max-width:900px){
  :root{
    --bio:min(360px,78vw,38vh);
    --card-w:min(460px,86vw,48vh);
    /* Pilha bem espalhada: preenche a altura sob o quadrado em vez de deixar
       um vazio entre os dois blocos. */
    --geo-gap:76;
    --geo-depth:190;
    --geo-tilt:26;
  }
  .shell{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    align-items:start;
    row-gap:0;
    padding-top:clamp(.4rem,1.2vh,.9rem);
  }
  .bio{margin-inline:auto}
  /* A pilha 3D "vaza" verticalmente além da própria caixa por design (é o que
     deixa a próxima/anterior carta espiando) — no desktop sobra espaço acima e
     abaixo do carrossel para isso. No mobile o carrossel fica colado no
     quadrado de informações, então sem conter esse vazamento as cartas de trás
     cobriam o rodapé do bio (Brasília-DF e a base dos botões). */
  .work{overflow:hidden}
  .stage{perspective:1200px}
  /* Não há espaço fora da carta: a trilha flutua sobre a borda dela, enxuta
     para cobrir o mínimo possível da arte. */
  .rail{right:7px;gap:.6rem;padding:.4rem .3rem}
  .nav{width:30px}
  .nav svg{width:15px;height:15px}
}

/* Celular baixo: a pilha espalhada não cabe mais — volta a se compactar. */
@media (max-width:900px) and (max-height:700px){
  :root{--geo-gap:60}
}

/* Celular deitado: sobra largura e falta altura — duas colunas devolvem a
   altura inteira ao carrossel. */
@media (max-width:900px) and (orientation:landscape) and (min-width:600px){
  :root{--bio:min(300px,34vw,86vh);--card-w:min(460px,52vw,60vh)}
  .shell{
    grid-template-columns:auto 1fr;
    grid-template-rows:1fr;
    align-items:center;
    padding-top:0;
  }
  .bio{margin-inline:clamp(.75rem,3vw,2rem) clamp(.75rem,2vw,1.5rem)}
}

/* ═══ Acessibilidade ═══ */
@media (prefers-reduced-motion:reduce){
  html{transition:none}
  .card,.card::after,.link,.glass,.nav,.dot{transition-duration:.01ms!important}
  .link:hover,.nav:hover{transform:none}
}