/* ==========================================================================
   HEADER + HERO
   ========================================================================== */

/* ── header ────────────────────────────────────────────────────────────── */
/* Sem backdrop-filter aqui, de propósito: backdrop-filter (como transform e
   filter) transforma o elemento em bloco de contenção para descendentes
   position:fixed. O menu off-canvas é filho deste cabeçalho, então ele
   passava a ser posicionado em relação aos 65px do header em vez da tela
   inteira — abria com 136px de altura em vez de 800px. Fundo sólido resolve
   e ainda economiza o custo de compor um desfoque a cada quadro. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--line-soft); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: clamp(64px, 7vw, 88px);
}

/* marca */
.brand {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.brand__name {
  position: relative;
  font-size: clamp(.82rem, .74rem + .3vw, .96rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.brand__dot {
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .45em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .08em;
}

/* nav */
.nav { margin-left: auto; }

.nav__list {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.4rem);
}

.nav__list a {
  position: relative;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.5em;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__list a:hover { color: var(--accent); }
.nav__list a:hover::after { transform: scaleX(1); }

.site-header__cta { flex-shrink: 0; }

/* hambúrguer */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0 10px;
}

.nav-toggle span {
  display: block;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s linear;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }


/* ── hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(2.4rem, 1rem + 4.4vw, 5rem);
  padding-bottom: 0;      /* a foto encosta na divisa da seção, como no layout */
  border-bottom: 1px solid var(--line-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* ── coluna de texto ── */
.hero__copy {
  position: relative;
  z-index: 3;
}

.hero__title {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.018em;
}

.hero__title-em {
  position: relative;
  display: inline-block;
  font-style: italic;
  padding-bottom: .04em;
}

.hero__lead {
  max-width: 34ch;
  margin-top: clamp(1.2rem, 2vw, 1.9rem);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
}

.hero__copy .chips { margin-top: clamp(1.4rem, 2.4vw, 2.1rem); }
.hero__copy .link-scribble { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }


/* ── coluna visual ── */
.hero__visual {
  position: relative;
  z-index: 2;
  min-height: clamp(400px, 48vw, 680px);
  display: grid;
  place-items: end center;

  /* ── zona de respeito do rosto ──
     A foto trava em 512px enquanto a coluna continua crescendo, então
     posicionar os cards em % da coluna descola do rosto e ele acaba coberto
     em faixas intermediárias de largura. Estas variáveis repetem a geometria
     da foto para que os limites acompanhem a imagem, e não a coluna.
     Frações medidas na própria michelle-hero.png: o rosto ocupa 36,3%–65,1%
     na horizontal e termina a 48,1% da altura. */
  --photo-w: min(98%, 512px);
  --photo-x: -3%;                                  /* margin-left da foto */
  --folga: 16px;      /* respiro em px: em % ele encolheria junto com a foto */
  --face-right: calc(var(--photo-x) + .651 * var(--photo-w) + var(--folga));
  --face-left:  calc(var(--photo-x) + .363 * var(--photo-w) - var(--folga));
  /* distância entre a base da foto e o queixo (a foto é alinhada embaixo) */
  --face-floor: calc(.566 * var(--photo-w));
}

/* mancha terracota atrás da foto — ancorada à coluna visual */
.hero__blob {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -24%;
  width: 108%;
  aspect-ratio: 1 / 1.1;
  background: var(--accent);
  border-radius: 46% 54% 40% 60% / 62% 44% 56% 38%;
  opacity: .88;
}

.hero__photo {
  position: relative;
  z-index: 2;
  width: min(98%, 512px);
  justify-self: start;
  align-self: end;
  margin-left: -3%;
}

.hero__photo img {
  width: 100%;
  filter: drop-shadow(0 26px 44px rgba(32, 22, 16, .22));
}

/* cards flutuantes */
.float-card {
  position: absolute;
  z-index: 3;
  width: clamp(146px, 15vw, 202px);
  padding: .95rem 1.05rem 1.05rem;
  background: var(--cream-hi);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: float-y 7s var(--ease) infinite;
}

.float-card--views {
  top: 2%;
  left: var(--face-right);      /* começa depois do rosto */
  animation-delay: -1.2s;
}

.float-card--reach {
  /* abaixo do queixo: assim nunca alcança o rosto, seja qual for a largura */
  top: calc(100% - var(--face-floor) + 14px);
  right: calc(100% - var(--face-left));
  animation-delay: -3.6s;
}

.float-card__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.float-card__value {
  margin-top: .15em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.float-card__meta {
  font-size: var(--fs-micro);
  color: var(--muted);
}

.float-card__meta .up { color: var(--green); font-weight: 600; }

/* mini-gráficos — aspect-ratio casa com o viewBox, então o SVG preenche
   a largura do card sem letterbox nem distorção */
.spark {
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 38;
  margin-top: .55rem;
}

.spark--line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark--line .spark__path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 1.6s var(--ease) .5s forwards;
}

.spark--line .spark__dot {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  animation: fade-in .4s var(--ease) 1.9s forwards;
}

.spark--bars rect { fill: var(--accent); }
.spark--bars rect:nth-child(1) { fill: var(--accent-soft); }
.spark--bars rect:nth-child(2) { fill: var(--accent-soft); }
.spark--bars rect:nth-child(3) { fill: color-mix(in srgb, var(--accent) 70%, var(--cream-hi)); }
.spark--bars rect:nth-child(4) { fill: color-mix(in srgb, var(--accent) 70%, var(--cream-hi)); }

/* card do post */
.post-card {
  position: absolute;
  z-index: 4;
  /* posicionado pela esquerda: assim o card comeca depois do rosto,
     em vez de depender da largura sobrando a direita */
  left: var(--face-right);
  bottom: 13%;
  width: clamp(210px, 21vw, 290px);
  background: var(--cream-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: float-y 8.5s var(--ease) -2s infinite;
}

.post-card__top {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .75rem;
}

/* a marca da Elevamos no lugar da foto de perfil — só a seta, que é a parte
   do logo que ainda se lê a 24px; o lockup inteiro viraria borrão */
.post-card__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-soft);
  object-fit: cover;
  flex-shrink: 0;
}

.post-card__handle {
  font-size: var(--fs-micro);
  font-weight: 600;
}

.post-card__dots {
  margin-left: auto;
  font-size: .6rem;
  color: var(--muted-2);
  letter-spacing: .1em;
}

.post-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--ink);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacidade cheia: o .82 existia para escurecer o fundo atrás da legenda
     sobreposta, que saiu quando a arte real entrou */
}

