/* Proposta 1 — escolhida pela Julia em 27/10.
   Ideia: o desenho da Marcella bem grande num círculo rosa sobre o amarelo, e só ele (até 27/10 era a foto num arco,
   com o nome escrito à mão dos dois lados e "Portfólio" ao fundo). */

:root {
  --fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fonte-texto: "Bricolage Grotesque", system-ui, sans-serif;
}

.hero {
  --mx: 0;
  --my: 0;
  position: relative;
  --hero-base: clamp(640px, 100svh, 980px);
  height: calc(var(--hero-base) + var(--papel-tam));   /* + uma fileira de desenhos no fim (pedido da Julia) */
  overflow: clip;
  isolation: isolate;
}

.hero__palco {
  position: absolute;
  bottom: var(--papel-tam);   /* círculo no mesmo lugar de antes da fileira extra; ela fica embaixo */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: calc(min(42vw, 560px, 68svh) * var(--circ-tam, 1));   /* régua "Círculo" da barra (?tamanho=) */
  height: calc(var(--hero-base) * 0.82);
}

/* Círculo com o desenho da Marcella bem grande dentro (no lugar da foto, pedido da Julia em 27/10). Três camadas
   com as cores da marca: o anel (o círculo), o miolo amarelo e o traço do desenho (a imagem só do traço como
   máscara). Assim o miolo é o mesmo amarelo do site, e o botão "Círculo" da barra (data-circulo) troca a cor do anel:
   em amarelo, anel e miolo viram um disco só. */
:root {
  --circ-anel: var(--p-forma);
  --circ-miolo: var(--cor-fundo);
  --circ-traco: var(--cor-destaque);
}

/* cor do desenho (botão "Desenho" da barra, ?logo=, vale para qualquer home): rosa (padrão) ou rosa forte.
   Anel colorido acompanha a cor do desenho; anel amarelo (página rosa) continua amarelo. */
:root[data-cor-desenho="forte"] { --circ-traco: var(--cor-apoio-2); }
:root:not([data-cores="invertidas"]):not([data-circulo]) { --circ-anel: var(--circ-traco); }

/* amarelo: o miolo fica transparente, senão a borda dele sobre o anel da mesma cor deixa um fio fino visível */
:root[data-circulo="amarelo"] { --circ-anel: var(--cor-fundo); --circ-miolo: transparent; }
:root[data-circulo="rosa-claro"] { --circ-anel: var(--cor-apoio-1); }
:root[data-circulo="vermelho"] { --circ-anel: var(--cor-apoio-2); }
:root[data-circulo="escuro"] { --circ-anel: var(--cor-texto-forte); }

.hero__circulo {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--circ-anel);
  translate: calc(var(--mx) * 6px) calc(var(--my) * 4px);
  transition: background-color 0.6s var(--curva);
}

.hero__miolo {
  position: relative;
  grid-area: 1 / 1;
  width: calc(100% - 2 * 2%);   /* anel fino, fixo em 2% do raio (escolha da Julia, 27/10) */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--circ-miolo);
  translate: calc(var(--mx) * 10px) calc(var(--my) * 6px);
}

/* o desenho fica por cima do anel e do miolo, com tamanho próprio (régua "Desenho", ?desenho=, % do círculo):
   mudar a grossura do anel não muda o desenho */
.hero__traco {
  grid-area: 1 / 1;
  width: var(--circ-desenho, 86%);
  aspect-ratio: 1;
  background: var(--circ-traco);
  translate: calc(var(--mx) * 10px) calc(var(--my) * 6px);
  mask: url("/img/marcella-desenho-traco-960.png") center / 100% no-repeat;
}

/* Papel de parede (a home escolhida pela Julia em 27/10, entre 4 exemplos): o desenho pequeno repetido no fundo e o
   círculo grande no meio. Duas camadas, para cada cor poder mudar no botão "Bolinhas" da barra (data-papel): as bolinhas (::before) e o traço do desenho (::after, a
   imagem só do traço usada como máscara). */
:root {
  --papel-tam: 112px;
  --papel-circulo: var(--cor-apoio-1);
  --papel-traco: var(--cor-destaque);
}

:root[data-papel="rosa"] { --papel-circulo: var(--cor-destaque); --papel-traco: var(--cor-fundo); }
:root[data-papel="vermelho"] { --papel-circulo: var(--cor-apoio-2); --papel-traco: var(--cor-fundo); }
:root[data-papel="sem"] { --papel-circulo: transparent; }
:root[data-papel="amarelo"] { --papel-circulo: var(--cor-fundo); }
/* liso: sem papel de parede, só a cor da página (botão "Fundo" da barra, vale para qualquer home salva) */
:root[data-papel="liso"] .hero__papel,
:root[data-fundo-hero="liso"] .hero__papel { display: none; }

