/* ==========================================================================
   Hero
   Camadas (de trás para frente):
     céu elétrico (canvas: nuvens, relâmpagos, partículas) > "Fael Developer" atrás >
     retrato > letras sobre o retrato, invertidas > contorno e energia dos olhos > textos

   A geometria do retrato fica em variáveis (--p-*). Posições do rosto nos frames
   originais (1080 x 1350): centro x = 0,512; olhos y = 0,38; boca y = 0,53; queixo y = 0,615.
   O título começa logo abaixo da boca (--brand-top) e cruza queixo, pescoço e gola,
   deixando olhos, nariz e boca livres.
   Sem JavaScript: retrato estático em <img> e o título em HTML passando atrás da cabeça.
   ========================================================================== */

.hero {
  /* Celular e tablet em pé */
  --p-w: min(112cqw, 46rem, 70svh);
  --p-h: calc(var(--p-w) * 1.25);
  --p-top: 0px;
  --ruler-x: max(var(--gutter), (100cqw - var(--container)) / 2);
  --title-w: min(100cqw - 2 * var(--gutter), var(--container));
  --brand-top: 0.6; /* topo das hastes de "Fael Developer", em fração da altura do retrato */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(var(--header-top) + var(--header-h) + 1.5rem) 0 2.75rem;
  container-type: inline-size;
}

/* a base da Hero se funde ao fundo da página */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(to top, var(--void) 8%, rgb(1 2 3 / 0));
}

/* Céu ------------------------------------------------------------------------ */

.hero__atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* reserva sem JavaScript: céu escuro, sem foco de luz atrás do retrato */
  background: linear-gradient(180deg, #030914 0%, #02050b 55%, var(--void) 100%);
}

.hero__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Palco: título atrás, retrato, canvas ------------------------------------------ */

.hero__stage {
  position: relative;
  order: 2;
  height: var(--p-h);
  margin-top: 0.75rem;
  pointer-events: none;
}

.hero__portrait {
  position: absolute;
  top: var(--p-top);
  /* o rosto (centro em x = 0,512 do frame) fica sempre no centro real da tela */
  left: calc(50cqw - var(--p-w) * 0.512);
  z-index: 2;
  width: var(--p-w);
  height: var(--p-h);
  /* esmaecimento do retrato: base e laterais (o canvas lê estes valores) */
  --fade-bottom-start: 0.56;
  --fade-bottom-end: 0.9;
  --fade-side: 0.14;
}

.hero__poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 56%, transparent 90%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 56%, transparent 90%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
  transition: opacity 0.6s var(--ease-out);
}

/* "Fael Developer" em HTML: posição de referência do texto desenhado no canvas e
   versão sem JavaScript. O JavaScript mede a fonte e define --brand-fs para o texto
   ocupar exatamente a largura útil (--title-w); o valor abaixo é a aproximação
   (em maiúsculas, em Bodoni Moda, "FAEL DEVELOPER" mede cerca de 8,36 vezes o tamanho
   da fonte; o topo das maiúsculas fica 0,115 em abaixo do topo da caixa de linha). */