.post-card__actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem .75rem .7rem;
}

.post-card__action {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--fs-micro);
  color: var(--muted);
}

.post-card__action svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-card__action:first-child svg { fill: var(--accent); stroke: var(--accent); }
.post-card__action--end { margin-left: auto; }


/* ── posicionamento dos riscos do hero ── */
.doodle--sparkle-a {
  z-index: 3;
  top: 15%;
  left: 3.5%;
  width: clamp(18px, 2vw, 28px);
  fill: var(--ink);
  stroke: none;
  opacity: .8;
}

.doodle--dashes {
  z-index: 1;
  top: 4%;
  right: 2.5%;
  width: clamp(30px, 3.4vw, 48px);
  stroke: var(--cream-hi);
  opacity: .85;
}

.doodle--swoop {
  z-index: 1;
  top: 26%;
  left: 41%;
  width: clamp(64px, 7vw, 104px);
  stroke-width: 1.5;
  opacity: .38;
}

.hero .seal {
  left: 46%;
  top: 8%;
  z-index: 5;
}


/* ── animações ─────────────────────────────────────────────────────────── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }



/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* ── sem margem sobrando fora do shell: os cards não podem mais avançar
      tanto para fora da coluna, senão saem da viewport ───────────────── */
@media (max-width: 1400px) {
  .post-card { width: clamp(190px, 18vw, 250px); }
  /* as posições saem das variáveis do rosto; aqui só o tamanho */
}

