/* Cena 0: abertura (ROTEIRO.md §3.0). Overlay fixo sobre o céu: a cabeça do Forma em traço cinza
   carrega, acende em neon, respira e abre uma íris que revela o céu já vivo atrás.
   Só existe com html.com-abertura (o script do <head> decide; jornada.css esconde o resto). */

.abertura{
  /* Cinzas do roteiro (#59607d traço, #262d4f trilho) feitos das misturas dos tokens de tinta */
  --ab-cinza:color-mix(in srgb,var(--ink-300) 45%,var(--ink));
  --ab-trilho:color-mix(in srgb,var(--ink-300) 7%,var(--ink-850));
  --ab-cabeca:var(--ab-cinza);
  --ab-oculos:var(--ab-cinza);
  --ab-olhos:transparent;
  --ab-traco:3px;
  --ab-tamanho:clamp(116px,min(23vh,34vw),204px);
  position:fixed;inset:0;z-index:var(--z-abertura);
  overflow:hidden;isolation:isolate;
  color:var(--mist);
  /* Fundo da abertura da proposta da Maria Eduarda (.intro): azul tinta com brilhos radiais azuis */
  --ab-brilho-baixo:radial-gradient(ellipse 85% 60% at 50% 112%,color-mix(in srgb,var(--blue) 90%,transparent),transparent 72%);
  --ab-brilho-alto:radial-gradient(ellipse 45% 38% at 8% -4%,color-mix(in srgb,var(--blue-800) 80%,transparent),transparent 70%);
  --ab-brilho-lado:radial-gradient(ellipse 40% 30% at 96% 30%,color-mix(in srgb,var(--blue-800) 50%,transparent),transparent 70%);
  --ab-vinheta:radial-gradient(ellipse 80% 75% at 50% 44%,transparent 52%,color-mix(in srgb,var(--ink-950) 62%,transparent));
  /* A calha da barra de rolagem (scrollbar-gutter) fica fora do overlay e mostra o fundo tinta do <html>:
     a borda direita esmaece pra tinta pura e a emenda some */
  --ab-borda:linear-gradient(to left,var(--ink),transparent 56px);
}
.abertura-fundo{
  position:absolute;inset:0;z-index:0;
  background:var(--ab-borda),var(--ab-vinheta),var(--ab-brilho-baixo),var(--ab-brilho-alto),var(--ab-brilho-lado),var(--ink);
}

/* Palco: cabeça e barra, um pouco acima do meio da tela */
.abertura-palco{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(28px,4.4vh,44px);padding-bottom:9vh;
  pointer-events:none;
}
.abertura-cabeca{position:relative;width:var(--ab-tamanho);aspect-ratio:616/610;pointer-events:auto;transform-origin:50% 52%}
.abertura-desenho{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.abertura-desenho *{vector-effect:non-scaling-stroke;stroke-width:var(--ab-traco)}
.abertura-contorno{stroke:var(--ab-cabeca)}
.abertura-oculos{stroke:var(--ab-oculos)}
.abertura-olhos{stroke:var(--ab-oculos);fill:var(--ab-olhos)}
.abertura-olhos rect{transform-box:fill-box;transform-origin:center}

/* Luz do letreiro batendo na parede atrás dele: só aparece aceso (o JS controla a opacidade) */
.abertura-luz{
  position:absolute;inset:-70%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--yellow) 14%,transparent),color-mix(in srgb,var(--neon-azul) 6%,transparent) 38%,color-mix(in srgb,var(--neon-azul) 2%,transparent) 62%,transparent 84%);
}

/* Carga: trilho fino, preenchimento cinza com a ponta mais clara e porcentagem tabular */
.abertura-carga{display:flex;flex-direction:column;align-items:center;gap:12px}
.abertura-barra{position:relative;width:clamp(132px,15vw,200px);height:2px;border-radius:2px;background:var(--ab-trilho);overflow:hidden}
.abertura-barra-cheia{
  position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ab-cinza) 55%,var(--ink-300));
  transition:background-color .2s;
}
.abertura-porcentagem{font-size:13px;line-height:1;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-300)}
.abertura-numero{display:inline-block;min-width:3ch;text-align:right}