.hero__brand {
  --brand-color: var(--frost);           /* "Fael Developer" fora do retrato */
  --brand-invert-tint: #a8d2ff;          /* tom azul da inversão sobre o rosto */
  --brand-invert-contrast: 0.7;          /* reforço de contraste da inversão (0 a 1) */
  --fs: var(--brand-fs, calc(var(--title-w) / 8.4));
  position: absolute;
  top: calc(var(--p-top) + var(--p-h) * var(--brand-top) - var(--fs) * 0.115);
  left: var(--ruler-x);
  z-index: 1;
  width: var(--title-w);
  translate: var(--brand-shift, 0px) 0;
  color: var(--brand-color);
  font-family: var(--font-display);
  font-size: var(--fs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 639px) {
  .hero__brand {
    font-weight: 400; /* hastes um pouco mais firmes em tamanhos menores */
  }
}

/* Posição e tamanho definidos pelo JavaScript (cobrem só retrato + texto) */
.hero__canvas,
.hero__fx {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.hero__fx {
  z-index: 4;
}

/* neblina de primeiro plano: na frente do retrato, atrás dos textos */
.hero__mist {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  max-width: none;
  height: 100%;
  pointer-events: none;
}

.hero.is-live .hero__canvas,
.hero.is-live .hero__fx {
  opacity: 1;
}

.hero.is-live .hero__poster {
  opacity: 0;
}

.hero.is-live .hero__brand {
  color: transparent;
}

/* Textos ------------------------------------------------------------------- */

.hero__content {
  display: contents;
}

.hero__intro,
.hero__block {
  position: relative;
  z-index: 5;
  width: var(--content-w);
  margin-inline: auto;
}

.hero__intro {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.hero__intro .spark-dot {
  margin-right: 0.15rem;
}

.hero__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero__role {
  color: var(--mist);
  font-size: var(--fs-small);
}

/* Título, descrição e botões formam um único bloco. Com largura suficiente (o bloco é um
   contêiner), título e descrição ficam lado a lado e os botões abaixo dos dois; em telas
   estreitas, um embaixo do outro. */
.hero__block {
  order: 3;
  margin-top: calc(var(--p-h) * -0.17);
  container: hero-block / inline-size;
}

.hero__copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.hero__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.hero__lead {
  max-width: 40ch;
  color: var(--mist);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

@container hero-block (min-width: 28rem) {
  .hero__copy {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 4.5cqi, 1.75rem) clamp(1.25rem, 5cqi, 2.75rem);
    align-items: start;
  }

  .hero__copy > .hero__title {
    max-width: none;
    font-size: clamp(1.6rem, 6.6cqi, 2.75rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  /* a descrição começa na altura do título, separada por um fio vertical */
  .hero__copy > .hero__lead {
    max-width: 36ch;
    padding: 0.3em 0 0.1em clamp(1rem, 3.2cqi, 1.6rem);
    border-left: 1px solid var(--line-strong);
    font-size: clamp(0.875rem, 2.55cqi, 1rem);
    line-height: 1.62;
    text-wrap: pretty;
  }

  .hero__copy > .hero__actions {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* nome e função: só quando não estão no cabeçalho (ver header.css) */
@media (min-width: 561px) {
  .hero__intro {
    display: none;
  }

  .hero__stage {
    margin-top: 0;
  }
}

/* Tablet em pé: retrato um pouco menor para os textos aparecerem na primeira tela */
@media (min-width: 640px) and (max-aspect-ratio: 5/4) {
  .hero {
    --p-w: min(112cqw, 44svh);
  }
}

/* --------------------------------------------------------------------------
   Desktop e paisagem: composição de pôster. O retrato ocupa a altura toda,
   alinhado pela base; o rosto fica no centro. "Fael Developer" cruza a tela de
   margem a margem; o título e o texto de apoio ficam dos lados do rosto, acima dele.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) {
  .hero {
    --p-h: min(93cqh, 125cqw);
    --p-w: calc(var(--p-h) * 0.8);
    --p-top: calc(100cqh - var(--p-h));
    --brand-top: 0.565;
    --title-top: calc(var(--p-top) + var(--p-h) * var(--brand-top));
    --side-gap: clamp(1.5rem, 4.5cqh, 3rem);
    display: block;
    height: 100vh;
    height: clamp(640px, 100svh, 1100px);
    padding: 0;
    container-type: size;
  }

  .hero::after {
    height: 16%;
  }

  .hero__stage {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }

  .hero__portrait {
    --fade-bottom-start: 0.76;
    --fade-bottom-end: 0.99;
    --fade-side: 0.1;
  }

  .hero__poster {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 76%, transparent 99%),
      linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:
      linear-gradient(to bottom, #000 76%, transparent 99%),
      linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }

  .hero__content {
    position: relative;
    z-index: 5;
    display: block;
    width: var(--content-w);
    height: 100%;
    margin-inline: auto;
    pointer-events: none;
  }

  .hero__content > * {
    pointer-events: auto;
  }

  .hero__intro,
  .hero__block {
    position: absolute;
    width: auto;
    margin: 0;
  }

  .hero__intro {
    top: calc(var(--header-top) + var(--header-h) + clamp(1.25rem, 3.5cqh, 2.5rem));
    left: 0;
  }

  /* Composição simétrica: o rosto no centro real; o título à esquerda e a descrição à
     direita, cada um numa coluna lateral que termina antes do cabelo e do contorno elétrico
     (--side-w); os botões centralizados logo abaixo de "FAEL DEVELOPER". */
  .hero {
    --side-w: min(30rem, 50cqw - var(--p-w) * 0.3 - var(--ruler-x) - 1.5rem);
    --block-top: calc(var(--header-top) + var(--header-h) + clamp(1.5rem, 5cqh, 3.5rem));
  }

  .hero__block,
  .hero__copy {
    display: contents;
  }

  .hero__title,
  .hero__lead,
  .hero__actions {
    position: absolute;
    z-index: 5;
    margin: 0;
  }

  .hero__title {
    top: var(--block-top);
    left: 0;
    width: var(--side-w);
    max-width: none;
    font-size: clamp(1.75rem, 1rem + 2cqw, 3rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  /* a descrição fica na mesma altura, encostada na margem direita, com um fio à esquerda */
  .hero__lead {
    top: calc(var(--block-top) + 0.35rem);
    right: 0;
    width: min(var(--side-w), 25rem);
    max-width: none;
    padding-left: clamp(1rem, 1.5cqw, 1.5rem);
    border-left: 1px solid var(--line-strong);
    font-size: clamp(0.875rem, 0.8rem + 0.25cqw, 1rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  /* botões: centro da tela, logo abaixo do nome (sobre a camisa, área escura) */
  .hero__actions {
    top: calc(var(--title-top) + 0.75 * var(--brand-fs, calc(var(--title-w) / 8.4)) + clamp(1.5rem, 4.5cqh, 3rem));
    left: 50%;
    flex-wrap: nowrap;
    justify-content: center;
    translate: -50% 0;
  }
}

/* Bloco estreito (portáteis 16:10, tablets na horizontal): botões mais compactos para
   ficarem lado a lado sem invadir o rosto */
@container hero-block (max-width: 23.5rem) {
  .hero__actions {
    gap: 0.6rem;
  }

  .hero__actions .btn {
    gap: 0.5rem;
    padding-inline: 1.1rem;
    font-size: 0.875rem;
  }
}

/* Paisagem menos alongada (4:3, 3:2): retrato menor, ainda alinhado pela base, para o
   bloco de textos (mais estreito aqui) caber entre o cabeçalho e "FAEL DEVELOPER" */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) {
  .hero {
    --p-h: 86cqh;
  }
}