/* ===========================================================================
   ARRANQUE — ecrã de entrada (2026-10-21)
   ---------------------------------------------------------------------------
   Pedido do proprietário: a página abria sem nenhum sinal de carregamento.
   O azulejo RE (o mesmo de logo.css, maior) monta-se em 3D, WEBFOLIO.COM
   aparece por baixo e uma linha lima conta 000 → 100 com o progresso real
   (arranque.js). À saída o azulejo voa e encolhe até ao logo do cabeçalho
   enquanto o fundo sobe; o hero continua a sua ignição por baixo.

   Regras de segurança:
   - só existe com JS (`html.js`, posto pelo script inline do <head>);
   - se o arranque.js não chegar, a animação `arranque-socorro` tira o ecrã
     aos 3,2 s; quando o JS assume (`.arranque--js`) essa rede sai;
   - movimento reduzido: sem montagem nem voo, só um fade curto.
   ======================================================================== */

.arranque { display: none; }

html.js .arranque {
  display: block;
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: auto;
  touch-action: none;              /* o dedo inclina o azulejo, não faz scroll */
  overscroll-behavior: none;
  animation: arranque-socorro .5s 3.2s forwards;
}
html.js .arranque.arranque--js { animation: none; }
@keyframes arranque-socorro { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* o fundo é uma camada à parte: na saída sobe (clip-path) sem cortar o
   azulejo, que viaja por cima até ao cabeçalho */
.arranque-fundo {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 46% at 50% 44%, rgba(200,255,46,.07), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(25,229,206,.06), transparent 70%),
    #07080D;
  clip-path: inset(0 0 0 0);
}

.arranque-palco {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  color: #EEF1F7;
}

/* ---- o azulejo -------------------------------------------------------- */
.arranque .logo3d { --s: clamp(84px, 13vw, 124px); }
.arranque .logo3d-corpo {
  animation:
    arranque-gira 1.05s cubic-bezier(.16,1,.3,1) both,
    logo-flutua 7s 1.05s ease-in-out infinite alternate;
  /* inclinação com o ponteiro (arranque.js escreve --eixo e --ang). É a
     propriedade `rotate`, à parte do `transform` das animações. */
  rotate: var(--eixo, 0 1 0) var(--ang, 0deg);
  transition: rotate .45s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,1.4,.3,1);
}
@keyframes arranque-gira {
  from { transform: rotateX(68deg) rotateY(-128deg) scale(.55); opacity: 0; }
  35%  { opacity: 1; }
}
/* cada lâmina chega de longe, uma a uma: a espessura monta-se à vista.
   Só `from` — o `to` é o transform próprio de cada lâmina (logo.css). */
