/* ============================================================
   Site 2.0, intro loader

   The figure in the mark lays the horizon either side of itself,
   then steps back into place. loader.js owns the choreography.

   Bright ground, not the old void: the first thing a visitor sees
   has to promise the same daylight the rest of the site delivers.
   ============================================================ */

#lbh-loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--paper, #FBF8F3);
  transition:opacity .5s ease;
}
#lbh-loader[data-done="1"]{ pointer-events:none; }

.ld-stage{
  display:grid; justify-items:center;
  gap:clamp(1.6rem, 4.5vh, 3rem);
  width:min(760px, 88vw);
}

/* ---- the mark ---- */

/* The lockup is wide and short (viewBox ~390x119), so it needs a large
   width to read as a hero element rather than a detail. */
#lbh-loader .mark-wrap{ width:min(620px, 84vw); }
#lbh-loader svg#lbh-mark{ width:100%; height:auto; overflow:visible; }

/* On paper the mark takes its normal treatment: navy body, amber hands
   and horizon. No reversal, because there is no void to reverse against. */
#lbh-loader #lbh-mark #body{ fill:var(--navy, #0A1A2F); }

/* EVERY animated group, at any depth, transforms about its own centre.
   This has to reach nested groups, not just direct children: loader.js
   wraps the head, body and hands into a #figure group so the character
   can travel as one body, and without fill-box here their rotations
   pivot around the viewBox origin instead and fling them off screen. */
#lbh-mark g{
  transform-box:fill-box;
  transform-origin:center;
}

/* Nothing is hidden by CSS. loader.js hides each part as it starts, so if the
   script never runs the mark is simply whole rather than an empty screen. The
   #figure group the old choreography built no longer exists. */

/* The body grows from its base if it is ever animated on its own. */
#lbh-mark g#body{ transform-origin:center bottom; }

/* ---- wordmark and tagline ---- */

.ld-word{
  width:min(360px, 66vw);
  opacity:0; transform:translateY(10px);
}
.ld-tag{
  margin:0;
  font:500 clamp(.6rem,1.5vw,.72rem)/1 var(--mono, ui-monospace, monospace);
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--accent, #9A5B00);
  opacity:0;
  padding-left:.44em;   /* optically re-centre the tracked out text */
}

/* ---- exit: the curtain parts along the horizon ---- */

.ld-curtain{
  position:fixed; left:0; right:0; height:50%;
  background:var(--paper, #FBF8F3);
  z-index:-1;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.ld-curtain.top{ top:0; }
.ld-curtain.bot{ bottom:0; }
#lbh-loader[data-exit="1"] .ld-curtain.top{ transform:translateY(-100%); }
#lbh-loader[data-exit="1"] .ld-curtain.bot{ transform:translateY(100%); }
#lbh-loader[data-exit="1"] .ld-stage{
  opacity:0; transform:scale(1.04);
  transition:opacity .55s ease, transform .9s cubic-bezier(.76,0,.24,1);
}

/* Reduced motion: no performance, just the finished mark and a quick exit. */
@media (prefers-reduced-motion: reduce){
  #lbh-mark g, .ld-word, .ld-tag{ opacity:1 !important; transform:none !important; }
}

/* ---- the bloom ----
   One warm flare behind the mark at the "beyond" beat. Sits under everything,
   never takes a click, and is the only element in the sequence that is not a
   part of the logo. */
.ld-glow{
  position:absolute; z-index:0;
  left:50%; top:44%;
  width:min(760px, 92vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,214,150,.95) 0%,
    rgba(242,167,45,.55) 26%,
    rgba(242,167,45,.18) 48%,
    rgba(242,167,45,0) 70%);
  filter:blur(2px);
}
/* The stage stacks above it, so the mark and the type always read on top. */
.ld-stage{ position:relative; }
.ld-stage > .mark-wrap, .ld-stage > .ld-word, .ld-stage > .ld-tag{ position:relative; z-index:1; }