/* camada do papel de parede (sem esmaecer nas bordas: escolha da Julia, 27/10) */
.hero__papel {
  position: absolute;
  inset: 0 0 auto;
  /* só fileiras inteiras: a altura desce até a última fileira que cabe por completo (pedido da Julia: fileira que
     começa vai até o fim) */
  height: 100%;
  height: round(down, 100%, var(--papel-tam));
  z-index: -1;
  pointer-events: none;
}

.hero__papel::before,
.hero__papel::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
}

.hero__papel::before {
  background: radial-gradient(circle, var(--papel-circulo) 0 41%, transparent 42%)
    50% 0 / var(--papel-tam) var(--papel-tam);   /* centrado no eixo x: o que corta na esquerda corta igual na direita */
}

.hero__papel::after {
  background: var(--papel-traco);
  mask: url("/img/marcella-desenho-traco-240.png") 50% 0 / var(--papel-tam) var(--papel-tam);
}

/* aro amarelo em borda (e não outline): o fundo passa por baixo dela, então não sobra o fio de serrilhado entre os dois */
.hero__circulo {
  border: 10px solid var(--cor-fundo);
  box-shadow: 10px 10px 0 0 var(--cor-texto-forte);
}

@media (max-width: 640px) {
  :root { --papel-tam: 72px; }
}

.intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e5);
  padding: var(--e8) clamp(var(--e4), 6vw, var(--e9)) 0;
}

.intro__oi {
  grid-column: 1 / span 3;
  margin: 0;
  font-weight: 600;
}

.intro__frase {
  grid-column: 4 / span 8;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--t-h2), 5vw, 4.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 75;
  line-height: 0.95;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .hero {
    --hero-base: max(640px, 92svh);
  }

  .hero__palco {
    width: 84vw;
    height: calc(var(--hero-base) * 0.7);
  }

  .hero__circulo {
    bottom: 24%;
  }

  .intro {
    grid-template-columns: 1fr;
    padding-top: var(--e7);
  }

  .intro__oi,
  .intro__frase {
    grid-column: 1;
  }
}

@media (min-width: 641px) {
  /* modo ajuste, 27/10: "Quem sou" menor e mais à esquerda; o nome da NegritudeNjoada
     bem maior, vazando pelas bordas. Só no layout A (no B e no C esses títulos são outros) */
  html:not([data-layout]) #sobre .sec__fantasma {
    translate: -88px -11px;
    scale: 0.839;
  }

  html:not([data-layout]) #t-nj {
    translate: 482px -59px;
    scale: 2.174;
  }

  /* layout C (modo ajuste, 27/10): mais respiro embaixo da frase do intro */
  [data-layout="c"] .intro__frase {
    padding-bottom: 60px;
  }
}

/* Animação do círculo: botão "Animação" da barra (tecla A; data-animacao, ?animacao=). Só na entrada ou em resposta a
   um gesto, nunca em loop; quem pediu menos movimento não vê nenhuma.
   aceno (padrão desde 27/10, escolha da Julia): nada na entrada, só o desenho balança quando o mouse passa (ou o dedo
   toca) · abre: o círculo abre de baixo e o desenho sobe · carimbo: entra girado e assenta como adesivo ·
   rolagem: ao rolar a página, o círculo diminui e inclina (CSS nativo) · nenhuma: tudo parado. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-animacao]) .hero__circulo:hover .hero__traco,
  :root:not([data-animacao]) .hero__circulo:active .hero__traco {
    animation: aceno 0.7s ease-in-out;
  }

  [data-animacao="abre"] .hero__circulo,
  [data-animacao="rolagem"] .hero__circulo {
    animation: circulo-abre 1.4s cubic-bezier(0.65, 0, 0.35, 1) both;   /* devagar no começo: dá para ver o círculo crescendo */
  }

  [data-animacao="abre"] .hero__miolo,
  [data-animacao="abre"] .hero__traco,
  [data-animacao="rolagem"] .hero__miolo,
  [data-animacao="rolagem"] .hero__traco {
    animation: foto-surge 1.2s 0.25s var(--curva) both;
  }

  [data-animacao="carimbo"] .hero__circulo {
    animation: carimbo 0.7s 0.15s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  }

  @supports (animation-timeline: scroll()) {
    [data-animacao="rolagem"] .hero__palco {
      animation: circulo-rola linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}

@keyframes carimbo {
  from { opacity: 0; scale: 1.5; rotate: -14deg; }
  60% { opacity: 1; }
  to { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes circulo-rola {
  to { scale: 0.7; rotate: 10deg; opacity: 0.6; }
}

@keyframes aceno {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -8deg; }
  45% { rotate: 6deg; }
  70% { rotate: -3deg; }
}

@keyframes circulo-abre {
  from { clip-path: circle(0% at 50% 100%); }
  to { clip-path: circle(120% at 50% 100%); }   /* do pé até os cantos de cima: mais que o raio */
}

@keyframes foto-surge {
  from { opacity: 0; transform: translateY(8%); }
  to { opacity: 1; transform: none; }
}