.arranque .logo3d-lado { animation: arranque-lamina .7s cubic-bezier(.2,.8,.2,1) both; }
.arranque .logo3d-lado:nth-child(1) { animation-delay: .30s; }
.arranque .logo3d-lado:nth-child(2) { animation-delay: .26s; }
.arranque .logo3d-lado:nth-child(3) { animation-delay: .22s; }
.arranque .logo3d-lado:nth-child(4) { animation-delay: .18s; }
.arranque .logo3d-lado:nth-child(5) { animation-delay: .14s; }
.arranque .logo3d-lado:nth-child(6) { animation-delay: .10s; }
@keyframes arranque-lamina {
  from { transform: translateZ(calc(var(--s) * -1.6)); opacity: 0; }
}
.arranque .logo3d-face   { animation: arranque-face .6s .42s cubic-bezier(.2,.8,.2,1) both; }
.arranque .logo3d-sombra { animation: arranque-face .6s .52s cubic-bezier(.2,.8,.2,1) both; }
.arranque .logo3d-relevo { animation: arranque-relevo .7s .6s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes arranque-face { from { opacity: 0; } }
@keyframes arranque-relevo {
  from { transform: translateZ(calc(var(--s) * .5)); opacity: 0; }
}
/* um reflexo atravessa a face quando a montagem acaba */
.arranque .logo3d-brilho { animation: arranque-brilho 1.1s .95s cubic-bezier(.3,.7,.2,1) both; }
@keyframes arranque-brilho {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

/* ---- o nome e a linha ------------------------------------------------- */
.arranque-nome {
  margin: 0;
  font: 500 12px/1 var(--ff-display, system-ui, sans-serif);
  text-transform: uppercase; letter-spacing: .34em;
  padding-left: .34em;                 /* compensa o tracking, fica centrado */
  opacity: .9;
  animation: arranque-nome 1s .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes arranque-nome {
  from { opacity: 0; letter-spacing: .9em; padding-left: .9em; filter: blur(4px); }
}

.arranque-medidor {
  display: flex; align-items: center; gap: 14px;
  animation: arranque-face .5s .7s ease both;
}
.arranque-linha {
  position: relative; width: clamp(150px, 22vw, 220px); height: 2px;
  background: rgba(238,241,247,.12); border-radius: 2px; overflow: hidden;
}
.arranque-linha i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #19E5CE, #C8FF2E 70%, #EAFF7A);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px rgba(200,255,46,.6);
}
.arranque-pct {
  min-width: 3ch;
  font: 500 11px/1 var(--ff-mono, ui-monospace, monospace);
  letter-spacing: .08em; color: #C8FF2E; font-variant-numeric: tabular-nums;
}

/* o que está a carregar, numa linha */
.arranque-estado {
  margin: -12px 0 0; min-height: 1em;
  font: 400 10px/1 var(--ff-mono, ui-monospace, monospace);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(238,241,247,.55);
  animation: arranque-face .5s .8s ease both;
}

/* aos 7 s, se a casa ainda não chegou: entrar sem esperar */
.arranque-entrar {
  position: absolute; left: 50%; bottom: max(36px, env(safe-area-inset-bottom, 0px) + 24px);
  transform: translate(-50%, 8px); opacity: 0;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font: 500 12px/1 var(--ff-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase;
  color: #07080D; background: #C8FF2E; border: 0;
  box-shadow: 0 0 0 1px rgba(200,255,46,.4), 0 10px 30px rgba(200,255,46,.18);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.arranque--botao .arranque-entrar { opacity: 1; transform: translate(-50%, 0); }
.arranque-entrar:focus-visible { outline: 2px solid #EEF1F7; outline-offset: 3px; }
.arranque--sai .arranque-entrar { opacity: 0; transition: opacity .2s ease; }

/* ---- saída -------------------------------------------------------------
   arranque.js mede o logo do cabeçalho e escreve --dx/--dy/--k no azulejo */
.arranque--sai { pointer-events: none; }
.arranque--sai .arranque-fundo {
  transition: clip-path .85s cubic-bezier(.7,0,.2,1);
  clip-path: inset(0 0 100% 0);
}
.arranque--sai .arranque-nome,
.arranque--sai .arranque-estado,
.arranque--sai .arranque-medidor {
  transition: opacity .3s ease, transform .5s cubic-bezier(.7,0,.2,1);
  opacity: 0; transform: translateY(-14px);
}
.arranque--sai .arranque-logo {
  transition: transform .85s cubic-bezier(.7,0,.2,1);
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--k, 1));
}
/* sem alvo (cabeçalho escondido, menu aberto…): o azulejo só se apaga */
.arranque--sai.arranque--sem-alvo .arranque-logo {
  transition: opacity .4s ease, transform .6s ease;
  opacity: 0; transform: scale(.8);
}

/* enquanto o arranque está no ecrã, o logo do cabeçalho espera: é o
   azulejo grande que vai ocupar o lugar dele */
html.arranque-ativo .site-header .brand .logo3d { opacity: 0; }

/* ---- visita repetida na mesma sessão: versão curta --------------------- */
.arranque--curto .logo3d-corpo { animation: logo-flutua 7s ease-in-out infinite alternate; }
.arranque--curto .logo3d-lado,
.arranque--curto .logo3d-face,
.arranque--curto .logo3d-sombra,
.arranque--curto .logo3d-relevo,
.arranque--curto .logo3d-brilho,
.arranque--curto .arranque-nome,
.arranque--curto .arranque-estado,
.arranque--curto .arranque-medidor { animation: none; }

/* ---- movimento reduzido ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .arranque .logo3d-corpo,
  .arranque .logo3d-lado,
  .arranque .logo3d-face,
  .arranque .logo3d-sombra,
  .arranque .logo3d-relevo,
  .arranque .logo3d-brilho,
  .arranque-nome,
  .arranque-estado,
  .arranque-medidor { animation: none; }
  .arranque--sai .arranque-fundo { transition: none; clip-path: inset(0 0 0 0); }
  .arranque--sai .arranque-logo { transition: none; transform: none; }
  .arranque--sai { transition: opacity .3s ease; opacity: 0; }
}