/* Ayres Synthesizer — carregamento e o convite pra tocar */

/* ══════════════════ carregando ══════════════════
   Uma tela de carregamento, não uma porta. Ela não pede nada: aparece enquanto
   o painel monta e sai sozinha. A antiga tinha um botão "Ligar" cujo único
   trabalho era arrancar da pessoa o gesto que o navegador exige pra liberar
   áudio — e esse gesto vai acontecer de qualquer jeito na primeira tecla. */
#boot{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:#080b09;text-align:center;padding:24px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  transition:opacity 520ms var(--ease-out);
}
#boot .bin{width:min(340px,74vw)}
.bootline{
  font-size:12px;letter-spacing:.34em;color:var(--phos);
  text-shadow:0 0 12px rgba(87,255,154,.5);margin-bottom:16px;
}
/* a barra é a única coisa que se move: o resto fica parado, como um aparelho
   que está aquecendo */
.bootbar{
  height:2px;border-radius:2px;overflow:hidden;
  background:rgba(87,255,154,.14);box-shadow:inset 0 0 6px rgba(0,0,0,.8);
}
.bootbar i{
  display:block;height:100%;width:38%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--phos),transparent);
  animation:bootSweep 1.15s var(--ease-in-out) infinite;
}
@keyframes bootSweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.bootsub{
  margin-top:14px;font-size:10px;letter-spacing:.2em;
  color:rgba(87,255,154,.42);text-transform:uppercase;
}
.dots::after{content:'';animation:bootDots 1.4s steps(4,end) infinite}
@keyframes bootDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
#boot.gone{opacity:0;pointer-events:none}

/* ══════════════════ o convite ══════════════════
   Fósforo sobre o painel apagado, na altura do teclado, com o cursor piscando
   de terminal. É o texto que um instrumento de 1978 mostraria — e diz a única
   coisa que a pessoa precisa saber pra começar. Sem som até ela mandar. */
/* 30vh, não 46: a 46 o texto subia até a barra de figuras e cobria os botões.
   O convite aponta pro teclado, então mora logo acima dele. */
#press{
  position:fixed;left:0;right:0;bottom:0;height:30vh;z-index:58;
  display:grid;place-items:center;pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:linear-gradient(to top,rgba(4,10,6,.86),rgba(4,10,6,.45) 55%,transparent);
  animation:pressIn 700ms var(--ease-out) both;
}
#press[hidden]{display:none}
#press.gone{opacity:0;transition:opacity 420ms var(--ease-out);pointer-events:none}
@keyframes pressIn{from{opacity:0}to{opacity:1}}

.pressbox{position:relative;z-index:1;transform:translateY(-2vh)}
.pressline{
  font-size:clamp(18px,3.4vw,34px);letter-spacing:.3em;font-weight:700;
  color:var(--phos);
  /* o halo é o que faz parecer tubo, e não texto verde */
  text-shadow:0 0 4px rgba(87,255,154,.9),0 0 22px rgba(87,255,154,.55),
              0 0 60px rgba(87,255,154,.25);
  animation:pressPulse 2.6s var(--ease-in-out) infinite;
}
.caret{
  display:inline-block;width:.55em;height:1em;margin-left:.18em;
  vertical-align:-.12em;background:var(--phos);
  box-shadow:0 0 14px rgba(87,255,154,.8);
  animation:caretBlink 1.05s steps(1,end) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pressPulse{0%,100%{opacity:.86}50%{opacity:1}}
.presssub{
  margin-top:14px;font-size:clamp(9px,1.1vw,11px);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(87,255,154,.5);
}
/* as linhas de varredura, só dentro do convite: é o que amarra ao CRT */
#press::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}

#panel.off #power{animation:beacon 2.4s var(--ease-in-out) infinite}
@keyframes beacon{
  0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -5px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.5),0 0 0 0 rgba(255,154,46,.5)}
  55%{box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -5px 10px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.5),0 0 0 15px rgba(255,154,46,0)}
}
#panel{transition:filter 700ms var(--ease-out)}
/* ligar o tubo: risco de luz que se abre na vertical */
@keyframes crtOn{
  0%{transform:scaleY(.004) scaleX(.6);opacity:0}
  22%{transform:scaleY(.006) scaleX(1);opacity:1}
  100%{transform:scaleY(1) scaleX(1);opacity:1}
}
#crt .glass.boot{animation:crtOn 620ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.12s!important}
  .caret{animation:none;opacity:1}
}