/* ── laptop: 2 colunas ficam apertadas — título e cards recuam ────────── */
@media (max-width: 1180px) {
  :root { --fs-hero: clamp(2.4rem, 1rem + 4.6vw, 4.1rem); }

  .nav__list { gap: 1.05rem; }

  .hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 2.4vw, 2.4rem);
  }

  /* a foto muda de tamanho aqui, então a zona do rosto acompanha */
  .hero__visual {
    min-height: clamp(360px, 42vw, 520px);
    --photo-w: min(100%, 380px);
    --photo-x: 0%;
  }

  .hero__photo { width: min(100%, 380px); margin-left: 0; }

  .hero__blob { right: -20%; width: 116%; }

  .float-card { width: clamp(132px, 14vw, 164px); padding: .8rem .9rem .9rem; }
  .float-card--views { top: 1%; }

  .post-card { bottom: 10%; width: clamp(170px, 17vw, 200px); }

  .doodle--swoop { display: none; }
  .hero .seal { display: none; }
}

/* ── tablet: menu off-canvas + hero em 1 coluna ───────────────────────── */
@media (max-width: 940px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    margin-left: 0;
    padding: 6.5rem 2rem 2rem;
    background: var(--cream-hi);
    border-left: 1px solid var(--line-soft);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .42s var(--ease);
    z-index: 70;
  }

  .nav.is-open { transform: none; }

  .nav__list { flex-direction: column; gap: 1.5rem; }
  .nav__list a { font-size: .95rem; letter-spacing: .1em; }
  .nav__list a::after { bottom: -.35em; }

  .site-header__cta { display: none; }

  /* Abaixo do z-index 60 do cabeçalho, e não acima. O menu vive dentro do
     cabeçalho, que é um contexto de empilhamento — com o véu em 65 no body,
     ele era pintado por cima de todo esse contexto e lavava os itens do
     menu, por mais alto que fosse o z-index deles. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(20, 17, 15, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }

  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .hero { padding-bottom: 0; }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 3.5rem);
  }

  .hero__lead { max-width: 46ch; }

  .hero__visual {
    min-height: clamp(400px, 64vw, 540px);
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .hero__photo {
    width: min(78%, 370px);
    justify-self: center;
    margin-left: 0;
  }

  .hero__blob {
    top: 2%;
    right: 50%;
    translate: 50% 0;
    width: min(96%, 400px);
  }

  /* uma coluna só, foto centralizada: a ancoragem pelo rosto não vale mais,
     então zeramos as bordas opostas para as regras daqui prevalecerem */
  .float-card--views { top: 0; left: auto; right: -1%; }
  .float-card--reach { top: auto; right: auto; bottom: 30%; left: -1%; }
  /* volta a ancorar pela direita: aqui o layout e de uma coluna e a foto
     fica centralizada, entao o offset pela esquerda nao serve */
  .post-card { left: auto; right: -1%; bottom: 1%; }

  .doodle--sparkle-a { top: 4%; left: 6%; }
  .doodle--swoop { display: none; }
  .doodle--dashes { top: 3%; right: 5%; stroke: var(--ink); opacity: .32; }
}

/* ── celular: cards deixam de flutuar e viram grade legível ───────────── */
@media (max-width: 660px) {
  .hero { padding-bottom: clamp(2rem, 6vw, 3rem); }

  .hero__title { line-height: 1.07; }
  .hero__lead { max-width: none; }

  .hero__visual {
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .7rem;
    padding-top: .5rem;
  }

  .hero__photo {
    grid-column: 1 / -1;
    width: min(82%, 320px);
    margin-inline: auto;
  }

  /* No desktop a foto encosta na divisa da seção; empilhada ela ficaria com
     um corte seco na cintura, então dissolve na base. A dissolvência termina
     em 84% e não em 100%: chegando ao fim da imagem, a parte mais apagada
     ficava colada nos cards de baixo e parecia vazar por cima deles. */
  .hero__photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 54%, transparent 84%);
    mask-image: linear-gradient(to bottom, #000 54%, transparent 84%);
    filter: none;
  }

  .hero__blob {
    top: 0;
    width: min(94%, 330px);
    aspect-ratio: 1 / 1.02;
  }

  .float-card,
  .post-card {
    position: static;
    width: auto;
    animation: none;
  }

  .float-card { border-radius: var(--radius); }

  .post-card {
    grid-column: 1 / -1;
    max-width: 320px;
    margin-inline: auto;
  }



  .doodle--dashes { display: none; }
}

/* ── celular estreito ─────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .hero__visual { grid-template-columns: 1fr; }

  .float-card {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .chips { gap: .4rem; }
  .chip { padding: .45em .85em; }
}