/* ==========================================================================
   TeraBoard · Loader — a tela de abertura e a luz que viaja ate a nav
   ========================================================================== */

/* ---------- intro screen ---------- */
.intro-screen{
  height:100svh;
  min-height:560px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:56px;
}
.intro-scroll{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  opacity:0;
  animation:introFadeIn 1.1s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.intro-scroll-text{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sage);
}
.intro-scroll-track{
  width:1px;
  height:38px;
  background:var(--hair);
  position:relative;
  overflow:hidden;
}
.intro-scroll-track::after{
  content:"";
  position:absolute;
  left:0;top:-100%;
  width:100%;height:100%;
  background:linear-gradient(var(--signal),var(--signal-deep));
  animation:introDrip 1.8s ease-in-out infinite;
}
@keyframes introDrip{
  0%{top:-100%}
  60%{top:100%}
  100%{top:100%}
}
@keyframes introFadeIn{to{opacity:1}}
@media(min-width:768px){
  .intro-screen{padding-bottom:72px}
}

/* ---------- loading screen ---------- */
html.loading{overflow:hidden}
.site-loader{
  position:fixed;
  inset:0;
  z-index:200;
  background:#030806;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), visibility .7s cubic-bezier(.16,1,.3,1);
}
.site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
/* marca pulsando */
.loader-mark{
  width:118px;height:auto;display:block;
  filter:drop-shadow(0 0 30px rgba(29,199,139,.34));
  animation:loaderBreath 1.9s cubic-bezier(.45,0,.55,1) infinite;
  transform-origin:50% 50%;
}
@keyframes loaderBreath{
  0%,100%{transform:scale(.86);opacity:.72}
  50%    {transform:scale(1.05);opacity:1}
}
/* A LUZ VIAJANTE: mesma da barra superior. Comeca atras da logo do loader
   e no fim desliza ate a nav, virando o .logo-glow. */
#travelLight{
  position:fixed;left:50%;top:50%;
  width:340px;height:340px;
  margin-left:-170px;margin-top:-170px;   /* centraliza sem usar transform */
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,241,227,.9) 0%, rgba(229,231,204,.55) 28%, rgba(200,204,170,.2) 52%, rgba(10,77,54,0) 72%);
  filter:blur(22px);
  pointer-events:none;z-index:-1;
  animation:loaderHalo 1.9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes loaderHalo{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}
/* enquanto carrega, a luz da nav fica apagada — quem aparece e a viajante */
html.loading .logo-glow, html.light-flying .logo-glow{opacity:0}
.loader-halo{position:relative;display:grid;place-items:center;z-index:1}
/* texto que troca durante o carregamento */
.loader-label{
  position:relative;z-index:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--sage);
  min-height:1em;
  transition:opacity .35s ease, transform .35s ease;
}
.loader-label.swap{opacity:0;transform:translateY(6px)}
/* barra de progresso */
.loader-bar{
  position:relative;z-index:1;
  width:200px;height:2px;border-radius:9999px;
  background:rgba(240,241,227,.13);overflow:hidden;
}
.loader-bar > i{
  display:block;height:100%;width:0%;border-radius:9999px;
  background:linear-gradient(90deg,#1F8F68,#1DC78B);
}
@media(prefers-reduced-motion:reduce){
  .loader-mark,#travelLight{animation:none;opacity:1}
}