/* Abertura — "ferro em brasa"
   O overlay só existe visualmente quando há JS (classe .js no <html>, posta no <head>)
   e a abertura deve tocar (sem .intro-off). Sem JS, o conteúdo aparece direto. */

#intro { display: none; }

.js #intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  --r: 2%;
}

/* véu preto: cobre a página inteira; é só nele que o buraco da revelação abre.
   A marca e os efeitos ficam por cima dele, fora da máscara — assim a marca ainda está
   na tela enquanto o site aparece atrás, sem o "apagão" entre a logo e a abertura.
   (inset negativo: o tremor do impacto desloca o overlay alguns px) */
#intro .veil {
  position: absolute;
  inset: -8px;
  background: var(--c-black);
}

/* revelação: buraco radial que se abre do centro (--r anima de 2% a 160%).
   A máscara só existe durante a revelação: o WebKit (Safari) desenha um gradiente
   de tamanho zero como transparente, o que deixava o hero aparecer por baixo. */
.js #intro.is-revealing .veil {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--r) - 16%), #000 var(--r));
          mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--r) - 16%), #000 var(--r));
}

.js.intro-off #intro,
.js #intro.is-hidden { display: none; }

/* trava a rolagem enquanto a abertura toca */
.js:not(.intro-off) body.intro-playing { overflow: hidden; }

/* horizonte — filete dourado no centro */
#intro .horizon {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 25%, var(--c-gold) 75%, transparent);
  transform: scaleX(0);
  opacity: .8;
}

/* poeira e faíscas (spans criados pelo intro.js) */
#intro .dust, #intro .sparks { position: absolute; inset: 0; pointer-events: none; }
#intro .dust span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: 0;
  will-change: transform, opacity;
}
#intro .sparks span {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 20px;
  border-radius: 2px;
  background: linear-gradient(var(--c-offwhite), var(--c-gold) 60%, transparent);
  box-shadow: 0 0 8px rgba(201, 164, 92, .9);
  opacity: 0;
  will-change: transform, opacity;
}

/* calor do impacto: véu quente, discreto, que some logo */
#intro .cloud {
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, rgba(201, 164, 92, .16), rgba(42, 43, 46, .5) 40%, transparent 72%);
  opacity: 0;
  transform: scale(.4);
}

/* onda de choque: anel dourado fino que se expande a partir da marca */
#intro .ring {
  position: absolute;
  left: 50%; top: 50%;
  width: min(60vmin, 520px); height: min(60vmin, 520px);
  margin: calc(min(60vmin, 520px) / -2) 0 0 calc(min(60vmin, 520px) / -2);
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}

/* a marca: ferro traçado (com brasa atrás) + nome */
#intro .mark {
  position: absolute;
  left: 50%; top: 50%;
  width: min(62vmin, 520px);
  /* mesmo estado inicial que o intro.js aplica: ferro pequeno, centrado no próprio centro */
  transform: translate(-50%, -30.9%) scale(.3);
  transform-origin: 50% 30.9%;
}
#intro .mark svg { width: 100%; height: auto; overflow: visible; }
#intro .mark #ferro { color: var(--c-offwhite); }
/* traçado começa vazio (pathLength=1) — com GSAP lento, o F nunca aparece pronto antes;
   vale para o ferro e para as duas camadas de brasa */
#intro .mark #ferro path,
#intro .mark .brasa path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#intro .mark #wordmark { opacity: 0; }

/* flash do impacto */
#intro .flash {
  position: absolute;
  inset: 0;
  background: var(--c-red);
  opacity: 0;
  mix-blend-mode: screen;
}

/* Pular — discreto, desde o primeiro frame */
#intro [data-skip] {
  position: absolute;
  top: 24px; right: 24px;
  z-index: 2;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--c-offwhite);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .6;
  cursor: pointer;
  transition: opacity .2s ease;
}
#intro [data-skip]:hover,
#intro [data-skip]:focus-visible { opacity: 1; }