/* Console Bailder — tela "ligar" (#power) e vinheta da marca (#boot).  Dono: VINHETA.
   Só transform/opacity animam. Máscaras só com gradiente (url() em mask é bloqueado em file://). */

/* ================= #power — "ligar o console" ================= */
#power{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 46%, var(--bg1) 0%, var(--bg0) 62%);
  cursor:pointer;outline:none;transition:opacity .2s linear}
#power.pw-out{opacity:0}
#power .pw-wrap{display:flex;flex-direction:column;align-items:center;gap:34px;transform:translateY(-2vh)}
#power .pw-btn{position:relative;width:clamp(132px,14vmin,220px);height:clamp(132px,14vmin,220px);border-radius:50%;display:grid;place-items:center;
  color:var(--paper);-webkit-tap-highlight-color:transparent}
#power .pw-core{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.09), rgba(255,255,255,.025) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -10px 24px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5);
  transition:transform .35s var(--ease-in), opacity .35s var(--ease-in)}
#power .pw-core svg{width:40%;height:40%;overflow:visible;filter:drop-shadow(0 0 10px rgba(241,238,229,.25))}
/* anel de LED: conic-gradient girando (transform) + halo suave; respira em opacidade */
#power .pw-ringwrap{position:absolute;inset:-7.5%;z-index:1;border-radius:50%;animation:pw-breathe 2.4s ease-in-out infinite;
  transition:transform .35s var(--ease-in), opacity .35s var(--ease-in)}
#power .pw-ring,#power .pw-halo{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--neon-cyan),var(--neon-blue),var(--neon-violet),var(--neon-magenta),var(--neon-pink),var(--neon-cyan));
  animation:pw-spin 4s linear infinite;will-change:transform}
#power .pw-ring{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%);
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%)}
#power .pw-halo{inset:-20%;opacity:.55;
  -webkit-mask:radial-gradient(farthest-side,transparent 58%,rgba(0,0,0,.9) 71%,rgba(0,0,0,.28) 80%,transparent 100%);
          mask:radial-gradient(farthest-side,transparent 58%,rgba(0,0,0,.9) 71%,rgba(0,0,0,.28) 80%,transparent 100%)}
#power .pw-hint{margin:0;font:600 clamp(20px,2.4vmin,34px)/1.3 var(--font);color:var(--text2);letter-spacing:.01em;text-align:center;padding:0 16px}
#power .pw-foot{position:absolute;left:0;right:0;bottom:max(28px, env(safe-area-inset-bottom));margin:0;text-align:center;
  font:600 clamp(13px,1.5vmin,20px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
#power .pw-btn:focus,#power .pw-btn:focus-visible{outline:none}   /* o anel de LED já é o foco */
#power.pw-press .pw-core{transform:scale(.94)}
#power.pw-on .pw-ringwrap{transform:scale(0);opacity:0;animation:none}
#power.pw-on .pw-core{transform:scale(0);opacity:0}
#power.pw-on .pw-hint,#power.pw-on .pw-foot{opacity:0;transition:opacity .2s linear}
@keyframes pw-spin{to{transform:rotate(360deg)}}
@keyframes pw-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media (max-width:640px), (max-height:500px){
  #power .pw-btn{width:96px;height:96px}
  #power .pw-wrap{gap:26px}
  #power .pw-hint{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  #power .pw-ring,#power .pw-halo{animation:none}
  #power .pw-ringwrap{animation:none;opacity:.9}
}

/* ================= #boot — vinheta Bailder ================= */
/* sem will-change e sem text-shadow de propósito: cada camada a mais custava ~10 ms/quadro no Chrome sem GPU */
/* fundo, luz ambiente e clarão são canvas 1:1 pintados uma vez pelo boot.js (gradiente CSS re-rasteriza
   em cada tile invalidado pelo B quando não há GPU; bitmap é só cópia) */
#boot{background:transparent;contain:strict}
#boot .bt-bg{position:absolute;left:0;top:0;pointer-events:none}
#boot .bt-amb{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
#boot .bt-flash{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
#boot .bt-stage{position:absolute;inset:0;transform-origin:50% 46%}
#boot .bt-cv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#boot .bt-cvb,#boot .bt-cvl{position:absolute;left:0;top:0;pointer-events:none}
#boot .bt-word{position:absolute;left:50%;top:0;display:flex;align-items:center;white-space:nowrap;
  font-family:var(--font);font-weight:800;letter-spacing:-.045em;line-height:.95;color:var(--paper);
  transform:translateX(-50%);pointer-events:none;}
#boot .bt-bslot{display:inline-block;width:1.02em;height:1.02em;flex:none;vertical-align:-.1em}
#boot .bt-tail{display:inline-block}
#boot .bt-l{display:inline-block;opacity:0}
#boot .bt-sub{position:absolute;left:50%;top:0;margin:0;white-space:nowrap;pointer-events:none;
  font:600 16px/1 var(--font);letter-spacing:.42em;text-transform:uppercase;color:var(--text2);
  padding-left:.42em;               /* compensa o espaçamento que sobra depois do último "S" */
  opacity:0;transform:translateX(-50%)}