/* Pular: canto inferior direito (o HUD está escondido durante a abertura) */
.abertura-pular{
  position:absolute;z-index:3;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,28px);
  min-height:44px;padding:0 16px;border:1px solid color-mix(in srgb,var(--white) 22%,transparent);border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--white) 4%,transparent);color:var(--mist);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .2s,color .2s,opacity .3s var(--ease-quint);
}
.abertura-pular:hover{border-color:var(--yellow);color:var(--yellow)}
.abertura-pular:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* Aceso: letreiro neon nas cores do Forma (cabeça amarela, óculos e olhos azul presença claro) */
.abertura.acesa{--ab-cabeca:var(--yellow);--ab-oculos:var(--neon-azul);--ab-olhos:var(--neon-azul)}
.abertura.acesa .abertura-desenho:not(.abertura-halo){filter:drop-shadow(0 0 1.5px var(--yellow))}
.abertura.acesa .abertura-desenho:not(.abertura-halo) .abertura-oculos,
.abertura.acesa .abertura-desenho:not(.abertura-halo) .abertura-olhos{filter:drop-shadow(0 0 1.5px var(--neon-azul))}
.abertura.acesa .abertura-barra-cheia{background:var(--yellow)}
/* Aceso, a respiração mexe em escala e opacidade a cada quadro: camadas próprias, sem repintar */
.abertura.acesa .abertura-cabeca{will-change:transform,opacity}
.abertura.acesa .abertura-luz{will-change:opacity}
/* Halo: cópia do desenho feita pelo JS, traço grosso e desfocado; a respiração mexe só na opacidade */
.abertura-halo{opacity:0;filter:blur(7px);will-change:opacity}
.abertura-halo *{stroke-width:calc(var(--ab-traco) * 2.6)}
.abertura-halo .abertura-oculos *,.abertura-halo .abertura-olhos *{stroke-width:calc(var(--ab-traco) * 1.7)}
.abertura-halo .abertura-olhos{fill:none}

/* Íris: furo no fundo + anéis azul, amarelo e branco na borda (raios em variáveis, o JS escreve por quadro) */
.abertura.abrindo .abertura-fundo{
  background:
    radial-gradient(circle at var(--ab-cx) var(--ab-cy),transparent var(--ab-r0),var(--blue) calc(var(--ab-r0) + 1px),var(--blue) var(--ab-r1),var(--yellow) calc(var(--ab-r1) + 1px),var(--yellow) var(--ab-r2),var(--white) calc(var(--ab-r2) + 1px),var(--white) var(--ab-r3),transparent calc(var(--ab-r3) + 1.5px)),
    var(--ab-borda),var(--ab-vinheta),var(--ab-brilho-baixo),var(--ab-brilho-alto),var(--ab-brilho-lado),var(--ink);
  /* máscara: só o alfa conta, o furo mostra o céu */
  -webkit-mask-image:radial-gradient(circle at var(--ab-cx) var(--ab-cy),transparent var(--ab-r0),var(--ink) calc(var(--ab-r0) + 1px));
  mask-image:radial-gradient(circle at var(--ab-cx) var(--ab-cy),transparent var(--ab-r0),var(--ink) calc(var(--ab-r0) + 1px));
}
/* na íris a cabeça vira placa escura: o disco azul abre por trás dela, não através do traço */
.abertura.abrindo .abertura-desenho:not(.abertura-halo) .abertura-contorno{fill:var(--ink)}
.abertura.abrindo .abertura-pular,.abertura.abrindo .abertura-carga{opacity:0;pointer-events:none}
.abertura.abrindo{pointer-events:none}

@media(max-width:767px){
  .abertura{--ab-traco:2.5px}
  .abertura-palco{padding-bottom:7vh}
}
@media print{.abertura{display:none!important}}