/* =====================================================================
   INTRO "DENTRO DA MENTE" — overlay da cabeça de partículas
   (fica entre a página e o PRESS START: 99997 < 99999)
   ===================================================================== */

.head-intro-canvas{
  position:fixed; inset:0;
  z-index:99997;
  background:radial-gradient(ellipse at center, #071018 0%, #030509 72%);
}

/* véu que cobre a página do load até a cabeça 3D assumir (substitui o PRESS START) */
#introVeil{
  position:fixed; inset:0;
  z-index:99996;
  background:radial-gradient(ellipse at center, #071018 0%, #030509 72%);
  transition:opacity .5s ease;
}
#introVeil.is-leaving{ opacity:0; pointer-events:none; }

/* flash da "entrada no olho" — cobre tudo no clímax e some revelando o hero */
/* vinheta: escurece as bordas e joga o olho pro centro do quadro */
.head-intro-vinheta{
  position:fixed; inset:0;
  z-index:99998;
  pointer-events:none;
  background:radial-gradient(ellipse 76% 66% at 50% 47%,
             transparent 40%, rgba(2,3,7,.55) 82%, rgba(2,3,7,.82) 100%);
}

/* GRÃO DE FILME
   Ruído gerado por feTurbulence, embutido como data URI — sem arquivo de
   imagem. Em "overlay" ele texturiza os meios-tons e deixa os pretos
   pretos, que é como o grão se comporta na película de verdade.
   A animação anda em steps(): grão real FERVE (troca a cada fotograma),
   não desliza suavemente. */
.head-intro-grao{
  position:fixed; inset:0;
  z-index:99999;
  pointer-events:none;
  /* 38% em "overlay": medido contra o quadro real, é onde o grão aparece
     no rosto sem acinzentar o fundo. Em "screen" ele apareceria também no
     preto, mas levantaria os pretos — e o fundo da página é preto de verdade. */
  opacity:.38;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:graoFerve .6s steps(1) infinite;
  will-change:background-position;
}
@keyframes graoFerve{
  0%   { background-position:0 0; }
  12%  { background-position:-37px 21px; }
  25%  { background-position:44px -33px; }
  37%  { background-position:-19px -48px; }
  50%  { background-position:52px 29px; }
  62%  { background-position:-58px 12px; }
  75%  { background-position:23px 55px; }
  87%  { background-position:-41px -17px; }
  100% { background-position:0 0; }
}
/* movimento reduzido: o grão fica, mas parado */
@media (prefers-reduced-motion: reduce){
  .head-intro-grao{ animation:none; }
}

.head-intro-flash{
  position:fixed; inset:0;
  z-index:100000;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse at center, #eaffd0 0%, #c6ff3d 45%, #05060a 100%);
  transition:opacity .45s ease;
}

.head-intro-skip{
  position:fixed; right:28px; bottom:24px;
  z-index:100001;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:rgba(230,237,239,0.55);
  background:rgba(5,6,10,0.5);
  border:1px solid rgba(198,255,61,0.25);
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.head-intro-skip:hover{ color:#c6ff3d; border-color:#c6ff3d; }