/* ==========================================================================
   Seção 00 — Hero
   Figma: node 355:3659 (1512 × 834)
   Título: Plus Jakarta Sans Medium 199.073px (13.166vw), tracking -6%
   Ajuste de margem: o desenho do título (da haste do "I" ao fim do "k")
   ocupa 6.877em. O tamanho é calculado para esse desenho caber exatamente
   entre as margens laterais (--pad, 64px no frame de 1512), alinhando o
   "I" ao logo. Em 1512 isso dá ~201px (Figma: 199px).
   ========================================================================== */

.hero {
  --hero-fs: calc((100vw - 2 * var(--pad)) / 6.877);
  position: relative;
  height: 100svh;
  min-height: 34rem;
  background: var(--c-red);
  color: var(--c-white);
  overflow: clip;
  isolation: isolate;
}

/* No Figma a linha de base do título fica exatamente no meio do hero.
   Com line-height 1, a baseline da Plus Jakarta Sans fica a 0.908em do topo
   da caixa (ascender 1.038 + meia-entrelinha -0.13). */
.hero__title {
  position: absolute;
  inset: 50% 0 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--hero-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  transform: translateY(-0.908em);
}

.hero__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* Ajuste óptico: centraliza o desenho das letras, não as caixas.
     Compensa o respiro do "I" (0.0825em) e o tracking negativo que sobra
     depois do "k" (0.048em), deixando a mesma margem nos dois lados. */
  padding-right: 0.1308em;
  white-space: nowrap;
}

.hero__word {
  display: block;
  will-change: transform;
}

/* Janela da foto: 223.588 × 113.451px no Figma; base alinhada à baseline do texto */
.hero__slot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 1.1232em;
  height: 0.5699em;
  margin: 0 0.2259em 0 var(--slot-ml, 0.2466em);
}

.hero__hold {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-ink);
  will-change: width, height, transform;
}

.hero__frame {
  position: absolute;
  inset: 0;
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* enquadramento de cada foto (--pos no HTML); sem ele, recorte central */
  object-position: var(--pos, 50% 50%);
}

/* Estados do ciclo de imagens (mesma lógica da referência) */
[data-image-cycle-item="active"] {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0s, visibility 0s ease 0s;
}
[data-image-cycle-item="previous"] {
  z-index: 2;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.3s ease 0.4s, visibility 0s ease 0.4s;
}
[data-image-cycle-item="not-active"] {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

/* Mobile (sem tela no Figma): proposta com o nome em duas linhas,
   alinhado à margem, para o título não ficar minúsculo. */
@media (max-width: 767px) {
  .hero {
    --hero-fs: 25.5vw;
  }
  .hero__title {
    transform: translateY(-58%);
    line-height: 0.92;
  }
  .hero__line {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 var(--pad);
  }
  /* Compensa o respiro lateral de cada letra inicial ("I" 0.0825em,
     "S" 0.0495em): o desenho das duas linhas começa exatamente na margem */
  .hero__word:first-child {
    margin-left: -0.0825em;
  }
  .hero__word:last-child {
    flex-basis: 100%;
    margin-left: -0.0495em;
  }
  .hero__slot {
    margin-right: 0;
  }
}

/* ---------- Estado inicial da intro (só com JS ativo) ----------
   Evita o "flash" do layout final antes da animação começar.
   O failsafe libera tudo se o JS falhar. */
.js:not(.intro-started):not(.intro-failsafe) .hero__title,
.js:not(.intro-started):not(.intro-failsafe) [data-intro-hide] {
  opacity: 0;
}